@activecollab/components 1.0.6 → 1.0.10

package/dist/esm/components/Menu/Menu.js

@@ -0,0 +1,97 @@
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import classnames from "classnames";
+import { Popper } from "../Popper"; // import { Tooltip } from "../Tooltip";
+
+import useForkRef from "../../utils/useForkRef";
+import { Overlay } from "../Overlay";
+import { Window } from "../Window";
+import { MenuContextProvider } from "./context";
+import { StyledMenu } from "./Styles";
+export var Menu = function Menu(_ref) {
+  var children = _ref.children,
+      _ref$disableFocusLock = _ref.disableFocusLock,
+      disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
+      onMenuClick = _ref.onMenuClick,
+      _ref$handleScroll = _ref.handleScroll,
+      handleScroll = _ref$handleScroll === void 0 ? true : _ref$handleScroll,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "normal" : _ref$mode,
+      _ref$open = _ref.open,
+      defaultOpen = _ref$open === void 0 ? false : _ref$open,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      onBeforeClose = _ref.onBeforeClose,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "bottom-start" : _ref$position,
+      target = _ref.target,
+      menuClassName = _ref.menuClassName,
+      popperClassName = _ref.popperClassName,
+      backgroundElementClass = _ref.backgroundElementClass,
+      _ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
+      windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely;
+
+  var _useState = useState(defaultOpen),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(),
+      childNode = _useState2[0],
+      setChildNode = _useState2[1];
+
+  var elementRef = useRef(null);
+  useEffect(function () {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  var handleRefRef = useForkRef(target ? target.ref : undefined, setChildNode);
+  var handleRef = useForkRef(handleRefRef, elementRef);
+  var handleOpen = useCallback(function (event) {
+    event && event.preventDefault();
+    setOpen(true);
+    typeof onOpen === "function" && onOpen();
+  }, [onOpen]);
+  var handleClose = useCallback(function () {
+    if (typeof onBeforeClose === "function" && !onBeforeClose()) {
+      return;
+    }
+
+    setOpen(false);
+    typeof onClose === "function" && onClose();
+  }, [onClose, onBeforeClose]);
+  var childProps = {
+    forceClose: handleClose
+  };
+  var targetProps = {
+    open: open,
+    ref: handleRef,
+    onClick: handleOpen
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, target && /*#__PURE__*/React.cloneElement(target, targetProps), open ? /*#__PURE__*/React.createElement(Window, {
+    onClose: handleClose,
+    disableScrollLock: !handleScroll,
+    disableFocusLock: disableFocusLock,
+    style: {
+      position: windowAbsolutelyPositioned ? "absolute" : "fixed"
+    }
+  }, /*#__PURE__*/React.createElement(Overlay, {
+    className: backgroundElementClass,
+    onClick: handleClose,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement(Popper, {
+    anchorEl: childNode,
+    open: childNode ? open : false,
+    placement: position,
+    className: popperClassName,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(StyledMenu, {
+    className: classnames("c-simple-menu__paper", "c-simple-menu__" + mode, menuClassName),
+    $mode: mode,
+    onMouseDown: onMenuClick
+  }, /*#__PURE__*/React.createElement(MenuContextProvider, {
+    value: {
+      open: open,
+      setOpen: setOpen
+    }
+  }, typeof children === "function" ? children(childProps) : children)))) : null);
+};
+Menu.displayName = "Menu";
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Menu/Menu.tsx"],"names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","handleClose","childProps","forceClose","targetProps","onClick","cloneElement","displayName"],"mappings":"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","sourcesContent":["import React, {\n  useRef,\n  FC,\n  ReactNode,\n  MouseEvent,\n  useState,\n  useCallback,\n  useEffect,\n  ReactElement,\n  Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\n// import { Tooltip } from \"../Tooltip\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n  /** Menu content */\n  children: ReactNode;\n  /** On menu element click */\n  onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Handle scroll bar */\n  handleScroll?: boolean;\n  /** Disable Focus Lock */\n  disableFocusLock?: boolean;\n  /** Menu width mode */\n  mode?: MenuMode;\n  /** Should menu be open when it's mounted */\n  open?: boolean;\n  /** Callback triggered when modal has been opened */\n  onOpen?: () => void;\n  /** Callback triggered when modal has been closed */\n  onClose?: () => void;\n  /** Before close callback */\n  onBeforeClose?: () => boolean;\n  /** Position Menu */\n  position?: Placement;\n  /** Target element */\n  target?: ElementWithRef<Element>;\n  /** Menu classes */\n  menuClassName?: string;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n  backgroundElementClass?: string;\n  /** Should Window be positioned absolutely */\n  windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n  children,\n  disableFocusLock = false,\n  onMenuClick,\n  handleScroll = true,\n  mode = \"normal\",\n  open: defaultOpen = false,\n  onOpen,\n  onClose,\n  onBeforeClose,\n  position = \"bottom-start\",\n  target,\n  menuClassName,\n  popperClassName,\n  backgroundElementClass,\n  windowAbsolutelyPositioned = false,\n}) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const [childNode, setChildNode] = useState<Element | null>();\n  const elementRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    setOpen(defaultOpen);\n  }, [defaultOpen]);\n\n  const handleRefRef = useForkRef(\n    target ? target.ref : undefined,\n    setChildNode\n  );\n  const handleRef = useForkRef(handleRefRef, elementRef);\n\n  const handleOpen = useCallback(\n    (event: Pick<MouseEvent<Element>, \"preventDefault\">) => {\n      event && event.preventDefault();\n      setOpen(true);\n      typeof onOpen === \"function\" && onOpen();\n    },\n    [onOpen]\n  );\n\n  const handleClose = useCallback(() => {\n    if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n      return;\n    }\n    setOpen(false);\n    typeof onClose === \"function\" && onClose();\n  }, [onClose, onBeforeClose]);\n\n  const childProps = {\n    forceClose: handleClose,\n  };\n\n  const targetProps = {\n    open,\n    ref: handleRef,\n    onClick: handleOpen,\n  };\n\n  return (\n    <>\n      {target && React.cloneElement(target, targetProps)}\n      {open ? (\n        <Window\n          onClose={handleClose}\n          disableScrollLock={!handleScroll}\n          disableFocusLock={disableFocusLock}\n          style={{\n            position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n          }}\n        >\n          <Overlay\n            className={backgroundElementClass}\n            onClick={handleClose}\n            tabIndex={-1}\n          />\n          <Popper\n            anchorEl={childNode}\n            open={childNode ? open : false}\n            placement={position}\n            className={popperClassName}\n            tabIndex={-1}\n          >\n            <StyledMenu\n              className={classnames(\n                \"c-simple-menu__paper\",\n                `c-simple-menu__${mode}`,\n                menuClassName\n              )}\n              $mode={mode}\n              onMouseDown={onMenuClick}\n            >\n              <MenuContextProvider value={{ open, setOpen }}>\n                {typeof children === \"function\"\n                  ? children(childProps)\n                  : children}\n              </MenuContextProvider>\n            </StyledMenu>\n          </Popper>\n        </Window>\n      ) : null}\n    </>\n  );\n};\n\nMenu.displayName = \"Menu\";\n"],"file":"Menu.js"}

package/dist/esm/components/Menu/MenuFooter.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledMenuFooter } from "./Styles";
+export var MenuFooter = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledMenuFooter, _extends({}, props, {
+    className: classnames("c-menu-footer", className),
+    ref: ref
+  }), children);
+});
+MenuFooter.displayName = "MenuFooter";
+//# sourceMappingURL=MenuFooter.js.map

package/dist/esm/components/Menu/MenuFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Menu/MenuFooter.tsx"],"names":["React","forwardRef","classnames","StyledMenuFooter","MenuFooter","ref","children","className","props","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,UADF,QAMO,OANP;AAOA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAOA,OAAO,IAAMC,UAAU,gBAAGH,UAAU,CAClC,gBAMEI,GANF,EAOK;AAAA,MALDC,QAKC,QALDA,QAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,oBAAC,gBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,eAAD,EAAkBK,SAAlB,CAFvB;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGC,QALH,CADF;AASD,CAlBiC,CAA7B;AAqBPF,UAAU,CAACK,WAAX,GAAyB,YAAzB","sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  ReactNodeArray,\n  Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledMenuFooter } from \"./Styles\";\n\ninterface IMenuFooter {\n  className?: string;\n  children?: ReactNode | ReactNodeArray;\n}\n\nexport const MenuFooter = forwardRef(\n  (\n    {\n      children,\n      className,\n      ...props\n    }: IMenuFooter & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuFooter\n        {...props}\n        className={classnames(\"c-menu-footer\", className)}\n        ref={ref}\n      >\n        {children}\n      </StyledMenuFooter>\n    );\n  }\n);\n\nMenuFooter.displayName = \"MenuFooter\";\n"],"file":"MenuFooter.js"}

