@activecollab/components 1.0.48 → 1.0.51

package/dist/cjs/components/CounterButton/CounterButton.js

@@ -59,7 +59,7 @@ var CounterButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: "secondary",
     weight: "medium",
     className: "c-counter-button__label",
-    $active: active
+    $active: counter > 0 || active
   }, label), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButtonCounter, {
     className: "c-counter-button__counter"
   }, counter) : null), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","React","cloneElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAwBO,IAAMA,aAAa,gBAAG,uBAC3B,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAE,yBAAW,4BAAX,EAAyCD,SAAzC;AAAhB,kBACE,6BAAC,2BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+B;AACxC,oCAA8BH;AADU,KAA/B;AADb,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHO,eAAMC,YAAN,CAAmBR,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAE,yBAAW,wBAAX;AADY,GAAzB,CAXJ,EAcGN,KAAK,iBACJ,6BAAC,gCAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEE;AAJX,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,6BAAC,gBAAD;AACE,IAAA,KAAK,YAAKC,WAAL,CADP;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,6BAAC,gCAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,6BAAC,mBAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9D0B,CAAtB;;AAiEPP,aAAa,CAACY,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\ninterface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","React","cloneElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAwBO,IAAMA,aAAa,gBAAG,uBAC3B,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAE,yBAAW,4BAAX,EAAyCD,SAAzC;AAAhB,kBACE,6BAAC,2BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+B;AACxC,oCAA8BH;AADU,KAA/B;AADb,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHO,eAAMC,YAAN,CAAmBR,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAE,yBAAW,wBAAX;AADY,GAAzB,CAXJ,EAcGN,KAAK,iBACJ,6BAAC,gCAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEG,OAAO,GAAG,CAAV,IAAeD;AAJ1B,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,6BAAC,gBAAD;AACE,IAAA,KAAK,YAAKC,WAAL,CADP;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,6BAAC,gCAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,6BAAC,mBAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9D0B,CAAtB;;AAiEPP,aAAa,CAACY,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\ninterface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -44,7 +44,7 @@ StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
 var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
   displayName: "Styles__StyledCounterButtonLabel",
   componentId: "sc-1ecrcba-3"
