@activecollab/components 1.0.7 → 1.0.8

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

@@ -0,0 +1,172 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled"];
+import React, { useCallback, useState, useEffect, useRef, useMemo } from "react";
+import { RadioButton } from "../RadioButton";
+import { Autocomplete } from "../Autocomplete";
+import { Button } from "../Button/Button";
+import useForkRef from "../../utils/useForkRef";
+import { Popper } from "../Popper";
+import { RemoveScroll } from "react-remove-scroll";
+import { SpinnerLoader } from "../Loaders/Spinner/SpinnerLoader";
+import { OptionContent } from "../Select/OptionContent/OptionContent";
+import { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxWrapper } from "./Styles";
+export 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var selectedName = useMemo(function () {
+    var value = "";
+
+    if (!selected) {
+      return value;
+    }
+
+    options.map(function (v) {
+      if (v != null && 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),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var handleOnChange = useCallback(function (e) {
+    return setValue(e.target.value);
+  }, []);
+
+  var _useState2 = useState(),
+      childNode = _useState2[0],
+      setChildNode = _useState2[1];
+
+  var elementRef = useRef(null);
+  var handleRef = useForkRef(setChildNode, elementRef);
+
+  var _useState3 = useState(false),
+      open = _useState3[0],
+      setOpen = _useState3[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 ? void 0 : childNode.focus());
+    !open && (childNode == null ? void 0 : childNode.blur());
+  }, [childNode, open]);
+  useEffect(function () {
+    setValue(selectedName);
+  }, [selectedName]);
+  var emptyAction = useCallback(function (v) {
+    handleEmptyAction == null ? void 0 : handleEmptyAction(v);
+    setOpen(false);
+  }, [handleEmptyAction]);
+  var handleChange = useCallback(function (selectedValue) {
+    if (selectedValue) {
+      onChange == null ? 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
+      imageUrl: option.image,
+      color: option.color,
+      textColor: option.textColor,
+      name: option.name
+    }), /*#__PURE__*/React.createElement(RadioButton, props));
+  }, []);
+  var handleDeselect = useCallback(function (e) {
+    e.stopPropagation();
+    onChange == null ? void 0 : onChange("");
+    setOpen(false);
+  }, [onChange]);
+  var handleMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledComboBox, {
+    className: "c-combo-box",
+    $open: open,
+    $loading: loading
+  }, /*#__PURE__*/React.createElement(StyledComboBoxWrapper, {
+    onClick: onOpen,
+    onFocus: onOpen,
+    onBlur: onClose,
+    ref: formRef,
+    $loading: loading
+  }, /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    ref: handleRef,
+    value: loading && loadingText ? loadingText : value,
+    onKeyDown: handleOnKeyDown,
+    onChange: handleOnChange,
+    placeholder: placeholder,
+    disabled: disabled
+  }), !disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
+    onMouseDown: handleMouseDown,
+    onClick: handleDeselect,
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
+    $open: open
+  })) : null), !disabled ? /*#__PURE__*/React.createElement(Popper, {
+    anchorEl: formRef.current,
+    open: open,
+    placement: "bottom",
+    style: {
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(RemoveScroll, {
+    noIsolation: true,
+    allowPinchZoom: true
+  }, /*#__PURE__*/React.createElement(StyledComboBoxList, {
+    $width: (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.clientWidth
+  }, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
+    inputEl: childNode,
+    selected: selected,
+    handleChange: handleChange,
+    renderOption: handleRenderOption,
+    options: options,
+    type: "single",
+    handleEmptyAction: emptyAction
+  }))))) : null);
+};
+ComboBox.displayName = "ComboBox";
+//# sourceMappingURL=ComboBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","current","zIndex","clientWidth","displayName"],"mappings":"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","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"],"file":"ComboBox.js"}

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