package/dist/esm/components/Menu/MenuHeader.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["title", "className", "leftElement", "rightElement"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { Typography } from "../Typography/Typography";
+import { StyledMenuHeader } from "./Styles";
+export var MenuHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var title = _ref.title,
+      className = _ref.className,
+      leftElement = _ref.leftElement,
+      rightElement = _ref.rightElement,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledMenuHeader, _extends({}, props, {
+    className: classnames("c-menu-header", className),
+    ref: ref
+  }), leftElement || /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: "24px"
+    }
+  }, "\xA0"), /*#__PURE__*/React.createElement(Typography, {
+    variant: "Body 2",
+    color: "secondary",
+    weight: "bold",
+    overflow: "truncate",
+    className: "tw-mx-1"
+  }, title), rightElement || /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: "24px"
+    }
+  }, "\xA0"));
+});
+MenuHeader.displayName = "MenuHeader";
+//# sourceMappingURL=MenuHeader.js.map

package/dist/esm/components/Menu/MenuHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["React","forwardRef","classnames","Typography","StyledMenuHeader","MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkE,OAAlE;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,gBAAT,QAAiC,UAAjC;AASA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,gBAQEK,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,oBAAC,gBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAET,UAAU,CAAC,eAAD,EAAkBM,SAAlB,CAFvB;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,oBAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,SAAS,EAAC;AALZ,KAOGL,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BiC,CAA7B;AAiCPP,UAAU,CAACQ,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          className=\"tw-mx-1\"\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}

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

@@ -0,0 +1,46 @@
+import styled, { css } from "styled-components";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { Bubble } from "../Bubble";
+import { FontStyle } from "../FontStyle";
+export var StyledMenu = styled(Bubble).withConfig({
+  displayName: "Styles__StyledMenu",
+  componentId: "sc-8fhkp-0"
+})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
+  "backgroundColor": "var(--page-paper-main)",
+  "borderColor": "var(--border-primary)",
+  "marginTop": "0.25rem",
+  "marginBottom": "0.25rem",
+  "overflow": "auto"
+}, FontStyle, BoxSizingStyle, function (props) {
+  return props.$mode === "normal" && css(["width:260px;"]);
+}, function (props) {
+  return props.$mode === "wider" && css(["width:350px;"]);
+}, function (props) {
+  return props.$mode === "tiny" && css(["width:180px;"]);
+});
+StyledMenu.displayName = "StyledMenu";
+export var StyledMenuFooter = styled.div.withConfig({
+  displayName: "Styles__StyledMenuFooter",
+  componentId: "sc-8fhkp-1"
+})(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;"], {
+  "display": "flex",
+  "paddingLeft": "0.5rem",
+  "paddingRight": "0.5rem",
+  "paddingTop": "0.25rem",
+  "paddingBottom": "0.25rem"
+});
+StyledMenuFooter.displayName = "StyledMenuFooter";
+export var StyledMenuHeader = styled.div.withConfig({
+  displayName: "Styles__StyledMenuHeader",
+  componentId: "sc-8fhkp-2"
+})(["", " border-bottom:1px solid var(--border-primary);height:32px;"], {
+  "display": "flex",
+  "alignItems": "center",
+  "justifyContent": "space-between",
+  "paddingLeft": "0.5rem",
+  "paddingRight": "0.5rem",
+  "paddingTop": "0.25rem",
+  "paddingBottom": "0.25rem"
+});
+StyledMenuHeader.displayName = "StyledMenuHeader";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Menu/Styles.ts"],"names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","props","$mode","displayName","StyledMenuFooter","div","StyledMenuHeader"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,UAAU,GAAGL,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,kGACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADiB,EAGnBC,SAHmB,EAInBF,cAJmB,EAYnB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,QAAhB,IACAN,GADA,kBADA;AAAA,CAZmB,EAkBnB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,kBADA;AAAA,CAlBmB,EAwBnB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,MAAhB,IACAN,GADA,kBADA;AAAA,CAxBmB,CAAhB;AA8BPI,UAAU,CAACG,WAAX,GAAyB,YAAzB;AAEA,OAAO,IAAMC,gBAAgB,GAAGT,MAAM,CAACU,GAAV;AAAA;AAAA;AAAA,qGACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADuB,CAAtB;AAQPD,gBAAgB,CAACD,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMG,gBAAgB,GAAGX,MAAM,CAACU,GAAV;AAAA;AAAA;AAAA,wEACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADuB,CAAtB;AAMPC,gBAAgB,CAACH,WAAjB,GAA+B,kBAA/B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n  ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  color: var(--color-theme-700);\n  a:focus,\n  a:active {\n    outline: none;\n  }\n\n  ${(props) =>\n    props.$mode === \"normal\" &&\n    css`\n      width: 260px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"wider\" &&\n    css`\n      width: 350px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"tiny\" &&\n    css`\n      width: 180px;\n    `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n  ${tw`tw-flex tw-px-2 tw-py-1`}\n\n  display: flex;\n  border-top: 1px solid var(--border-primary);\n  height: 32px;\n  align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n  ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n  border-bottom: 1px solid var(--border-primary);\n  height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"file":"Styles.js"}

