@activecollab/components 0.1.537 → 1.0.1

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

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components';
+import { FontStyle } from '../FontStyle.js';
+import { BoxSizingStyle } from '../BoxSizingStyle.js';
+import { Button } from '../Button/Button.js';
+import { ConfirmDialog } from '../ConfirmDialog/ConfirmDialog.js';
+import { DatePicker } from '../DatePicker/DatePicker.js';
+
+var StyledSelectDate = styled.div.withConfig({
+  displayName: "Styles__StyledSelectDate",
+  componentId: "sc-1jkx994-0"
+})(["", " ", ""], FontStyle, BoxSizingStyle);
+StyledSelectDate.displayName = "StyledSelectDate";
+var StyledSelectDateButton = styled.button.withConfig({
+  displayName: "Styles__StyledSelectDateButton",
+  componentId: "sc-1jkx994-1"
+})(["margin:0;padding:0;border:none;background:none;width:auto;height:auto;color:var(--color-theme-700);span,svg{cursor:pointer;}span{color:var(--color-secondary);}svg:hover{fill:var(--color-secondary);}"]);
+StyledSelectDateButton.displayName = "StyledSelectDateButton";
+var StyledConfirmDialog = styled(ConfirmDialog).withConfig({
+  displayName: "Styles__StyledConfirmDialog",
+  componentId: "sc-1jkx994-2"
+})([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
+StyledConfirmDialog.displayName = "StyledConfirmDialog";
+var StyledSelectDateDatePicker = styled(DatePicker).withConfig({
+  displayName: "Styles__StyledSelectDateDatePicker",
+  componentId: "sc-1jkx994-3"
+})(["", ""], {
+  "paddingTop": "1rem",
+  "paddingBottom": "0.5rem"
+});
+StyledSelectDateDatePicker.displayName = "StyledSelectDateDatePicker";
+var StyledSelectDateFooter = styled.div.withConfig({
+  displayName: "Styles__StyledSelectDateFooter",
+  componentId: "sc-1jkx994-4"
+})(["", " border-top:1px solid var(--border-primary);", ""], {
+  "paddingLeft": "1rem",
+  "paddingRight": "1rem",
+  "paddingTop": "0.5rem",
+  "paddingBottom": "0.5rem"
+}, function (props) {
+  return props.$mode === "instant" && css(["", ""], {
+    "display": "flex"
+  });
+});
+StyledSelectDateFooter.displayName = "StyledSelectDateFooter";
+var StyledSelectDateButtons = styled.div.withConfig({
+  displayName: "Styles__StyledSelectDateButtons",
+  componentId: "sc-1jkx994-5"
+})(["", ""], {
+  "display": "flex"
+});
+StyledSelectDateButtons.displayName = "StyledSelectDateButtons";
+var StyledButtonSave = styled(Button).withConfig({
+  displayName: "Styles__StyledButtonSave",
+  componentId: "sc-1jkx994-6"
+})(["", ""], {
+  "marginRight": "0.5rem"
+});
+StyledButtonSave.displayName = "StyledButtonSave";
+var StyledButtonClose = styled(Button).withConfig({
+  displayName: "Styles__StyledButtonClose",
+  componentId: "sc-1jkx994-7"
+})(["", ""], {
+  "marginLeft": "auto"
+});
+StyledButtonClose.displayName = "StyledButtonClose";
+var StyledButtonCloseColored = styled(Button).withConfig({
+  displayName: "Styles__StyledButtonCloseColored",
+  componentId: "sc-1jkx994-8"
+})(["", ""], {
+  "marginLeft": "auto",
+  "marginRight": "auto"
+});
+StyledButtonCloseColored.displayName = "StyledButtonCloseColored";
+var StyledIconComponent = styled.svg.withConfig({
+  displayName: "Styles__StyledIconComponent",
+  componentId: "sc-1jkx994-9"
+})(["span,svg{cursor:pointer;}span{color:var(--color-secondary);}svg:hover{fill:var(--color-secondary);}"]);
+StyledIconComponent.displayName = "StyledIconComponent";
+
+export { StyledButtonClose, StyledButtonCloseColored, StyledButtonSave, StyledConfirmDialog, StyledIconComponent, StyledSelectDate, StyledSelectDateButton, StyledSelectDateButtons, StyledSelectDateDatePicker, StyledSelectDateFooter };
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/SelectDate/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ConfirmDialog } from \"../ConfirmDialog\";\nimport { DatePicker } from \"../DatePicker\";\nimport { Button } from \"../Button/Button\";\n\nexport const StyledSelectDate = styled.div`\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledSelectDate.displayName = \"StyledSelectDate\";\n\nexport const StyledSelectDateButton = styled.button`\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: none;\n  width: auto;\n  height: auto;\n  color: var(--color-theme-700);\n\n  span,\n  svg {\n    cursor: pointer;\n  }\n  span {\n    color: var(--color-secondary);\n  }\n  svg:hover {\n    fill: var(--color-secondary);\n  }\n`;\n\nStyledSelectDateButton.displayName = \"StyledSelectDateButton\";\n\nexport const StyledConfirmDialog = styled(ConfirmDialog)`\n  .modal-header {\n    padding: 16px 30px;\n    h1 {\n      margin: 0;\n      font-size: 16px;\n    }\n  }\n  .modal-body {\n    padding: 10px 30px;\n  }\n  .modal-divider {\n    border-top: 1px solid var(--border-primary);\n    height: 1px;\n  }\n  .modal-footer {\n    padding: 16px 30px;\n  }\n`;\n\nStyledConfirmDialog.displayName = \"StyledConfirmDialog\";\n\nexport const StyledSelectDateDatePicker = styled(DatePicker)`\n  ${tw`tw-pt-4 tw-pb-2`}\n`;\n\nStyledSelectDateDatePicker.displayName = \"StyledSelectDateDatePicker\";\n\nexport const StyledSelectDateFooter = styled.div<{\n  $mode?: \"atomic\" | \"instant\";\n}>`\n  ${tw`tw-px-4 tw-py-2`}\n  border-top: 1px solid var(--border-primary);\n\n  ${(props) =>\n    props.$mode === \"instant\" &&\n    css`\n      ${tw`tw-flex`}\n    `}\n`;\n\nStyledSelectDateFooter.displayName = \"StyledSelectDateFooter\";\n\nexport const StyledSelectDateButtons = styled.div`\n  ${tw`tw-flex`}\n`;\n\nStyledSelectDateButtons.displayName = \"StyledSelectDateButtons\";\n\nexport const StyledButtonSave = styled(Button)`\n  ${tw`tw-mr-2`}\n`;\n\nStyledButtonSave.displayName = \"StyledButtonSave\";\n\nexport const StyledButtonClose = styled(Button)`\n  ${tw`tw-ml-auto`}\n`;\n\nStyledButtonClose.displayName = \"StyledButtonClose\";\n\nexport const StyledButtonCloseColored = styled(Button)`\n  ${tw`tw-ml-auto tw-mr-auto`}\n`;\n\nStyledButtonCloseColored.displayName = \"StyledButtonCloseColored\";\n\nexport const StyledIconComponent = styled.svg`\n  span,\n  svg {\n    cursor: pointer;\n  }\n  span {\n    color: var(--color-secondary);\n  }\n  svg:hover {\n    fill: var(--color-secondary);\n  }\n`;\n\nStyledIconComponent.displayName = \"StyledIconComponent\";\n"],"names":["StyledSelectDate","styled","div","FontStyle","BoxSizingStyle","displayName","StyledSelectDateButton","button","StyledConfirmDialog","ConfirmDialog","StyledSelectDateDatePicker","DatePicker","StyledSelectDateFooter","props","$mode","css","StyledSelectDateButtons","StyledButtonSave","Button","StyledButtonClose","StyledButtonCloseColored","StyledIconComponent","svg"],"mappings":";;;;;;;IAQaA,gBAAgB,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,kBACzBC,SADyB,EAEzBC,cAFyB;AAK7BJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;IAEaC,sBAAsB,GAAGL,MAAM,CAACM,MAAV;AAAA;AAAA;AAAA;AAqBnCD,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;IAEaG,mBAAmB,GAAGP,MAAM,CAACQ,aAAD,CAAT;AAAA;AAAA;AAAA;AAoBhCD,mBAAmB,CAACH,WAApB,GAAkC,qBAAlC;IAEaK,0BAA0B,GAAGT,MAAM,CAACU,UAAD,CAAT;AAAA;AAAA;AAAA,aACjC;AAAA;AAAA;AAAA,CADiC;AAIvCD,0BAA0B,CAACL,WAA3B,GAAyC,4BAAzC;IAEaO,sBAAsB,GAAGX,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,6DAG7B;AAAA;AAAA;AAAA;AAAA;AAAA,CAH6B,EAM/B,UAACW,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,SAAhB,IACAC,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAN+B;AAanCH,sBAAsB,CAACP,WAAvB,GAAqC,wBAArC;IAEaW,uBAAuB,GAAGf,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,aAC9B;AAAA;AAAA,CAD8B;AAIpCc,uBAAuB,CAACX,WAAxB,GAAsC,yBAAtC;IAEaY,gBAAgB,GAAGhB,MAAM,CAACiB,MAAD,CAAT;AAAA;AAAA;AAAA,aACvB;AAAA;AAAA,CADuB;AAI7BD,gBAAgB,CAACZ,WAAjB,GAA+B,kBAA/B;IAEac,iBAAiB,GAAGlB,MAAM,CAACiB,MAAD,CAAT;AAAA;AAAA;AAAA,aACxB;AAAA;AAAA,CADwB;AAI9BC,iBAAiB,CAACd,WAAlB,GAAgC,mBAAhC;IAEae,wBAAwB,GAAGnB,MAAM,CAACiB,MAAD,CAAT;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA;AAAA,CAD+B;AAIrCE,wBAAwB,CAACf,WAAzB,GAAuC,0BAAvC;IAEagB,mBAAmB,GAAGpB,MAAM,CAACqB,GAAV;AAAA;AAAA;AAAA;AAahCD,mBAAmB,CAAChB,WAApB,GAAkC,qBAAlC;;;;"}

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

