@activecollab/components 1.0.294 → 1.0.296

package/dist/cjs/components/AvatarGroup/AvatarGroup.js

@@ -7,51 +7,123 @@ Object.defineProperty(exports, "__esModule", {
 exports.AvatarGroup = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
+var _Tooltip = require("../Tooltip");
 var _Typography = require("../Typography/Typography");
 var _Styles = require("./Styles");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var AvatarGroup = function AvatarGroup(_ref) {
+var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = _react.Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? _react.Children.toArray(children) : _react.Children.toArray(children).slice(0, limit);
   var handleVariant = (0, _react.useMemo)(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = _react.Children.toArray(children)) === null || _Children$toArray === void 0 ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of ".concat(tooltipText);
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-".concat(gap, "px"),
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-".concat(gap, "px"),
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", _react.Children.count(children) - limit)));
-};
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-".concat(gap, "px")
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", _react.Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-".concat(gap, "px")
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", _react.Children.count(children) - limit));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= _react.Children.count(children) || minChildren ? null : renderCounter());
+});
 exports.AvatarGroup = AvatarGroup;
-var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = (0, _styledComponents.default)(_Tooltip.Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","counterProps","minChildren","Children","count","_children","toArray","slice","handleVariant","useMemo","map","child","item","cloneElement","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;;;;;;;AAAA;AASA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGC,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMO,SAAS,GAAGH,WAAW,GACzBC,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,GAC1BG,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,CAACO,KAAK,CAAC,CAAC,EAAET,KAAK,CAAC;EAE9C,IAAMU,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIV,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,0BAAkB,QAChBM,SAAS,CAACK,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbf,IAAI,EAAEA,IAAI;MACVgB,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDnB,KAAK,IAAIK,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,6BAAC,sBAAU;IAAC,OAAO,EAAEO,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/CL,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA,GAVa;EAAEkB,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","forwardRef","ref","limit","size","children","hasTooltip","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","renderAvatars","tooltipText","cloneElement","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

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

@@ -10,7 +10,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var AvatarGroupsStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], _FontStyle.FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], _FontStyle.FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + ".concat(gap * 2, "px + 5px)");
+});
 exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__LengthCountStyles",

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIxCC,oBAAS,CACZ;AAAC;AAMK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4VAIxCC,oBAAS,EAWW,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,6BAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAAC;AAMK,IAAMC,iBAAiB,GAAGN,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}

package/dist/cjs/components/GlobalStyle.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlobalStyle = void 0;
 var _styledComponents = require("styled-components");
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
 exports.GlobalStyle = GlobalStyle;
 //# sourceMappingURL=GlobalStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","names":["GlobalStyle","createGlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n`;\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,WAAW,OAAGC,mCAAiB,8vOAgV3C;AAAC"}