@@ -0,0 +1,47 @@
+import styled, { css } from "styled-components";
+import { CollapseExpandSingleIcon, CloseSmallIcon } from "../Icons/collection";
+import { Input } from "../Input/Input";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { FontStyle } from "../FontStyle";
+export 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";
+export 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;"]);
+export 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";
+export 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";
+export 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";
+export 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 props.$width + "px";
+});
+StyledComboBoxList.displayName = "StyledComboBoxList";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","BoxSizingStyle","FontStyle","StyledComboBox","div","props","$open","$loading","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","$width"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,EAAmCC,cAAnC,QAAyD,qBAAzD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,6LAOvBF,SAPuB,EAQvBD,cARuB,EAUvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,wCADA;AAAA,CAVuB,EAgBvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,sBADA;AAAA,CAhBuB,CAApB;AAuBPM,cAAc,CAACK,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMC,qBAAqB,GAAGb,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,0BADA;AAAA,CAN8B,CAA3B;AAaPY,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,GAAGb,GAAH,mCAAxB;AAKA,OAAO,IAAMc,4BAA4B,GAAGf,MAAM,CAACG,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCW,kBADqC,EAOrCD,qBAPqC,CAAlC;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEA,OAAO,IAAMI,sCAAsC,GAAGhB,MAAM,CAC1DE,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/CY,kBAH+C,EAQ/C,UAACL,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,6BADA;AAAA,CAR+C,CAA5C;AAePe,sCAAsC,CAACJ,WAAvC,GACE,wCADF;AAGA,OAAO,IAAMK,mBAAmB,GAAGjB,MAAM,CAACI,KAAD,CAAT;AAAA;AAAA;AAAA,mGAAzB;AAQPa,mBAAmB,CAACL,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMM,kBAAkB,GAAGlB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACC,KAAD;AAAA,SAAcA,KAAK,CAACU,MAApB;AAAA,CAPoB,CAAxB;AAUPD,kBAAkB,CAACN,WAAnB,GAAiC,oBAAjC","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"],"file":"Styles.js"}

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

@@ -0,0 +1,2 @@
+export * from "./ComboBox";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ComboBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from \"./ComboBox\";\n"],"file":"index.js"}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import classnames from "classnames";
+import { StyledCompleteCheckbox } from "./Styles";
+export 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__*/React.createElement(StyledCompleteCheckbox, {
+    onClick: onClick,
+    className: classnames("c-complete-checkbox", className),
+    $primary: primary,
+    $completed: completed,
+    $disabled: disabled,
+    $animation: !disabled && completed && animate
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 48 48",
+    className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12"
+  }, /*#__PURE__*/React.createElement("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__*/React.createElement("polyline", {
+    points: "19.5,24 22.5,27 28.5,21"
+  })));
+};
+CompleteCheckbox.displayName = "CompleteCheckbox";
+//# sourceMappingURL=CompleteCheckbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,sBAAT,QAAuC,UAAvC;AAmBA,OAAO,IAAMC,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,sBACE,oBAAC,sBAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,qBAAD,EAAwBO,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;AANxC,kBAQE;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,SAAS,EAAEI,kBAAkB,GAAGA,kBAAH,GAAwB;AAFvD,kBAIE;AAAM,IAAA,CAAC,EAAC;AAAR,IAJF,eAKE;AAAU,IAAA,MAAM,EAAC;AAAjB,IALF,CARF,CADF;AAkBD,CA3BM;AA6BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","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"],"file":"CompleteCheckbox.js"}

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