@@ -1,5 +1,4 @@
 import React, { CSSProperties } from "react";
-import "./Sheet.css";
 interface ISheet {
     onClose?: () => void;
     controls?: JSX.Element[];

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAGrB,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,KAAK,sHA2KjB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,KAAK,sHAkIjB,CAAC"}

package/dist/esm/components/Sheet/Sheet.js

@@ -0,0 +1,136 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { Transition } from 'react-transition-group';
+import classnames from 'classnames';
+import useForkRef from '../../utils/useForkRef.js';
+import { StyledSheetOverlay, StyledSheetWrapper, StyledSheetIcons, StyledAnimatedSpan, StyledCssTransition, StyledSheetWrapperPaper } from './Styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Window } from '../Window/Window.js';
+
+var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      onClose = _ref.onClose,
+      _ref$controls = _ref.controls,
+      controls = _ref$controls === void 0 ? [] : _ref$controls,
+      _ref$open = _ref.open,
+      defaultOpen = _ref$open === void 0 ? false : _ref$open,
+      _ref$animation = _ref.animation,
+      animation = _ref$animation === void 0 ? "top" : _ref$animation,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "center" : _ref$position,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "normal" : _ref$mode,
+      _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.disableBackgroundColor,
+      disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
+      bodyStyle = _ref.bodyStyle,
+      bodyClassName = _ref.bodyClassName,
+      _ref$disableBackgroun2 = _ref.disableBackgroundClick,
+      disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      exited = _useState4[0],
+      setExited = _useState4[1];
+
+  var innerRef = useRef(null);
+  var handleRef = useForkRef(innerRef, ref);
+  useEffect(function () {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  var handleEnter = useCallback(function () {
+    setExited(false);
+  }, []);
+  var handleExited = useCallback(function () {
+    setExited(true);
+    typeof onClose === "function" && onClose();
+  }, [onClose]);
+  var handleClose = useCallback(function () {
+    setOpen(false);
+  }, []);
+  var handleBackgroundClick = useCallback(function (event) {
+    if (!disableBackgroundClick) {
+      event.preventDefault();
+      handleClose();
+    }
+  }, [disableBackgroundClick, handleClose]);
+
+  if (!open && exited) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxs(Window, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: handleRef,
+    onClose: handleClose,
+    disableFocusLock: disableFocusLock,
+    disableScrollLock: disableScrollLock,
+    children: [/*#__PURE__*/jsx(StyledSheetOverlay, {
+      onClick: handleBackgroundClick,
+      $hasBgColor: !disableBackgroundColor
+    }), /*#__PURE__*/jsxs(StyledSheetWrapper, {
+      className: classnames("c-sheet__wrapper", bodyClassName),
+      style: bodyStyle,
+      $position: position,
+      $mode: mode,
+      children: [controls.length ? /*#__PURE__*/jsx(StyledSheetIcons, {
+        children: controls.map(function (item, index) {
+          var maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
+
+          var maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
+
+          var control = index + 1;
+          var durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
+          var durationIn = control >= maxDurationIn ? 1 : control;
+          return /*#__PURE__*/jsx(Transition, {
+            appear: true,
+            in: open,
+            timeout: maxDurationIn * 100,
+            children: function children(state) {
+              return /*#__PURE__*/jsx(StyledAnimatedSpan, {
+                $state: state,
+                $mode: mode,
+                $maxDurationIn: maxDurationIn / 10,
+                $maxDurationOut: maxDurationOut / 10,
+                $durationOut: durationOut / 10,
+                $durationIn: durationIn / 10,
+                children: item
+              });
+            }
+          }, "c-sheet-control-".concat(index));
+        })
+      }) : null, /*#__PURE__*/jsx(StyledCssTransition, {
+        appear: true,
+        in: open,
+        timeout: 400,
+        classNames: "c-sheet__animation",
+        $direction: animation,
+        onEnter: handleEnter,
+        onExited: handleExited,
+        children: /*#__PURE__*/jsx(StyledSheetWrapperPaper, {
+          className: "c-sheet__wrapper__paper",
+          children: children
+        })
+      })]
+    })]
+  }));
+});
+Sheet.displayName = "Sheet";
+
+export { Sheet };
+//# sourceMappingURL=Sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  ReactElement,\n  MouseEvent,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledSheetIcons,\n  StyledSheetOverlay,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: JSX.Element[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport const Sheet = forwardRef<\n  HTMLDivElement,\n  ISheet & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\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\n    const handleRef = useForkRef(innerRef, ref);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\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 handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\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    if (!open && 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        <StyledSheetOverlay\n          onClick={handleBackgroundClick}\n          $hasBgColor={!disableBackgroundColor}\n        />\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length ? (\n            <StyledSheetIcons>\n              {controls.map((item, index) => {\n                const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n                const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n                const control = index + 1;\n                const durationOut =\n                  controls.length > maxDurationOut\n                    ? maxDurationOut\n                    : maxDurationOut - control;\n                const durationIn = control >= maxDurationIn ? 1 : control;\n                return (\n                  <Transition\n                    appear\n                    in={open}\n                    timeout={maxDurationIn * 100}\n                    key={`c-sheet-control-${index}`}\n                  >\n                    {(state): ReactElement => (\n                      <StyledAnimatedSpan\n                        $state={state}\n                        $mode={mode}\n                        $maxDurationIn={maxDurationIn / 10}\n                        $maxDurationOut={maxDurationOut / 10}\n                        $durationOut={durationOut / 10}\n                        $durationIn={durationIn / 10}\n                      >\n                        {item}\n                      </StyledAnimatedSpan>\n                    )}\n                  </Transition>\n                );\n              })}\n            </StyledSheetIcons>\n          ) : null}\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames={\"c-sheet__animation\"}\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetWrapperPaper className=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"names":["Sheet","forwardRef","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","useEffect","handleEnter","useCallback","handleExited","handleClose","handleBackgroundClick","event","preventDefault","_jsxs","_jsx","classnames","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CSSTransition } from "react-transition-group";
+export declare const StyledSheetIcons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSheetOverlay: import("styled-components").StyledComponent<import("react").FC<import("react").HTMLAttributes<HTMLDivElement>>, any, {
+    $hasBgColor: boolean;
+}, never>;
+interface IStyledSheetWrapper {
+    $position?: "center" | "left" | "right";
+    $mode?: "normal" | "stretch";
+}
+export declare const StyledSheetWrapper: import("styled-components").StyledComponent<"div", any, IStyledSheetWrapper, never>;
+export declare const StyledSheetWrapperPaper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSheetControlsTop: import("styled-components").Keyframes;
+export declare const StyledSheetControlsBottom: import("styled-components").Keyframes;
+export declare const StyledSheetControlsCenterIn: import("styled-components").Keyframes;
+export declare const StyledSheetControlsCenterOut: import("styled-components").Keyframes;
+interface IStyledAnimatedSpan {
+    $mode: string;
+    $state: string;
+    $maxDurationIn: number;
+    $maxDurationOut: number;
+    $durationOut: number;
+    $durationIn: number;
+}
+export declare const StyledAnimatedSpan: import("styled-components").StyledComponent<"span", any, IStyledAnimatedSpan, never>;
+export declare const StyledCssTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {
+    $direction: string;
+}, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,oEAuB5B,CAAC;AAIF,eAAO,MAAM,kBAAkB;iBAAkC,OAAO;SAMvE,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFA0F9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,sBAAsB,uCASlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,uCASrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,uCASvC,CAAC;AAEF,eAAO,MAAM,4BAA4B,uCASxC,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAiD9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC"}

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

