@activecollab/components 1.0.206 → 1.0.207

package/dist/cjs/components/Sheet/Sheet.js

@@ -1,87 +1,62 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Sheet = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _Window = require("../Window");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
-
 var _Styles = require("./Styles");
-
 var _Overlay = require("../Overlay");
-
 var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Sheet = /*#__PURE__*/(0, _react.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);
-
+    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 = (0, _react.useState)(defaultOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
   var _useState3 = (0, _react.useState)(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      exited = _useState4[0],
-      setExited = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    exited = _useState4[0],
+    setExited = _useState4[1];
   var innerRef = (0, _react.useRef)(null);
   var handleRef = (0, _useForkRef.default)(innerRef, ref);
   (0, _react.useEffect)(function () {
@@ -103,11 +78,9 @@ var Sheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       handleClose();
     }
   }, [disableBackgroundClick, handleClose]);
-
   if (!open && exited) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement(_Window.Window, _extends({}, rest, {
     ref: handleRef,
     onClose: handleClose,
@@ -123,9 +96,7 @@ var Sheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     $mode: mode
   }, controls.length ? /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetIcons, null, 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;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":"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","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  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\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        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\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"],"file":"Sheet.js"}
+{"version":3,"file":"Sheet.js","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","classnames","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"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  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\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        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\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"],"mappings":"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"}

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

@@ -1,32 +1,22 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSheetWrapperPaper = exports.StyledSheetWrapper = exports.StyledSheetIcons = exports.StyledSheetControlsTop = exports.StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterIn = exports.StyledSheetControlsBottom = exports.StyledCssTransition = exports.StyledAnimatedSpan = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _BoxSizingStyle = require("../BoxSizingStyle");
-
 var _FontStyle = require("../FontStyle");
-
 var _reactTransitionGroup = require("react-transition-group");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var StyledSheetIcons = _styledComponents.default.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);}}"]);
-
 exports.StyledSheetIcons = StyledSheetIcons;
 StyledSheetIcons.displayName = "StyledSheetIcons";
-
 var StyledSheetWrapper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
@@ -52,17 +42,14 @@ var StyledSheetWrapper = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.$mode === "stretch" && props.$position === "left" && (0, _styledComponents.css)(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
 });
-
 exports.StyledSheetWrapper = StyledSheetWrapper;
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
-
 var StyledSheetWrapperPaper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
   componentId: "sc-144eyxd-2"
 })(["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"
 });
-
 exports.StyledSheetWrapperPaper = StyledSheetWrapperPaper;
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
 var StyledSheetControlsTop = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
@@ -73,7 +60,6 @@ var StyledSheetControlsCenterIn = (0, _styledComponents.keyframes)(["0%{transfor
 exports.StyledSheetControlsCenterIn = StyledSheetControlsCenterIn;
 var StyledSheetControlsCenterOut = (0, _styledComponents.keyframes)(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
 exports.StyledSheetControlsCenterOut = StyledSheetControlsCenterOut;
-
 var StyledAnimatedSpan = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
   componentId: "sc-144eyxd-3"
@@ -86,7 +72,6 @@ var StyledAnimatedSpan = _styledComponents.default.span.withConfig({
 }, function (props) {
   return props.$state === "exited" && (0, _styledComponents.css)(["opacity:0;"]);
 });
-
 exports.StyledAnimatedSpan = StyledAnimatedSpan;
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 var StyledCssTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["StyledSheetIcons","styled","div","displayName","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\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\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"],"file":"Styles.js"}
+{"version":3,"file":"Styles.js","names":["StyledSheetIcons","styled","div","displayName","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\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\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"],"mappings":"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"}

package/dist/cjs/components/Sheet/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Sheet = require("./Sheet");
-
 Object.keys(_Sheet).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Sheet[key]) return;

package/dist/cjs/components/Sheet/index.js.map

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

package/dist/cjs/components/Signifier/Signifier.js

@@ -1,75 +1,51 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.signifierTypes = exports.Signifier = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _Tooltip = require("../Tooltip");
-
 var _Typography = require("../Typography");
-
 var _Styles = require("./Styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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"];
 exports.signifierTypes = signifierTypes;
-
 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;
-
+    _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 = (0, _react.useState)("c-signifier--top"),
-      _useState2 = _slicedToArray(_useState, 2),
-      direction = _useState2[0],
-      setDirection = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    direction = _useState2[0],
+    setDirection = _useState2[1];
   var _useState3 = (0, _react.useState)(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      setPrevValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    setPrevValue = _useState4[1];
   var label = (0, _react.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) {
@@ -77,7 +53,6 @@ var Signifier = function Signifier(_ref) {
     } else if (newValue > 999) {
       return "".concat(Math.floor(newValue / 1000), "k");
     }
-
     return "".concat(newValue);
   }, [value]);
   (0, _react.useEffect)(function () {
@@ -110,7 +85,6 @@ var Signifier = function Signifier(_ref) {
     popperTooltipClassName: tooltipClassName
   }, renderSignifier);
 };
-
 exports.Signifier = Signifier;
 Signifier.displayName = "Signifier";
 //# sourceMappingURL=Signifier.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Signifier/Signifier.tsx"],"names":["signifierTypes","Signifier","Component","type","value","className","tooltipText","tooltipClassName","indexOf","displayName","console","warn","direction","setDirection","setPrevValue","label","max","newValue","Math","floor","v","renderSignifier","includes"],"mappings":"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","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"],"file":"Signifier.js"}
+{"version":3,"file":"Signifier.js","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","classnames","includes"],"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"],"mappings":"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"}

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