@@ -0,0 +1,37 @@
+import styled, { css, keyframes } from "styled-components";
+var burstScale = keyframes(["from{transform:scale(0);}to{transform:scale(1);}"]);
+var burstAnimation = keyframes(["from{stroke-dashoffset:0;}to{stroke-dashoffset:8;}"]);
+export var StyledCompleteCheckbox = styled.div.withConfig({
+  displayName: "Styles__StyledCompleteCheckbox",
+  componentId: "sc-1801dzg-0"
+})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", ""], {
+  "width": "1.5rem",
+  "height": "1.5rem",
+  "borderRadius": "9999px",
+  "borderWidth": "1px",
+  "borderStyle": "solid",
+  "position": "relative",
+  "cursor": "pointer"
+}, {
+  "position": "absolute",
+  "pointerEvents": "none"
+}, function (props) {
+  return props.$primary && css(["svg path{stroke:var(--color-primary);}"]);
+}, function (props) {
+  return props.$primary && css(["stroke:var(--color-theme-500);"]);
+}, function (props) {
+  return props.$completed && css(["box-shadow:inset 0 0 0 12px var(--color-primary);border-color:var(--color-primary);border-width:0px;", " &:hover{box-shadow:inset 0 0 0 12px #84cc7c;", "}svg polyline{stroke-dashoffset:0;stroke:#fff;", "}svg path{stroke-dasharray:8;stroke-dashoffset:0;transform-origin:24px 24px;}"], !props.$primary && css(["", " box-shadow:inset 0 0 0 12px #84cc7c;border-color:#84cc7c;"], {
+    "borderWidth": "1px",
+    "borderStyle": "solid"
+  }), props.$primary && css(["box-shadow:inset 0 0 0 12px var(--color-primary);"]), props.$primary && css(["stroke:var(--color-theme-100);"]));
+}, function (props) {
+  return !props.$completed && !props.$disabled && css(["&:hover{border:1px solid var(--color-primary);box-shadow:inset 0 0 0 2px var(--color-primary);border-width:0px;", " svg polyline{stroke-dashoffset:0;}}"], !props.$primary && css(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"]));
+}, function (props) {
+  return props.$animation && css(["svg path{animation:", " 0.6s ease 0s 1 normal,", " 0.4s ease 0.2s 1 normal;}"], burstScale, burstAnimation);
+}, function (props) {
+  return props.$disabled && css(["", " opacity:0.5;"], {
+    "cursor": "default"
+  });
+});
+StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["styled","css","keyframes","burstScale","burstAnimation","StyledCompleteCheckbox","div","props","$primary","$completed","$disabled","$animation","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AAUA,IAAMC,UAAU,GAAGD,SAAH,sDAAhB;AASA,IAAME,cAAc,GAAGF,SAAH,wDAApB;AASA,OAAO,IAAMG,sBAAsB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,gYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,4CADA;AAAA,CAnB+B,EAoC7B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,oCADA;AAAA,CApC6B,EA2C/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACE,UAAN,IACAR,GADA,+RAMI,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,qEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMM,KAAK,CAACC,QAAN,IACFP,GADE,uDAfN,EAwBMM,KAAK,CAACC,QAAN,IACFP,GADE,oCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACM,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,UAAP,IACA,CAACF,KAAK,CAACG,SADP,IAEAT,GAFA,8JAOM,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,kEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACI,UAAN,IACAV,GADA,mFAIiBE,UAJjB,EAKQC,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,IACAT,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,CAA5B;AAsHPI,sBAAsB,CAACO,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}

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

@@ -0,0 +1,2 @@
+export * from "./CompleteCheckbox";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAd","sourcesContent":["export * from \"./CompleteCheckbox\";\n"],"file":"index.js"}

