@activecollab/components 0.1.537 → 1.0.1

package/dist/esm/components/Checkbox/Styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+var StyledInput = styled.input.withConfig({
+  displayName: "Styles__StyledInput",
+  componentId: "sc-y7zymm-0"
+})(["display:none;"]);
+StyledInput.displayName = "StyledInput";
+var StyledLabel = styled.label.withConfig({
+  displayName: "Styles__StyledLabel",
+  componentId: "sc-y7zymm-1"
+})([""]);
+StyledLabel.displayName = "StyledLabel";
+var StyledCheckbox = styled.div.withConfig({
+  displayName: "Styles__StyledCheckbox",
+  componentId: "sc-y7zymm-2"
+})(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
+  return props.hover && css(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
+}, StyledInput, StyledLabel);
+StyledCheckbox.displayName = "StyledCheckbox";
+
+export { StyledCheckbox, StyledInput, StyledLabel };
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/Checkbox/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Checkbox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ICheckboxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n  display: none;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<ICheckboxProps>`\n  height: 16px;\n  width: 16px;\n  position: relative;\n  transition-duration: 0.2s;\n  border-radius: 2px;\n  path {\n    transition-duration: 0.2s;\n    stroke: transparent;\n    stroke-dashoffset: 12;\n    stroke-dasharray: 12;\n  }\n  svg {\n    cursor: pointer;\n    border-radius: 2px;\n    fill: transparent;\n  }\n  rect {\n    transition-duration: 0.2s;\n    stroke: var(--color-theme-500);\n  }\n\n  ${StyledInput}:disabled ~ ${StyledLabel} {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  ${StyledInput}:focus ~ ${StyledLabel} {\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  &:not(.c-checkbox__controlled) ${StyledInput}:hover ~ ${StyledLabel} {\n    path {\n      stroke: var(--color-secondary-500);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  ${(props) =>\n    props.hover &&\n    css`\n      ${StyledLabel} {\n        path {\n          stroke: var(--color-secondary-500);\n          stroke-dashoffset: 24;\n        }\n        rect {\n          stroke: var(--color-secondary);\n          stroke-width: 3px;\n        }\n    `}\n\n  ${StyledInput}:checked ~ ${StyledLabel} {\n    path {\n      stroke: var(--page-paper-main);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 19px;\n    }\n  }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover","css"],"mappings":";;IAGaA,WAAW,GAAGC,MAAM,CAACC,KAAV;AAAA;AAAA;AAAA;AAGxBF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;IAEaC,WAAW,GAAGH,MAAM,CAACI,KAAV;AAAA;AAAA;AAAA;AACxBD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;IAEaG,cAAc,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,utBAsBvBP,WAtBuB,EAsBGI,WAtBH,EA2BvBJ,WA3BuB,EA2BAI,WA3BA,EAkCQJ,WAlCR,EAkC+BI,WAlC/B,EA6CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAC,GADA,8HAEIN,WAFJ,CADA;AAAA,CA7CuB,EA2DvBJ,WA3DuB,EA2DEI,WA3DF;AAsE3BE,cAAc,CAACH,WAAf,GAA6B,gBAA7B;;;;"}

package/dist/esm/components/Choose/Choose.d.ts

@@ -1,11 +1,9 @@
 import { FC, BaseHTMLAttributes, ReactElement } from "react";
-import "./Choose.css";
-interface IChooseProps extends BaseHTMLAttributes<HTMLButtonElement> {
+export interface IChooseProps extends BaseHTMLAttributes<HTMLButtonElement> {
     children: ReactElement | string;
     disabled?: boolean;
     active?: boolean;
     className?: string;
 }
 export declare const Choose: FC<IChooseProps>;
-export {};
 //# sourceMappingURL=Choose.d.ts.map

package/dist/esm/components/Choose/Choose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Choose.d.ts","sourceRoot":"","sources":["../../../../src/components/Choose/Choose.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,UAAU,YAAa,SAAQ,kBAAkB,CAAC,iBAAiB,CAAC;IAElE,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAEhC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,CAkBnC,CAAC"}
+{"version":3,"file":"Choose.d.ts","sourceRoot":"","sources":["../../../../src/components/Choose/Choose.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIpE,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,iBAAiB,CAAC;IAEzE,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAEhC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,CAiBnC,CAAC"}

package/dist/esm/components/Choose/Choose.js

@@ -0,0 +1,37 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import classnames from 'classnames';
+import { StyledChoose } from './Styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "disabled", "active", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Choose component
+ */
+var Choose = function Choose(_ref) {
+  var children = _ref.children,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      className = _ref.className,
+      args = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledChoose, _objectSpread(_objectSpread({
+    disabled: disabled,
+    className: classnames("c-choose", className),
+    active: active
+  }, args), {}, {
+    children: children
+  }));
+};
+Choose.displayName = "Choose";
+
+export { Choose };
+//# sourceMappingURL=Choose.js.map

package/dist/esm/components/Choose/Choose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choose.js","sources":["../../../../src/components/Choose/Choose.tsx"],"sourcesContent":["import React, { FC, BaseHTMLAttributes, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledChoose } from \"./Styles\";\n\nexport interface IChooseProps extends BaseHTMLAttributes<HTMLButtonElement> {\n  /** Children type of node or string */\n  children: ReactElement | string;\n  /** Disabled prop */\n  disabled?: boolean;\n  /** Active prop */\n  active?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\n/**\n * Choose component\n */\nexport const Choose: FC<IChooseProps> = ({\n  children,\n  disabled = false,\n  active = false,\n  className,\n  ...args\n}) => {\n  return (\n    <StyledChoose\n      disabled={disabled}\n      className={classNames(\"c-choose\", className)}\n      active={active}\n      {...args}\n    >\n      {children}\n    </StyledChoose>\n  );\n};\n\nChoose.displayName = \"Choose\";\n"],"names":["Choose","children","disabled","active","className","args","_jsx","classNames","displayName"],"mappings":";;;;;;;;;;;;;AAeA;AACA;AACA;IACaA,MAAwB,GAAG,SAA3BA,MAA2B,OAMlC;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,2BAJJC,QAII;AAAA,MAJJA,QAII,8BAJO,KAIP;AAAA,yBAHJC,MAGI;AAAA,MAHJA,MAGI,4BAHK,KAGL;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACEC,IAAC,YAAD;AACE,IAAA,QAAQ,EAAEJ,QADZ;AAEE,IAAA,SAAS,EAAEK,UAAU,CAAC,UAAD,EAAaH,SAAb,CAFvB;AAGE,IAAA,MAAM,EAAED;AAHV,KAIME,IAJN;AAAA,cAMGJ;AANH,KADF;AAUD;AAEDD,MAAM,CAACQ,WAAP,GAAqB,QAArB;;;;"}

package/dist/esm/components/Choose/Styles.d.ts

@@ -0,0 +1,3 @@
+import { IChooseProps } from "./Choose";
+export declare const StyledChoose: import("styled-components").StyledComponent<"button", any, IChooseProps, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Choose/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Choose/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,YAAY,iFAqBxB,CAAC"}

package/dist/esm/components/Choose/Styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { BoxSizingStyle } from '../BoxSizingStyle.js';
+import { FontStyle } from '../FontStyle.js';
+
+var StyledChoose = styled.button.withConfig({
+  displayName: "Styles__StyledChoose",
+  componentId: "sc-1j2qv02-0"
+})(["", " ", " ", " ", " height:32px;padding:0 16px;transition:all 0.3s ease;border:1px solid var(--border-primary);font-size:13px;transition-duration:0.3s;&:hover{", " box-shadow:inset 0 0 5px 3px var(--color-primary-300);}", ""], {
+  "WebkitFontSmoothing": "antialiased",
+  "MozOsxFontSmoothing": "grayscale",
+  "verticalAlign": "middle",
+  "fontWeight": "500",
+  "display": "inline-block",
+  "lineHeight": "1",
+  "margin": "0px",
+  "textDecoration": "none"
+}, {
+  "userSelect": "none",
+  "cursor": "pointer",
+  "textAlign": "center",
+  "borderRadius": "0.5rem",
+  "color": "var(--color-theme-700)"
+}, FontStyle, BoxSizingStyle, {
+  "borderColor": "var(--color-primary)"
+}, function (props) {
+  return props.active && css(["", " background-color:var(--color-primary-300);"], {
+    "borderColor": "var(--color-primary)",
+    "zIndex": "0"
+  });
+});
+StyledChoose.displayName = "StyledChoose";
+
+export { StyledChoose };
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/Choose/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Choose/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { IChooseProps } from \"./Choose\";\n\nexport const StyledChoose = styled.button<IChooseProps>`\n  ${tw`tw-antialiased tw-align-middle tw-font-medium tw-inline-block tw-leading-none tw-m-0 tw-no-underline`}\n  ${tw`tw-select-none tw-cursor-pointer tw-text-center tw-rounded-lg tw-text-theme-700`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n  height: 32px;\n  padding: 0 16px;\n  transition: all 0.3s ease;\n  border: 1px solid var(--border-primary);\n  font-size: 13px;\n  transition-duration: 0.3s;\n  &:hover {\n    ${tw`tw-border-primary`}\n    box-shadow: inset 0 0 5px 3px var(--color-primary-300);\n  }\n  ${(props) =>\n    props.active &&\n    css`\n      ${tw`tw-border-primary tw-z-0`}\n      background-color: var(--color-primary-300);\n    `}\n`;\n\nStyledChoose.displayName = \"StyledChoose\";\n"],"names":["StyledChoose","styled","button","FontStyle","BoxSizingStyle","props","active","css","displayName"],"mappings":";;;;IAMaA,YAAY,GAAGC,MAAM,CAACC,MAAV;AAAA;AAAA;AAAA,wOACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADmB,EAEnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAFmB,EAGrBC,SAHqB,EAIrBC,cAJqB,EAYjB;AAAA;AAAA,CAZiB,EAerB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,IACAC,GADA,sDAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAfqB;AAuBzBP,YAAY,CAACQ,WAAb,GAA2B,cAA3B;;;;"}

package/dist/esm/components/ComboBox/ComboBox.d.ts

@@ -1,5 +1,4 @@
 import { FC } from "react";
-import "./ComboBox.css";
 import { IAutocompleteProps } from "../Autocomplete/Autocomplete";
 interface IComboBoxProps {
     selected?: string | number;
@@ -7,6 +6,7 @@ interface IComboBoxProps {
     loadingText?: string;
     onChange?: (e: string | number) => void;
     placeholder?: string;
+    disabled?: boolean;
 }
 export declare const ComboBox: FC<IComboBoxProps & IAutocompleteProps>;
 export {};

package/dist/esm/components/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAQH,MAAM,OAAO,CAAC;AAQf,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAYlE,UAAU,cAAc;IAEtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CAuM5D,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAgBlE,UAAU,cAAc;IAEtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CAoL5D,CAAC"}

package/dist/esm/components/ComboBox/ComboBox.js

@@ -0,0 +1,194 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { Button } from '../Button/Button.js';
+import useForkRef from '../../utils/useForkRef.js';
+import { RemoveScroll } from 'react-remove-scroll';
+import { SpinnerLoader } from '../Loaders/Spinner/SpinnerLoader.js';
+import { OptionContent } from '../Select/OptionContent/OptionContent.js';
+import { StyledComboBox, StyledComboBoxWrapper, StyledComboBoxInput, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxList } from './Styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { RadioButton } from '../RadioButton/RadioButton.js';
+import { Popper } from '../Popper/Popper.js';
+import { Autocomplete } from '../Autocomplete/Autocomplete.js';
+
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var ComboBox = function ComboBox(_ref) {
+  var _formRef$current;
+
+  var _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      selected = _ref.selected,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      loadingText = _ref.loadingText,
+      onChange = _ref.onChange,
+      placeholder = _ref.placeholder,
+      handleEmptyAction = _ref.handleEmptyAction,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      prop = _objectWithoutProperties(_ref, _excluded);
+
+  var selectedName = useMemo(function () {
+    var value = "";
+
+    if (!selected) {
+      return value;
+    }
+
+    options.map(function (v) {
+      if (v !== null && v !== void 0 && v.options) {
+        return v.options.find(function (q) {
+          if (q.id === selected) {
+            value = q.name;
+            return;
+          }
+        });
+      } else {
+        if (v.id === selected) {
+          value = v.name;
+          return;
+        }
+      }
+    });
+    return value;
+  }, [options, selected]);
+
+  var _useState = useState(selectedName),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleOnChange = useCallback(function (e) {
+    return setValue(e.target.value);
+  }, []);
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      childNode = _useState4[0],
+      setChildNode = _useState4[1];
+
+  var elementRef = useRef(null);
+  var handleRef = useForkRef(setChildNode, elementRef);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      open = _useState6[0],
+      setOpen = _useState6[1];
+
+  var handleOnKeyDown = useCallback(function (e) {
+    if (e.key === "Escape" && open) {
+      setOpen(false);
+      setValue(selectedName);
+      e.stopPropagation();
+    }
+  }, [open, selectedName]);
+  var formRef = useRef(null);
+  useEffect(function () {
+    open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
+    !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
+  }, [childNode, open]);
+  useEffect(function () {
+    setValue(selectedName);
+  }, [selectedName]);
+  var emptyAction = useCallback(function (v) {
+    handleEmptyAction === null || handleEmptyAction === void 0 ? void 0 : handleEmptyAction(v);
+    setOpen(false);
+  }, [handleEmptyAction]);
+  var handleChange = useCallback(function (selectedValue) {
+    if (selectedValue) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+      setOpen(false);
+    }
+  }, [onChange]);
+  var onClose = useCallback(function () {
+    setTimeout(function () {
+      setOpen(false);
+    }, 200);
+    setValue(selectedName);
+  }, [selectedName]);
+  var onOpen = useCallback(function () {
+    if (!disabled) {
+      setOpen(true);
+    }
+  }, [disabled]);
+  var handleRenderOption = useCallback(function (option, props) {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(OptionContent, {
+        imageUrl: option.image,
+        color: option.color,
+        textColor: option.textColor,
+        name: option.name
+      }), /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props))]
+    });
+  }, []);
+  var handleDeselect = useCallback(function (e) {
+    e.stopPropagation();
+    onChange === null || onChange === void 0 ? void 0 : onChange("");
+    setOpen(false);
+  }, [onChange]);
+  var handleMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/jsxs(StyledComboBox, {
+    className: "c-combo-box",
+    $open: open,
+    $loading: loading,
+    children: [/*#__PURE__*/jsxs(StyledComboBoxWrapper, {
+      onClick: onOpen,
+      onFocus: onOpen,
+      onBlur: onClose,
+      ref: formRef,
+      $loading: loading,
+      children: [/*#__PURE__*/jsx(StyledComboBoxInput, {
+        ref: handleRef,
+        value: loading && loadingText ? loadingText : value,
+        onKeyDown: handleOnKeyDown,
+        onChange: handleOnChange,
+        placeholder: placeholder,
+        disabled: disabled
+      }), !disabled ? /*#__PURE__*/jsxs(Fragment, {
+        children: [loading ? /*#__PURE__*/jsx(SpinnerLoader, {}) : selected ? /*#__PURE__*/jsx(Button, {
+          onMouseDown: handleMouseDown,
+          onClick: handleDeselect,
+          variant: "text gray",
+          children: /*#__PURE__*/jsx(StyledComboBoxCloseSmallIcon, {})
+        }) : null, /*#__PURE__*/jsx(StyledComboBoxCollapseExpandSingleIcon, {
+          $open: open
+        })]
+      }) : null]
+    }), !disabled ? /*#__PURE__*/jsx(Popper, {
+      anchorEl: formRef.current,
+      open: open,
+      placement: "bottom",
+      style: {
+        zIndex: 10
+      },
+      children: /*#__PURE__*/jsx(RemoveScroll, {
+        noIsolation: true,
+        allowPinchZoom: true,
+        children: /*#__PURE__*/jsx(StyledComboBoxList, {
+          $width: (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.clientWidth,
+          children: /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, prop), {}, {
+            inputEl: childNode,
+            selected: selected,
+            handleChange: handleChange,
+            renderOption: handleRenderOption,
+            options: options,
+            type: "single",
+            handleEmptyAction: emptyAction
+          }))
+        })
+      })
+    }) : null]
+  });
+};
+ComboBox.displayName = "ComboBox";
+
+export { ComboBox };
+//# sourceMappingURL=ComboBox.js.map

package/dist/esm/components/ComboBox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  const formRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledComboBox className=\"c-combo-box\" $open={open} $loading={loading}>\n      <StyledComboBoxWrapper\n        onClick={onOpen}\n        onFocus={onOpen}\n        onBlur={onClose}\n        ref={formRef}\n        $loading={loading}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n        {!disabled ? (\n          <>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </>\n        ) : null}\n      </StyledComboBoxWrapper>\n      {!disabled ? (\n        <Popper\n          anchorEl={formRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={formRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </StyledComboBox>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","prop","selectedName","useMemo","value","map","v","find","q","id","name","useState","setValue","handleOnChange","useCallback","e","target","childNode","setChildNode","elementRef","useRef","handleRef","useForkRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","useEffect","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","_jsxs","_jsx","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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"}

package/dist/esm/components/ComboBox/Styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+interface StyledComboBoxProps {
+    $open?: boolean;
+    $loading?: boolean;
+}
+export declare const StyledComboBox: import("styled-components").StyledComponent<"div", any, StyledComboBoxProps, never>;
+export declare const StyledComboBoxWrapper: import("styled-components").StyledComponent<"div", any, {
+    $loading?: boolean | undefined;
+}, never>;
+export declare const StyledComboBoxCloseSmallIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export declare const StyledComboBoxCollapseExpandSingleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {
+    $open?: boolean | undefined;
+}, never>;
+export declare const StyledComboBoxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledComboBoxList: import("styled-components").StyledComponent<"div", any, {
+    $width?: number | undefined;
+}, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/ComboBox/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAMA,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFAqB1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAWjC,CAAC;AASF,eAAO,MAAM,4BAA4B,wqPAWxC,CAAC;AAIF,eAAO,MAAM,sCAAsC;;SAalD,CAAC;AAKF,eAAO,MAAM,mBAAmB,iVAM/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}

package/dist/esm/components/ComboBox/Styles.js

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+import { Input } from '../Input/Input.js';
+import { BoxSizingStyle } from '../BoxSizingStyle.js';
+import { FontStyle } from '../FontStyle.js';
+import CloseSmallIcon from '../Icons/collection/CloseSmall.js';
+import CollapseExpandSingleIcon from '../Icons/collection/CollapseExpandSingle.js';
+
+var StyledComboBox = styled.div.withConfig({
+  displayName: "Styles__StyledComboBox",
+  componentId: "sc-5qvkpb-0"
+})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  return props.$open && css(["border-color:var(--color-primary);"]);
+}, function (props) {
+  return props.$loading && css(["cursor:progress;"]);
+});
+StyledComboBox.displayName = "StyledComboBox";
+var StyledComboBoxWrapper = styled.div.withConfig({
+  displayName: "Styles__StyledComboBoxWrapper",
+  componentId: "sc-5qvkpb-1"
+})(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
+  return props.$loading && css(["pointer-events:none;"]);
+});
+StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+var StyledIconDefaults = css(["flex-shrink:0;cursor:pointer;"]);
+var StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon).withConfig({
+  displayName: "Styles__StyledComboBoxCloseSmallIcon",
+  componentId: "sc-5qvkpb-2"
+})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
+var StyledComboBoxCollapseExpandSingleIcon = styled(CollapseExpandSingleIcon).withConfig({
+  displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
+  componentId: "sc-5qvkpb-3"
+})(["", " margin:0 4px 0 0;color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
+  return props.$open && css(["transform:rotate(0deg);"]);
+});
+StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpandSingleIcon";
+var StyledComboBoxInput = styled(Input).withConfig({
+  displayName: "Styles__StyledComboBoxInput",
+  componentId: "sc-5qvkpb-4"
+})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+StyledComboBoxInput.displayName = "StyledComboBoxInput";
+var StyledComboBoxList = styled.div.withConfig({
+  displayName: "Styles__StyledComboBoxList",
+  componentId: "sc-5qvkpb-5"
+})(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
+  return "".concat(props.$width, "px");
+});
+StyledComboBoxList.displayName = "StyledComboBoxList";
+
+export { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxWrapper };
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/ComboBox/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/ComboBox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  background-color: var(--input-background-color);\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$open &&\n    css`\n      border-color: var(--color-primary);\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxWrapper = styled.div<{ $loading?: boolean }>`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      pointer-events: none;\n    `}\n`;\n\nStyledComboBoxWrapper.displayName = \"StyledComboBoxWrapper\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"names":["StyledComboBox","styled","div","FontStyle","BoxSizingStyle","props","$open","css","$loading","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","StyledComboBoxInput","Input","StyledComboBoxList","$width"],"mappings":";;;;;;;IAWaA,cAAc,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,6LAOvBC,SAPuB,EAQvBC,cARuB,EAUvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAC,GADA,wCADA;AAAA,CAVuB,EAgBvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,IACAD,GADA,sBADA;AAAA,CAhBuB;AAuB3BP,cAAc,CAACS,WAAf,GAA6B,gBAA7B;IAEaC,qBAAqB,GAAGT,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,IACAD,GADA,0BADA;AAAA,CAN8B;AAalCG,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,GAAGJ,GAAH,mCAAxB;IAKaK,4BAA4B,GAAGX,MAAM,CAACY,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCF,kBADqC,EAOrCD,qBAPqC;AAazCE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;IAEaK,sCAAsC,GAAGb,MAAM,CAC1Dc,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/CJ,kBAH+C,EAQ/C,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAC,GADA,6BADA;AAAA,CAR+C;AAenDO,sCAAsC,CAACL,WAAvC,GACE,wCADF;IAGaO,mBAAmB,GAAGf,MAAM,CAACgB,KAAD,CAAT;AAAA;AAAA;AAAA;AAQhCD,mBAAmB,CAACP,WAApB,GAAkC,qBAAlC;IAEaS,kBAAkB,GAAGjB,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACG,KAAD;AAAA,mBAAcA,KAAK,CAACc,MAApB;AAAA,CAPoB;AAU/BD,kBAAkB,CAACT,WAAnB,GAAiC,oBAAjC;;;;"}

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts

@@ -1,5 +1,4 @@
 import { FC, MouseEvent } from "react";
-import "./CompleteCheckbox.css";
 interface ICompleteCheckboxProps {
     completed?: boolean;
     onClick?: (event: MouseEvent) => void;

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,wBAAwB,CAAC;AAEhC,UAAU,sBAAsB;IAE9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CAgCvD,CAAC"}
+{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI9C,UAAU,sBAAsB;IAE9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC"}

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js

@@ -0,0 +1,39 @@
+import 'react';
+import classnames from 'classnames';
+import { StyledCompleteCheckbox } from './Styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CompleteCheckbox = function CompleteCheckbox(_ref) {
+  var _ref$completed = _ref.completed,
+      completed = _ref$completed === void 0 ? false : _ref$completed,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$animate = _ref.animate,
+      animate = _ref$animate === void 0 ? false : _ref$animate,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? false : _ref$primary,
+      checkMarkClassName = _ref.checkMarkClassName;
+  return /*#__PURE__*/jsx(StyledCompleteCheckbox, {
+    onClick: onClick,
+    className: classnames("c-complete-checkbox", className),
+    $primary: primary,
+    $completed: completed,
+    $disabled: disabled,
+    $animation: !disabled && completed && animate,
+    children: /*#__PURE__*/jsxs("svg", {
+      viewBox: "0 0 48 48",
+      className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12",
+      children: [/*#__PURE__*/jsx("path", {
+        d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
+      }), /*#__PURE__*/jsx("polyline", {
+        points: "19.5,24 22.5,27 28.5,21"
+      })]
+    })
+  });
+};
+CompleteCheckbox.displayName = "CompleteCheckbox";
+
+export { CompleteCheckbox };
+//# sourceMappingURL=CompleteCheckbox.js.map

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompleteCheckbox.js","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\ninterface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n    >\n      <svg\n        viewBox=\"0 0 48 48\"\n        className={checkMarkClassName ? checkMarkClassName : \"tw-w-12 tw-h-12\"}\n      >\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","_jsx","classnames","_jsxs","displayName"],"mappings":";;;;;IAqBaA,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACEC,IAAC,sBAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,SAAS,EAAEK,UAAU,CAAC,qBAAD,EAAwBJ,SAAxB,CAFvB;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE,OANxC;AAAA,2BAQEO;AACE,MAAA,OAAO,EAAC,WADV;AAEE,MAAA,SAAS,EAAEH,kBAAkB,GAAGA,kBAAH,GAAwB,iBAFvD;AAAA,8BAIEC;AAAM,QAAA,CAAC,EAAC;AAAR,QAJF,eAKEA;AAAU,QAAA,MAAM,EAAC;AAAjB,QALF;AAAA;AARF,IADF;AAkBD;AAEDR,gBAAgB,CAACW,WAAjB,GAA+B,kBAA/B;;;;"}

package/dist/esm/components/CompleteCheckbox/Styles.d.ts

@@ -0,0 +1,9 @@
+interface StyledCompleteCheckboxProps {
+    $primary?: boolean;
+    $completed?: boolean;
+    $disabled?: boolean;
+    $animation?: boolean;
+}
+export declare const StyledCompleteCheckbox: import("styled-components").StyledComponent<"div", any, StyledCompleteCheckboxProps, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/CompleteCheckbox/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoBD,eAAO,MAAM,sBAAsB,6FAoHlC,CAAC"}