-})(["", " ", ":hover &{", "}", ""], {
+})(["", " ", ":hover &&{", "}", ""], {
   "pointerEvents": "none"
 }, StyledCounterButton, function (props) {
   return !props.$active && (0, _styledComponents.css)(["color:var(--color-theme-900);"]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["StyledCounterButton","Button","props","$active","css","$selected","displayName","StyledCounterButtonCounter","styled","div","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAOO,IAAMA,mBAAmB,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,kBAC5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,iGADA;AAAA,CAD4B,EAe5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,wGADA;AAAA,CAf4B,CAAzB;;AAwBPJ,mBAAmB,CAACM,WAApB,GAAkC,qBAAlC;;AAEO,IAAMC,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,6MAAhC;;;AAaPF,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEO,IAAMI,wBAAwB,GAAG,+BAAOT,cAAP,CAAH;AAAA;AAAA;AAAA,+MAA9B;;AAYPS,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC;AAEO,IAAMK,wBAAwB,GAAG,+BAAOC,WAAP,CAAH;AAAA;AAAA;AAAA,oCAC/B;AAAA;AAAA,CAD+B,EAGjCZ,mBAHiC,EAI/B,UAACE,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,QACAC,qBADA,oCADA;AAAA,CAJ+B,EAWjC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,kCADA;AAAA,CAXiC,CAA9B;;AAkBPO,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover & {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["StyledCounterButton","Button","props","$active","css","$selected","displayName","StyledCounterButtonCounter","styled","div","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAOO,IAAMA,mBAAmB,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,kBAC5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,iGADA;AAAA,CAD4B,EAe5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,wGADA;AAAA,CAf4B,CAAzB;;AAwBPJ,mBAAmB,CAACM,WAApB,GAAkC,qBAAlC;;AAEO,IAAMC,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,6MAAhC;;;AAaPF,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEO,IAAMI,wBAAwB,GAAG,+BAAOT,cAAP,CAAH;AAAA;AAAA;AAAA,+MAA9B;;AAYPS,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC;AAEO,IAAMK,wBAAwB,GAAG,+BAAOC,WAAP,CAAH;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCZ,mBAHiC,EAI/B,UAACE,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,QACAC,qBADA,oCADA;AAAA,CAJ+B,EAWjC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,kCADA;AAAA,CAXiC,CAA9B;;AAkBPO,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover && {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}

package/dist/cjs/components/GlobalStyle.js

@@ -7,6 +7,6 @@ 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-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:#f4f5f7;--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);--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:#99999e;--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-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:#2c2e38;--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-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);--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:#99999e;--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-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);}}"]);
 exports.GlobalStyle = GlobalStyle;
 //# sourceMappingURL=GlobalStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["GlobalStyle","createGlobalStyle"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,WAAW,OAAGC,mCAAH,08MAAjB","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-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: #f4f5f7;\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    --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: #99999e;\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-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: #2c2e38;\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"],"file":"GlobalStyle.js"}
+{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["GlobalStyle","createGlobalStyle"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,WAAW,OAAGC,mCAAH,ojNAAjB","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-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    --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: #99999e;\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-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"],"file":"GlobalStyle.js"}

package/dist/cjs/components/ScrollShadow/ScrollShadow.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Styles = require("./Styles");
 
-var _excluded = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical"];
+var _excluded = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,6 +50,8 @@ var ScrollShadow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
       _ref$invertVertical = _ref.invertVertical,
       invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
+      innerColor = _ref.innerColor,
+      outerColor = _ref.outerColor,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)({
@@ -117,18 +119,26 @@ var ScrollShadow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }), children({
     onScroll: handleScroll
   }), !disableVertical ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledScrollShadowTop, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.top
     }
   }), /*#__PURE__*/_react.default.createElement(_Styles.StyledScrollShadowBottom, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.bottom
     }
   })) : null, !disableHorizontal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledScrollShadowLeft, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.left
     }
   }), /*#__PURE__*/_react.default.createElement(_Styles.StyledScrollShadowRight, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.right
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":["ScrollShadow","ref","children","className","disableVertical","disableHorizontal","invertHorizontal","invertVertical","rest","top","right","bottom","left","opacity","setOpacity","handleScroll","event","target","scrollHeight","clientHeight","scrollWidth","clientWidth","scrollTop","scrollLeft","prevState","Math","min","bottomScrollTop","max","offset","newState","onScroll","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useCallback,\n  UIEventHandler,\n  UIEvent,\n  HTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n  StyledScrollShadow,\n  StyledScrollShadowBottom,\n  StyledScrollShadowLeft,\n  StyledScrollShadowRight,\n  StyledScrollShadowTop,\n} from \"./Styles\";\n\nexport interface IScrollShadowProps {\n  /** Children */\n  children: ({ onScroll: UIEventHandler }) => void;\n  /** Applies passed classes */\n  className?: string;\n  /** Disable vertical shadow */\n  disableVertical?: boolean;\n  /** Disable horizontal shadow */\n  disableHorizontal?: boolean;\n  /** Invert horizontal shadow logic */\n  invertHorizontal?: boolean;\n  /** Invert vertical shadow logic */\n  invertVertical?: boolean;\n}\n\nexport const ScrollShadow = forwardRef<\n  HTMLDivElement,\n  IScrollShadowProps & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      className,\n      disableVertical = false,\n      disableHorizontal = false,\n      invertHorizontal = false,\n      invertVertical = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [opacity, setOpacity] = useState({\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    });\n\n    const handleScroll: UIEventHandler = useCallback(\n      (event: UIEvent) => {\n        const { scrollHeight, clientHeight, scrollWidth, clientWidth } =\n          event.target as Element;\n        let { scrollTop, scrollLeft } = event.target as Element;\n\n        if (scrollLeft < 0) {\n          scrollLeft *= -1;\n        }\n        if (scrollTop < 0) {\n          scrollTop *= -1;\n        }\n\n        setOpacity((prevState) => {\n          const top = (1 / 20) * Math.min(scrollTop, 20);\n          const bottomScrollTop = scrollHeight - clientHeight;\n          const bottom =\n            (1 / 20) *\n            (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));\n          const left = (1 / 20) * Math.min(scrollLeft, 20);\n          const offset = scrollWidth - clientWidth;\n          const right = (1 / 20) * (offset - Math.max(scrollLeft, offset - 20));\n\n          const newState = { top: 0, bottom: 0, left: 0, right: 0 };\n\n          if (!disableVertical) {\n            newState.top = invertVertical ? bottom : top;\n            newState.bottom = invertVertical ? top : bottom;\n          }\n\n          if (!disableHorizontal) {\n            newState.left = invertHorizontal ? right : left;\n            newState.right = invertHorizontal ? left : right;\n          }\n\n          if (\n            newState.top !== prevState.top ||\n            newState.bottom !== prevState.bottom ||\n            newState.left !== prevState.left ||\n            newState.right !== prevState.right\n          ) {\n            return newState;\n          }\n\n          return prevState;\n        });\n      },\n      [invertHorizontal, invertVertical, disableVertical, disableHorizontal]\n    );\n\n    return (\n      <StyledScrollShadow\n        {...rest}\n        ref={ref}\n        className={classnames(\"c-scroll-shadow\", className)}\n      >\n        {children({ onScroll: handleScroll })}\n        {!disableVertical ? (\n          <>\n            <StyledScrollShadowTop style={{ opacity: opacity.top }} />\n            <StyledScrollShadowBottom style={{ opacity: opacity.bottom }} />\n          </>\n        ) : null}\n        {!disableHorizontal ? (\n          <>\n            <StyledScrollShadowLeft style={{ opacity: opacity.left }} />\n            <StyledScrollShadowRight style={{ opacity: opacity.right }} />\n          </>\n        ) : null}\n      </StyledScrollShadow>\n    );\n  }\n);\n\nScrollShadow.displayName = \"ScrollShadow\";\n"],"file":"ScrollShadow.js"}
+{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":["ScrollShadow","ref","children","className","disableVertical","disableHorizontal","invertHorizontal","invertVertical","innerColor","outerColor","rest","top","right","bottom","left","opacity","setOpacity","handleScroll","event","target","scrollHeight","clientHeight","scrollWidth","clientWidth","scrollTop","scrollLeft","prevState","Math","min","bottomScrollTop","max","offset","newState","onScroll","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useCallback,\n  UIEventHandler,\n  UIEvent,\n  HTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n  StyledScrollShadow,\n  StyledScrollShadowBottom,\n  StyledScrollShadowLeft,\n  StyledScrollShadowRight,\n  StyledScrollShadowTop,\n} from \"./Styles\";\n\nexport interface IScrollShadowProps {\n  /** Children */\n  children: ({ onScroll: UIEventHandler }) => void;\n  /** Applies passed classes */\n  className?: string;\n  /** Disable vertical shadow */\n  disableVertical?: boolean;\n  /** Disable horizontal shadow */\n  disableHorizontal?: boolean;\n  /** Invert horizontal shadow logic */\n  invertHorizontal?: boolean;\n  /** Invert vertical shadow logic */\n  invertVertical?: boolean;\n  /** Inner gradient color */\n  innerColor?: string;\n  /** Outer gradient color */\n  outerColor?: string;\n}\n\nexport const ScrollShadow = forwardRef<\n  HTMLDivElement,\n  IScrollShadowProps & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      className,\n      disableVertical = false,\n      disableHorizontal = false,\n      invertHorizontal = false,\n      invertVertical = false,\n      innerColor,\n      outerColor,\n      ...rest\n    },\n    ref\n  ) => {\n    const [opacity, setOpacity] = useState({\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    });\n\n    const handleScroll: UIEventHandler = useCallback(\n      (event: UIEvent) => {\n        const { scrollHeight, clientHeight, scrollWidth, clientWidth } =\n          event.target as Element;\n        let { scrollTop, scrollLeft } = event.target as Element;\n\n        if (scrollLeft < 0) {\n          scrollLeft *= -1;\n        }\n        if (scrollTop < 0) {\n          scrollTop *= -1;\n        }\n\n        setOpacity((prevState) => {\n          const top = (1 / 20) * Math.min(scrollTop, 20);\n          const bottomScrollTop = scrollHeight - clientHeight;\n          const bottom =\n            (1 / 20) *\n            (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));\n          const left = (1 / 20) * Math.min(scrollLeft, 20);\n          const offset = scrollWidth - clientWidth;\n          const right = (1 / 20) * (offset - Math.max(scrollLeft, offset - 20));\n\n          const newState = { top: 0, bottom: 0, left: 0, right: 0 };\n\n          if (!disableVertical) {\n            newState.top = invertVertical ? bottom : top;\n            newState.bottom = invertVertical ? top : bottom;\n          }\n\n          if (!disableHorizontal) {\n            newState.left = invertHorizontal ? right : left;\n            newState.right = invertHorizontal ? left : right;\n          }\n\n          if (\n            newState.top !== prevState.top ||\n            newState.bottom !== prevState.bottom ||\n            newState.left !== prevState.left ||\n            newState.right !== prevState.right\n          ) {\n            return newState;\n          }\n\n          return prevState;\n        });\n      },\n      [invertHorizontal, invertVertical, disableVertical, disableHorizontal]\n    );\n\n    return (\n      <StyledScrollShadow\n        {...rest}\n        ref={ref}\n        className={classnames(\"c-scroll-shadow\", className)}\n      >\n        {children({ onScroll: handleScroll })}\n        {!disableVertical ? (\n          <>\n            <StyledScrollShadowTop\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.top }}\n            />\n            <StyledScrollShadowBottom\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.bottom }}\n            />\n          </>\n        ) : null}\n        {!disableHorizontal ? (\n          <>\n            <StyledScrollShadowLeft\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.left }}\n            />\n            <StyledScrollShadowRight\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.right }}\n            />\n          </>\n        ) : null}\n      </StyledScrollShadow>\n    );\n  }\n);\n\nScrollShadow.displayName = \"ScrollShadow\";\n"],"file":"ScrollShadow.js"}

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