package/dist/esm/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentDivider } from "../Dialog";
+import { Button } from "../Button/Button";
+import { Body2 } from "../Typography/Variants/Body2";
+export var ConfirmDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
+      onCancel = _ref.onCancel,
+      onConfirm = _ref.onConfirm,
+      className = _ref.className,
+      _ref$dialogTitle = _ref.dialogTitle,
+      dialogTitle = _ref$dialogTitle === void 0 ? "Discard changes?" : _ref$dialogTitle,
+      _ref$dialogContent = _ref.dialogContent,
+      dialogContent = _ref$dialogContent === void 0 ? "All unsaved changes will be lost." : _ref$dialogContent,
+      _ref$confirmBtnText = _ref.confirmBtnText,
+      confirmBtnText = _ref$confirmBtnText === void 0 ? "OK" : _ref$confirmBtnText,
+      _ref$cancelBtnText = _ref.cancelBtnText,
+      cancelBtnText = _ref$cancelBtnText === void 0 ? "Cancel" : _ref$cancelBtnText,
+      _ref$shouldShowCancel = _ref.shouldShowCancelButton,
+      shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    ref: ref,
+    open: open,
+    onClose: onCancel,
+    className: classnames("c-confirm-dialog", className)
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React.createElement(DialogContentDivider, null), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Body2, {
+    lineHeight: "loose",
+    color: "secondary"
+  }, dialogContent)), /*#__PURE__*/React.createElement(DialogContentDivider, null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    style: {
+      marginRight: "12px"
+    },
+    onClick: onConfirm
+  }, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    "data-action": "cancel",
+    onClick: onCancel,
+    type: "button"
+  }, cancelBtnText) : null));
+});
+ConfirmDialog.displayName = "ConfirmDialog";
+//# sourceMappingURL=ConfirmDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":["React","forwardRef","classnames","Dialog","DialogTitle","DialogContent","DialogActions","DialogContentDivider","Button","Body2","ConfirmDialog","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","marginRight","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,MADF,EAEEC,WAFF,EAGEC,aAHF,EAIEC,aAJF,EAKEC,oBALF,QAMO,WANP;AAOA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,KAAT,QAAsB,8BAAtB;AAcA,OAAO,IAAMC,aAAa,gBAAGT,UAAU,CACrC,gBAYEU,GAZF,EAaK;AAAA,uBAXDC,IAWC;AAAA,MAXDA,IAWC,0BAXM,KAWN;AAAA,MAVDC,QAUC,QAVDA,QAUC;AAAA,MATDC,SASC,QATDA,SASC;AAAA,MARDC,SAQC,QARDA,SAQC;AAAA,8BAPDC,WAOC;AAAA,MAPDA,WAOC,iCAPa,kBAOb;AAAA,gCANDC,aAMC;AAAA,MANDA,aAMC,mCANe,mCAMf;AAAA,iCALDC,cAKC;AAAA,MALDA,cAKC,oCALgB,IAKhB;AAAA,gCAJDC,aAIC;AAAA,MAJDA,aAIC,mCAJe,QAIf;AAAA,mCAHDC,sBAGC;AAAA,MAHDA,sBAGC,sCAHwB,IAGxB;AACH,sBACE,oBAAC,MAAD;AACE,IAAA,GAAG,EAAET,GADP;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,OAAO,EAAEC,QAHX;AAIE,IAAA,SAAS,EAAEX,UAAU,CAAC,kBAAD,EAAqBa,SAArB;AAJvB,kBAME,oBAAC,WAAD,QAAcC,WAAd,CANF,eAOE,oBAAC,oBAAD,OAPF,eAQE,oBAAC,aAAD,qBACE,oBAAC,KAAD;AAAO,IAAA,UAAU,EAAC,OAAlB;AAA0B,IAAA,KAAK,EAAC;AAAhC,KACGC,aADH,CADF,CARF,eAaE,oBAAC,oBAAD,OAbF,eAcE,oBAAC,aAAD,qBACE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAC,SADV;AAEE,IAAA,KAAK,EAAE;AAAEI,MAAAA,WAAW,EAAE;AAAf,KAFT;AAGE,IAAA,OAAO,EAAEP;AAHX,KAKGI,cALH,CADF,EAQGE,sBAAsB,gBACrB,oBAAC,MAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,mBAAY,QAFd;AAGE,IAAA,OAAO,EAAEP,QAHX;AAIE,IAAA,IAAI,EAAC;AAJP,KAMGM,aANH,CADqB,GASnB,IAjBN,CAdF,CADF;AAoCD,CAnDoC,CAAhC;AAsDPT,aAAa,CAACY,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport {\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogActions,\n  DialogContentDivider,\n} from \"../Dialog\";\nimport { Button } from \"../Button/Button\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface IConfirmDialog {\n  open?: boolean;\n  onCancel?: () => void;\n  onConfirm?: () => void;\n  className?: string;\n  dialogTitle?: string;\n  dialogContent?: string;\n  confirmBtnText?: string;\n  cancelBtnText?: string;\n  shouldShowCancelButton?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, IConfirmDialog>(\n  (\n    {\n      open = false,\n      onCancel,\n      onConfirm,\n      className,\n      dialogTitle = \"Discard changes?\",\n      dialogContent = \"All unsaved changes will be lost.\",\n      confirmBtnText = \"OK\",\n      cancelBtnText = \"Cancel\",\n      shouldShowCancelButton = true,\n    },\n    ref\n  ) => {\n    return (\n      <Dialog\n        ref={ref}\n        open={open}\n        onClose={onCancel}\n        className={classnames(\"c-confirm-dialog\", className)}\n      >\n        <DialogTitle>{dialogTitle}</DialogTitle>\n        <DialogContentDivider />\n        <DialogContent>\n          <Body2 lineHeight=\"loose\" color=\"secondary\">\n            {dialogContent}\n          </Body2>\n        </DialogContent>\n        <DialogContentDivider />\n        <DialogActions>\n          <Button\n            variant=\"primary\"\n            style={{ marginRight: \"12px\" }}\n            onClick={onConfirm}\n          >\n            {confirmBtnText}\n          </Button>\n          {shouldShowCancelButton ? (\n            <Button\n              variant=\"secondary\"\n              data-action=\"cancel\"\n              onClick={onCancel}\n              type=\"button\"\n            >\n              {cancelBtnText}\n            </Button>\n          ) : null}\n        </DialogActions>\n      </Dialog>\n    );\n  }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"file":"ConfirmDialog.js"}

