@activecollab/components 2.0.89 → 2.0.91

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

@@ -1,35 +1,27 @@
-"use strict";
-
-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 _reactTransitionGroup = require("react-transition-group");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _BoxSizingStyle = require("../BoxSizingStyle");
-var _FontStyle = require("../FontStyle");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSheetIcons = exports.StyledSheetIcons = _styledComponents.default.div.withConfig({
+import { CSSTransition } from "react-transition-group";
+import styled, { css, keyframes } from "styled-components";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { FontStyle } from "../FontStyle";
+export const 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";
-const StyledSheetWrapper = exports.StyledSheetWrapper = _styledComponents.default.div.withConfig({
+export const StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle, props => props.$mode === "stretch" ? (0, _styledComponents.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) : (0, _styledComponents.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), props => props.$position === "center" && (0, _styledComponents.css)(["", ""], {
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => 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), props => props.$position === "center" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "auto"
-}), props => props.$position === "left" && (0, _styledComponents.css)(["", ""], {
+}), props => props.$position === "left" && css(["", ""], {
   "marginLeft": "0.5rem",
   "marginRight": "auto"
-}), props => props.$position === "right" && (0, _styledComponents.css)(["", ""], {
+}), props => props.$position === "right" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "0.5rem"
-}), props => props.$mode === "stretch" && props.$position !== "left" && (0, _styledComponents.css)(["", "{span{right:48px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && props.$position === "left" && (0, _styledComponents.css)(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons));
+}), props => props.$mode === "stretch" && props.$position !== "left" && css(["", "{span{right:48px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons));
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
-const StyledSheetWrapperPaper = exports.StyledSheetWrapperPaper = _styledComponents.default.div.attrs(props => ({
+export const StyledSheetWrapperPaper = styled.div.attrs(props => ({
   className: props.paperClass
 })).withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
@@ -38,18 +30,18 @@ const StyledSheetWrapperPaper = exports.StyledSheetWrapperPaper = _styledCompone
   "flex": "1 1 auto"
 });
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
-const StyledSheetControlsTop = exports.StyledSheetControlsTop = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
-const StyledSheetControlsBottom = exports.StyledSheetControlsBottom = (0, _styledComponents.keyframes)(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
-const StyledSheetControlsCenterIn = exports.StyledSheetControlsCenterIn = (0, _styledComponents.keyframes)(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
-const StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterOut = (0, _styledComponents.keyframes)(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
-const StyledAnimatedSpan = exports.StyledAnimatedSpan = _styledComponents.default.span.withConfig({
+export const StyledSheetControlsTop = keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
+export const StyledSheetControlsBottom = keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
+export const StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
+export const StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
+export const StyledAnimatedSpan = styled.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
   componentId: "sc-144eyxd-3"
-})(["background:red;", " ", " ", " ", ""], props => props.$state === "entering" && (0, _styledComponents.css)(["opacity:1;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, `${props.$durationIn}s`, `${props.$durationIn}s`) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, `${props.$maxDurationIn}s`)), props => props.$state === "entered" && (0, _styledComponents.css)(["opacity:1;"]), props => props.$state === "exiting" && (0, _styledComponents.css)(["opacity:0;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, `${props.$durationOut}s`, `${props.$durationOut}s`) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, `${props.$maxDurationOut}s`)), props => props.$state === "exited" && (0, _styledComponents.css)(["opacity:0;"]));
+})(["background:red;", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
-const StyledCssTransition = exports.StyledCssTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
+export const StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
   componentId: "sc-144eyxd-4"
-})(["", " ", " ", " ", ""], props => props.$direction === "top" && (0, _styledComponents.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;}"]), props => props.$direction === "bottom" && (0, _styledComponents.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;}"]), props => props.$direction === "left" && (0, _styledComponents.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;}"]), props => props.$direction === "right" && (0, _styledComponents.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;}"]));
+})(["", " ", " ", " ", ""], props => 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;}"]), props => 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;}"]), props => 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;}"]), props => 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";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_reactTransitionGroup","require","_styledComponents","_interopRequireWildcard","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSheetIcons","exports","styled","div","withConfig","displayName","componentId","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\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\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\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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"}
+{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","keyframes","BoxSizingStyle","FontStyle","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\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\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\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/esm/components/Sheet/index.js

@@ -1,17 +1,2 @@
-"use strict";
-
-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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Sheet[key];
-    }
-  });
-});
+export * from "./Sheet";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Sheet","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Sheet/index.ts"],"sourcesContent":["export * from \"./Sheet\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Sheet/index.ts"],"sourcesContent":["export * from \"./Sheet\";\n"],"mappings":"AAAA,cAAc,SAAS"}

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

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.signifierTypes = exports.Signifier = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactTransitionGroup = require("react-transition-group");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Styles = require("./Styles");
-var _Tooltip = require("../Tooltip");
-var _Typography = require("../Typography");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const signifierTypes = exports.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"];
-const Signifier = _ref => {
+import React, { useMemo, useState, useEffect } from "react";
+import { SwitchTransition } from "react-transition-group";
+import classnames from "classnames";
+import { StyledIcon, StyledSignifier, StyledSignifierTransition } from "./Styles";
+import { Tooltip } from "../Tooltip";
+import { Body1, Caption1 } from "../Typography";
+export const 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"];
+export const Signifier = _ref => {
   let {
     type: Component,
     value = null,
@@ -25,52 +16,51 @@ const Signifier = _ref => {
   if (signifierTypes.indexOf(Component.displayName) === -1) {
     console.warn("You are using unsupported Signifier icon");
   }
-  const [direction, setDirection] = (0, _react.useState)("c-signifier--top");
-  const [, setPrevValue] = (0, _react.useState)(value);
-  const label = (0, _react.useMemo)(() => {
+  const [direction, setDirection] = useState("c-signifier--top");
+  const [, setPrevValue] = useState(value);
+  const label = useMemo(() => {
     if (!value || value < 1) return null;
-    const max = 1_000_000_000;
+    const max = 1000000000;
     let newValue = value;
     if (newValue > max) {
       newValue = max;
     }
     if (newValue === max) {
-      return `${Math.floor(newValue / 1_000_000_000)}B+`;
-    } else if (newValue > 999_999) {
-      return `${Math.floor(newValue / 1_000_000)}M`;
+      return Math.floor(newValue / 1000000000) + "B+";
+    } else if (newValue > 999999) {
+      return Math.floor(newValue / 1000000) + "M";
     } else if (newValue > 999) {
-      return `${Math.floor(newValue / 1000)}k`;
+      return Math.floor(newValue / 1000) + "k";
     }
-    return `${newValue}`;
+    return "" + newValue;
   }, [value]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     value && setPrevValue(v => {
       v && setDirection(v - value > 0 ? "c-signifier--top" : "c-signifier--bottom");
       return value;
     });
   }, [value]);
-  const renderSignifier = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Styles.StyledSignifier, {
-    className: (0, _classnames.default)("c-signifier", className),
+  const renderSignifier = useMemo(() => /*#__PURE__*/React.createElement(StyledSignifier, {
+    className: classnames("c-signifier", className),
     $direction: direction
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledIcon, {
+  }, /*#__PURE__*/React.createElement(StyledIcon, {
     as: Component
-  }), value !== null && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.SwitchTransition, {
+  }), value !== null && /*#__PURE__*/React.createElement(SwitchTransition, {
     mode: "out-in"
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledSignifierTransition, {
+  }, /*#__PURE__*/React.createElement(StyledSignifierTransition, {
     key: label,
     timeout: 300,
     classNames: "c-signifier--animate"
-  }, Component.displayName.includes("SmallIcon") ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+  }, Component.displayName.includes("SmallIcon") ? /*#__PURE__*/React.createElement(Caption1, {
     color: "secondary"
-  }, label) : /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+  }, label) : /*#__PURE__*/React.createElement(Body1, {
     color: "secondary"
   }, label)))), [className, direction, Component, value, label]);
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: tooltipText ?? "",
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipText != null ? tooltipText : "",
     disable: !tooltipText,
     popperTooltipClassName: tooltipClassName
   }, renderSignifier);
 };
-exports.Signifier = Signifier;
 Signifier.displayName = "Signifier";
 //# sourceMappingURL=Signifier.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Signifier.js","names":["_react","_interopRequireWildcard","require","_reactTransitionGroup","_classnames","_interopRequireDefault","_Styles","_Tooltip","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","signifierTypes","exports","Signifier","_ref","type","Component","value","className","tooltipText","tooltipClassName","indexOf","displayName","console","warn","direction","setDirection","useState","setPrevValue","label","useMemo","max","newValue","Math","floor","useEffect","v","renderSignifier","createElement","StyledSignifier","classnames","$direction","StyledIcon","as","SwitchTransition","mode","StyledSignifierTransition","key","timeout","classNames","includes","Caption1","color","Body1","Tooltip","title","disable","popperTooltipClassName"],"sources":["../../../../src/components/Signifier/Signifier.tsx"],"sourcesContent":["import React, { FC, useMemo, ElementType, useState, useEffect } from \"react\";\nimport { SwitchTransition } from \"react-transition-group\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledIcon,\n  StyledSignifier,\n  StyledSignifierTransition,\n} from \"./Styles\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Body1, Caption1 } from \"../Typography\";\n\nexport interface 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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"}
+{"version":3,"file":"Signifier.js","names":["React","useMemo","useState","useEffect","SwitchTransition","classnames","StyledIcon","StyledSignifier","StyledSignifierTransition","Tooltip","Body1","Caption1","signifierTypes","Signifier","_ref","type","Component","value","className","tooltipText","tooltipClassName","indexOf","displayName","console","warn","direction","setDirection","setPrevValue","label","max","newValue","Math","floor","v","renderSignifier","createElement","$direction","as","mode","key","timeout","classNames","includes","color","title","disable","popperTooltipClassName"],"sources":["../../../../src/components/Signifier/Signifier.tsx"],"sourcesContent":["import React, { FC, useMemo, ElementType, useState, useEffect } from \"react\";\nimport { SwitchTransition } from \"react-transition-group\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledIcon,\n  StyledSignifier,\n  StyledSignifierTransition,\n} from \"./Styles\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Body1, Caption1 } from \"../Typography\";\n\nexport interface 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/esm/components/Signifier/Styles.js

@@ -1,30 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSignifierTransition = exports.StyledSignifier = exports.StyledIcon = void 0;
-var _reactTransitionGroup = require("react-transition-group");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _BoxSizingStyle = require("../BoxSizingStyle");
-var _FontStyle = require("../FontStyle");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSignifier = exports.StyledSignifier = _styledComponents.default.div.withConfig({
+import { CSSTransition } from "react-transition-group";
+import styled, { css } from "styled-components";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { FontStyle } from "../FontStyle";
+export const StyledSignifier = styled.div.withConfig({
   displayName: "Styles__StyledSignifier",
   componentId: "sc-1idn4je-0"
 })(["", " ", " ", " cursor:default;", " ", ""], {
   "display": "inline-flex",
   "alignItems": "center",
   "color": "var(--color-theme-800)"
-}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, props => props.$direction === "c-signifier--top" && (0, _styledComponents.css)(["--signifier-in:60%;--signifier-out:-60%;"]), props => props.$direction === "c-signifier--bottom" && (0, _styledComponents.css)(["--signifier-in:-60%;--signifier-out:60%;"]));
+}, FontStyle, BoxSizingStyle, props => props.$direction === "c-signifier--top" && css(["--signifier-in:60%;--signifier-out:-60%;"]), props => props.$direction === "c-signifier--bottom" && css(["--signifier-in:-60%;--signifier-out:60%;"]));
 StyledSignifier.displayName = "StyledSignifier";
-const StyledSignifierTransition = exports.StyledSignifierTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
+export const 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";
-const StyledIcon = exports.StyledIcon = _styledComponents.default.svg.withConfig({
+export const StyledIcon = styled.svg.withConfig({
   displayName: "Styles__StyledIcon",
   componentId: "sc-1idn4je-2"
 })(["", ""], {

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_reactTransitionGroup","require","_styledComponents","_interopRequireWildcard","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSignifier","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$direction","css","StyledSignifierTransition","CSSTransition","StyledIcon","svg"],"sources":["../../../../src/components/Signifier/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\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,IAAAA,qBAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAGA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAAyC,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAElC,MAAMY,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDACnC;EAAA;EAAA;EAAA;AAAiD,CAAC,EACpDC,oBAAS,EACTC,8BAAc,EAIbC,KAAK,IACNA,KAAK,CAACC,UAAU,KAAK,kBAAkB,QACvCC,qBAAG,+CAGF,EAEAF,KAAK,IACNA,KAAK,CAACC,UAAU,KAAK,qBAAqB,QAC1CC,qBAAG,+CAGF,CACJ;AACDX,eAAe,CAACK,WAAW,GAAG,iBAAiB;AAExC,MAAMO,yBAAyB,GAAAX,OAAA,CAAAW,yBAAA,GAAG,IAAAV,yBAAM,EAACW,mCAAa,CAAC,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+WAmB7D;AACDM,yBAAyB,CAACP,WAAW,GAAG,2BAA2B;AAE5D,MAAMS,UAAU,GAAAb,OAAA,CAAAa,UAAA,GAAGZ,yBAAM,CAACa,GAAG,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC9B;EAAA;EAAA;EAAA;AAAmB,CAAC,CACzB;AACDQ,UAAU,CAACT,WAAW,GAAG,YAAY"}
+{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","BoxSizingStyle","FontStyle","StyledSignifier","div","withConfig","displayName","componentId","props","$direction","StyledSignifierTransition","StyledIcon","svg"],"sources":["../../../../src/components/Signifier/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\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,SAASA,aAAa,QAAQ,wBAAwB;AAEtD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,eAAe,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDACnC;EAAA;EAAA;EAAA;AAAiD,CAAC,EACpDL,SAAS,EACTD,cAAc,EAIbO,KAAK,IACNA,KAAK,CAACC,UAAU,KAAK,kBAAkB,IACvCT,GAAG,8CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACC,UAAU,KAAK,qBAAqB,IAC1CT,GAAG,8CAGF,CACJ;AACDG,eAAe,CAACG,WAAW,GAAG,iBAAiB;AAE/C,OAAO,MAAMI,yBAAyB,GAAGX,MAAM,CAACD,aAAa,CAAC,CAAAO,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+WAmB7D;AACDG,yBAAyB,CAACJ,WAAW,GAAG,2BAA2B;AAEnE,OAAO,MAAMK,UAAU,GAAGZ,MAAM,CAACa,GAAG,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC9B;EAAA;EAAA;EAAA;AAAmB,CAAC,CACzB;AACDI,UAAU,CAACL,WAAW,GAAG,YAAY"}

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

@@ -1,17 +1,2 @@
-"use strict";
-
-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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Signifier[key];
-    }
-  });
-});
+export * from "./Signifier";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Signifier","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Signifier/index.ts"],"sourcesContent":["export * from \"./Signifier\";\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Signifier/index.ts"],"sourcesContent":["export * from \"./Signifier\";\n"],"mappings":"AAAA,cAAc,aAAa"}