@@ -1,24 +1,16 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSignifierTransition = exports.StyledSignifier = exports.StyledIcon = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _BoxSizingStyle = require("../BoxSizingStyle");
-
 var _FontStyle = require("../FontStyle");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var StyledSignifier = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSignifier",
   componentId: "sc-1idn4je-0"
@@ -31,7 +23,6 @@ var StyledSignifier = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.$direction === "c-signifier--bottom" && (0, _styledComponents.css)(["--signifier-in:-60%;--signifier-out:60%;"]);
 });
-
 exports.StyledSignifier = StyledSignifier;
 StyledSignifier.displayName = "StyledSignifier";
 var StyledSignifierTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
@@ -40,7 +31,6 @@ var StyledSignifierTransition = (0, _styledComponents.default)(_reactTransitionG
 })(["&.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;}"]);
 exports.StyledSignifierTransition = StyledSignifierTransition;
 StyledSignifierTransition.displayName = "StyledSignifierTransition";
-
 var StyledIcon = _styledComponents.default.svg.withConfig({
   displayName: "Styles__StyledIcon",
   componentId: "sc-1idn4je-2"
@@ -49,7 +39,6 @@ var StyledIcon = _styledComponents.default.svg.withConfig({
   "lineHeight": "1rem",
   "marginRight": "0.25rem"
 });
-
 exports.StyledIcon = StyledIcon;
 StyledIcon.displayName = "StyledIcon";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Signifier/Styles.ts"],"names":["StyledSignifier","styled","div","FontStyle","BoxSizingStyle","props","$direction","css","displayName","StyledSignifierTransition","CSSTransition","StyledIcon","svg"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAEO,IAAMA,eAAe,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,gDACtB;AAAA;AAAA;AAAA;AAAA,CADsB,EAExBC,oBAFwB,EAGxBC,8BAHwB,EAOxB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,kBAArB,QACAC,qBADA,+CADA;AAAA,CAPwB,EAcxB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,qBAArB,QACAC,qBADA,+CADA;AAAA,CAdwB,CAArB;;;AAqBPP,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B;AAEO,IAAMC,yBAAyB,GAAG,+BAAOC,mCAAP,CAAH;AAAA;AAAA;AAAA,+WAA/B;;AAoBPD,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC;;AAEO,IAAMG,UAAU,GAAGV,0BAAOW,GAAV;AAAA;AAAA;AAAA,aACjB;AAAA;AAAA;AAAA;AAAA,CADiB,CAAhB;;;AAGPD,UAAU,CAACH,WAAX,GAAyB,YAAzB","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"],"file":"Styles.js"}
+{"version":3,"file":"Styles.js","names":["StyledSignifier","styled","div","FontStyle","BoxSizingStyle","props","$direction","css","displayName","StyledSignifierTransition","CSSTransition","StyledIcon","svg"],"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"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAyC;AAAA;AAElC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDACnC;EAAA;EAAA;EAAA;AAAiD,CAAC,EACpDC,oBAAS,EACTC,8BAAc,EAId,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,UAAU,KAAK,kBAAkB,QACvCC,qBAAG,+CAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,UAAU,KAAK,qBAAqB,QAC1CC,qBAAG,+CAGF;AAAA,EACJ;AAAC;AACFP,eAAe,CAACQ,WAAW,GAAG,iBAAiB;AAExC,IAAMC,yBAAyB,GAAG,IAAAR,yBAAM,EAACS,mCAAa,CAAC;EAAA;EAAA;AAAA,+WAmB7D;AAAC;AACFD,yBAAyB,CAACD,WAAW,GAAG,2BAA2B;AAE5D,IAAMG,UAAU,GAAGV,yBAAM,CAACW,GAAG;EAAA;EAAA;AAAA,aAC9B;EAAA;EAAA;EAAA;AAAmB,CAAC,CACzB;AAAC;AACFD,UAAU,CAACH,WAAW,GAAG,YAAY"}

package/dist/cjs/components/Signifier/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Signifier = require("./Signifier");
-
 Object.keys(_Signifier).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Signifier[key]) return;

package/dist/cjs/components/Signifier/index.js.map

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