package/dist/esm/components/ConfirmDialog/index.js

@@ -0,0 +1,2 @@
+export * from "./ConfirmDialog";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ConfirmDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ConfirmDialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from \"./ConfirmDialog\";\n"],"file":"index.js"}

package/dist/esm/components/CounterButton/CounterButton.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { Tooltip } from "../Tooltip/Tooltip";
+import CloseSmallIcon from "../Icons/collection/CloseSmall";
+import { StyledCounterButton, StyledCounterButtonCounter, StyledCounterButtonLabel, StyledCounterButtonReset } from "./Styles";
+export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+      icon = _ref.icon,
+      active = _ref.active,
+      _ref$counter = _ref.counter,
+      counter = _ref$counter === void 0 ? 0 : _ref$counter,
+      tooltipText = _ref.tooltipText,
+      onClearAll = _ref.onClearAll,
+      className = _ref.className,
+      args = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("tw-flex ac-font box-sizing", className)
+  }, /*#__PURE__*/React.createElement(StyledCounterButton, _extends({
+    className: classNames("c-counter-button", {
+      "c-counter-button__selected": counter
+    })
+  }, args, {
+    ref: ref,
+    variant: "text gray",
+    $active: counter > 0 || active,
+    $selected: counter > 0
+  }), icon && /*#__PURE__*/React.cloneElement(icon, {
+    className: classNames("c-counter-button__icon")
+  }), label && /*#__PURE__*/React.createElement(StyledCounterButtonLabel, {
+    color: "secondary",
+    weight: "medium",
+    className: "c-counter-button__label",
+    $active: active
+  }, label), counter > 0 ? /*#__PURE__*/React.createElement(StyledCounterButtonCounter, {
+    className: "c-counter-button__counter"
+  }, counter) : null), counter > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: "" + tooltipText,
+    popperTooltipClassName: "z-index-1300"
+  }, /*#__PURE__*/React.createElement(StyledCounterButtonReset, {
+    variant: "text colored",
+    className: "c-counter-button__reset",
+    onClick: onClearAll
+  }, /*#__PURE__*/React.createElement(CloseSmallIcon, null))) : null);
+});
+CounterButton.displayName = "CounterButton";
+//# sourceMappingURL=CounterButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledCounterButton","StyledCounterButtonCounter","StyledCounterButtonLabel","StyledCounterButtonReset","CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","cloneElement","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAgD,OAAhD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,OAAOC,cAAP,MAA2B,gCAA3B;AACA,SACEC,mBADF,EAEEC,0BAFF,EAGEC,wBAHF,EAIEC,wBAJF,QAKO,UALP;AAwBA,OAAO,IAAMC,aAAa,gBAAGR,UAAU,CACrC,gBAWES,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAEhB,UAAU,CAAC,4BAAD,EAA+Be,SAA/B;AAA1B,kBACE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAEf,UAAU,CAAC,kBAAD,EAAqB;AACxC,oCAA8BY;AADU,KAArB;AADvB,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHZ,KAAK,CAACmB,YAAN,CAAmBP,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAEf,UAAU,CAAC,wBAAD;AADE,GAAzB,CAXJ,EAcGS,KAAK,iBACJ,oBAAC,wBAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEE;AAJX,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,oBAAC,0BAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,oBAAC,OAAD;AACE,IAAA,KAAK,OAAKC,WADZ;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,oBAAC,wBAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,oBAAC,cAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9DoC,CAAhC;AAiEPP,aAAa,CAACW,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\ninterface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -0,0 +1,34 @@
+import styled, { css } from "styled-components";
+import { Body2 } from "../Typography/Variants/Body2";
+import { Button } from "../Button/Button";
+export var StyledCounterButton = styled(Button).withConfig({
+  displayName: "Styles__StyledCounterButton",
+  componentId: "sc-1ecrcba-0"
+})(["", " ", ""], function (props) {
+  return props.$active && css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
+}, function (props) {
+  return props.$selected && css(["border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--color-primary-200);"]);
+});
+StyledCounterButton.displayName = "StyledCounterButton";
+export var StyledCounterButtonCounter = styled.div.withConfig({
+  displayName: "Styles__StyledCounterButtonCounter",
+  componentId: "sc-1ecrcba-1"
+})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
+StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
+export var StyledCounterButtonReset = styled(Button).withConfig({
+  displayName: "Styles__StyledCounterButtonReset",
+  componentId: "sc-1ecrcba-2"
+})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
+StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
+export var StyledCounterButtonLabel = styled(Body2).withConfig({
+  displayName: "Styles__StyledCounterButtonLabel",
+  componentId: "sc-1ecrcba-3"
+})(["", " ", ":hover &{", "}", ""], {
+  "pointerEvents": "none"
+}, StyledCounterButton, function (props) {
+  return !props.$active && css(["color:var(--color-theme-900);"]);
+}, function (props) {
+  return props.$active && css(["color:var(--color-primary);"]);
+});
+StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["styled","css","Body2","Button","StyledCounterButton","props","$active","$selected","displayName","StyledCounterButtonCounter","div","StyledCounterButtonReset","StyledCounterButtonLabel"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,KAAT,QAAsB,8BAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAOA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,kBAC5B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,gGADA;AAAA,CAD4B,EAe5B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,SAAN,IACAN,GADA,uGADA;AAAA,CAf4B,CAAzB;AAwBPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,0BAA0B,GAAGT,MAAM,CAACU,GAAV;AAAA;AAAA;AAAA,6MAAhC;AAaPD,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMG,wBAAwB,GAAGX,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,+MAA9B;AAYPQ,wBAAwB,CAACH,WAAzB,GAAuC,0BAAvC;AAEA,OAAO,IAAMI,wBAAwB,GAAGZ,MAAM,CAACE,KAAD,CAAT;AAAA;AAAA;AAAA,oCAC/B;AAAA;AAAA,CAD+B,EAGjCE,mBAHiC,EAI/B,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,IACAL,GADA,mCADA;AAAA,CAJ+B,EAWjC,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,iCADA;AAAA,CAXiC,CAA9B;AAkBPW,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover & {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}

package/dist/esm/components/CounterButton/index.js

@@ -0,0 +1,2 @@
+export * from "./CounterButton";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/CounterButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CounterButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from \"./CounterButton\";\n"],"file":"index.js"}