package/dist/esm/components/Menu/context/index.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+var MenuContext = /*#__PURE__*/createContext({});
+export var MenuContextProvider = MenuContext.Provider;
+export var MenuContextConsumer = MenuContext.Consumer;
+export var useMenuContext = function useMenuContext() {
+  return useContext(MenuContext);
+};
+export default MenuContext;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Menu/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Menu/context/index.ts"],"names":["createContext","useContext","MenuContext","MenuContextProvider","Provider","MenuContextConsumer","Consumer","useMenuContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAOA,IAAMC,WAAW,gBAAGF,aAAa,CAAe,EAAf,CAAjC;AAEA,OAAO,IAAMG,mBAAmB,GAAGD,WAAW,CAACE,QAAxC;AACP,OAAO,IAAMC,mBAAmB,GAAGH,WAAW,CAACI,QAAxC;AAEP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SAAoBN,UAAU,CAACC,WAAD,CAA9B;AAAA,CAAvB;AAEP,eAAeA,WAAf","sourcesContent":["import { createContext, useContext } from \"react\";\n\ninterface IMenuContext {\n  open?: boolean;\n  setOpen?: (open: boolean) => void;\n}\n\nconst MenuContext = createContext<IMenuContext>({});\n\nexport const MenuContextProvider = MenuContext.Provider;\nexport const MenuContextConsumer = MenuContext.Consumer;\n\nexport const useMenuContext = (): IMenuContext => useContext(MenuContext);\n\nexport default MenuContext;\n"],"file":"index.js"}

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

