@logrock/pebbles - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/logrock-pebbles.es.js

@@ -34,3 +34,3 @@ var __defProp = Object.defineProperty;
 import styled, { css } from "styled-components";
-import require$$0 from "react";
+import require$$0, { useState, useCallback, useEffect } from "react";
 const neutral = {
@@ -728,2 +728,4 @@ "50": "#F9FAFB",
 const DisplayLarge = styled.h1`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -744,2 +746,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.displayLarge.fontFamily};
 const DisplaySmall = styled.h2`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -760,2 +764,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.displaySmall.fontFamily};
 const HeadingH1 = styled.h1`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -776,2 +782,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH1.fontFamily};
 const HeadingH2 = styled.h2`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -792,2 +800,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH2.fontFamily};
 const HeadingH3 = styled.h3`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -808,2 +818,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH3.fontFamily};
 const HeadingH4 = styled.h4`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -824,2 +836,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH4.fontFamily};
 const HeadingH5 = styled.h5`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -840,2 +854,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH5.fontFamily};
 const HeadingH6 = styled.h6`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -856,2 +872,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.headingH6.fontFamily};
 const ParagraphLarge = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -866,2 +884,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.paragraphLarge.fontFamily};
 const paragraphMediumCSS = css`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -879,2 +899,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.paragraphMedium.fontFamily};
 const ParagraphSmall = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -889,2 +911,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.paragraphSmall.fontFamily};
 const ParagraphXSmall = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -899,2 +923,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.paragraphXSmall.fontFamily};
 const OverlineLarge = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -909,2 +935,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.overlineLarge.fontFamily};
 const OverlineMedium = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -919,2 +947,4 @@ font-family: ${({ theme: theme2 }) => theme2.typography.overlineMedium.fontFamily};
 const OverlineSmall = styled.p`
+  margin: 0;
+
   color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
@@ -1168,2 +1198,470 @@ font-family: ${({ theme: theme2 }) => theme2.typography.overlineSmall.fontFamily};
 };