package/dist/esm/components/DatePicker/ClassNames.js

@@ -0,0 +1,31 @@
+export var customClassNames = {
+  container: "c-DayPicker",
+  wrapper: "c-DayPicker-wrapper",
+  interactionDisabled: "c-DayPicker--interactionDisabled",
+  months: "c-DayPicker-Months",
+  month: "c-DayPicker-Month",
+  navBar: "c-DayPicker-NavBar",
+  navButtonPrev: "c-DayPicker-NavButton DayPicker-NavButton--prev",
+  navButtonNext: "c-DayPicker-NavButton DayPicker-NavButton--next",
+  navButtonInteractionDisabled: "c-DayPicker-NavButton--interactionDisabled",
+  caption: "c-DayPicker-Caption",
+  weekdays: "c-DayPicker-Weekdays",
+  weekdaysRow: "c-DayPicker-WeekdaysRow",
+  weekday: "c-DayPicker-Weekday",
+  body: "c-DayPicker-Body",
+  week: "c-DayPicker-Week",
+  weekNumber: "c-DayPicker-WeekNumber",
+  day: "c-DayPicker-Day",
+  footer: "c-DayPicker-Footer",
+  todayButton: "c-DayPicker-TodayButton",
+  // default modifiers
+  today: "c-DayPicker-Day--today",
+  selected: "c-DayPicker-Day--selected",
+  disabled: "c-DayPicker-Day--disabled",
+  outside: "c-DayPicker-Day--outside",
+  // custom modifiers
+  weekend: "c-DayPicker-Day--weekend",
+  userAvailability: "c-DayPicker-Day--userAvailability",
+  nonWorkingDay: "c-DayPicker-Day--nonWorkingDay"
+};
+//# sourceMappingURL=ClassNames.js.map