@@ -0,0 +1,6 @@
+import { useMenuContext } from "./context";
+export * from "./Menu";
+export * from "./MenuHeader";
+export * from "./MenuFooter";
+export { useMenuContext };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Menu/index.ts"],"names":["useMenuContext"],"mappings":"AAAA,SAASA,cAAT,QAA+B,WAA/B;AAEA,cAAc,QAAd;AACA,cAAc,cAAd;AACA,cAAc,cAAd;AAEA,SAASA,cAAT","sourcesContent":["import { useMenuContext } from \"./context\";\n\nexport * from \"./Menu\";\nexport * from \"./MenuHeader\";\nexport * from \"./MenuFooter\";\n\nexport { useMenuContext };\n"],"file":"index.js"}

package/dist/esm/components/MenuSelector/MenuSelector.js

@@ -0,0 +1,43 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { Input } from "../Input";
+import { StyledMenuSelector, StyledMenuSelectorBack, StyledMenuSelectorDots, StyledMenuSelectorInner } from "./Styles";
+export var MenuSelector = function MenuSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+      children = _ref.children,
+      placeholder = _ref.placeholder,
+      onChange = _ref.onChange,
+      onBack = _ref.onBack,
+      onEdit = _ref.onEdit,
+      _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+      className = _ref.className,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete;
+  var handleChange = useCallback(function (e) {
+    if (typeof onChange === "function") {
+      onChange(e.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(StyledMenuSelector, {
+    className: classNames("c-menu-selector", className)
+  }, /*#__PURE__*/React.createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorBack, {
+    onClick: onBack,
+    width: "16px",
+    height: "16px"
+  }) : null, /*#__PURE__*/React.createElement(Input, {
+    onChange: handleChange,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    defaultValue: defaultValue,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    autoComplete: autoComplete ? "on" : "off"
+  }), typeof onEdit === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorDots, {
+    onClick: onEdit
+  }) : null), children);
+};
+MenuSelector.displayName = "MenuSelector";
+//# sourceMappingURL=MenuSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MenuSelector/MenuSelector.tsx"],"names":["React","useCallback","classNames","Input","StyledMenuSelector","StyledMenuSelectorBack","StyledMenuSelectorDots","StyledMenuSelectorInner","MenuSelector","defaultValue","children","placeholder","onChange","onBack","onEdit","autoFocus","className","onFocus","onBlur","autoComplete","handleChange","e","target","value","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgCC,WAAhC,QAAgE,OAAhE;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SACEC,kBADF,EAEEC,sBAFF,EAGEC,sBAHF,EAIEC,uBAJF,QAKO,UALP;AA8BA,OAAO,IAAMC,YAA+B,GAAG,SAAlCA,YAAkC,OAYzC;AAAA,MAXJC,YAWI,QAXJA,YAWI;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,4BALJC,SAKI;AAAA,MALJA,SAKI,+BALQ,KAKR;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,+BADJC,YACI;AAAA,MADJA,YACI,kCADW,KACX;AACJ,MAAMC,YAAY,GAAGnB,WAAW,CAC9B,UAACoB,CAAD,EAAsC;AACpC,QAAI,OAAOT,QAAP,KAAoB,UAAxB,EAAoC;AAClCA,MAAAA,QAAQ,CAACS,CAAC,CAACC,MAAF,CAASC,KAAV,CAAR;AACD;AACF,GAL6B,EAM9B,CAACX,QAAD,CAN8B,CAAhC;AASA,sBACE,oBAAC,kBAAD;AAAoB,IAAA,SAAS,EAAEV,UAAU,CAAC,iBAAD,EAAoBc,SAApB;AAAzC,kBACE,oBAAC,uBAAD,QACG,OAAOH,MAAP,KAAkB,UAAlB,gBACC,oBAAC,sBAAD;AAAwB,IAAA,OAAO,EAAEA,MAAjC;AAAyC,IAAA,KAAK,EAAC,MAA/C;AAAsD,IAAA,MAAM,EAAC;AAA7D,IADD,GAEG,IAHN,eAIE,oBAAC,KAAD;AACE,IAAA,QAAQ,EAAEO,YADZ;AAEE,IAAA,WAAW,EAAET,WAFf;AAGE,IAAA,SAAS,EAAEI,SAHb;AAIE,IAAA,YAAY,EAAEN,YAJhB;AAKE,IAAA,OAAO,EAAEQ,OALX;AAME,IAAA,MAAM,EAAEC,MANV;AAOE,IAAA,YAAY,EAAEC,YAAY,GAAG,IAAH,GAAU;AAPtC,IAJF,EAaG,OAAOL,MAAP,KAAkB,UAAlB,gBACC,oBAAC,sBAAD;AAAwB,IAAA,OAAO,EAAEA;AAAjC,IADD,GAEG,IAfN,CADF,EAkBGJ,QAlBH,CADF;AAsBD,CA5CM;AA8CPF,YAAY,CAACgB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, FocusEvent, useCallback, ChangeEvent } from \"react\";\nimport classNames from \"classnames\";\nimport { Input } from \"../Input\";\nimport {\n  StyledMenuSelector,\n  StyledMenuSelectorBack,\n  StyledMenuSelectorDots,\n  StyledMenuSelectorInner,\n} from \"./Styles\";\n\ninterface IMenuSelector {\n  /** Initial value on mount */\n  defaultValue?: string;\n  /** Input placeholder */\n  placeholder?: string;\n  /** Execute callback when input has been changed */\n  onChange?: (value: string) => void;\n  /** Execute callback when click on back button */\n  onBack?: () => void;\n  /** Execute callback when click on edit button */\n  onEdit?: () => void;\n  /** Auto focus on mount */\n  autoFocus?: boolean;\n  /** Applies passed classes */\n  className?: string;\n  /** Input focus event callback */\n  onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Input focus event callback */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Set auto complete option on/off */\n  autoComplete?: boolean;\n}\n\nexport const MenuSelector: FC<IMenuSelector> = ({\n  defaultValue,\n  children,\n  placeholder,\n  onChange,\n  onBack,\n  onEdit,\n  autoFocus = false,\n  className,\n  onFocus,\n  onBlur,\n  autoComplete = false,\n}) => {\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (typeof onChange === \"function\") {\n        onChange(e.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  return (\n    <StyledMenuSelector className={classNames(\"c-menu-selector\", className)}>\n      <StyledMenuSelectorInner>\n        {typeof onBack === \"function\" ? (\n          <StyledMenuSelectorBack onClick={onBack} width=\"16px\" height=\"16px\" />\n        ) : null}\n        <Input\n          onChange={handleChange}\n          placeholder={placeholder}\n          autoFocus={autoFocus}\n          defaultValue={defaultValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          autoComplete={autoComplete ? \"on\" : \"off\"}\n        />\n        {typeof onEdit === \"function\" ? (\n          <StyledMenuSelectorDots onClick={onEdit} />\n        ) : null}\n      </StyledMenuSelectorInner>\n      {children}\n    </StyledMenuSelector>\n  );\n};\n\nMenuSelector.displayName = \"MenuSelector\";\n"],"file":"MenuSelector.js"}

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

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { FontStyle } from "../FontStyle";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import ArrowBackIcon from "../Icons/collection/ArrowBack";
+import TreeDotsIcon from "../Icons/collection/TreeDots";
+export var StyledMenuSelectorDots = styled(TreeDotsIcon).withConfig({
+  displayName: "Styles__StyledMenuSelectorDots",
+  componentId: "sc-1x7qbnu-0"
+})(["", ""], {
+  "cursor": "pointer",
+  "flexShrink": "0",
+  "marginLeft": "0.5rem"
+});
+StyledMenuSelectorDots.displayName = "StyledMenuSelectorDots";
+export var StyledMenuSelectorBack = styled(ArrowBackIcon).withConfig({
+  displayName: "Styles__StyledMenuSelectorBack",
+  componentId: "sc-1x7qbnu-1"
+})(["", ""], {
+  "cursor": "pointer",
+  "stroke": "currentColor",
+  "flexShrink": "0",
+  "marginRight": "0.5rem"
+});
+StyledMenuSelectorBack.displayName = "StyledMenuSelectorBack";
+export var StyledMenuSelector = styled.div.withConfig({
+  displayName: "Styles__StyledMenuSelector",
+  componentId: "sc-1x7qbnu-2"
+})(["", " ", " color:var(--color-theme-700);"], BoxSizingStyle, FontStyle);
+StyledMenuSelector.displayName = "StyledMenuSelector";
+export var StyledMenuSelectorInner = styled.div.withConfig({
+  displayName: "Styles__StyledMenuSelectorInner",
+  componentId: "sc-1x7qbnu-3"
+})(["", ""], {
+  "display": "flex",
+  "alignItems": "center",
+  "margin": "1rem"
+});
+StyledMenuSelectorInner.displayName = "StyledMenuSelectorInner";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MenuSelector/Styles.ts"],"names":["styled","FontStyle","BoxSizingStyle","ArrowBackIcon","TreeDotsIcon","StyledMenuSelectorDots","displayName","StyledMenuSelectorBack","StyledMenuSelector","div","StyledMenuSelectorInner"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,OAAOC,aAAP,MAA0B,+BAA1B;AACA,OAAOC,YAAP,MAAyB,8BAAzB;AAEA,OAAO,IAAMC,sBAAsB,GAAGL,MAAM,CAACI,YAAD,CAAT;AAAA;AAAA;AAAA,aAC7B;AAAA;AAAA;AAAA;AAAA,CAD6B,CAA5B;AAIPC,sBAAsB,CAACC,WAAvB,GAAqC,wBAArC;AAEA,OAAO,IAAMC,sBAAsB,GAAGP,MAAM,CAACG,aAAD,CAAT;AAAA;AAAA;AAAA,aAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,CAA5B;AAIPI,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;AAEA,OAAO,IAAME,kBAAkB,GAAGR,MAAM,CAACS,GAAV;AAAA;AAAA;AAAA,gDAC3BP,cAD2B,EAE3BD,SAF2B,CAAxB;AAOPO,kBAAkB,CAACF,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMI,uBAAuB,GAAGV,MAAM,CAACS,GAAV;AAAA;AAAA;AAAA,aAC9B;AAAA;AAAA;AAAA;AAAA,CAD8B,CAA7B;AAIPC,uBAAuB,CAACJ,WAAxB,GAAsC,yBAAtC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport ArrowBackIcon from \"../Icons/collection/ArrowBack\";\nimport TreeDotsIcon from \"../Icons/collection/TreeDots\";\n\nexport const StyledMenuSelectorDots = styled(TreeDotsIcon)`\n  ${tw`tw-cursor-pointer tw-flex-shrink-0 tw-ml-2`}\n`;\n\nStyledMenuSelectorDots.displayName = \"StyledMenuSelectorDots\";\n\nexport const StyledMenuSelectorBack = styled(ArrowBackIcon)`\n  ${tw`tw-cursor-pointer tw-stroke-current tw-flex-shrink-0 tw-mr-2`}\n`;\n\nStyledMenuSelectorBack.displayName = \"StyledMenuSelectorBack\";\n\nexport const StyledMenuSelector = styled.div`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  color: var(--color-theme-700);\n`;\n\nStyledMenuSelector.displayName = \"StyledMenuSelector\";\n\nexport const StyledMenuSelectorInner = styled.div`\n  ${tw`tw-flex tw-items-center tw-m-4`}\n`;\n\nStyledMenuSelectorInner.displayName = \"StyledMenuSelectorInner\";\n"],"file":"Styles.js"}

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

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

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

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

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
+import React, { forwardRef, useRef, cloneElement, useMemo, useCallback, useState, useEffect } from "react";
+import { Window } from "../Window";
+import useForkRef from "../../utils/useForkRef";
+import createChainedFunction from "../../utils/createChainedFunction";
+import { StyledModalOverlay } from "./Styles";
+
+var getHasTransition = function getHasTransition(children) {
+  return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
+};
+
+export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$disableFocusLock = _ref.disableFocusLock,
+      disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
+      _ref$disableScrollLoc = _ref.disableScrollLock,
+      disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
+      _ref$disableBackgroun = _ref.disableBackgroundClick,
+      disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
+      _ref$disableBackgroun2 = _ref.disableBackgroundColor,
+      disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
+      _ref$open = _ref.open,
+      defaultOpen = _ref$open === void 0 ? false : _ref$open,
+      onClose = _ref.onClose,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useState = useState(defaultOpen),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(true),
+      exited = _useState2[0],
+      setExited = _useState2[1];
+
+  var innerRef = useRef(null);
+  var handleRef = useForkRef(innerRef, ref);
+  var hasTransition = useMemo(function () {
+    return getHasTransition(children);
+  }, [children]);
+  useEffect(function () {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  var handleClose = useCallback(function () {
+    setOpen(false);
+
+    if (!hasTransition) {
+      typeof onClose === "function" && onClose();
+    }
+  }, [hasTransition, onClose]);
+  var handleBackgroundClick = useCallback(function (event) {
+    if (!disableBackgroundClick) {
+      event.preventDefault();
+      handleClose();
+    }
+  }, [disableBackgroundClick, handleClose]);
+  var handleEnter = useCallback(function () {
+    setExited(false);
+  }, []);
+  var handleExited = useCallback(function () {
+    setExited(true);
+    typeof onClose === "function" && onClose();
+  }, [onClose]);
+  var childProps = useMemo(function () {
+    var props = {}; // It's a Transition like component
+
+    if (hasTransition && children) {
+      props = {
+        onEnter: createChainedFunction(handleEnter, children.props.onEnter),
+        onExited: createChainedFunction(handleExited, children.props.onExited),
+        in: open
+      };
+    }
+
+    return props;
+  }, [children, handleEnter, handleExited, hasTransition, open]);
+
+  if (!open && (!hasTransition || exited)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Window, _extends({}, rest, {
+    ref: handleRef,
+    onClose: handleClose,
+    disableFocusLock: disableFocusLock,
+    disableScrollLock: disableScrollLock
+  }), /*#__PURE__*/React.createElement(StyledModalOverlay, {
+    onClick: handleBackgroundClick,
+    $disableBackgroundColor: disableBackgroundColor,
+    $open: open
+  }), /*#__PURE__*/cloneElement(children, childProps));
+});
+Modal.displayName = "Modal";
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","StyledModalOverlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { StyledModalOverlay } from \"./Styles\";\n\ninterface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      open: defaultOpen = false,\n      onClose,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        <StyledModalOverlay\n          onClick={handleBackgroundClick}\n          $disableBackgroundColor={disableBackgroundColor}\n          $open={open}\n        />\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"file":"Modal.js"}

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