@@ -0,0 +1,84 @@
+import styled, { css, keyframes } from 'styled-components';
+import { BoxSizingStyle } from '../BoxSizingStyle.js';
+import { FontStyle } from '../FontStyle.js';
+import { CSSTransition } from 'react-transition-group';
+import { Overlay } from '../Overlay/Overlay.js';
+
+var StyledSheetIcons = styled.div.withConfig({
+  displayName: "Styles__StyledSheetIcons",
+  componentId: "sc-144eyxd-0"
+})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
+StyledSheetIcons.displayName = "StyledSheetIcons";
+var StyledSheetOverlay = styled(Overlay).withConfig({
+  displayName: "Styles__StyledSheetOverlay",
+  componentId: "sc-144eyxd-1"
+})(["", ""], function (props) {
+  return props.$hasBgColor && css(["background:var(--modal-background);"]);
+});
+StyledSheetOverlay.displayName = "StyledSheetOverlay";
+var StyledSheetWrapper = styled.div.withConfig({
+  displayName: "Styles__StyledSheetWrapper",
+  componentId: "sc-144eyxd-2"
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
+  return props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
+}, function (props) {
+  return props.$position === "center" && css(["", ""], {
+    "marginLeft": "auto",
+    "marginRight": "auto"
+  });
+}, function (props) {
+  return props.$position === "left" && css(["", ""], {
+    "marginLeft": "0.5rem",
+    "marginRight": "auto"
+  });
+}, function (props) {
+  return props.$position === "right" && css(["", ""], {
+    "marginRight": "0.5rem",
+    "marginLeft": "auto"
+  });
+}, function (props) {
+  return props.$mode === "stretch" && props.$position !== "left" && css(["", "{span{right:48px;}}"], StyledSheetIcons);
+}, function (props) {
+  return props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
+});
+StyledSheetWrapper.displayName = "StyledSheetWrapper";
+var StyledSheetWrapperPaper = styled.div.withConfig({
+  displayName: "Styles__StyledSheetWrapperPaper",
+  componentId: "sc-144eyxd-3"
+})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
+  "flex": "1 1 auto"
+});
+StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
+var StyledSheetControlsTop = keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
+var StyledSheetControlsBottom = keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
+var StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
+var StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
+var StyledAnimatedSpan = styled.span.withConfig({
+  displayName: "Styles__StyledAnimatedSpan",
+  componentId: "sc-144eyxd-4"
+})(["background:red;", " ", " ", " ", ""], function (props) {
+  return props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
+}, function (props) {
+  return props.$state === "entered" && css(["opacity:1;"]);
+}, function (props) {
+  return props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
+}, function (props) {
+  return props.$state === "exited" && css(["opacity:0;"]);
+});
+StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
+var StyledCssTransition = styled(CSSTransition).withConfig({
+  displayName: "Styles__StyledCssTransition",
+  componentId: "sc-144eyxd-5"
+})(["", " ", " ", " ", ""], function (props) {
+  return props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
+}, function (props) {
+  return props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]);
+}, function (props) {
+  return props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]);
+}, function (props) {
+  return props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
+});
+StyledCssTransition.displayName = "StyledCssTransition";
+
+export { StyledAnimatedSpan, StyledCssTransition, StyledSheetControlsBottom, StyledSheetControlsCenterIn, StyledSheetControlsCenterOut, StyledSheetControlsTop, StyledSheetIcons, StyledSheetOverlay, StyledSheetWrapper, StyledSheetWrapperPaper };
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Overlay } from \"../Overlay\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\nexport const StyledSheetOverlay = styled(Overlay)<{ $hasBgColor: boolean }>`\n  ${(props) =>\n    props.$hasBgColor &&\n    css`\n      background: var(--modal-background);\n    `}\n`;\n\nStyledSheetOverlay.displayName = \"StyledSheetOverlay\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\nexport const StyledSheetWrapperPaper = styled.div`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"names":["StyledSheetIcons","styled","div","displayName","StyledSheetOverlay","Overlay","props","$hasBgColor","css","StyledSheetWrapper","BoxSizingStyle","FontStyle","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"mappings":";;;;;;IAOaA,gBAAgB,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA;AAyB7BF,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;IAEaC,kBAAkB,GAAGH,MAAM,CAACI,OAAD,CAAT;AAAA;AAAA;AAAA,aAC3B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,WAAN,IACAC,GADA,yCADA;AAAA,CAD2B;AAQ/BJ,kBAAkB,CAACD,WAAnB,GAAiC,oBAAjC;IAOaM,kBAAkB,GAAGR,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,iHAC3BQ,cAD2B,EAE3BC,SAF2B,EAS3B,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,KAAN,KAAgB,SAAhB,GACIJ,GADJ,yNAMQR,gBANR,IAmBIQ,GAnBJ,uNA0BQR,gBA1BR,CADA;AAAA,CAT2B,EAiD3B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACO,SAAN,KAAoB,QAApB,IACAL,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAjD2B,EAuD3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACO,SAAN,KAAoB,MAApB,IACAL,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAvD2B,EA6D3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACO,SAAN,KAAoB,OAApB,IACAL,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7D2B,EAmE3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACM,KAAN,KAAgB,SAAhB,IACAN,KAAK,CAACO,SAAN,KAAoB,MADpB,IAEAL,GAFA,8BAGIR,gBAHJ,CADA;AAAA,CAnE2B,EA8E3B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACM,KAAN,KAAgB,SAAhB,IACAN,KAAK,CAACO,SAAN,KAAoB,MADpB,IAEAL,GAFA,yDAKIR,gBALJ,CADA;AAAA,CA9E2B;AA4F/BS,kBAAkB,CAACN,WAAnB,GAAiC,oBAAjC;IAEaW,uBAAuB,GAAGb,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,kLAQ9B;AAAA;AAAA,CAR8B;AAWpCY,uBAAuB,CAACX,WAAxB,GAAsC,yBAAtC;IAEaY,sBAAsB,GAAGC,SAAH;IAWtBC,yBAAyB,GAAGD,SAAH;IAWzBE,2BAA2B,GAAGF,SAAH;IAW3BG,4BAA4B,GAAGH,SAAH;IAoB5BI,kBAAkB,GAAGnB,MAAM,CAACoB,IAAV;AAAA;AAAA;AAAA,2CAE3B,UAACf,KAAD;AAAA,SACAA,KAAK,CAACgB,MAAN,KAAiB,UAAjB,IACAd,GADA,qBAIIF,KAAK,CAACM,KAAN,KAAgB,SAAhB,GACEJ,GADF,wEAEsBO,sBAFtB,YAG6BT,KAAK,CAACiB,WAHnC,kBAI0BjB,KAAK,CAACiB,WAJhC,UAMEf,GANF,sEAOsBU,2BAPtB,YAQ6BZ,KAAK,CAACkB,cARnC,OAJJ,CADA;AAAA,CAF2B,EAoB3B,UAAClB,KAAD;AAAA,SACAA,KAAK,CAACgB,MAAN,KAAiB,SAAjB,IACAd,GADA,gBADA;AAAA,CApB2B,EA0B3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACgB,MAAN,KAAiB,SAAjB,IACAd,GADA,qBAIIF,KAAK,CAACM,KAAN,KAAgB,SAAhB,GACEJ,GADF,wEAEsBS,yBAFtB,YAG6BX,KAAK,CAACmB,YAHnC,kBAI0BnB,KAAK,CAACmB,YAJhC,UAMEjB,GANF,qEAOsBW,4BAPtB,YAQ6Bb,KAAK,CAACoB,eARnC,OAJJ,CADA;AAAA,CA1B2B,EA4C3B,UAACpB,KAAD;AAAA,SACAA,KAAK,CAACgB,MAAN,KAAiB,QAAjB,IACAd,GADA,gBADA;AAAA,CA5C2B;AAmD/BY,kBAAkB,CAACjB,WAAnB,GAAiC,oBAAjC;IAEawB,mBAAmB,GAAG1B,MAAM,CAAC2B,aAAD,CAAT;AAAA;AAAA;AAAA,4BAG5B,UAACtB,KAAD;AAAA,SACAA,KAAK,CAACuB,UAAN,KAAqB,KAArB,IACArB,GADA,8fADA;AAAA,CAH4B,EAkC5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACuB,UAAN,KAAqB,QAArB,IACArB,GADA,2fADA;AAAA,CAlC4B,EAiE5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACuB,UAAN,KAAqB,MAArB,IACArB,GADA,8fADA;AAAA,CAjE4B,EAgG5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACuB,UAAN,KAAqB,OAArB,IACArB,GADA,2fADA;AAAA,CAhG4B;AAgIhCmB,mBAAmB,CAACxB,WAApB,GAAkC,qBAAlC;;;;"}

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