-export { Button, DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, theme as darkTheme, theme$1 as lightTheme };
+var propTypes = { exports: {} };
+var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
+var ReactPropTypesSecret = ReactPropTypesSecret_1;
+function emptyFunction() {
+}
+function emptyFunctionWithReset() {
+}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+var factoryWithThrowingShims = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      return;
+    }
+    var err = new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");
+    err.name = "Invariant Violation";
+    throw err;
+  }
+  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  }
+  var ReactPropTypes = {
+    array: shim,
+    bigint: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
+  };
+  ReactPropTypes.PropTypes = ReactPropTypes;
+  return ReactPropTypes;
+};
+{
+  propTypes.exports = factoryWithThrowingShims();
+}
+var Icon = function(e) {
+  var t = {};
+  function r(n2) {
+    if (t[n2])
+      return t[n2].exports;
+    var o = t[n2] = { i: n2, l: false, exports: {} };
+    return e[n2].call(o.exports, o, o.exports, r), o.l = true, o.exports;
+  }
+  return r.m = e, r.c = t, r.d = function(e2, t2, n2) {
+    r.o(e2, t2) || Object.defineProperty(e2, t2, { enumerable: true, get: n2 });
+  }, r.r = function(e2) {
+    typeof Symbol != "undefined" && Symbol.toStringTag && Object.defineProperty(e2, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e2, "__esModule", { value: true });
+  }, r.t = function(e2, t2) {
+    if (1 & t2 && (e2 = r(e2)), 8 & t2)
+      return e2;
+    if (4 & t2 && typeof e2 == "object" && e2 && e2.__esModule)
+      return e2;
+    var n2 = Object.create(null);
+    if (r.r(n2), Object.defineProperty(n2, "default", { enumerable: true, value: e2 }), 2 & t2 && typeof e2 != "string")
+      for (var o in e2)
+        r.d(n2, o, function(t3) {
+          return e2[t3];
+        }.bind(null, o));
+    return n2;
+  }, r.n = function(e2) {
+    var t2 = e2 && e2.__esModule ? function() {
+      return e2.default;
+    } : function() {
+      return e2;
+    };
+    return r.d(t2, "a", t2), t2;
+  }, r.o = function(e2, t2) {
+    return Object.prototype.hasOwnProperty.call(e2, t2);
+  }, r.p = "", r(r.s = 2);
+}([function(e, t) {
+  e.exports = propTypes.exports;
+}, function(e, t) {
+  e.exports = require$$0;
+}, function(e, t, r) {
+  r.r(t);
+  var n2 = r(1), o = r(0), l = function() {
+    return (l = Object.assign || function(e2) {
+      for (var t2, r2 = 1, n3 = arguments.length; r2 < n3; r2++)
+        for (var o2 in t2 = arguments[r2])
+          Object.prototype.hasOwnProperty.call(t2, o2) && (e2[o2] = t2[o2]);
+      return e2;
+    }).apply(this, arguments);
+  }, i = function(e2, t2) {
+    var r2 = {};
+    for (var n3 in e2)
+      Object.prototype.hasOwnProperty.call(e2, n3) && t2.indexOf(n3) < 0 && (r2[n3] = e2[n3]);
+    if (e2 != null && typeof Object.getOwnPropertySymbols == "function") {
+      var o2 = 0;
+      for (n3 = Object.getOwnPropertySymbols(e2); o2 < n3.length; o2++)
+        t2.indexOf(n3[o2]) < 0 && Object.prototype.propertyIsEnumerable.call(e2, n3[o2]) && (r2[n3[o2]] = e2[n3[o2]]);
+    }
+    return r2;
+  }, a = 0, s = n2.forwardRef(function(e2, t2) {
+    var r2 = e2.title, o2 = r2 === void 0 ? null : r2, s2 = e2.description, c2 = s2 === void 0 ? null : s2, u2 = e2.size, p3 = u2 === void 0 ? null : u2, f3 = e2.color, d2 = f3 === void 0 ? "currentColor" : f3, y = e2.horizontal, v = y === void 0 ? null : y, b = e2.vertical, m2 = b === void 0 ? null : b, h = e2.rotate, g2 = h === void 0 ? null : h, O = e2.spin, w = O === void 0 ? null : O, j = e2.style, z = j === void 0 ? {} : j, E = e2.children, P = i(e2, ["title", "description", "size", "color", "horizontal", "vertical", "rotate", "spin", "style", "children"]);
+    a++;
+    var S, x = w !== null && w, _ = n2.Children.map(E, function(e3) {
+      var t3 = e3;
+      x !== true && (x = (w === null ? t3.props.spin : w) === true);
+      var r3 = t3.props.size;
+      typeof p3 == "number" && typeof t3.props.size == "number" && (r3 = t3.props.size / p3);
+      var o3 = { size: r3, color: d2 === null ? t3.props.color : d2, horizontal: v === null ? t3.props.horizontal : v, vertical: m2 === null ? t3.props.vertical : m2, rotate: g2 === null ? t3.props.rotate : g2, spin: w === null ? t3.props.spin : w, inStack: true };
+      return n2.cloneElement(t3, o3);
+    });
+    p3 !== null && (z.width = typeof p3 == "string" ? p3 : 1.5 * p3 + "rem");
+    var k, T = "stack_labelledby_" + a, q2 = "stack_describedby_" + a;
+    if (o2)
+      S = c2 ? T + " " + q2 : T;
+    else if (k = "presentation", c2)
+      throw new Error("title attribute required when description is set");
+    return n2.createElement("svg", l({ ref: t2, viewBox: "0 0 24 24", style: z, role: k, "aria-labelledby": S }, P), o2 && n2.createElement("title", { id: T }, o2), c2 && n2.createElement("desc", { id: q2 }, c2), x && n2.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg) } }", "@keyframes spin-inverse { to { transform: rotate(-360deg) } }"), _);
+  });
+  s.displayName = "Stack", s.propTypes = { size: o.oneOfType([o.number, o.string]), color: o.string, horizontal: o.bool, vertical: o.bool, rotate: o.number, spin: o.oneOfType([o.bool, o.number]), children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired, className: o.string, style: o.object }, s.defaultProps = { size: null, color: null, horizontal: null, vertical: null, rotate: null, spin: null };
+  var c = s;
+  r.d(t, "Icon", function() {
+    return d;
+  }), r.d(t, "Stack", function() {
+    return c;
+  });
+  var u = function() {
+    return (u = Object.assign || function(e2) {
+      for (var t2, r2 = 1, n3 = arguments.length; r2 < n3; r2++)
+        for (var o2 in t2 = arguments[r2])
+          Object.prototype.hasOwnProperty.call(t2, o2) && (e2[o2] = t2[o2]);
+      return e2;
+    }).apply(this, arguments);
+  }, p2 = function(e2, t2) {
+    var r2 = {};
+    for (var n3 in e2)
+      Object.prototype.hasOwnProperty.call(e2, n3) && t2.indexOf(n3) < 0 && (r2[n3] = e2[n3]);
+    if (e2 != null && typeof Object.getOwnPropertySymbols == "function") {
+      var o2 = 0;
+      for (n3 = Object.getOwnPropertySymbols(e2); o2 < n3.length; o2++)
+        t2.indexOf(n3[o2]) < 0 && Object.prototype.propertyIsEnumerable.call(e2, n3[o2]) && (r2[n3[o2]] = e2[n3[o2]]);
+    }
+    return r2;
+  }, f2 = 0, d = n2.forwardRef(function(e2, t2) {
+    var r2 = e2.path, o2 = e2.id, l2 = o2 === void 0 ? ++f2 : o2, i2 = e2.title, a2 = i2 === void 0 ? null : i2, s2 = e2.description, c2 = s2 === void 0 ? null : s2, d2 = e2.size, y = d2 === void 0 ? null : d2, v = e2.color, b = v === void 0 ? "currentColor" : v, m2 = e2.horizontal, h = m2 !== void 0 && m2, g2 = e2.vertical, O = g2 !== void 0 && g2, w = e2.rotate, j = w === void 0 ? 0 : w, z = e2.spin, E = z !== void 0 && z, P = e2.style, S = P === void 0 ? {} : P, x = e2.inStack, _ = x !== void 0 && x, k = p2(e2, ["path", "id", "title", "description", "size", "color", "horizontal", "vertical", "rotate", "spin", "style", "inStack"]), T = {}, q2 = [];
+    y !== null && (_ ? q2.push("scale(" + y + ")") : (S.width = typeof y == "string" ? y : 1.5 * y + "rem", S.height = S.width)), h && q2.push("scaleX(-1)"), O && q2.push("scaleY(-1)"), j !== 0 && q2.push("rotate(" + j + "deg)"), b !== null && (T.fill = b);
+    var M = n2.createElement("path", u({ d: r2, style: T }, _ ? k : {})), C = M;
+    q2.length > 0 && (S.transform = q2.join(" "), S.transformOrigin = "center", _ && (C = n2.createElement("g", { style: S }, M, n2.createElement("rect", { width: "24", height: "24", fill: "transparent" }))));
+    var I, N = C, R = E === true || typeof E != "number" ? 2 : E, B = !_ && (h || O);
+    if (R < 0 && (B = !B), E && (N = n2.createElement("g", { style: { animation: "spin" + (B ? "-inverse" : "") + " linear " + Math.abs(R) + "s infinite", transformOrigin: "center" } }, C, !(h || O || j !== 0) && n2.createElement("rect", { width: "24", height: "24", fill: "transparent" }))), _)
+      return N;
+    var X, Y = "icon_labelledby_" + l2, A = "icon_describedby_" + l2;
+    if (a2)
+      I = c2 ? Y + " " + A : Y;
+    else if (X = "presentation", c2)
+      throw new Error("title attribute required when description is set");
+    return n2.createElement("svg", u({ ref: t2, viewBox: "0 0 24 24", style: S, role: X, "aria-labelledby": I }, k), a2 && n2.createElement("title", { id: Y }, a2), c2 && n2.createElement("desc", { id: A }, c2), !_ && E && (B ? n2.createElement("style", null, "@keyframes spin-inverse { to { transform: rotate(-360deg) } }") : n2.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg) } }")), N);
+  });
+  d.displayName = "Icon", d.propTypes = { path: o.string.isRequired, size: o.oneOfType([o.number, o.string]), color: o.string, horizontal: o.bool, vertical: o.bool, rotate: o.number, spin: o.oneOfType([o.bool, o.number]), style: o.object, inStack: o.bool, className: o.string }, d.defaultProps = { size: null, color: "currentColor", horizontal: false, vertical: false, rotate: 0, spin: false };
+  t.default = d;
+}]);
+const defaultStatus = "info";
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Label = styled.span`
+  color: ${({ theme: theme2 }) => theme2.inputBox.label.color};
+  font-family: ${({ theme: theme2 }) => theme2.inputBox.fontFamily};
+  font-size: ${({ theme: theme2 }) => theme2.inputBox.label.fontSize};
+  font-style: ${({ theme: theme2 }) => theme2.inputBox.label.fontStyle};
+  font-weight: ${({ theme: theme2 }) => theme2.inputBox.fontWeight};
+  line-height: ${({ theme: theme2 }) => theme2.inputBox.label.lineHeight};
+  font-feature-settings: ${({ theme: theme2 }) => theme2.inputBox.fontFeatureSettings};
+`;
+const HelperDiv = styled.div`
+  display: flex;
+`;
+const Helper = styled(Label)`
+  margin: ${({ theme: theme2 }) => theme2.inputBox.helper.margin};
+
+  color: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].helperColor};
+  font-size: ${({ theme: theme2 }) => theme2.inputBox.helper.fontSize};
+  font-style: ${({ theme: theme2 }) => theme2.inputBox.helper.fontStyle};
+  font-weight: ${({ theme: theme2 }) => theme2.inputBox.helper.fontWeight};
+  line-height: ${({ theme: theme2 }) => theme2.inputBox.helper.lineHeight};
+`;
+const HelperIcon = styled(Icon)`
+  color: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].helperColor};
+`;
+const HintDiv = styled.div`
+  display: flex;
+  position: absolute;
+  top: ${({ theme: theme2 }) => theme2.inputBox.hint.top};
+  right: ${({ theme: theme2 }) => theme2.inputBox.hint.right};
+  flex-direction: row;
+  margin: ${({ theme: theme2 }) => theme2.inputBox.margin};
+  padding: ${({ theme: theme2 }) => theme2.inputBox.padding};
+
+  background: ${({ theme: theme2 }) => theme2.inputBox.hint.background};
+`;
+const Hint = styled(Label)`
+  margin: ${({ theme: theme2 }) => theme2.inputBox.hint.margin};
+
+  color: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].hintColor};
+`;
+const HintIcon = styled(Icon)`
+  margin: 4px 4px;
+
+  color: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].hintColor};
+`;
+const InputDiv = styled.div`
+  position: relative;
+`;
+const StyledInput = styled.input`
+  display: flex;
+  box-sizing: ${({ theme: theme2 }) => theme2.inputBox.boxSizing};
+  flex-direction: row;
+  flex-grow: 0;
+  align-items: center;
+  align-self: stretch;
+  width: ${({ theme: theme2 }) => theme2.inputBox.width};
+  height: ${({ theme: theme2 }) => theme2.inputBox.height};
+  margin: ${({ theme: theme2 }) => theme2.inputBox.margin};
+  padding: ${({ theme: theme2 }) => theme2.inputBox.padding};
+
+  border: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].border};
+  border-radius: ${({ theme: theme2 }) => theme2.inputBox.borderRadius};
+
+  background: ${({ theme: theme2 }) => theme2.inputBox.background};
+  box-shadow: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].boxShadow};
+
+  color: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].color};
+
+  &:focus {
+    box-sizing: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].focused.boxSizing};
+
+    border: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].focused.border};
+    border-radius: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].focused.borderRadius};
+    outline: none;
+
+    background: ${({ theme: theme2 }) => theme2.inputBox.background};
+    box-shadow: ${({ theme: theme2, status }) => theme2.inputBox[status || defaultStatus].focused.boxShadow};
+  }
+  &:disabled {
+    box-sizing: ${({ theme: theme2 }) => theme2.inputBox.disabled.boxSizing};
+    align-items: center;
+    padding: ${({ theme: theme2 }) => theme2.inputBox.padding};
+
+    border: ${({ theme: theme2 }) => theme2.inputBox.disabled.border};
+    border-radius: ${({ theme: theme2 }) => theme2.inputBox.disabled.borderRadius};
+
+    background: ${({ theme: theme2 }) => theme2.inputBox.background};
+    box-shadow: ${({ theme: theme2 }) => theme2.inputBox.disabled.boxShadow};
+  }
+  &:placeholder {
+    display: flex;
+    align-items: center;
+
+    color: ${({ theme: theme2 }) => theme2.inputBox.placeholder.color};
+  }
+`;
+var mdiAlert = "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z";
+var mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";
+const InputBox = (props) => {
+  return jsxs(StyledDiv, {
+    children: [jsx(Label, {
+      children: props.description
+    }, void 0), jsxs(InputDiv, {
+      children: [jsx(StyledInput, __spreadValues({
+        status: props.status,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        onChange: props.onChange,
+        type: "text"
+      }, props), void 0), props.hint && jsxs(HintDiv, {
+        children: [jsx(Hint, {
+          status: props.status,
+          children: props.hint.content
+        }, void 0), props.hint.icon && jsx(HintIcon, {
+          status: props.status,
+          path: props.hint.icon,
+          size: 0.72
+        }, void 0)]
+      }, void 0)]
+    }, void 0), jsxs(HelperDiv, {
+      children: [props.status === "error" && jsx(HelperIcon, {
+        status: props.status,
+        path: mdiAlert,
+        size: 0.72
+      }, void 0), jsx(Helper, {
+        status: props.status,
+        children: props.helper
+      }, void 0)]
+    }, void 0)]
+  }, void 0);
+};
+const DefaultItem = styled.button`
+  ${paragraphMediumCSS}
+  box-sizing: border-box;
+  padding: 18px 10px;
+
+  border: none;
+
+  background: ${({
+  theme: theme2,
+  highlighted
+}) => highlighted ? theme2.select.items.hover.background : "none"};
+
+  text-align: left;
+
+  &:hover {
+    background: ${({
+  theme: theme2
+}) => theme2.select.items.hover.background};
+  }
+`;
+const SimpleItem = (props) => {
+  var _a, _b, _c, _d;
+  return jsx(DefaultItem, __spreadProps(__spreadValues({}, props), {
+    children: ((_a = props == null ? void 0 : props.item) == null ? void 0 : _a.name) || ((_b = props == null ? void 0 : props.item) == null ? void 0 : _b.label) || ((_d = (_c = props == null ? void 0 : props.item) == null ? void 0 : _c.toString) == null ? void 0 : _d.call(_c))
+  }), void 0);
+};
+const AutoCompleteWrapper = styled.div`
+  display: flex;
+  position: ${({
+  focus
+}) => focus ? "fixed" : "relative"};
+  z-index: ${({
+  focus
+}) => focus ? "99999" : "9"};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  flex-flow: column nowrap;
+  padding: ${({
+  theme: theme2,
+  focus
+}) => focus ? theme2.spacings.md : void 0};
+
+  background: ${({
+  theme: theme2,
+  focus
+}) => focus ? theme2.colors.shades["0"] : "none"};
+
+  ${up("desktop")} {
+    position: relative;
+    z-index: unset;
+    padding: 0;
+
+    background: none;
+  }
+`;
+const AutoCompleteItems = styled.div`
+  display: ${({
+  focus
+}) => focus ? "flex" : "none"};
+  box-sizing: border-box;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+  overflow-y: auto;
+
+  background: ${({
+  theme: theme2
+}) => theme2.colors.shades["0"]};
+  box-shadow: ${({
+  theme: theme2,
+  focus
+}) => focus ? void 0 : theme2.select.items.shadow};
+
+  ${up("desktop")} {
+    display: ${({
+  focus
+}) => focus ? "flex" : "none"};
+    position: absolute;
+    z-index: 9999;
+    top: ${({
+  theme: theme2
+}) => theme2.spacings.xxlg};
+    flex-grow: unset;
+    flex-shrink: unset;
+
+    box-shadow: ${({
+  theme: theme2
+}) => theme2.select.items.shadow};
+  }
+`;
+const Select = ({
+  autoCompleteItems,
+  renderItem,
+  inputProps,
+  renderHeader,
+  onItemSelected
+}) => {
+  const Header = renderHeader || (() => null);
+  const Item = renderItem || SimpleItem;
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [currentHighlight, setCurrentHighlight] = useState(0);
+  const [hasFocus, setHasFocus] = useState(false);
+  const keyPressHandler = useCallback((e) => {
+    switch (e.key) {
+      case "Escape":
+        setShowDropdown(false);
+        break;
+      case "ArrowUp":
+        setCurrentHighlight((oldHighlight) => oldHighlight ? oldHighlight - 1 : oldHighlight);
+        break;
+      case "ArrowDown":
+        setCurrentHighlight((oldHighlight) => {
+          return oldHighlight < autoCompleteItems.length - 1 ? oldHighlight + 1 : oldHighlight;
+        });
+        break;
+      case "Enter":
+        setCurrentHighlight((oldHighlight) => {
+          setShowDropdown(false);
+          if (autoCompleteItems.length) {
+            onItemSelected(autoCompleteItems[oldHighlight]);
+          }
+          return 0;
+        });
+        break;
+    }
+  }, [autoCompleteItems, onItemSelected]);
+  useEffect(() => {
+    document.addEventListener("keydown", keyPressHandler, false);
+    return () => {
+      document.removeEventListener("keydown", keyPressHandler, false);
+    };
+  }, [keyPressHandler]);
+  useEffect(() => {
+    setShowDropdown(true);
+  }, [autoCompleteItems]);
+  return jsxs(AutoCompleteWrapper, {
+    focus: hasFocus,
+    children: [jsx(InputBox, __spreadProps(__spreadValues({}, inputProps), {
+      onFocus: () => setHasFocus(true),
+      onBlur: () => setHasFocus(false),
+      hint: {
+        icon: mdiUnfoldMoreHorizontal,
+        content: ""
+      }
+    }), void 0), showDropdown && jsxs(AutoCompleteItems, {
+      focus: hasFocus,
+      children: [(autoCompleteItems == null ? void 0 : autoCompleteItems.length) > 0 && jsx(Header, {}, void 0), autoCompleteItems == null ? void 0 : autoCompleteItems.map((item, index) => jsx(Item, {
+        item,
+        onClick: () => {
+          setShowDropdown(false);
+          onItemSelected(autoCompleteItems[index]);
+          setCurrentHighlight(0);
+        },
+        onMouseEnter: () => setCurrentHighlight(index),
+        highlighted: currentHighlight === index
+      }, item.id))]
+    }, void 0)]
+  }, void 0);
+};
+export { Button, DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, InputBox, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, Select, theme as darkTheme, theme$1 as lightTheme };