@@ -0,0 +1,14 @@
+import styled, { css } from "styled-components";
+import { Overlay } from "../Overlay";
+export var StyledModalOverlay = styled(Overlay).withConfig({
+  displayName: "Styles__StyledModalOverlay",
+  componentId: "sc-1elktgs-0"
+})(["", " ", ""], function (props) {
+  return !props.$open && css(["", ""], {
+    "display": "none"
+  });
+}, function (props) {
+  return !props.$disableBackgroundColor && css(["background:var(--modal-background);"]);
+});
+StyledModalOverlay.displayName = "StyledModalOverlay";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/Styles.ts"],"names":["styled","css","Overlay","StyledModalOverlay","props","$open","$disableBackgroundColor","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,OAAT,QAAwB,YAAxB;AAEA,OAAO,IAAMC,kBAAkB,GAAGH,MAAM,CAACE,OAAD,CAAT;AAAA;AAAA;AAAA,kBAI3B,UAACE,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,KAAP,IACAJ,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAJ2B,EAU3B,UAACG,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,uBAAP,IACAL,GADA,yCADA;AAAA,CAV2B,CAAxB;AAiBPE,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Overlay } from \"../Overlay\";\n\nexport const StyledModalOverlay = styled(Overlay)<{\n  $open: boolean;\n  $disableBackgroundColor: boolean;\n}>`\n  ${(props) =>\n    !props.$open &&\n    css`\n      ${tw`tw-hidden`}\n    `}\n\n  ${(props) =>\n    !props.$disableBackgroundColor &&\n    css`\n      background: var(--modal-background);\n    `}\n`;\n\nStyledModalOverlay.displayName = \"StyledModalOverlay\";\n"],"file":"Styles.js"}

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

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

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

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