@@ -21,12 +21,16 @@ exports.StyledScrollShadow = StyledScrollShadow;
 var StyledScrollShadowTop = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledScrollShadowTop",
   componentId: "sc-17pcaqo-1"
-})(["", " background-image:linear-gradient( to top,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+})(["", " background-image:linear-gradient( to top,", ",", " );"], {
   "position": "absolute",
   "top": "0px",
   "left": "0px",
   "right": "0px",
   "height": "0.5rem"
+}, function (props) {
+  return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
+}, function (props) {
+  return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
 });
 
 exports.StyledScrollShadowTop = StyledScrollShadowTop;
@@ -34,12 +38,16 @@ exports.StyledScrollShadowTop = StyledScrollShadowTop;
 var StyledScrollShadowBottom = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledScrollShadowBottom",
   componentId: "sc-17pcaqo-2"
-})(["", " background-image:linear-gradient( to top,var(--page-paper-main),var(--page-paper-main-shadow) );"], {
+})(["", " background-image:linear-gradient( to top,", ",", " );"], {
   "position": "absolute",
   "bottom": "0px",
   "left": "0px",
   "right": "0px",
   "height": "0.5rem"
+}, function (props) {
+  return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
+}, function (props) {
+  return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
 });
 
 exports.StyledScrollShadowBottom = StyledScrollShadowBottom;
@@ -47,12 +55,16 @@ exports.StyledScrollShadowBottom = StyledScrollShadowBottom;
 var StyledScrollShadowLeft = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledScrollShadowLeft",
   componentId: "sc-17pcaqo-3"