@@ -1,5 +1,4 @@
 import { FC, ElementType } from "react";
-import "./Signifier.css";
 interface ISignifierProps {
     type: ElementType;
     value?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Signifier.d.ts","sourceRoot":"","sources":["../../../../src/components/Signifier/Signifier.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,WAAW,EAAuB,MAAM,OAAO,CAAC;AAE7E,OAAO,iBAAiB,CAAC;AAIzB,UAAU,eAAe;IAEvB,IAAI,EAAE,WAAW,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,UAiC1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CA+FzC,CAAC"}
+{"version":3,"file":"Signifier.d.ts","sourceRoot":"","sources":["../../../../src/components/Signifier/Signifier.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,WAAW,EAAuB,MAAM,OAAO,CAAC;AAW7E,UAAU,eAAe;IAEvB,IAAI,EAAE,WAAW,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,UAiC1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAwFzC,CAAC"}

package/dist/esm/components/Signifier/Signifier.js

@@ -0,0 +1,90 @@
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { useState, useMemo, useEffect } from 'react';
+import classnames from 'classnames';
+import { SwitchTransition } from 'react-transition-group';
+import { StyledSignifier, StyledIcon, StyledSignifierTransition } from './Styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Caption1 } from '../Typography/Variants/Caption1.js';
+import { Body1 } from '../Typography/Variants/Body1.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+
+var signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon"];
+var Signifier = function Signifier(_ref) {
+  var Component = _ref.type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? null : _ref$value,
+      className = _ref.className,
+      tooltipText = _ref.tooltipText,
+      tooltipClassName = _ref.tooltipClassName;
+
+  if (signifierTypes.indexOf(Component.displayName) === -1) {
+    console.warn("You are using unsupported Signifier icon");
+  }
+
+  var _useState = useState("c-signifier--top"),
+      _useState2 = _slicedToArray(_useState, 2),
+      direction = _useState2[0],
+      setDirection = _useState2[1];
+
+  var _useState3 = useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      setPrevValue = _useState4[1];
+
+  var label = useMemo(function () {
+    if (!value || value < 1) return null;
+    var max = 1000000000;
+    var newValue = value;
+
+    if (newValue > max) {
+      newValue = max;
+    }
+
+    if (newValue === max) {
+      return "".concat(Math.floor(newValue / 1000000000), "B+");
+    } else if (newValue > 999999) {
+      return "".concat(Math.floor(newValue / 1000000), "M");
+    } else if (newValue > 999) {
+      return "".concat(Math.floor(newValue / 1000), "k");
+    }
+
+    return "".concat(newValue);
+  }, [value]);
+  useEffect(function () {
+    value && setPrevValue(function (v) {
+      v && setDirection(v - value > 0 ? "c-signifier--top" : "c-signifier--bottom");
+      return value;
+    });
+  }, [value]);
+  var renderSignifier = useMemo(function () {
+    return /*#__PURE__*/jsxs(StyledSignifier, {
+      className: classnames("c-signifier", className),
+      $direction: direction,
+      children: [/*#__PURE__*/jsx(StyledIcon, {
+        as: Component
+      }), value !== null && /*#__PURE__*/jsx(SwitchTransition, {
+        mode: "out-in",
+        children: /*#__PURE__*/jsx(StyledSignifierTransition, {
+          timeout: 300,
+          classNames: "c-signifier--animate",
+          children: Component.displayName.includes("SmallIcon") ? /*#__PURE__*/jsx(Caption1, {
+            color: "secondary",
+            children: label
+          }) : /*#__PURE__*/jsx(Body1, {
+            color: "secondary",
+            children: label
+          })
+        }, label)
+      })]
+    });
+  }, [className, direction, Component, value, label]);
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : "",
+    disable: !tooltipText,
+    popperTooltipClassName: tooltipClassName,
+    children: renderSignifier
+  });
+};
+Signifier.displayName = "Signifier";
+
+export { Signifier, signifierTypes };
+//# sourceMappingURL=Signifier.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signifier.js","sources":["../../../../src/components/Signifier/Signifier.tsx"],"sourcesContent":["import React, { FC, useMemo, ElementType, useState, useEffect } from \"react\";\nimport classnames from \"classnames\";\nimport { SwitchTransition } from \"react-transition-group\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Body1, Caption1 } from \"../Typography\";\nimport {\n  StyledIcon,\n  StyledSignifier,\n  StyledSignifierTransition,\n} from \"./Styles\";\n\ninterface ISignifierProps {\n  /** One of icon types */\n  type: ElementType;\n  /** Number that represent total value */\n  value?: number;\n  /** Value that represent class names */\n  className?: string;\n  /** The text that will be displayed on hover in tooltip */\n  tooltipText?: string;\n  /** ClassName for tooltip if there is one */\n  tooltipClassName?: string;\n}\n\nexport const signifierTypes = [\n  \"EyeIcon\",\n  \"EyeSmallIcon\",\n  \"PencilIcon\",\n  \"PencilSmallIcon\",\n  \"EyeOffIcon\",\n  \"EyeOffSmallIcon\",\n  \"ChecklistIcon\",\n  \"ChecklistSmallIcon\",\n  \"WarningTriangleIcon\",\n  \"WarningTriangleSmallIcon\",\n  \"DependencyIcon\",\n  \"DependencySmallIcon\",\n  \"MessageIcon\",\n  \"MessageSmallIcon\",\n  \"ClockStopwatchIcon\",\n  \"ClockStopwatchSmallIcon\",\n  \"ClockIcon\",\n  \"ClockSmallIcon\",\n  \"DollarOffIcon\",\n  \"DollarOffSmallIcon\",\n  \"DollarIcon\",\n  \"DollarSmallIcon\",\n  \"DollarCheckmarkIcon\",\n  \"DollarCheckmarkSmallIcon\",\n  \"DollarClockIcon\",\n  \"DollarClockSmallIcon\",\n  \"BellOffIcon\",\n  \"BellOffSmallIcon\",\n  \"LockIcon\",\n  \"LockSmallIcon\",\n  \"RecurringCheckmarkIcon\",\n  \"RecurringCheckmarkSmallIcon\",\n];\n\nexport const Signifier: FC<ISignifierProps> = ({\n  type: Component,\n  value = null,\n  className,\n  tooltipText,\n  tooltipClassName,\n}) => {\n  if (\n    signifierTypes.indexOf(\n      (Component as { displayName: string }).displayName\n    ) === -1\n  ) {\n    console.warn(\"You are using unsupported Signifier icon\");\n  }\n\n  const [direction, setDirection] = useState(\"c-signifier--top\");\n  const [, setPrevValue] = useState(value);\n\n  const label: string | null = useMemo(() => {\n    if (!value || value < 1) return null;\n\n    const max = 1_000_000_000;\n    let newValue = value;\n\n    if (newValue > max) {\n      newValue = max;\n    }\n\n    if (newValue === max) {\n      return `${Math.floor(newValue / 1_000_000_000)}B+`;\n    } else if (newValue > 999_999) {\n      return `${Math.floor(newValue / 1_000_000)}M`;\n    } else if (newValue > 999) {\n      return `${Math.floor(newValue / 1000)}k`;\n    }\n\n    return `${newValue}`;\n  }, [value]);\n\n  useEffect(() => {\n    value &&\n      setPrevValue((v) => {\n        v &&\n          setDirection(\n            v - value > 0 ? \"c-signifier--top\" : \"c-signifier--bottom\"\n          );\n        return value;\n      });\n  }, [value]);\n\n  const renderSignifier = useMemo(\n    () => (\n      <StyledSignifier\n        className={classnames(\"c-signifier\", className)}\n        $direction={direction}\n      >\n        <StyledIcon as={Component} />\n        {value !== null && (\n          <SwitchTransition mode={\"out-in\"}>\n            <StyledSignifierTransition\n              key={label}\n              timeout={300}\n              classNames=\"c-signifier--animate\"\n            >\n              {(Component as { displayName: string }).displayName.includes(\n                \"SmallIcon\"\n              ) ? (\n                <Caption1 color=\"secondary\">{label}</Caption1>\n              ) : (\n                <Body1 color=\"secondary\">{label}</Body1>\n              )}\n            </StyledSignifierTransition>\n          </SwitchTransition>\n        )}\n      </StyledSignifier>\n    ),\n    [className, direction, Component, value, label]\n  );\n\n  return (\n    <Tooltip\n      title={tooltipText ?? \"\"}\n      disable={!tooltipText}\n      popperTooltipClassName={tooltipClassName}\n    >\n      {renderSignifier}\n    </Tooltip>\n  );\n};\n\nSignifier.displayName = \"Signifier\";\n"],"names":["signifierTypes","Signifier","Component","type","value","className","tooltipText","tooltipClassName","indexOf","displayName","console","warn","useState","direction","setDirection","setPrevValue","label","useMemo","max","newValue","Math","floor","useEffect","v","renderSignifier","_jsxs","classnames","_jsx","includes"],"mappings":";;;;;;;;;;IAwBaA,cAAc,GAAG,CAC5B,SAD4B,EAE5B,cAF4B,EAG5B,YAH4B,EAI5B,iBAJ4B,EAK5B,YAL4B,EAM5B,iBAN4B,EAO5B,eAP4B,EAQ5B,oBAR4B,EAS5B,qBAT4B,EAU5B,0BAV4B,EAW5B,gBAX4B,EAY5B,qBAZ4B,EAa5B,aAb4B,EAc5B,kBAd4B,EAe5B,oBAf4B,EAgB5B,yBAhB4B,EAiB5B,WAjB4B,EAkB5B,gBAlB4B,EAmB5B,eAnB4B,EAoB5B,oBApB4B,EAqB5B,YArB4B,EAsB5B,iBAtB4B,EAuB5B,qBAvB4B,EAwB5B,0BAxB4B,EAyB5B,iBAzB4B,EA0B5B,sBA1B4B,EA2B5B,aA3B4B,EA4B5B,kBA5B4B,EA6B5B,UA7B4B,EA8B5B,eA9B4B,EA+B5B,wBA/B4B,EAgC5B,6BAhC4B;IAmCjBC,SAA8B,GAAG,SAAjCA,SAAiC,OAMxC;AAAA,MALEC,SAKF,QALJC,IAKI;AAAA,wBAJJC,KAII;AAAA,MAJJA,KAII,2BAJI,IAIJ;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,gBACI,QADJA,gBACI;;AACJ,MACEP,cAAc,CAACQ,OAAf,CACGN,SAAD,CAAuCO,WADzC,MAEM,CAAC,CAHT,EAIE;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb;AACD;;AAED,kBAAkCC,QAAQ,CAAC,kBAAD,CAA1C;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,mBAAyBF,QAAQ,CAACR,KAAD,CAAjC;AAAA;AAAA,MAASW,YAAT;;AAEA,MAAMC,KAAoB,GAAGC,OAAO,CAAC,YAAM;AACzC,QAAI,CAACb,KAAD,IAAUA,KAAK,GAAG,CAAtB,EAAyB,OAAO,IAAP;AAEzB,QAAMc,GAAG,GAAG,UAAZ;AACA,QAAIC,QAAQ,GAAGf,KAAf;;AAEA,QAAIe,QAAQ,GAAGD,GAAf,EAAoB;AAClBC,MAAAA,QAAQ,GAAGD,GAAX;AACD;;AAED,QAAIC,QAAQ,KAAKD,GAAjB,EAAsB;AACpB,uBAAUE,IAAI,CAACC,KAAL,CAAWF,QAAQ,GAAG,UAAtB,CAAV;AACD,KAFD,MAEO,IAAIA,QAAQ,GAAG,MAAf,EAAwB;AAC7B,uBAAUC,IAAI,CAACC,KAAL,CAAWF,QAAQ,GAAG,OAAtB,CAAV;AACD,KAFM,MAEA,IAAIA,QAAQ,GAAG,GAAf,EAAoB;AACzB,uBAAUC,IAAI,CAACC,KAAL,CAAWF,QAAQ,GAAG,IAAtB,CAAV;AACD;;AAED,qBAAUA,QAAV;AACD,GAnBmC,EAmBjC,CAACf,KAAD,CAnBiC,CAApC;AAqBAkB,EAAAA,SAAS,CAAC,YAAM;AACdlB,IAAAA,KAAK,IACHW,YAAY,CAAC,UAACQ,CAAD,EAAO;AAClBA,MAAAA,CAAC,IACCT,YAAY,CACVS,CAAC,GAAGnB,KAAJ,GAAY,CAAZ,GAAgB,kBAAhB,GAAqC,qBAD3B,CADd;AAIA,aAAOA,KAAP;AACD,KANW,CADd;AAQD,GATQ,EASN,CAACA,KAAD,CATM,CAAT;AAWA,MAAMoB,eAAe,GAAGP,OAAO,CAC7B;AAAA,wBACEQ,KAAC,eAAD;AACE,MAAA,SAAS,EAAEC,UAAU,CAAC,aAAD,EAAgBrB,SAAhB,CADvB;AAEE,MAAA,UAAU,EAAEQ,SAFd;AAAA,8BAIEc,IAAC,UAAD;AAAY,QAAA,EAAE,EAAEzB;AAAhB,QAJF,EAKGE,KAAK,KAAK,IAAV,iBACCuB,IAAC,gBAAD;AAAkB,QAAA,IAAI,EAAE,QAAxB;AAAA,+BACEA,IAAC,yBAAD;AAEE,UAAA,OAAO,EAAE,GAFX;AAGE,UAAA,UAAU,EAAC,sBAHb;AAAA,oBAKIzB,SAAD,CAAuCO,WAAvC,CAAmDmB,QAAnD,CACC,WADD,iBAGCD,IAAC,QAAD;AAAU,YAAA,KAAK,EAAC,WAAhB;AAAA,sBAA6BX;AAA7B,YAHD,gBAKCW,IAAC,KAAD;AAAO,YAAA,KAAK,EAAC,WAAb;AAAA,sBAA0BX;AAA1B;AAVJ,WACOA,KADP;AADF,QANJ;AAAA,MADF;AAAA,GAD6B,EA0B7B,CAACX,SAAD,EAAYQ,SAAZ,EAAuBX,SAAvB,EAAkCE,KAAlC,EAAyCY,KAAzC,CA1B6B,CAA/B;AA6BA,sBACEW,IAAC,OAAD;AACE,IAAA,KAAK,EAAErB,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiB,EADxB;AAEE,IAAA,OAAO,EAAE,CAACA,WAFZ;AAGE,IAAA,sBAAsB,EAAEC,gBAH1B;AAAA,cAKGiB;AALH,IADF;AASD;AAEDvB,SAAS,CAACQ,WAAV,GAAwB,WAAxB;;;;"}

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