package/dist/esm/components/DatePicker/ClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/DatePicker/ClassNames.tsx"],"names":["customClassNames","container","wrapper","interactionDisabled","months","month","navBar","navButtonPrev","navButtonNext","navButtonInteractionDisabled","caption","weekdays","weekdaysRow","weekday","body","week","weekNumber","day","footer","todayButton","today","selected","disabled","outside","weekend","userAvailability","nonWorkingDay"],"mappings":"AAAA,OAAO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,SAAS,EAAE,aADmB;AAE9BC,EAAAA,OAAO,EAAE,qBAFqB;AAG9BC,EAAAA,mBAAmB,EAAE,kCAHS;AAI9BC,EAAAA,MAAM,EAAE,oBAJsB;AAK9BC,EAAAA,KAAK,EAAE,mBALuB;AAO9BC,EAAAA,MAAM,EAAE,oBAPsB;AAQ9BC,EAAAA,aAAa,EAAE,iDARe;AAS9BC,EAAAA,aAAa,EAAE,iDATe;AAU9BC,EAAAA,4BAA4B,EAAE,4CAVA;AAY9BC,EAAAA,OAAO,EAAE,qBAZqB;AAa9BC,EAAAA,QAAQ,EAAE,sBAboB;AAc9BC,EAAAA,WAAW,EAAE,yBAdiB;AAe9BC,EAAAA,OAAO,EAAE,qBAfqB;AAgB9BC,EAAAA,IAAI,EAAE,kBAhBwB;AAiB9BC,EAAAA,IAAI,EAAE,kBAjBwB;AAkB9BC,EAAAA,UAAU,EAAE,wBAlBkB;AAmB9BC,EAAAA,GAAG,EAAE,iBAnByB;AAoB9BC,EAAAA,MAAM,EAAE,oBApBsB;AAqB9BC,EAAAA,WAAW,EAAE,yBArBiB;AAuB9B;AACAC,EAAAA,KAAK,EAAE,wBAxBuB;AAyB9BC,EAAAA,QAAQ,EAAE,2BAzBoB;AA0B9BC,EAAAA,QAAQ,EAAE,2BA1BoB;AA2B9BC,EAAAA,OAAO,EAAE,0BA3BqB;AA6B9B;AACAC,EAAAA,OAAO,EAAE,0BA9BqB;AA+B9BC,EAAAA,gBAAgB,EAAE,mCA/BY;AAgC9BC,EAAAA,aAAa,EAAE;AAhCe,CAAzB","sourcesContent":["export const customClassNames = {\n  container: \"c-DayPicker\",\n  wrapper: \"c-DayPicker-wrapper\",\n  interactionDisabled: \"c-DayPicker--interactionDisabled\",\n  months: \"c-DayPicker-Months\",\n  month: \"c-DayPicker-Month\",\n\n  navBar: \"c-DayPicker-NavBar\",\n  navButtonPrev: \"c-DayPicker-NavButton DayPicker-NavButton--prev\",\n  navButtonNext: \"c-DayPicker-NavButton DayPicker-NavButton--next\",\n  navButtonInteractionDisabled: \"c-DayPicker-NavButton--interactionDisabled\",\n\n  caption: \"c-DayPicker-Caption\",\n  weekdays: \"c-DayPicker-Weekdays\",\n  weekdaysRow: \"c-DayPicker-WeekdaysRow\",\n  weekday: \"c-DayPicker-Weekday\",\n  body: \"c-DayPicker-Body\",\n  week: \"c-DayPicker-Week\",\n  weekNumber: \"c-DayPicker-WeekNumber\",\n  day: \"c-DayPicker-Day\",\n  footer: \"c-DayPicker-Footer\",\n  todayButton: \"c-DayPicker-TodayButton\",\n\n  // default modifiers\n  today: \"c-DayPicker-Day--today\",\n  selected: \"c-DayPicker-Day--selected\",\n  disabled: \"c-DayPicker-Day--disabled\",\n  outside: \"c-DayPicker-Day--outside\",\n\n  // custom modifiers\n  weekend: \"c-DayPicker-Day--weekend\",\n  userAvailability: \"c-DayPicker-Day--userAvailability\",\n  nonWorkingDay: \"c-DayPicker-Day--nonWorkingDay\",\n};\n"],"file":"ClassNames.js"}