package/dist/esm/components/MultiAvatar/MultiAvatar.js

@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from "react";
+import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
+export var MultiAvatar = function MultiAvatar(_ref) {
+  var url = _ref.url,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? "Avatar Image" : _ref$alt,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      className = _ref.className;
+  var setSize = useCallback(function (i) {
+    switch (url.length) {
+      case 1:
+        return {
+          width: size + "px",
+          height: size + "px"
+        };
+
+      case 2:
+        return {
+          width: size / 2 + "px",
+          height: size + "px"
+        };
+
+      case 3:
+        if (i === 0) {
+          return {
+            width: size / 2 + "px",
+            height: size + "px"
+          };
+        } else {
+          return {
+            width: size / 2 + "px",
+            height: size / 2 + "px"
+          };
+        }
+
+      default:
+        return {
+          width: size / 2 + "px",
+          height: size / 2 + "px"
+        };
+    }
+  }, [size, url.length]);
+  var slicedUrl = useMemo(function () {
+    if ((url == null ? void 0 : url.length) > 4) {
+      return url.slice(0, 4);
+    }
+
+    return url;
+  }, [url]);
+  return /*#__PURE__*/React.createElement(StyledMultiAvatar, {
+    style: {
+      width: size + "px",
+      height: size + "px"
+    },
+    className: className,
+    $urlCount: url.length
+  }, slicedUrl.map(function (v, i) {
+    return /*#__PURE__*/React.createElement(StyledMultiAvatarInner, {
+      style: setSize(i),
+      className: "c-multi-avatar__wrapper",
+      key: "avatar_" + i
+    }, /*#__PURE__*/React.createElement("img", {
+      src: v,
+      alt: alt[i] ? alt[i] : "avatar_" + i,
+      width: size,
+      height: size
+    }));
+  }));
+};
+MultiAvatar.displayName = "MultiAvatar";
+//# sourceMappingURL=MultiAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MultiAvatar/MultiAvatar.tsx"],"names":["React","useCallback","useMemo","StyledMultiAvatar","StyledMultiAvatarInner","MultiAvatar","url","alt","size","className","setSize","i","length","width","height","slicedUrl","slice","map","v","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,WAApB,EAAiCC,OAAjC,QAAgD,OAAhD;AACA,SAASC,iBAAT,EAA4BC,sBAA5B,QAA0D,UAA1D;AAaA,OAAO,IAAMC,WAA6B,GAAG,SAAhCA,WAAgC,OAKvC;AAAA,MAJJC,GAII,QAJJA,GAII;AAAA,sBAHJC,GAGI;AAAA,MAHJA,GAGI,yBAHE,cAGF;AAAA,uBAFJC,IAEI;AAAA,MAFJA,IAEI,0BAFG,EAEH;AAAA,MADJC,SACI,QADJA,SACI;AACJ,MAAMC,OAAO,GAAGT,WAAW,CACzB,UAACU,CAAD,EAAuB;AACrB,YAAQL,GAAG,CAACM,MAAZ;AACE,WAAK,CAAL;AACE,eAAO;AAAEC,UAAAA,KAAK,EAAKL,IAAL,OAAP;AAAsBM,UAAAA,MAAM,EAAKN,IAAL;AAA5B,SAAP;;AACF,WAAK,CAAL;AACE,eAAO;AAAEK,UAAAA,KAAK,EAAKL,IAAI,GAAG,CAAZ,OAAP;AAA0BM,UAAAA,MAAM,EAAKN,IAAL;AAAhC,SAAP;;AACF,WAAK,CAAL;AACE,YAAIG,CAAC,KAAK,CAAV,EAAa;AACX,iBAAO;AAAEE,YAAAA,KAAK,EAAKL,IAAI,GAAG,CAAZ,OAAP;AAA0BM,YAAAA,MAAM,EAAKN,IAAL;AAAhC,WAAP;AACD,SAFD,MAEO;AACL,iBAAO;AAAEK,YAAAA,KAAK,EAAKL,IAAI,GAAG,CAAZ,OAAP;AAA0BM,YAAAA,MAAM,EAAKN,IAAI,GAAG,CAAZ;AAAhC,WAAP;AACD;;AACH;AACE,eAAO;AAAEK,UAAAA,KAAK,EAAKL,IAAI,GAAG,CAAZ,OAAP;AAA0BM,UAAAA,MAAM,EAAKN,IAAI,GAAG,CAAZ;AAAhC,SAAP;AAZJ;AAcD,GAhBwB,EAiBzB,CAACA,IAAD,EAAOF,GAAG,CAACM,MAAX,CAjByB,CAA3B;AAoBA,MAAMG,SAAS,GAAGb,OAAO,CAAC,YAAM;AAC9B,QAAI,CAAAI,GAAG,QAAH,YAAAA,GAAG,CAAEM,MAAL,IAAc,CAAlB,EAAqB;AACnB,aAAON,GAAG,CAACU,KAAJ,CAAU,CAAV,EAAa,CAAb,CAAP;AACD;;AAED,WAAOV,GAAP;AACD,GANwB,EAMtB,CAACA,GAAD,CANsB,CAAzB;AAQA,sBACE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE;AAAEO,MAAAA,KAAK,EAAKL,IAAL,OAAP;AAAsBM,MAAAA,MAAM,EAAKN,IAAL;AAA5B,KADT;AAEE,IAAA,SAAS,EAAEC,SAFb;AAGE,IAAA,SAAS,EAAEH,GAAG,CAACM;AAHjB,KAKGG,SAAS,CAACE,GAAV,CAAc,UAACC,CAAD,EAAIP,CAAJ;AAAA,wBACb,oBAAC,sBAAD;AACE,MAAA,KAAK,EAAED,OAAO,CAACC,CAAD,CADhB;AAEE,MAAA,SAAS,EAAC,yBAFZ;AAGE,MAAA,GAAG,cAAYA;AAHjB,oBAKE;AACE,MAAA,GAAG,EAAEO,CADP;AAEE,MAAA,GAAG,EAAEX,GAAG,CAACI,CAAD,CAAH,GAASJ,GAAG,CAACI,CAAD,CAAZ,eAA4BA,CAFnC;AAGE,MAAA,KAAK,EAAEH,IAHT;AAIE,MAAA,MAAM,EAAEA;AAJV,MALF,CADa;AAAA,GAAd,CALH,CADF;AAsBD,CAxDM;AA0DPH,WAAW,CAACc,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useCallback, useMemo } from \"react\";\nimport { StyledMultiAvatar, StyledMultiAvatarInner } from \"./Styles\";\n\ninterface IMultiAvatar {\n  /** Path url. */\n  url: string[];\n  /** Alt text. */\n  alt?: string[];\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n}\n\nexport const MultiAvatar: FC<IMultiAvatar> = ({\n  url,\n  alt = \"Avatar Image\",\n  size = 24,\n  className,\n}) => {\n  const setSize = useCallback(\n    (i: number): object => {\n      switch (url.length) {\n        case 1:\n          return { width: `${size}px`, height: `${size}px` };\n        case 2:\n          return { width: `${size / 2}px`, height: `${size}px` };\n        case 3:\n          if (i === 0) {\n            return { width: `${size / 2}px`, height: `${size}px` };\n          } else {\n            return { width: `${size / 2}px`, height: `${size / 2}px` };\n          }\n        default:\n          return { width: `${size / 2}px`, height: `${size / 2}px` };\n      }\n    },\n    [size, url.length]\n  );\n\n  const slicedUrl = useMemo(() => {\n    if (url?.length > 4) {\n      return url.slice(0, 4);\n    }\n\n    return url;\n  }, [url]);\n\n  return (\n    <StyledMultiAvatar\n      style={{ width: `${size}px`, height: `${size}px` }}\n      className={className}\n      $urlCount={url.length}\n    >\n      {slicedUrl.map((v, i) => (\n        <StyledMultiAvatarInner\n          style={setSize(i)}\n          className=\"c-multi-avatar__wrapper\"\n          key={`avatar_${i}`}\n        >\n          <img\n            src={v}\n            alt={alt[i] ? alt[i] : `avatar_${i}`}\n            width={size}\n            height={size}\n          />\n        </StyledMultiAvatarInner>\n      ))}\n    </StyledMultiAvatar>\n  );\n};\n\nMultiAvatar.displayName = \"MultiAvatar\";\n"],"file":"MultiAvatar.js"}

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