-})(["", " background-image:linear-gradient( to left,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+})(["", " background-image:linear-gradient( to left,", ",", " );"], {
   "position": "absolute",
   "left": "0px",
   "top": "0px",
   "bottom": "0px",
   "width": "0.5rem"
+}, function (props) {
+  return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
+}, function (props) {
+  return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
 });
 
 exports.StyledScrollShadowLeft = StyledScrollShadowLeft;
@@ -60,12 +72,16 @@ exports.StyledScrollShadowLeft = StyledScrollShadowLeft;
 var StyledScrollShadowRight = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledScrollShadowRight",
   componentId: "sc-17pcaqo-4"
-})(["", " background-image:linear-gradient( to right,var(--page-paper-main-shadow),var(--page-paper-main) );"], {
+})(["", " background-image:linear-gradient( to right,", ",", " );"], {
   "position": "absolute",
   "right": "0px",
   "top": "0px",
   "bottom": "0px",
   "width": "0.5rem"
+}, function (props) {
+  return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
+}, function (props) {
+  return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
 });
 
 exports.StyledScrollShadowRight = StyledScrollShadowRight;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollShadow/Styles.ts"],"names":["StyledScrollShadow","styled","div","StyledScrollShadowTop","StyledScrollShadowBottom","StyledScrollShadowLeft","StyledScrollShadowRight","displayName"],"mappings":";;;;;;;AAAA;;;;AAGO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;;;;AAIA,IAAMC,qBAAqB,GAAGF,0BAAOC,GAAV;AAAA;AAAA;AAAA,8GAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD4B,CAA3B;;;;AAUA,IAAME,wBAAwB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,8GAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD+B,CAA9B;;;;AAUA,IAAMG,sBAAsB,GAAGJ,0BAAOC,GAAV;AAAA;AAAA;AAAA,+GAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,CAA5B;;;;AAUA,IAAMI,uBAAuB,GAAGL,0BAAOC,GAAV;AAAA;AAAA;AAAA,gHAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD8B,CAA7B;;;AAUPF,kBAAkB,CAACO,WAAnB,GAAiC,oBAAjC;AACAJ,qBAAqB,CAACI,WAAtB,GAAoC,uBAApC;AACAH,wBAAwB,CAACG,WAAzB,GAAuC,0BAAvC;AACAF,sBAAsB,CAACE,WAAvB,GAAqC,wBAArC;AACAD,uBAAuB,CAACC,WAAxB,GAAsC,yBAAtC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledScrollShadow = styled.div`\n  ${tw`tw-relative`}\n`;\n\nexport const StyledScrollShadowTop = styled.div`\n  ${tw`tw-absolute tw-top-0 tw-inset-x-0 tw-h-2`}\n\n  background-image: linear-gradient(\n    to top,\n    var(--page-paper-main-shadow),\n    var(--page-paper-main)\n  );\n`;\n\nexport const StyledScrollShadowBottom = styled.div`\n  ${tw`tw-absolute tw-bottom-0 tw-inset-x-0 tw-h-2`}\n\n  background-image: linear-gradient(\n    to top,\n    var(--page-paper-main),\n    var(--page-paper-main-shadow)\n  );\n`;\n\nexport const StyledScrollShadowLeft = styled.div`\n  ${tw`tw-absolute tw-left-0 tw-inset-y-0 tw-w-2`}\n\n  background-image: linear-gradient(\n    to left,\n    var(--page-paper-main-shadow),\n    var(--page-paper-main)\n  );\n`;\n\nexport const StyledScrollShadowRight = styled.div`\n  ${tw`tw-absolute tw-right-0 tw-inset-y-0 tw-w-2`}\n\n  background-image: linear-gradient(\n    to right,\n    var(--page-paper-main-shadow),\n    var(--page-paper-main)\n  );\n`;\n\nStyledScrollShadow.displayName = \"StyledScrollShadow\";\nStyledScrollShadowTop.displayName = \"StyledScrollShadowTop\";\nStyledScrollShadowBottom.displayName = \"StyledScrollShadowBottom\";\nStyledScrollShadowLeft.displayName = \"StyledScrollShadowLeft\";\nStyledScrollShadowRight.displayName = \"StyledScrollShadowRight\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/ScrollShadow/Styles.ts"],"names":["StyledScrollShadow","styled","div","StyledScrollShadowTop","props","$innerColor","$outerColor","StyledScrollShadowBottom","StyledScrollShadowLeft","StyledScrollShadowRight","displayName"],"mappings":";;;;;;;AAAA;;;;AAQO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;;;;AAIA,IAAMC,qBAAqB,GAAGF,0BAAOC,GAAV;AAAA;AAAA;AAAA,mEAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD4B,EAK5B,UAACE,KAAD;AAAA,SACFA,KAAK,CAACC,WAAN,GAAoBD,KAAK,CAACC,WAA1B,GAAwC,+BADtC;AAAA,CAL4B,EAO5B,UAACD,KAAD;AAAA,SACFA,KAAK,CAACE,WAAN,GAAoBF,KAAK,CAACE,WAA1B,GAAwC,wBADtC;AAAA,CAP4B,CAA3B;;;;AAYA,IAAMC,wBAAwB,GAAGN,0BAAOC,GAAV;AAAA;AAAA;AAAA,mEAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD+B,EAK/B,UAACE,KAAD;AAAA,SACFA,KAAK,CAACE,WAAN,GAAoBF,KAAK,CAACE,WAA1B,GAAwC,wBADtC;AAAA,CAL+B,EAO/B,UAACF,KAAD;AAAA,SACFA,KAAK,CAACC,WAAN,GAAoBD,KAAK,CAACC,WAA1B,GAAwC,+BADtC;AAAA,CAP+B,CAA9B;;;;AAYA,IAAMG,sBAAsB,GAAGP,0BAAOC,GAAV;AAAA;AAAA;AAAA,oEAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAK7B,UAACE,KAAD;AAAA,SACFA,KAAK,CAACC,WAAN,GAAoBD,KAAK,CAACC,WAA1B,GAAwC,+BADtC;AAAA,CAL6B,EAO7B,UAACD,KAAD;AAAA,SACFA,KAAK,CAACE,WAAN,GAAoBF,KAAK,CAACE,WAA1B,GAAwC,wBADtC;AAAA,CAP6B,CAA5B;;;;AAYA,IAAMG,uBAAuB,GAAGR,0BAAOC,GAAV;AAAA;AAAA;AAAA,qEAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD8B,EAK9B,UAACE,KAAD;AAAA,SACFA,KAAK,CAACC,WAAN,GAAoBD,KAAK,CAACC,WAA1B,GAAwC,+BADtC;AAAA,CAL8B,EAO9B,UAACD,KAAD;AAAA,SACFA,KAAK,CAACE,WAAN,GAAoBF,KAAK,CAACE,WAA1B,GAAwC,wBADtC;AAAA,CAP8B,CAA7B;;;AAYPN,kBAAkB,CAACU,WAAnB,GAAiC,oBAAjC;AACAP,qBAAqB,CAACO,WAAtB,GAAoC,uBAApC;AACAH,wBAAwB,CAACG,WAAzB,GAAuC,0BAAvC;AACAF,sBAAsB,CAACE,WAAvB,GAAqC,wBAArC;AACAD,uBAAuB,CAACC,WAAxB,GAAsC,yBAAtC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface Colors {\n  $innerColor?: string;\n  $outerColor?: string;\n}\n\nexport const StyledScrollShadow = styled.div`\n  ${tw`tw-relative`}\n`;\n\nexport const StyledScrollShadowTop = styled.div<Colors>`\n  ${tw`tw-absolute tw-top-0 tw-inset-x-0 tw-h-2`}\n\n  background-image: linear-gradient(\n    to top,\n    ${(props) =>\n    props.$innerColor ? props.$innerColor : \"var(--page-paper-main-shadow)\"},\n    ${(props) =>\n    props.$outerColor ? props.$outerColor : \"var(--page-paper-main)\"}\n  );\n`;\n\nexport const StyledScrollShadowBottom = styled.div<Colors>`\n  ${tw`tw-absolute tw-bottom-0 tw-inset-x-0 tw-h-2`}\n\n  background-image: linear-gradient(\n    to top,\n    ${(props) =>\n    props.$outerColor ? props.$outerColor : \"var(--page-paper-main)\"},\n    ${(props) =>\n    props.$innerColor ? props.$innerColor : \"var(--page-paper-main-shadow)\"}\n  );\n`;\n\nexport const StyledScrollShadowLeft = styled.div<Colors>`\n  ${tw`tw-absolute tw-left-0 tw-inset-y-0 tw-w-2`}\n\n  background-image: linear-gradient(\n    to left,\n    ${(props) =>\n    props.$innerColor ? props.$innerColor : \"var(--page-paper-main-shadow)\"},\n    ${(props) =>\n    props.$outerColor ? props.$outerColor : \"var(--page-paper-main)\"}\n  );\n`;\n\nexport const StyledScrollShadowRight = styled.div<Colors>`\n  ${tw`tw-absolute tw-right-0 tw-inset-y-0 tw-w-2`}\n\n  background-image: linear-gradient(\n    to right,\n    ${(props) =>\n    props.$innerColor ? props.$innerColor : \"var(--page-paper-main-shadow)\"},\n    ${(props) =>\n    props.$outerColor ? props.$outerColor : \"var(--page-paper-main)\"}\n  );\n`;\n\nStyledScrollShadow.displayName = \"StyledScrollShadow\";\nStyledScrollShadowTop.displayName = \"StyledScrollShadowTop\";\nStyledScrollShadowBottom.displayName = \"StyledScrollShadowBottom\";\nStyledScrollShadowLeft.displayName = \"StyledScrollShadowLeft\";\nStyledScrollShadowRight.displayName = \"StyledScrollShadowRight\";\n"],"file":"Styles.js"}