@@ -0,0 +1,7 @@
+import { CSSTransition } from "react-transition-group";
+export declare const StyledSignifier: import("styled-components").StyledComponent<"div", any, {
+    $direction: string;
+}, never>;
+export declare const StyledSignifierTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"svg", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Signifier/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAIvD,eAAO,MAAM,eAAe;gBAA4B,MAAM;SAoB7D,CAAC;AAGF,eAAO,MAAM,yBAAyB,mFAmBrC,CAAC;AAGF,eAAO,MAAM,UAAU,oEAEtB,CAAC"}

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

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+import { CSSTransition } from 'react-transition-group';
+import { BoxSizingStyle } from '../BoxSizingStyle.js';
+import { FontStyle } from '../FontStyle.js';
+
+var StyledSignifier = styled.div.withConfig({
+  displayName: "Styles__StyledSignifier",
+  componentId: "sc-1idn4je-0"
+})(["", " ", " ", " cursor:default;", " ", ""], {
+  "display": "inline-flex",
+  "alignItems": "center",
+  "color": "var(--color-theme-800)"
+}, FontStyle, BoxSizingStyle, function (props) {
+  return props.$direction === "c-signifier--top" && css(["--signifier-in:60%;--signifier-out:-60%;"]);
+}, function (props) {
+  return props.$direction === "c-signifier--bottom" && css(["--signifier-in:-60%;--signifier-out:60%;"]);
+});
+StyledSignifier.displayName = "StyledSignifier";
+var StyledSignifierTransition = styled(CSSTransition).withConfig({
+  displayName: "Styles__StyledSignifierTransition",
+  componentId: "sc-1idn4je-1"
+})(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
+StyledSignifierTransition.displayName = "StyledSignifierTransition";
+var StyledIcon = styled.svg.withConfig({
+  displayName: "Styles__StyledIcon",
+  componentId: "sc-1idn4je-2"
+})(["", ""], {
+  "fontSize": "0.75rem",
+  "lineHeight": "1rem",
+  "marginRight": "0.25rem"
+});
+StyledIcon.displayName = "StyledIcon";
+
+export { StyledIcon, StyledSignifier, StyledSignifierTransition };
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Signifier/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledSignifier = styled.div<{ $direction: string }>`\n  ${tw`tw-inline-flex tw-items-center tw-text-theme-800`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  cursor: default;\n\n  ${(props) =>\n    props.$direction === \"c-signifier--top\" &&\n    css`\n      --signifier-in: 60%;\n      --signifier-out: -60%;\n    `}\n\n  ${(props) =>\n    props.$direction === \"c-signifier--bottom\" &&\n    css`\n      --signifier-in: -60%;\n      --signifier-out: 60%;\n    `}\n`;\nStyledSignifier.displayName = \"StyledSignifier\";\n\nexport const StyledSignifierTransition = styled(CSSTransition)`\n  &.c-signifier--animate-enter {\n    opacity: 0;\n    transform: translateY(var(--signifier-in));\n  }\n  &.c-signifier--animate-enter-active {\n    opacity: 1;\n    transform: translateY(0%);\n    transition-duration: 300ms;\n  }\n  &.c-signifier--animate-exit {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n  &.c-signifier--animate-exit-active {\n    transform: translateY(var(--signifier-out));\n    opacity: 0;\n    transition-duration: 300ms;\n  }\n`;\nStyledSignifierTransition.displayName = \"StyledSignifierTransition\";\n\nexport const StyledIcon = styled.svg`\n  ${tw`tw-text-xs tw-mr-1`}\n`;\nStyledIcon.displayName = \"StyledIcon\";\n"],"names":["StyledSignifier","styled","div","FontStyle","BoxSizingStyle","props","$direction","css","displayName","StyledSignifierTransition","CSSTransition","StyledIcon","svg"],"mappings":";;;;;IAMaA,eAAe,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,gDACtB;AAAA;AAAA;AAAA;AAAA,CADsB,EAExBC,SAFwB,EAGxBC,cAHwB,EAOxB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,kBAArB,IACAC,GADA,8CADA;AAAA,CAPwB,EAcxB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,qBAArB,IACAC,GADA,8CADA;AAAA,CAdwB;AAqB5BP,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B;IAEaC,yBAAyB,GAAGR,MAAM,CAACS,aAAD,CAAT;AAAA;AAAA;AAAA;AAoBtCD,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC;IAEaG,UAAU,GAAGV,MAAM,CAACW,GAAV;AAAA;AAAA;AAAA,aACjB;AAAA;AAAA;AAAA;AAAA,CADiB;AAGvBD,UAAU,CAACH,WAAX,GAAyB,YAAzB;;;;"}