dist/logrock-pebbles.umd.js

@@ -1,2 +0,4 @@
-var io=Object.defineProperty,no=Object.defineProperties;var po=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var X=(r,a,t)=>a in r?io(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,k=(r,a)=>{for(var t in a||(a={}))W.call(a,t)&&X(r,t,a[t]);if(S)for(var t of S(a))T.call(a,t)&&X(r,t,a[t]);return r},F=(r,a)=>no(r,po(a));var I=(r,a)=>{var t={};for(var y in r)W.call(r,y)&&a.indexOf(y)<0&&(t[y]=r[y]);if(r!=null&&S)for(var y of S(r))a.indexOf(y)<0&&T.call(r,y)&&(t[y]=r[y]);return t};(function(r,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("styled-breakpoints"),require("styled-components"),require("react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react"],a):(r=typeof globalThis!="undefined"?globalThis:r||self,a(r["@logrock/pebbles"]={},r["styled-breakpoints"],r["styled-components"],r.React))})(this,function(r,a,t,y){"use strict";function z(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=z(t),q=z(y);const p={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},c={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},N={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},V={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},U={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},s={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},u={"0":"#FFFFFF","100":"#000000"},G={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},J={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},Y={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},K={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},Q={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},Z={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},ee={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},oe={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},re={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},te={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},ae={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ie={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ne={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},pe={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},le={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ge={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},de={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},se={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},he={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},ye={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},ce={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},me={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},fe={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},be={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},xe={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},h={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},v={primary:{background:c["500"],borderColor:c["500"],borderWidth:0,contentColor:u["100"]},secondary:{background:c["200"],borderColor:c["200"],borderWidth:0,contentColor:u["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:c["800"]},outlined:{background:"transparent",borderColor:p["200"],borderWidth:"1px",contentColor:p["700"]}},C={primary:{background:s["500"],borderColor:s["500"],borderWidth:0,contentColor:u["0"]},secondary:{background:s["50"],borderColor:s["50"],borderWidth:0,contentColor:s["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:s["600"]},outlined:{background:"transparent",borderColor:s["300"],borderWidth:"1px",contentColor:s["500"]}},P={primary:{background:p["200"],borderColor:p["200"],borderWidth:0,contentColor:p["400"]},secondary:{background:p["200"],borderColor:p["200"],borderWidth:0,contentColor:p["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:p["300"]},outlined:{background:"transparent",borderColor:p["400"],borderWidth:"1px",contentColor:p["300"]}},ue={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:h.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:h.xxsm,horizontalPadding:h.md,verticalPadding:h.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:h.xxsm,horizontalPadding:h.big,verticalPadding:h.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:h.xxsm,horizontalPadding:h.xbig,verticalPadding:"14px"},primary:v,destructive:C,disabled:P},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:h.md,horizontalPadding:"14px",verticalPadding:h.md},large:{borderRadius:"2px",size:h.md,horizontalPadding:h.md,verticalPadding:"22px"},primary:v,destructive:C,disabled:P}},b={xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},$e={fontFamily:"Archivo",fontWeight:"normal",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontFeatureSettings:"'salt' on",padding:"10px 12px",boxSizing:"border-box",boxShadow:b.xSmall,borderRadius:"2px",border:"1px solid #D1D5DB",margin:"8px 0px",background:"white",height:"50px",width:"100%",error:{color:s[900],border:`1px solid ${s[300]}`,boxShadow:b.xSmall,hintColor:p[500],helperColor:s[600],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${s["100"]}`,borderRadius:"2px",border:`1px solid ${s["300"]}`}},info:{color:p[900],border:"1px solid #D1D5DB",boxShadow:b.xSmall,hintColor:p[500],helperColor:p[500],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${c["100"]}`,borderRadius:"2px",border:`1px solid ${c["300"]}`}},label:{color:"black",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontWeight:500},helper:{fontStyle:"normal",fontSize:"14px",lineHeight:"20px",fontWeight:500,margin:"0px 8px"},disabled:{boxSizing:"border-box",boxShadow:b.xSmall,borderRadius:"2px",border:`1px solid ${p["300"]}`},hint:{background:"white",top:"1px",right:"2px",margin:"1px 0px"},placeholder:{color:p[400]}},He={items:{hover:{background:c["50"]},shadow:"1px 1px 2px rgba(0, 0, 0, 0.3)"}},A={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:h,colors:{neutral:p,primary:c,secondary:N,error:s,success:V,warning:U,shades:u},typography:{displayLarge:G,displaySmall:J,headingH1:Y,headingH2:K,headingH3:Q,headingH4:Z,headingH5:ee,headingH6:oe,paragraphLarge:re,paragraphMedium:te,paragraphSmall:ae,paragraphXSmall:ie,overlineLarge:ne,overlineMedium:pe,overlineSmall:le},shadows:b,blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:ge,blueMoon:me,blueberryWine:xe,cherryCola:se,coldSky:he,darkWineSea:de,morningSakura:ce,oliveGarden:ye,synthwave:fe,teaLeaves:be},buttons:ue,inputBox:$e,select:He},Se=F(k({},A),{name:"dark"}),$=({underlined:e,strikedThrough:o})=>{const i=[];return e&&i.push("underline"),o&&i.push("line-through"),i.join(" ")},ke=n.default.h1`
+var vt=Object.defineProperty,St=Object.defineProperties;var wt=Object.getOwnPropertyDescriptors;var ge=Object.getOwnPropertySymbols;var Re=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var Me=(a,d,g)=>d in a?vt(a,d,{enumerable:!0,configurable:!0,writable:!0,value:g}):a[d]=g,T=(a,d)=>{for(var g in d||(d={}))Re.call(d,g)&&Me(a,g,d[g]);if(ge)for(var g of ge(d))Te.call(d,g)&&Me(a,g,d[g]);return a},U=(a,d)=>St(a,wt(d));var We=(a,d)=>{var g={};for(var y in a)Re.call(a,y)&&d.indexOf(y)<0&&(g[y]=a[y]);if(a!=null&&ge)for(var y of ge(a))d.indexOf(y)<0&&Te.call(a,y)&&(g[y]=a[y]);return g};(function(a,d){typeof exports=="object"&&typeof module!="undefined"?d(exports,require("styled-breakpoints"),require("styled-components"),require("react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react"],d):(a=typeof globalThis!="undefined"?globalThis:a||self,d(a["@logrock/pebbles"]={},a["styled-breakpoints"],a["styled-components"],a.React))})(this,function(a,d,g,y){"use strict";function fe(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var l=fe(g),ye=fe(y);const f={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},z={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},Ne={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},Ie={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},Xe={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},x={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},ne={"0":"#FFFFFF","100":"#000000"},qe={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},Ue={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},Ve={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},Ye={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},Ze={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},Ge={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},Je={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},Ke={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},Qe={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},eo={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},oo={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},to={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ro={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},no={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},io={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ao={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},lo={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},po={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},so={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},go={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},co={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},ho={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},uo={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},fo={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},yo={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},$={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},be={primary:{background:z["500"],borderColor:z["500"],borderWidth:0,contentColor:ne["100"]},secondary:{background:z["200"],borderColor:z["200"],borderWidth:0,contentColor:ne["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:z["800"]},outlined:{background:"transparent",borderColor:f["200"],borderWidth:"1px",contentColor:f["700"]}},me={primary:{background:x["500"],borderColor:x["500"],borderWidth:0,contentColor:ne["0"]},secondary:{background:x["50"],borderColor:x["50"],borderWidth:0,contentColor:x["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:x["600"]},outlined:{background:"transparent",borderColor:x["300"],borderWidth:"1px",contentColor:x["500"]}},xe={primary:{background:f["200"],borderColor:f["200"],borderWidth:0,contentColor:f["400"]},secondary:{background:f["200"],borderColor:f["200"],borderWidth:0,contentColor:f["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:f["300"]},outlined:{background:"transparent",borderColor:f["400"],borderWidth:"1px",contentColor:f["300"]}},bo={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:$.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:$.xxsm,horizontalPadding:$.md,verticalPadding:$.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:$.xxsm,horizontalPadding:$.big,verticalPadding:$.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:$.xxsm,horizontalPadding:$.xbig,verticalPadding:"14px"},primary:be,destructive:me,disabled:xe},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:$.md,horizontalPadding:"14px",verticalPadding:$.md},large:{borderRadius:"2px",size:$.md,horizontalPadding:$.md,verticalPadding:"22px"},primary:be,destructive:me,disabled:xe}},V={xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},mo={fontFamily:"Archivo",fontWeight:"normal",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontFeatureSettings:"'salt' on",padding:"10px 12px",boxSizing:"border-box",boxShadow:V.xSmall,borderRadius:"2px",border:"1px solid #D1D5DB",margin:"8px 0px",background:"white",height:"50px",width:"100%",error:{color:x[900],border:`1px solid ${x[300]}`,boxShadow:V.xSmall,hintColor:f[500],helperColor:x[600],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${x["100"]}`,borderRadius:"2px",border:`1px solid ${x["300"]}`}},info:{color:f[900],border:"1px solid #D1D5DB",boxShadow:V.xSmall,hintColor:f[500],helperColor:f[500],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${z["100"]}`,borderRadius:"2px",border:`1px solid ${z["300"]}`}},label:{color:"black",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontWeight:500},helper:{fontStyle:"normal",fontSize:"14px",lineHeight:"20px",fontWeight:500,margin:"0px 8px"},disabled:{boxSizing:"border-box",boxShadow:V.xSmall,borderRadius:"2px",border:`1px solid ${f["300"]}`},hint:{background:"white",top:"1px",right:"2px",margin:"1px 0px"},placeholder:{color:f[400]}},xo={items:{hover:{background:z["50"]},shadow:"1px 1px 2px rgba(0, 0, 0, 0.3)"}},$e={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:$,colors:{neutral:f,primary:z,secondary:Ne,error:x,success:Ie,warning:Xe,shades:ne},typography:{displayLarge:qe,displaySmall:Ue,headingH1:Ve,headingH2:Ye,headingH3:Ze,headingH4:Ge,headingH5:Je,headingH6:Ke,paragraphLarge:Qe,paragraphMedium:eo,paragraphSmall:oo,paragraphXSmall:to,overlineLarge:ro,overlineMedium:no,overlineSmall:io},shadows:V,blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:ao,blueMoon:ho,blueberryWine:yo,cherryCola:po,coldSky:so,darkWineSea:lo,morningSakura:co,oliveGarden:go,synthwave:uo,teaLeaves:fo},buttons:bo,inputBox:mo,select:xo},$o=U(T({},$e),{name:"dark"}),ie=({underlined:e,strikedThrough:o})=>{const n=[];return e&&n.push("underline"),o&&n.push("line-through"),n.join(" ")},vo=l.default.h1`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -9,3 +11,3 @@ font-family: ${({theme:e})=>e.typography.displayLarge.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.displayLarge.desktop.fontSize};
@@ -16,3 +18,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.desktop.weights[o]:e.typography.displayLarge.desktop.weights.normal};
   }
-`,Fe=n.default.h2`
+`,So=l.default.h2`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -25,3 +29,3 @@ font-family: ${({theme:e})=>e.typography.displaySmall.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.displaySmall.desktop.fontSize};
@@ -32,3 +36,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.desktop.weights[o]:e.typography.displaySmall.desktop.weights.normal};
   }
-`,we=n.default.h1`
+`,wo=l.default.h1`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -41,3 +47,3 @@ font-family: ${({theme:e})=>e.typography.headingH1.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH1.desktop.fontSize};
@@ -48,3 +54,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.desktop.weights[o]:e.typography.headingH1.desktop.weights.normal};
   }
-`,ze=n.default.h2`
+`,ko=l.default.h2`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -57,3 +65,3 @@ font-family: ${({theme:e})=>e.typography.headingH2.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH2.desktop.fontSize};
@@ -64,3 +72,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.desktop.weights[o]:e.typography.headingH2.desktop.weights.normal};
   }
-`,ve=n.default.h3`
+`,Ho=l.default.h3`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -73,3 +83,3 @@ font-family: ${({theme:e})=>e.typography.headingH3.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH3.desktop.fontSize};
@@ -80,3 +90,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.desktop.weights[o]:e.typography.headingH3.desktop.weights.normal};
   }
-`,Ce=n.default.h4`
+`,zo=l.default.h4`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -89,3 +101,3 @@ font-family: ${({theme:e})=>e.typography.headingH4.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH4.desktop.fontSize};
@@ -96,3 +108,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.desktop.weights[o]:e.typography.headingH4.desktop.weights.normal};
   }
-`,Pe=n.default.h5`
+`,Fo=l.default.h5`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -105,3 +119,3 @@ font-family: ${({theme:e})=>e.typography.headingH5.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH5.desktop.fontSize};
@@ -112,3 +126,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.desktop.weights[o]:e.typography.headingH5.desktop.weights.normal};
   }
-`,Ae=n.default.h6`
+`,Bo=l.default.h6`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -121,3 +137,3 @@ font-family: ${({theme:e})=>e.typography.headingH6.fontFamily};
 
-  ${a.up("desktop")} {
+  ${d.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH6.desktop.fontSize};
@@ -128,3 +144,5 @@ font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.desktop.weights[o]:e.typography.headingH6.desktop.weights.normal};
   }
-`,De=n.default.p`
+`,Co=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -136,4 +154,6 @@ font-family: ${({theme:e})=>e.typography.paragraphLarge.fontFamily};
   line-height: ${({theme:e})=>e.typography.paragraphLarge.lineHeight};
-  text-decoration: ${$};
-`,Ee=t.css`
+  text-decoration: ${ie};
+`,ve=g.css`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -145,6 +165,8 @@ font-family: ${({theme:e})=>e.typography.paragraphMedium.fontFamily};
   line-height: ${({theme:e})=>e.typography.paragraphMedium.lineHeight};
-  text-decoration: ${$};
-`,Le=n.default.p`
-  ${Ee}
-`,Be=n.default.p`
+  text-decoration: ${ie};
+`,Oo=l.default.p`
+  ${ve}
+`,Eo=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -156,4 +178,6 @@ font-family: ${({theme:e})=>e.typography.paragraphSmall.fontFamily};
   line-height: ${({theme:e})=>e.typography.paragraphSmall.lineHeight};
-  text-decoration: ${$};
-`,Oe=n.default.p`
+  text-decoration: ${ie};
+`,Po=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -165,4 +189,6 @@ font-family: ${({theme:e})=>e.typography.paragraphXSmall.fontFamily};
   line-height: ${({theme:e})=>e.typography.paragraphXSmall.lineHeight};
-  text-decoration: ${$};
-`,je=n.default.p`
+  text-decoration: ${ie};
+`,Lo=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -175,3 +201,5 @@ font-family: ${({theme:e})=>e.typography.overlineLarge.fontFamily};
   text-transform: uppercase;
-`,_e=n.default.p`
+`,jo=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -184,3 +212,5 @@ font-family: ${({theme:e})=>e.typography.overlineMedium.fontFamily};
   text-transform: uppercase;
-`,Re=n.default.p`
+`,Do=l.default.p`
+  margin: 0;
+
   color: ${({theme:e})=>e.colors.neutral["900"]};
@@ -193,7 +223,7 @@ font-family: ${({theme:e})=>e.typography.overlineSmall.fontFamily};
   text-transform: uppercase;
-`;var w={exports:{}},x={};/*
+`;var ce={exports:{}},Y={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var D=Object.getOwnPropertySymbols,Me=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;function Te(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function Xe(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var o={},i=0;i<10;i++)o["_"+String.fromCharCode(i)]=i;var l=Object.getOwnPropertyNames(o).map(function(d){return o[d]});if(l.join("")!=="0123456789")return!1;var g={};return"abcdefghijklmnopqrst".split("").forEach(function(d){g[d]=d}),Object.keys(Object.assign({},g)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Xe();/** @license React v17.0.2
+*/var Se=Object.getOwnPropertySymbols,Ao=Object.prototype.hasOwnProperty,_o=Object.prototype.propertyIsEnumerable;function Ro(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function To(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var o={},n=0;n<10;n++)o["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(o).map(function(c){return o[c]});if(r.join("")!=="0123456789")return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach(function(c){t[c]=c}),Object.keys(Object.assign({},t)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}To();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
@@ -205,3 +235,3 @@ *
  * LICENSE file in the root directory of this source tree.
- */var Ie=q.default,E=60103;if(x.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var L=Symbol.for;E=L("react.element"),x.Fragment=L("react.fragment")}var qe=Ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Ne=Object.prototype.hasOwnProperty,Ve={key:!0,ref:!0,__self:!0,__source:!0};function B(e,o,i){var l,g={},d=null,m=null;i!==void 0&&(d=""+i),o.key!==void 0&&(d=""+o.key),o.ref!==void 0&&(m=o.ref);for(l in o)Ne.call(o,l)&&!Ve.hasOwnProperty(l)&&(g[l]=o[l]);if(e&&e.defaultProps)for(l in o=e.defaultProps,o)g[l]===void 0&&(g[l]=o[l]);return{$$typeof:E,type:e,key:d,ref:m,props:g,_owner:qe.current}}x.jsx=B,x.jsxs=B,w.exports=x;const H=w.exports.jsx,Ue=w.exports.jsxs,O=t.css`
+ */var Mo=ye.default,we=60103;if(Y.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var ke=Symbol.for;we=ke("react.element"),Y.Fragment=ke("react.fragment")}var Wo=Mo.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,No=Object.prototype.hasOwnProperty,Io={key:!0,ref:!0,__self:!0,__source:!0};function He(e,o,n){var r,t={},c=null,m=null;n!==void 0&&(c=""+n),o.key!==void 0&&(c=""+o.key),o.ref!==void 0&&(m=o.ref);for(r in o)No.call(o,r)&&!Io.hasOwnProperty(r)&&(t[r]=o[r]);if(e&&e.defaultProps)for(r in o=e.defaultProps,o)t[r]===void 0&&(t[r]=o[r]);return{$$typeof:we,type:e,key:c,ref:m,props:t,_owner:Wo.current}}Y.jsx=He,Y.jsxs=He,ce.exports=Y;const v=ce.exports.jsx,D=ce.exports.jsxs,ze=g.css`
   display: flex;
@@ -222,8 +252,8 @@ flex-flow: row nowrap;
   }
-`,j=t.css`
+`,Fe=g.css`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-`,Ge=t.css`
-  ${({buttonSize:e,theme:o})=>t.css`
+`,Xo=g.css`
+  ${({buttonSize:e,theme:o})=>g.css`
     padding: ${o.buttons.regular[e||"medium"].verticalPadding}
@@ -235,4 +265,4 @@ ${o.buttons.regular[e||"medium"].horizontalPadding};
   `}
-`,_=t.css`
-  ${({theme:e,buttonStyle:o})=>t.css`
+`,Be=g.css`
+  ${({theme:e,buttonStyle:o})=>g.css`
     background: ${e.buttons.regular.disabled[o||"primary"].background};
@@ -243,26 +273,26 @@ border-color: ${e.buttons.regular.disabled[o||"primary"].borderColor};
   `}
-`,R=t.css`
-  ${({theme:e,buttonStyle:o,variant:i})=>t.css`
-    background: ${e.buttons.regular[i||"primary"][o||"primary"].background};
-    border-color: ${e.buttons.regular[i||"primary"][o||"primary"].borderColor};
-    border-width: ${e.buttons.regular[i||"primary"][o||"primary"].borderWidth};
-    color: ${e.buttons.regular[i||"primary"][o||"primary"].contentColor};
+`,Ce=g.css`
+  ${({theme:e,buttonStyle:o,variant:n})=>g.css`
+    background: ${e.buttons.regular[n||"primary"][o||"primary"].background};
+    border-color: ${e.buttons.regular[n||"primary"][o||"primary"].borderColor};
+    border-width: ${e.buttons.regular[n||"primary"][o||"primary"].borderWidth};
+    color: ${e.buttons.regular[n||"primary"][o||"primary"].contentColor};
   `}
-`,Je=n.default.button`
-  ${O}
-  ${Ge}
+`,qo=l.default.button`
+  ${ze}
+  ${Xo}
   
-  ${({disabled:e})=>e?_:R}
-`,Ye=t.css`
+  ${({disabled:e})=>e?Be:Ce}
+`,Uo=g.css`
   margin-right: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
-`,Ke=n.default.div`
-  ${j}
-  ${Ye}
-`,Qe=t.css`
+`,Vo=l.default.div`
+  ${Fe}
+  ${Uo}
+`,Yo=g.css`
   margin-left: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
-`,Ze=n.default.div`
-  ${j}
-  ${Qe}
-`,eo=t.css`
-  ${({buttonSize:e,theme:o})=>t.css`
+`,Zo=l.default.div`
+  ${Fe}
+  ${Yo}
+`,Go=g.css`
+  ${({buttonSize:e,theme:o})=>g.css`
     padding: ${o.buttons.icon[e||"medium"].verticalPadding}
@@ -274,6 +304,6 @@ ${o.buttons.icon[e||"medium"].horizontalPadding};
   `}
-`,oo=t.css`
+`,Jo=g.css`
   width: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
   height: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
-`,ro=n.default.div`
+`,Ko=l.default.div`
   display: flex;
@@ -284,8 +314,155 @@ flex-flow: row nowrap;
 
-  ${oo}
-`,to=n.default.button`
-  ${O}
-  ${eo}
+  ${Jo}
+`,Qo=l.default.button`
+  ${ze}
+  ${Go}
 
-  ${({disabled:e})=>e?_:R}
-`,ao=lo=>{var M=lo,{buttonSize:e="medium",variant:o="primary",buttonStyle:i="primary",iconOnly:l=!1,startIcon:g=null,endIcon:d=null,children:m}=M,f=I(M,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return l?H(to,F(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:H(ro,{buttonSize:e,children:g||d},void 0)}),void 0):Ue(Je,F(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:[g&&H(Ke,{buttonSize:e,children:g},void 0),m,d&&H(Ze,{buttonSize:e,children:d},void 0)]}),void 0)};r.Button=ao,r.DisplayLarge=ke,r.DisplaySmall=Fe,r.HeadingH1=we,r.HeadingH2=ze,r.HeadingH3=ve,r.HeadingH4=Ce,r.HeadingH5=Pe,r.HeadingH6=Ae,r.OverlineLarge=je,r.OverlineMedium=_e,r.OverlineSmall=Re,r.ParagraphLarge=De,r.ParagraphMedium=Le,r.ParagraphSmall=Be,r.ParagraphXSmall=Oe,r.darkTheme=Se,r.lightTheme=A,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+  ${({disabled:e})=>e?Be:Ce}
+`,et=w=>{var F=w,{buttonSize:e="medium",variant:o="primary",buttonStyle:n="primary",iconOnly:r=!1,startIcon:t=null,endIcon:c=null,children:m}=F,b=We(F,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return r?v(Qo,U(T({},b),{variant:o,buttonStyle:n,buttonSize:e,children:v(Ko,{buttonSize:e,children:t||c},void 0)}),void 0):D(qo,U(T({},b),{variant:o,buttonStyle:n,buttonSize:e,children:[t&&v(Vo,{buttonSize:e,children:t},void 0),m,c&&v(Zo,{buttonSize:e,children:c},void 0)]}),void 0)};var Oe={exports:{}},ot="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",tt=ot,rt=tt;function Ee(){}function Pe(){}Pe.resetWarningCache=Ee;var nt=function(){function e(r,t,c,m,b,w){if(w!==rt){var F=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw F.name="Invariant Violation",F}}e.isRequired=e;function o(){return e}var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:o,element:e,elementType:e,instanceOf:o,node:e,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:Pe,resetWarningCache:Ee};return n.PropTypes=n,n};Oe.exports=nt();var Le=function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,n),t.l=!0,t.exports}return n.m=e,n.c=o,n.d=function(r,t,c){n.o(r,t)||Object.defineProperty(r,t,{enumerable:!0,get:c})},n.r=function(r){typeof Symbol!="undefined"&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},n.t=function(r,t){if(1&t&&(r=n(r)),8&t||4&t&&typeof r=="object"&&r&&r.__esModule)return r;var c=Object.create(null);if(n.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:r}),2&t&&typeof r!="string")for(var m in r)n.d(c,m,function(b){return r[b]}.bind(null,m));return c},n.n=function(r){var t=r&&r.__esModule?function(){return r.default}:function(){return r};return n.d(t,"a",t),t},n.o=function(r,t){return Object.prototype.hasOwnProperty.call(r,t)},n.p="",n(n.s=2)}([function(e,o){e.exports=Oe.exports},function(e,o){e.exports=ye.default},function(e,o,n){n.r(o);var r=n(1),t=n(0),c=function(){return(c=Object.assign||function(i){for(var s,u=1,p=arguments.length;u<p;u++)for(var h in s=arguments[u])Object.prototype.hasOwnProperty.call(s,h)&&(i[h]=s[h]);return i}).apply(this,arguments)},m=function(i,s){var u={};for(var p in i)Object.prototype.hasOwnProperty.call(i,p)&&s.indexOf(p)<0&&(u[p]=i[p]);if(i!=null&&typeof Object.getOwnPropertySymbols=="function"){var h=0;for(p=Object.getOwnPropertySymbols(i);h<p.length;h++)s.indexOf(p[h])<0&&Object.prototype.propertyIsEnumerable.call(i,p[h])&&(u[p[h]]=i[p[h]])}return u},b=0,w=r.forwardRef(function(i,s){var u=i.title,p=u===void 0?null:u,h=i.description,A=h===void 0?null:h,M=i.size,O=M===void 0?null:M,_=i.color,Z=_===void 0?"currentColor":_,L=i.horizontal,G=L===void 0?null:L,J=i.vertical,K=J===void 0?null:J,W=i.rotate,Q=W===void 0?null:W,N=i.spin,E=N===void 0?null:N,I=i.style,ee=I===void 0?{}:I,R=i.children,pe=m(i,["title","description","size","color","horizontal","vertical","rotate","spin","style","children"]);b++;var H,X=E!==null&&E,j=r.Children.map(R,function(se){var S=se;X!==!0&&(X=(E===null?S.props.spin:E)===!0);var te=S.props.size;typeof O=="number"&&typeof S.props.size=="number"&&(te=S.props.size/O);var re={size:te,color:Z===null?S.props.color:Z,horizontal:G===null?S.props.horizontal:G,vertical:K===null?S.props.vertical:K,rotate:Q===null?S.props.rotate:Q,spin:E===null?S.props.spin:E,inStack:!0};return r.cloneElement(S,re)});O!==null&&(ee.width=typeof O=="string"?O:1.5*O+"rem");var oe,q="stack_labelledby_"+b,P="stack_describedby_"+b;if(p)H=A?q+" "+P:q;else if(oe="presentation",A)throw new Error("title attribute required when description is set");return r.createElement("svg",c({ref:s,viewBox:"0 0 24 24",style:ee,role:oe,"aria-labelledby":H},pe),p&&r.createElement("title",{id:q},p),A&&r.createElement("desc",{id:P},A),X&&r.createElement("style",null,"@keyframes spin { to { transform: rotate(360deg) } }","@keyframes spin-inverse { to { transform: rotate(-360deg) } }"),j)});w.displayName="Stack",w.propTypes={size:t.oneOfType([t.number,t.string]),color:t.string,horizontal:t.bool,vertical:t.bool,rotate:t.number,spin:t.oneOfType([t.bool,t.number]),children:t.oneOfType([t.arrayOf(t.node),t.node]).isRequired,className:t.string,style:t.object},w.defaultProps={size:null,color:null,horizontal:null,vertical:null,rotate:null,spin:null};var F=w;n.d(o,"Icon",function(){return C}),n.d(o,"Stack",function(){return F});var B=function(){return(B=Object.assign||function(i){for(var s,u=1,p=arguments.length;u<p;u++)for(var h in s=arguments[u])Object.prototype.hasOwnProperty.call(s,h)&&(i[h]=s[h]);return i}).apply(this,arguments)},ae=function(i,s){var u={};for(var p in i)Object.prototype.hasOwnProperty.call(i,p)&&s.indexOf(p)<0&&(u[p]=i[p]);if(i!=null&&typeof Object.getOwnPropertySymbols=="function"){var h=0;for(p=Object.getOwnPropertySymbols(i);h<p.length;h++)s.indexOf(p[h])<0&&Object.prototype.propertyIsEnumerable.call(i,p[h])&&(u[p[h]]=i[p[h]])}return u},le=0,C=r.forwardRef(function(i,s){var u=i.path,p=i.id,h=p===void 0?++le:p,A=i.title,M=A===void 0?null:A,O=i.description,_=O===void 0?null:O,Z=i.size,L=Z===void 0?null:Z,G=i.color,J=G===void 0?"currentColor":G,K=i.horizontal,W=K!==void 0&&K,Q=i.vertical,N=Q!==void 0&&Q,E=i.rotate,I=E===void 0?0:E,ee=i.spin,R=ee!==void 0&&ee,pe=i.style,H=pe===void 0?{}:pe,X=i.inStack,j=X!==void 0&&X,oe=ae(i,["path","id","title","description","size","color","horizontal","vertical","rotate","spin","style","inStack"]),q={},P=[];L!==null&&(j?P.push("scale("+L+")"):(H.width=typeof L=="string"?L:1.5*L+"rem",H.height=H.width)),W&&P.push("scaleX(-1)"),N&&P.push("scaleY(-1)"),I!==0&&P.push("rotate("+I+"deg)"),J!==null&&(q.fill=J);var se=r.createElement("path",B({d:u,style:q},j?oe:{})),S=se;P.length>0&&(H.transform=P.join(" "),H.transformOrigin="center",j&&(S=r.createElement("g",{style:H},se,r.createElement("rect",{width:"24",height:"24",fill:"transparent"}))));var te,re=S,De=R===!0||typeof R!="number"?2:R,de=!j&&(W||N);if(De<0&&(de=!de),R&&(re=r.createElement("g",{style:{animation:"spin"+(de?"-inverse":"")+" linear "+Math.abs(De)+"s infinite",transformOrigin:"center"}},S,!(W||N||I!==0)&&r.createElement("rect",{width:"24",height:"24",fill:"transparent"}))),j)return re;var Ae,ue="icon_labelledby_"+h,_e="icon_describedby_"+h;if(M)te=_?ue+" "+_e:ue;else if(Ae="presentation",_)throw new Error("title attribute required when description is set");return r.createElement("svg",B({ref:s,viewBox:"0 0 24 24",style:H,role:Ae,"aria-labelledby":te},oe),M&&r.createElement("title",{id:ue},M),_&&r.createElement("desc",{id:_e},_),!j&&R&&(de?r.createElement("style",null,"@keyframes spin-inverse { to { transform: rotate(-360deg) } }"):r.createElement("style",null,"@keyframes spin { to { transform: rotate(360deg) } }")),re)});C.displayName="Icon",C.propTypes={path:t.string.isRequired,size:t.oneOfType([t.number,t.string]),color:t.string,horizontal:t.bool,vertical:t.bool,rotate:t.number,spin:t.oneOfType([t.bool,t.number]),style:t.object,inStack:t.bool,className:t.string},C.defaultProps={size:null,color:"currentColor",horizontal:!1,vertical:!1,rotate:0,spin:!1},o.default=C}]);const k="info",it=l.default.div`
+  display: flex;
+  flex-direction: column;
+`,he=l.default.span`
+  color: ${({theme:e})=>e.inputBox.label.color};
+  font-family: ${({theme:e})=>e.inputBox.fontFamily};
+  font-size: ${({theme:e})=>e.inputBox.label.fontSize};
+  font-style: ${({theme:e})=>e.inputBox.label.fontStyle};
+  font-weight: ${({theme:e})=>e.inputBox.fontWeight};
+  line-height: ${({theme:e})=>e.inputBox.label.lineHeight};
+  font-feature-settings: ${({theme:e})=>e.inputBox.fontFeatureSettings};
+`,at=l.default.div`
+  display: flex;
+`,lt=l.default(he)`
+  margin: ${({theme:e})=>e.inputBox.helper.margin};
+
+  color: ${({theme:e,status:o})=>e.inputBox[o||k].helperColor};
+  font-size: ${({theme:e})=>e.inputBox.helper.fontSize};
+  font-style: ${({theme:e})=>e.inputBox.helper.fontStyle};
+  font-weight: ${({theme:e})=>e.inputBox.helper.fontWeight};
+  line-height: ${({theme:e})=>e.inputBox.helper.lineHeight};
+`,pt=l.default(Le)`
+  color: ${({theme:e,status:o})=>e.inputBox[o||k].helperColor};
+`,st=l.default.div`
+  display: flex;
+  position: absolute;
+  top: ${({theme:e})=>e.inputBox.hint.top};
+  right: ${({theme:e})=>e.inputBox.hint.right};
+  flex-direction: row;
+  margin: ${({theme:e})=>e.inputBox.margin};
+  padding: ${({theme:e})=>e.inputBox.padding};
+
+  background: ${({theme:e})=>e.inputBox.hint.background};
+`,dt=l.default(he)`
+  margin: ${({theme:e})=>e.inputBox.hint.margin};
+
+  color: ${({theme:e,status:o})=>e.inputBox[o||k].hintColor};
+`,gt=l.default(Le)`
+  margin: 4px 4px;
+
+  color: ${({theme:e,status:o})=>e.inputBox[o||k].hintColor};
+`,ct=l.default.div`
+  position: relative;
+`,ht=l.default.input`
+  display: flex;
+  box-sizing: ${({theme:e})=>e.inputBox.boxSizing};
+  flex-direction: row;
+  flex-grow: 0;
+  align-items: center;
+  align-self: stretch;
+  width: ${({theme:e})=>e.inputBox.width};
+  height: ${({theme:e})=>e.inputBox.height};
+  margin: ${({theme:e})=>e.inputBox.margin};
+  padding: ${({theme:e})=>e.inputBox.padding};
+
+  border: ${({theme:e,status:o})=>e.inputBox[o||k].border};
+  border-radius: ${({theme:e})=>e.inputBox.borderRadius};
+
+  background: ${({theme:e})=>e.inputBox.background};
+  box-shadow: ${({theme:e,status:o})=>e.inputBox[o||k].boxShadow};
+
+  color: ${({theme:e,status:o})=>e.inputBox[o||k].color};
+
+  &:focus {
+    box-sizing: ${({theme:e,status:o})=>e.inputBox[o||k].focused.boxSizing};
+
+    border: ${({theme:e,status:o})=>e.inputBox[o||k].focused.border};
+    border-radius: ${({theme:e,status:o})=>e.inputBox[o||k].focused.borderRadius};
+    outline: none;
+
+    background: ${({theme:e})=>e.inputBox.background};
+    box-shadow: ${({theme:e,status:o})=>e.inputBox[o||k].focused.boxShadow};
+  }
+  &:disabled {
+    box-sizing: ${({theme:e})=>e.inputBox.disabled.boxSizing};
+    align-items: center;
+    padding: ${({theme:e})=>e.inputBox.padding};
+
+    border: ${({theme:e})=>e.inputBox.disabled.border};
+    border-radius: ${({theme:e})=>e.inputBox.disabled.borderRadius};
+
+    background: ${({theme:e})=>e.inputBox.background};
+    box-shadow: ${({theme:e})=>e.inputBox.disabled.boxShadow};
+  }
+  &:placeholder {
+    display: flex;
+    align-items: center;
+
+    color: ${({theme:e})=>e.inputBox.placeholder.color};
+  }
+`;var ut="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z",ft="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";const je=e=>D(it,{children:[v(he,{children:e.description},void 0),D(ct,{children:[v(ht,T({status:e.status,placeholder:e.placeholder,disabled:e.disabled,onChange:e.onChange,type:"text"},e),void 0),e.hint&&D(st,{children:[v(dt,{status:e.status,children:e.hint.content},void 0),e.hint.icon&&v(gt,{status:e.status,path:e.hint.icon,size:.72},void 0)]},void 0)]},void 0),D(at,{children:[e.status==="error"&&v(pt,{status:e.status,path:ut,size:.72},void 0),v(lt,{status:e.status,children:e.helper},void 0)]},void 0)]},void 0),yt=l.default.button`
+  ${ve}
+  box-sizing: border-box;
+  padding: 18px 10px;
+
+  border: none;
+
+  background: ${({theme:e,highlighted:o})=>o?e.select.items.hover.background:"none"};
+
+  text-align: left;
+
+  &:hover {
+    background: ${({theme:e})=>e.select.items.hover.background};
+  }
+`,bt=e=>{var o,n,r,t;return v(yt,U(T({},e),{children:((o=e==null?void 0:e.item)==null?void 0:o.name)||((n=e==null?void 0:e.item)==null?void 0:n.label)||((t=(r=e==null?void 0:e.item)==null?void 0:r.toString)==null?void 0:t.call(r))}),void 0)},mt=l.default.div`
+  display: flex;
+  position: ${({focus:e})=>e?"fixed":"relative"};
+  z-index: ${({focus:e})=>e?"99999":"9"};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  flex-flow: column nowrap;
+  padding: ${({theme:e,focus:o})=>o?e.spacings.md:void 0};
+
+  background: ${({theme:e,focus:o})=>o?e.colors.shades["0"]:"none"};
+
+  ${d.up("desktop")} {
+    position: relative;
+    z-index: unset;
+    padding: 0;
+
+    background: none;
+  }
+`,xt=l.default.div`
+  display: ${({focus:e})=>e?"flex":"none"};
+  box-sizing: border-box;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+  overflow-y: auto;
+
+  background: ${({theme:e})=>e.colors.shades["0"]};
+  box-shadow: ${({theme:e,focus:o})=>o?void 0:e.select.items.shadow};
+
+  ${d.up("desktop")} {
+    display: ${({focus:e})=>e?"flex":"none"};
+    position: absolute;
+    z-index: 9999;
+    top: ${({theme:e})=>e.spacings.xxlg};
+    flex-grow: unset;
+    flex-shrink: unset;
+
+    box-shadow: ${({theme:e})=>e.select.items.shadow};
+  }
+`,$t=({autoCompleteItems:e,renderItem:o,inputProps:n,renderHeader:r,onItemSelected:t})=>{const c=r||(()=>null),m=o||bt,[b,w]=y.useState(!1),[F,B]=y.useState(0),[ae,le]=y.useState(!1),C=y.useCallback(i=>{switch(i.key){case"Escape":w(!1);break;case"ArrowUp":B(s=>s&&s-1);break;case"ArrowDown":B(s=>s<e.length-1?s+1:s);break;case"Enter":B(s=>(w(!1),e.length&&t(e[s]),0));break}},[e,t]);return y.useEffect(()=>(document.addEventListener("keydown",C,!1),()=>{document.removeEventListener("keydown",C,!1)}),[C]),y.useEffect(()=>{w(!0)},[e]),D(mt,{focus:ae,children:[v(je,U(T({},n),{onFocus:()=>le(!0),onBlur:()=>le(!1),hint:{icon:ft,content:""}}),void 0),b&&D(xt,{focus:ae,children:[(e==null?void 0:e.length)>0&&v(c,{},void 0),e==null?void 0:e.map((i,s)=>v(m,{item:i,onClick:()=>{w(!1),t(e[s]),B(0)},onMouseEnter:()=>B(s),highlighted:F===s},i.id))]},void 0)]},void 0)};a.Button=et,a.DisplayLarge=vo,a.DisplaySmall=So,a.HeadingH1=wo,a.HeadingH2=ko,a.HeadingH3=Ho,a.HeadingH4=zo,a.HeadingH5=Fo,a.HeadingH6=Bo,a.InputBox=je,a.OverlineLarge=Lo,a.OverlineMedium=jo,a.OverlineSmall=Do,a.ParagraphLarge=Co,a.ParagraphMedium=Oo,a.ParagraphSmall=Eo,a.ParagraphXSmall=Po,a.Select=$t,a.darkTheme=$o,a.lightTheme=$e,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

dist/main.d.ts

@@ -8,1 +8,3 @@ export { light as lightTheme } from "./theme";
 export type { ButtonProps } from "./components/Button";
+export { InputBox } from "./components/InputBox";
+export { default as Select } from "./components/Select";

package.json

@@ -17,3 +17,3 @@ {
   },
-  "version": "3.2.0",
+  "version": "3.2.1",
   "scripts": {
@@ -20,0 +20,0 @@ "build": "tsc --noEmit && vite build",

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

772019

increased by4.5%

Lines of code

2622

increased by32.29%

No dependency changes