package/dist/esm/components/CounterButton/CounterButton.js

@@ -34,7 +34,7 @@ export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color: "secondary",
     weight: "medium",
     className: "c-counter-button__label",
-    $active: active
+    $active: counter > 0 || active
   }, label), counter > 0 ? /*#__PURE__*/React.createElement(StyledCounterButtonCounter, {
     className: "c-counter-button__counter"
   }, counter) : null), counter > 0 ? /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledCounterButton","StyledCounterButtonCounter","StyledCounterButtonLabel","StyledCounterButtonReset","CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","cloneElement","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAgD,OAAhD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,OAAOC,cAAP,MAA2B,gCAA3B;AACA,SACEC,mBADF,EAEEC,0BAFF,EAGEC,wBAHF,EAIEC,wBAJF,QAKO,UALP;AAwBA,OAAO,IAAMC,aAAa,gBAAGR,UAAU,CACrC,gBAWES,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAEhB,UAAU,CAAC,4BAAD,EAA+Be,SAA/B;AAA1B,kBACE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAEf,UAAU,CAAC,kBAAD,EAAqB;AACxC,oCAA8BY;AADU,KAArB;AADvB,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHZ,KAAK,CAACmB,YAAN,CAAmBP,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAEf,UAAU,CAAC,wBAAD;AADE,GAAzB,CAXJ,EAcGS,KAAK,iBACJ,oBAAC,wBAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEE;AAJX,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,oBAAC,0BAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,oBAAC,OAAD;AACE,IAAA,KAAK,OAAKC,WADZ;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,oBAAC,wBAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,oBAAC,cAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9DoC,CAAhC;AAiEPP,aAAa,CAACW,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\ninterface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledCounterButton","StyledCounterButtonCounter","StyledCounterButtonLabel","StyledCounterButtonReset","CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","cloneElement","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAgD,OAAhD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,OAAOC,cAAP,MAA2B,gCAA3B;AACA,SACEC,mBADF,EAEEC,0BAFF,EAGEC,wBAHF,EAIEC,wBAJF,QAKO,UALP;AAwBA,OAAO,IAAMC,aAAa,gBAAGR,UAAU,CACrC,gBAWES,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAEhB,UAAU,CAAC,4BAAD,EAA+Be,SAA/B;AAA1B,kBACE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAEf,UAAU,CAAC,kBAAD,EAAqB;AACxC,oCAA8BY;AADU,KAArB;AADvB,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHZ,KAAK,CAACmB,YAAN,CAAmBP,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAEf,UAAU,CAAC,wBAAD;AADE,GAAzB,CAXJ,EAcGS,KAAK,iBACJ,oBAAC,wBAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEG,OAAO,GAAG,CAAV,IAAeD;AAJ1B,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,oBAAC,0BAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,oBAAC,OAAD;AACE,IAAA,KAAK,OAAKC,WADZ;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,oBAAC,wBAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,oBAAC,cAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9DoC,CAAhC;AAiEPP,aAAa,CAACW,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\ninterface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -23,7 +23,7 @@ StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
 export var StyledCounterButtonLabel = styled(Body2).withConfig({
   displayName: "Styles__StyledCounterButtonLabel",
   componentId: "sc-1ecrcba-3"
-})(["", " ", ":hover &{", "}", ""], {
+})(["", " ", ":hover &&{", "}", ""], {
   "pointerEvents": "none"
 }, StyledCounterButton, function (props) {
   return !props.$active && css(["color:var(--color-theme-900);"]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["styled","css","Body2","Button","StyledCounterButton","props","$active","$selected","displayName","StyledCounterButtonCounter","div","StyledCounterButtonReset","StyledCounterButtonLabel"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,KAAT,QAAsB,8BAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAOA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,kBAC5B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,gGADA;AAAA,CAD4B,EAe5B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,SAAN,IACAN,GADA,uGADA;AAAA,CAf4B,CAAzB;AAwBPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,0BAA0B,GAAGT,MAAM,CAACU,GAAV;AAAA;AAAA;AAAA,6MAAhC;AAaPD,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMG,wBAAwB,GAAGX,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,+MAA9B;AAYPQ,wBAAwB,CAACH,WAAzB,GAAuC,0BAAvC;AAEA,OAAO,IAAMI,wBAAwB,GAAGZ,MAAM,CAACE,KAAD,CAAT;AAAA;AAAA;AAAA,oCAC/B;AAAA;AAAA,CAD+B,EAGjCE,mBAHiC,EAI/B,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,IACAL,GADA,mCADA;AAAA,CAJ+B,EAWjC,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,iCADA;AAAA,CAXiC,CAA9B;AAkBPW,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover & {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["styled","css","Body2","Button","StyledCounterButton","props","$active","$selected","displayName","StyledCounterButtonCounter","div","StyledCounterButtonReset","StyledCounterButtonLabel"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,KAAT,QAAsB,8BAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAOA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,kBAC5B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,gGADA;AAAA,CAD4B,EAe5B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,SAAN,IACAN,GADA,uGADA;AAAA,CAf4B,CAAzB;AAwBPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,0BAA0B,GAAGT,MAAM,CAACU,GAAV;AAAA;AAAA;AAAA,6MAAhC;AAaPD,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMG,wBAAwB,GAAGX,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,+MAA9B;AAYPQ,wBAAwB,CAACH,WAAzB,GAAuC,0BAAvC;AAEA,OAAO,IAAMI,wBAAwB,GAAGZ,MAAM,CAACE,KAAD,CAAT;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCE,mBAHiC,EAI/B,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,IACAL,GADA,mCADA;AAAA,CAJ+B,EAWjC,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAL,GADA,iCADA;AAAA,CAXiC,CAA9B;AAkBPW,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover && {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}

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,gGA4TvB,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGA8TvB,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-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:#f4f5f7;--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);--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:#99999e;--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-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:#2c2e38;--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-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);--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:#99999e;--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-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);}}"]);
 //# sourceMappingURL=GlobalStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,y8MAAjB","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-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: #f4f5f7;\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    --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: #99999e;\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-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: #2c2e38;\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"],"file":"GlobalStyle.js"}
+{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,mjNAAjB","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-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    --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: #99999e;\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-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"],"file":"GlobalStyle.js"}

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

@@ -8,6 +8,8 @@ export interface IScrollShadowProps {
     disableHorizontal?: boolean;
     invertHorizontal?: boolean;
     invertVertical?: boolean;
+    innerColor?: string;
+    outerColor?: string;
 }
 export declare const ScrollShadow: React.ForwardRefExoticComponent<IScrollShadowProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ScrollShadow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollShadow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,kBAAkB;IAEjC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE;;KAAA,KAAK,IAAI,CAAC;IAEjD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,kIA+FxB,CAAC"}
+{"version":3,"file":"ScrollShadow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,kBAAkB;IAEjC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE;;KAAA,KAAK,IAAI,CAAC;IAEjD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,kIAiHxB,CAAC"}

package/dist/esm/components/ScrollShadow/ScrollShadow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical"];
+var _excluded = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
 import React, { forwardRef, useState, useCallback } from "react";
 import classnames from "classnames";
 import { StyledScrollShadow, StyledScrollShadowBottom, StyledScrollShadowLeft, StyledScrollShadowRight, StyledScrollShadowTop } from "./Styles";
@@ -15,6 +15,8 @@ export var ScrollShadow = /*#__PURE__*/forwardRef(function (_ref, ref) {
       invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
       _ref$invertVertical = _ref.invertVertical,
       invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
+      innerColor = _ref.innerColor,
+      outerColor = _ref.outerColor,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = useState({
@@ -81,18 +83,26 @@ export var ScrollShadow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), children({
     onScroll: handleScroll
   }), !disableVertical ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowTop, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.top
     }
   }), /*#__PURE__*/React.createElement(StyledScrollShadowBottom, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.bottom
     }
   })) : null, !disableHorizontal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollShadowLeft, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.left
     }
   }), /*#__PURE__*/React.createElement(StyledScrollShadowRight, {
+    $innerColor: innerColor,
+    $outerColor: outerColor,
     style: {
       opacity: opacity.right
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":["React","forwardRef","useState","useCallback","classnames","StyledScrollShadow","StyledScrollShadowBottom","StyledScrollShadowLeft","StyledScrollShadowRight","StyledScrollShadowTop","ScrollShadow","ref","children","className","disableVertical","disableHorizontal","invertHorizontal","invertVertical","rest","top","right","bottom","left","opacity","setOpacity","handleScroll","event","target","scrollHeight","clientHeight","scrollWidth","clientWidth","scrollTop","scrollLeft","prevState","Math","min","bottomScrollTop","max","offset","newState","onScroll","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useCallback,\n  UIEventHandler,\n  UIEvent,\n  HTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n  StyledScrollShadow,\n  StyledScrollShadowBottom,\n  StyledScrollShadowLeft,\n  StyledScrollShadowRight,\n  StyledScrollShadowTop,\n} from \"./Styles\";\n\nexport interface IScrollShadowProps {\n  /** Children */\n  children: ({ onScroll: UIEventHandler }) => void;\n  /** Applies passed classes */\n  className?: string;\n  /** Disable vertical shadow */\n  disableVertical?: boolean;\n  /** Disable horizontal shadow */\n  disableHorizontal?: boolean;\n  /** Invert horizontal shadow logic */\n  invertHorizontal?: boolean;\n  /** Invert vertical shadow logic */\n  invertVertical?: boolean;\n}\n\nexport const ScrollShadow = forwardRef<\n  HTMLDivElement,\n  IScrollShadowProps & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      className,\n      disableVertical = false,\n      disableHorizontal = false,\n      invertHorizontal = false,\n      invertVertical = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [opacity, setOpacity] = useState({\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    });\n\n    const handleScroll: UIEventHandler = useCallback(\n      (event: UIEvent) => {\n        const { scrollHeight, clientHeight, scrollWidth, clientWidth } =\n          event.target as Element;\n        let { scrollTop, scrollLeft } = event.target as Element;\n\n        if (scrollLeft < 0) {\n          scrollLeft *= -1;\n        }\n        if (scrollTop < 0) {\n          scrollTop *= -1;\n        }\n\n        setOpacity((prevState) => {\n          const top = (1 / 20) * Math.min(scrollTop, 20);\n          const bottomScrollTop = scrollHeight - clientHeight;\n          const bottom =\n            (1 / 20) *\n            (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));\n          const left = (1 / 20) * Math.min(scrollLeft, 20);\n          const offset = scrollWidth - clientWidth;\n          const right = (1 / 20) * (offset - Math.max(scrollLeft, offset - 20));\n\n          const newState = { top: 0, bottom: 0, left: 0, right: 0 };\n\n          if (!disableVertical) {\n            newState.top = invertVertical ? bottom : top;\n            newState.bottom = invertVertical ? top : bottom;\n          }\n\n          if (!disableHorizontal) {\n            newState.left = invertHorizontal ? right : left;\n            newState.right = invertHorizontal ? left : right;\n          }\n\n          if (\n            newState.top !== prevState.top ||\n            newState.bottom !== prevState.bottom ||\n            newState.left !== prevState.left ||\n            newState.right !== prevState.right\n          ) {\n            return newState;\n          }\n\n          return prevState;\n        });\n      },\n      [invertHorizontal, invertVertical, disableVertical, disableHorizontal]\n    );\n\n    return (\n      <StyledScrollShadow\n        {...rest}\n        ref={ref}\n        className={classnames(\"c-scroll-shadow\", className)}\n      >\n        {children({ onScroll: handleScroll })}\n        {!disableVertical ? (\n          <>\n            <StyledScrollShadowTop style={{ opacity: opacity.top }} />\n            <StyledScrollShadowBottom style={{ opacity: opacity.bottom }} />\n          </>\n        ) : null}\n        {!disableHorizontal ? (\n          <>\n            <StyledScrollShadowLeft style={{ opacity: opacity.left }} />\n            <StyledScrollShadowRight style={{ opacity: opacity.right }} />\n          </>\n        ) : null}\n      </StyledScrollShadow>\n    );\n  }\n);\n\nScrollShadow.displayName = \"ScrollShadow\";\n"],"file":"ScrollShadow.js"}
+{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollShadow.tsx"],"names":["React","forwardRef","useState","useCallback","classnames","StyledScrollShadow","StyledScrollShadowBottom","StyledScrollShadowLeft","StyledScrollShadowRight","StyledScrollShadowTop","ScrollShadow","ref","children","className","disableVertical","disableHorizontal","invertHorizontal","invertVertical","innerColor","outerColor","rest","top","right","bottom","left","opacity","setOpacity","handleScroll","event","target","scrollHeight","clientHeight","scrollWidth","clientWidth","scrollTop","scrollLeft","prevState","Math","min","bottomScrollTop","max","offset","newState","onScroll","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useCallback,\n  UIEventHandler,\n  UIEvent,\n  HTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n  StyledScrollShadow,\n  StyledScrollShadowBottom,\n  StyledScrollShadowLeft,\n  StyledScrollShadowRight,\n  StyledScrollShadowTop,\n} from \"./Styles\";\n\nexport interface IScrollShadowProps {\n  /** Children */\n  children: ({ onScroll: UIEventHandler }) => void;\n  /** Applies passed classes */\n  className?: string;\n  /** Disable vertical shadow */\n  disableVertical?: boolean;\n  /** Disable horizontal shadow */\n  disableHorizontal?: boolean;\n  /** Invert horizontal shadow logic */\n  invertHorizontal?: boolean;\n  /** Invert vertical shadow logic */\n  invertVertical?: boolean;\n  /** Inner gradient color */\n  innerColor?: string;\n  /** Outer gradient color */\n  outerColor?: string;\n}\n\nexport const ScrollShadow = forwardRef<\n  HTMLDivElement,\n  IScrollShadowProps & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      className,\n      disableVertical = false,\n      disableHorizontal = false,\n      invertHorizontal = false,\n      invertVertical = false,\n      innerColor,\n      outerColor,\n      ...rest\n    },\n    ref\n  ) => {\n    const [opacity, setOpacity] = useState({\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    });\n\n    const handleScroll: UIEventHandler = useCallback(\n      (event: UIEvent) => {\n        const { scrollHeight, clientHeight, scrollWidth, clientWidth } =\n          event.target as Element;\n        let { scrollTop, scrollLeft } = event.target as Element;\n\n        if (scrollLeft < 0) {\n          scrollLeft *= -1;\n        }\n        if (scrollTop < 0) {\n          scrollTop *= -1;\n        }\n\n        setOpacity((prevState) => {\n          const top = (1 / 20) * Math.min(scrollTop, 20);\n          const bottomScrollTop = scrollHeight - clientHeight;\n          const bottom =\n            (1 / 20) *\n            (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));\n          const left = (1 / 20) * Math.min(scrollLeft, 20);\n          const offset = scrollWidth - clientWidth;\n          const right = (1 / 20) * (offset - Math.max(scrollLeft, offset - 20));\n\n          const newState = { top: 0, bottom: 0, left: 0, right: 0 };\n\n          if (!disableVertical) {\n            newState.top = invertVertical ? bottom : top;\n            newState.bottom = invertVertical ? top : bottom;\n          }\n\n          if (!disableHorizontal) {\n            newState.left = invertHorizontal ? right : left;\n            newState.right = invertHorizontal ? left : right;\n          }\n\n          if (\n            newState.top !== prevState.top ||\n            newState.bottom !== prevState.bottom ||\n            newState.left !== prevState.left ||\n            newState.right !== prevState.right\n          ) {\n            return newState;\n          }\n\n          return prevState;\n        });\n      },\n      [invertHorizontal, invertVertical, disableVertical, disableHorizontal]\n    );\n\n    return (\n      <StyledScrollShadow\n        {...rest}\n        ref={ref}\n        className={classnames(\"c-scroll-shadow\", className)}\n      >\n        {children({ onScroll: handleScroll })}\n        {!disableVertical ? (\n          <>\n            <StyledScrollShadowTop\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.top }}\n            />\n            <StyledScrollShadowBottom\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.bottom }}\n            />\n          </>\n        ) : null}\n        {!disableHorizontal ? (\n          <>\n            <StyledScrollShadowLeft\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.left }}\n            />\n            <StyledScrollShadowRight\n              $innerColor={innerColor}\n              $outerColor={outerColor}\n              style={{ opacity: opacity.right }}\n            />\n          </>\n        ) : null}\n      </StyledScrollShadow>\n    );\n  }\n);\n\nScrollShadow.displayName = \"ScrollShadow\";\n"],"file":"ScrollShadow.js"}