package/dist/esm/components/Steppers/DateStepper/DateStepper.d.ts

@@ -1,6 +1,5 @@
 import { FC } from "react";
 import { Placement } from "@popperjs/core";
-import "./DateStepper.css";
 interface IDateStepperProps {
     step: "daily" | "weekly" | "monthly" | "quarterly" | "yearly" | "custom" | string;
     onChange?: (from: Date, to: Date) => void;

package/dist/esm/components/Steppers/DateStepper/DateStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateStepper.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,OAAO,mBAAmB,CAAC;AAE3B,UAAU,iBAAiB;IAEzB,IAAI,EACA,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,CAAC;IAEX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAE1C,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAEpB,EAAE,EAAE,IAAI,GAAG,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;IAEpE,YAAY,CAAC,EAAE,IAAI,CAAC;IAEpB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAExC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAE3C,QAAQ,CAAC,EAAE,IAAI,CAAC;IAEhB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAqU7C,CAAC"}
+{"version":3,"file":"DateStepper.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAc3C,UAAU,iBAAiB;IAEzB,IAAI,EACA,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,CAAC;IAEX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAE1C,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAEpB,EAAE,EAAE,IAAI,GAAG,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;IAEpE,YAAY,CAAC,EAAE,IAAI,CAAC;IAEpB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAExC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,IAAI,CAAC;IAE3C,QAAQ,CAAC,EAAE,IAAI,CAAC;IAEhB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CA4T7C,CAAC"}