@@ -0,0 +1,20 @@
+import styled, { css } from "styled-components";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+var StyledMultiAvatarImg = css(["width:inherit;height:inherit;"]);
+export var StyledMultiAvatarInner = styled.div.withConfig({
+  displayName: "Styles__StyledMultiAvatarInner",
+  componentId: "sc-k6nldn-0"
+})(["overflow:hidden;position:absolute;"]);
+export var StyledMultiAvatar = styled.div.withConfig({
+  displayName: "Styles__StyledMultiAvatar",
+  componentId: "sc-k6nldn-1"
+})(["", " border-radius:100%;position:relative;overflow:hidden;", " ", " ", ""], BoxSizingStyle, function (props) {
+  return props.$urlCount === 2 && css(["", ":first-child{left:0;img{transform:translateX(-20%);}}", ":last-child{right:0;img{transform:translateX(-20%);}}"], StyledMultiAvatarInner, StyledMultiAvatarInner);
+}, function (props) {
+  return props.$urlCount === 3 && css(["", ":nth-child(1){left:0;img{transform:translateX(-20%);}}", ":nth-child(2){right:0;top:0;img{", "}}", ":nth-child(3){right:0;bottom:0;img{", "}}"], StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarImg);
+}, function (props) {
+  return props.$urlCount > 3 && css(["img{", "}", ":nth-child(1){left:0;}", ":nth-child(2){left:0;bottom:0;}", ":nth-child(3){right:0;top:0;}", ":nth-child(4){right:0;bottom:0;}"], StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner);
+});
+StyledMultiAvatar.displayName = "StyledMultiAvatar";
+StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
+//# sourceMappingURL=Styles.js.map