+{"version":3,"file":"GlobalStyle.js","names":["GlobalStyle","createGlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n  /*\n    * Prefer scoped variables in this case.\n    * This lines of CSS should be scoped too.\n    */\n\n  --cooltip-spacing: 0.5rem;\n  --cooltip-padding: 0.25rem 0.625rem;\n  --cooltip-max-width: 12.5rem;\n\n  --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n  --cooltip-transition-delay: 0.6s;\n  --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n}\n\n.c-cooltip::after {\n  /*\n    * will-change is intended to be used as a last resort,\n    * in order to try to deal with existing performance problems.\n    * It should not be used to anticipate performance problems.\n    * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n    *\n    * will-change: transform, opacity\n    */\n  pointer-events: none;\n  content: attr(data-tooltip);\n  position: absolute;\n  color: #fff;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.9);\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1.3;\n  max-width: var(--cooltip-max-width);\n  padding: var(--cooltip-padding);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.c-cooltip--top::after {\n  bottom: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--right::after {\n  left: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n.c-cooltip--bottom::after {\n  top: calc(100% + var(--cooltip-spacing));\n  left: 50%;\n  transform: scale(0.85) translateX(-50%);\n  transform-origin: 0;\n}\n\n.c-cooltip--left::after {\n  right: calc(100% + var(--cooltip-spacing));\n  transform: scale(0.85);\n}\n\n/*\n* Make sure that disabled and aria pressed\n* items do not have tooltips available.\n*/\n.c-cooltip:disabled::after,\n[aria-pressed=\"true\"]::after {\n  display: none;\n}\n\n/*\n*\n* Only use hover when is available .\n* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n*/\n@media (hover: hover) {\n  /*\n    * Here we maybe have a complex selector but actually it's not.\n    * We simply asks here to show tooltip only on hover.\n    * Focused elements (in this case, clicked elements) should hide the tooltip.\n    */\n  .c-cooltip--top:not(:focus):hover::after,\n  .c-cooltip--bottom:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1) translateX(-50%);\n    opacity: 1;\n  }\n\n  /*\n    *\n    * This is not code duplication!\n    * Transform properties are tricky to animate and values\n    * are not the same depending on the tooltip position.\n    *\n    * Animating only one transform, eg. scale(1) will\n    * override all previously set transforms, eg. translateY.\n    * So we need to always chain them.\n    * eg. transform: scale(1) translateY(-50%) etc...\n    */\n\n  .c-cooltip--right:not(:focus):hover::after,\n  .c-cooltip--left:not(:focus):hover::after {\n    transition-property: opacity, transform;\n    transition-duration: var(--cooltip-transition-duration);\n    transition-delay: var(--cooltip-transition-delay);\n    transition-timing-function: var(--cooltip-timing);\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n`;\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,WAAW,OAAGC,mCAAiB,++RA4c3C;AAAC"}

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

@@ -1,10 +1,10 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
+import React from "react";
 export interface AvatarGroupsProps {
     limit: number;
     size?: number;
-    counterProps?: HTMLAttributes<HTMLDivElement> & {
-        [dataAttibute: `data-${string}`]: string;
-    };
+    hasTooltip?: boolean;
 }
-export declare const AvatarGroup: ({ limit, size, children, counterProps, }: PropsWithChildren<AvatarGroupsProps>) => JSX.Element;
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AvatarGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,cAAc,EACd,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAC9C,CAAC,YAAY,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KAC1C,CAAC;CACH;AAED,eAAO,MAAM,WAAW,6CAKrB,kBAAkB,iBAAiB,CAAC,gBA0CtC,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;wCAgHtB,CAAC"}

package/dist/esm/components/AvatarGroup/AvatarGroup.js

@@ -1,43 +1,118 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled3 from "styled-components";
+import _styled2 from "styled-components";
 import _styled from "styled-components";
-import React, { Children, cloneElement, useMemo } from "react";
+import React, { Children, cloneElement, useMemo, forwardRef } from "react";
+import { Tooltip } from "../Tooltip";
 import { Typography } from "../Typography/Typography";
 import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
-export var AvatarGroup = function AvatarGroup(_ref) {
+export var AvatarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
   var handleVariant = useMemo(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of " + tooltipText;
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-" + gap + "px",
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-" + gap + "px",
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/React.createElement(Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", Children.count(children) - limit)));
-};
-var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-" + gap + "px"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/React.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-" + gap + "px"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", Children.count(children) - limit));
+  };
+  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= Children.count(children) || minChildren ? null : renderCounter());
+});
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = _styled(Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","counterProps","minChildren","count","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,EAIZC,OAAO,QACF,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAUhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGX,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMM,SAAS,GAAGF,WAAW,GACzBX,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,GAC1BT,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,CAACM,KAAK,CAAC,CAAC,EAAER,KAAK,CAAC;EAE9C,IAAMS,aAAa,GAAGd,OAAO,CAAC,YAAM;IAClC,IAAIM,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,kBAAkB,QAChBK,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOjB,YAAY,CAACkB,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbZ,IAAI,EAAEA,IAAI;MACVa,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDhB,KAAK,IAAIP,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,oBAAC,UAAU;IAAC,OAAO,EAAEM,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/ChB,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;EAAA;EAAA;AAAA,GAVa;EAAEe,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","Tooltip","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","ref","limit","size","children","hasTooltip","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","renderAvatars","tooltipText","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

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

@@ -1,4 +1,7 @@
-export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {
+    hasTooltip: boolean;
+    gap: number;
+}, never>;
 interface LengthCountStylesProps {
     size: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,oEAK9B,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SACd,MAAM;SA6BZ,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}

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

@@ -3,7 +3,15 @@ import { FontStyle } from "../FontStyle";
 export var AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + " + gap * 2 + "px + 5px)";
+});
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,2DAIxCF,SAAS,CACZ;AAMD,OAAO,IAAMG,iBAAiB,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,4VAIxCF,SAAS,EAWW,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,wBAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAMD,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C"}

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGAgVvB,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGA4cvB,CAAC"}

package/dist/esm/components/GlobalStyle.js

@@ -1,3 +1,3 @@
 import { createGlobalStyle } from "styled-components";
-export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
+export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
 //# sourceMappingURL=GlobalStyle.js.map