@activecollab/components 1.0.104 → 1.0.105

package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js

@@ -31,10 +31,11 @@ var CompleteCheckbox = function CompleteCheckbox(_ref) {
     $primary: primary,
     $completed: completed,
     $disabled: disabled,
-    $animation: !disabled && completed && animate
+    $animation: !disabled && completed && animate,
+    $checkMarkClassName: !!checkMarkClassName
   }, /*#__PURE__*/_react.default.createElement("svg", {
     viewBox: "0 0 48 48",
-    className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12"
+    className: checkMarkClassName
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
   }), /*#__PURE__*/_react.default.createElement("polyline", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAmBO,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,6BAAC,8BAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAE,yBAAW,qBAAX,EAAkCC,SAAlC,CAFb;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE;AANxC,kBAQE;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,SAAS,EAAEI,kBAAkB,GAAGA,kBAAH,GAAwB;AAFvD,kBAIE;AAAM,IAAA,CAAC,EAAC;AAAR,IAJF,eAKE;AAAU,IAAA,MAAM,EAAC;AAAjB,IALF,CARF,CADF;AAkBD,CA3BM;;;AA6BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n    >\n      <svg\n        viewBox=\"0 0 48 48\"\n        className={checkMarkClassName ? checkMarkClassName : \"tw-w-12 tw-h-12\"}\n      >\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAmBO,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,6BAAC,8BAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAE,yBAAW,qBAAX,EAAkCC,SAAlC,CAFb;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE,OANxC;AAOE,IAAA,mBAAmB,EAAE,CAAC,CAACI;AAPzB,kBASE;AAAK,IAAA,OAAO,EAAC,WAAb;AAAyB,IAAA,SAAS,EAAEA;AAApC,kBACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,eAEE;AAAU,IAAA,MAAM,EAAC;AAAjB,IAFF,CATF,CADF;AAgBD,CAzBM;;;AA2BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n      $checkMarkClassName={!!checkMarkClassName}\n    >\n      <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}

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

@@ -19,7 +19,7 @@ var burstAnimation = (0, _styledComponents.keyframes)(["from{stroke-dashoffset:0
 var StyledCompleteCheckbox = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledCompleteCheckbox",
   componentId: "sc-1801dzg-0"
-})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", ""], {
+})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
   "width": "1.5rem",
   "height": "1.5rem",
   "borderRadius": "9999px",
@@ -47,6 +47,11 @@ var StyledCompleteCheckbox = _styledComponents.default.div.withConfig({
   return props.$disabled && (0, _styledComponents.css)(["", " opacity:0.5;"], {
     "cursor": "default"
   });
+}, function (props) {
+  return !props.$checkMarkClassName && (0, _styledComponents.css)(["svg{", "}"], {
+    "width": "3rem",
+    "height": "3rem"
+  });
 });
 
 exports.StyledCompleteCheckbox = StyledCompleteCheckbox;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["burstScale","keyframes","burstAnimation","StyledCompleteCheckbox","styled","div","props","$primary","css","$completed","$disabled","$animation","displayName"],"mappings":";;;;;;;;;AAAA;;;;;;AAUA,IAAMA,UAAU,OAAGC,2BAAH,uDAAhB;AASA,IAAMC,cAAc,OAAGD,2BAAH,yDAApB;;AASO,IAAME,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,gYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,6CADA;AAAA,CAnB+B,EAoC7B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,qCADA;AAAA,CApC6B,EA2C/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,gSAMI,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,sEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMF,KAAK,CAACC,QAAN,QACFC,qBADE,wDAfN,EAwBMF,KAAK,CAACC,QAAN,QACFC,qBADE,qCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,UAAP,IACA,CAACH,KAAK,CAACI,SADP,QAEAF,qBAFA,+JAOM,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,mEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACK,UAAN,QACAH,qBADA,oFAIiBR,UAJjB,EAKQE,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,QACAF,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,CAA5B;;;AAsHPL,sBAAsB,CAACS,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["burstScale","keyframes","burstAnimation","StyledCompleteCheckbox","styled","div","props","$primary","css","$completed","$disabled","$animation","$checkMarkClassName","displayName"],"mappings":";;;;;;;;;AAAA;;;;;;AAWA,IAAMA,UAAU,OAAGC,2BAAH,uDAAhB;AASA,IAAMC,cAAc,OAAGD,2BAAH,yDAApB;;AASO,IAAME,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,qYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,6CADA;AAAA,CAnB+B,EAoC7B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,qCADA;AAAA,CApC6B,EA2C/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,gSAMI,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,sEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMF,KAAK,CAACC,QAAN,QACFC,qBADE,wDAfN,EAwBMF,KAAK,CAACC,QAAN,QACFC,qBADE,qCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,UAAP,IACA,CAACH,KAAK,CAACI,SADP,QAEAF,qBAFA,+JAOM,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,mEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACK,UAAN,QACAH,qBADA,oFAIiBR,UAJjB,EAKQE,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,QACAF,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,EAqH/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACM,mBAAP,QACAJ,qBADA,iBAGQ;AAAA;AAAA;AAAA,GAHR,CADA;AAAA,CArH+B,CAA5B;;;AA8HPL,sBAAsB,CAACU,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n  $checkMarkClassName?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n\n  ${(props) =>\n    !props.$checkMarkClassName &&\n    css`\n      svg {\n        ${tw`tw-w-12 tw-h-12`}\n      }\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}

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

@@ -42,8 +42,8 @@ var CounterButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       args = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("tw-flex ac-font box-sizing", className)
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButtonWrapper, {
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButton, _extends({
     className: (0, _classnames.default)("c-counter-button", {
       "c-counter-button__selected": counter

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,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\nexport interface 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"}
+{"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;;;;;;;;;;;;;;;;AAyBO,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,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAED;AAAvC,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  StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface 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      <StyledCounterButtonWrapper className={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      </StyledCounterButtonWrapper>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButtonCounter = exports.StyledCounterButton = void 0;
+exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButtonCounter = exports.StyledCounterButton = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,13 +13,26 @@ var _Body = require("../Typography/Variants/Body2");
 
 var _Button = require("../Button/Button");
 
+var _BoxSizingStyle = require("../BoxSizingStyle");
+
+var _FontStyle = require("../FontStyle");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var StyledCounterButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledCounterButtonWrapper",
+  componentId: "sc-1ecrcba-0"
+})(["", " ", " ", ""], {
+  "display": "flex"
+}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
+
+exports.StyledCounterButtonWrapper = StyledCounterButtonWrapper;
+StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
 var StyledCounterButton = (0, _styledComponents.default)(_Button.Button).withConfig({
   displayName: "Styles__StyledCounterButton",
-  componentId: "sc-1ecrcba-0"
+  componentId: "sc-1ecrcba-1"
 })(["", " ", ""], function (props) {
   return props.$active && (0, _styledComponents.css)(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
 }, function (props) {
@@ -30,20 +43,20 @@ StyledCounterButton.displayName = "StyledCounterButton";
 
 var StyledCounterButtonCounter = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledCounterButtonCounter",
-  componentId: "sc-1ecrcba-1"
+  componentId: "sc-1ecrcba-2"
 })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
 
 exports.StyledCounterButtonCounter = StyledCounterButtonCounter;
 StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
 var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
   displayName: "Styles__StyledCounterButtonReset",
-  componentId: "sc-1ecrcba-2"
+  componentId: "sc-1ecrcba-3"
 })(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
 exports.StyledCounterButtonReset = StyledCounterButtonReset;
 StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
 var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
   displayName: "Styles__StyledCounterButtonLabel",
-  componentId: "sc-1ecrcba-3"
+  componentId: "sc-1ecrcba-4"
 })(["", " ", ":hover &&{", "}", ""], {
   "pointerEvents": "none"
 }, StyledCounterButton, function (props) {

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,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"}
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAOO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBACjC;AAAA;AAAA,CADiC,EAEnCC,oBAFmC,EAGnCC,8BAHmC,CAAhC;;;AAMPJ,0BAA0B,CAACK,WAA3B,GAAyC,4BAAzC;AAEO,IAAMC,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,CAACD,WAApB,GAAkC,qBAAlC;;AAEO,IAAMO,0BAA0B,GAAGX,0BAAOC,GAAV;AAAA;AAAA;AAAA,6MAAhC;;;AAaPU,0BAA0B,CAACP,WAA3B,GAAyC,4BAAzC;AAEO,IAAMQ,wBAAwB,GAAG,+BAAON,cAAP,CAAH;AAAA;AAAA;AAAA,+MAA9B;;AAYPM,wBAAwB,CAACR,WAAzB,GAAuC,0BAAvC;AAEO,IAAMS,wBAAwB,GAAG,+BAAOC,WAAP,CAAH;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCT,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;;AAkBPI,wBAAwB,CAACT,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\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n  ${tw`tw-flex`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\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/Menu/MenuHeader.js

@@ -48,7 +48,10 @@ var MenuHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: "secondary",
     weight: "bold",
     overflow: "truncate",
-    className: "tw-mx-1"
+    style: {
+      marginLeft: "4px",
+      marginRight: "4px "
+    }
   }, title), rightElement || /*#__PURE__*/_react.default.createElement("div", {
     style: {
       minWidth: "24px"

package/dist/cjs/components/Menu/MenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASO,IAAMA,UAAU,gBAAG,uBACxB,gBAQEC,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,6BAAC,wBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAE,yBAAW,eAAX,EAA4BH,SAA5B,CAFb;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,SAAS,EAAC;AALZ,KAOGL,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BuB,CAAnB;;AAiCPP,UAAU,CAACQ,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          className=\"tw-mx-1\"\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}
+{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","marginLeft","marginRight","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASO,IAAMA,UAAU,gBAAG,uBACxB,gBAQEC,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,6BAAC,wBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAE,yBAAW,eAAX,EAA4BH,SAA5B,CAFb;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAE,KAAd;AAAqBC,MAAAA,WAAW,EAAE;AAAlC;AALT,KAOGP,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BuB,CAAnB;;AAiCPP,UAAU,CAACU,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          style={{ marginLeft: \"4px\", marginRight: \"4px \" }}\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}

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

@@ -15,7 +15,7 @@ var _hooks = require("../../hooks");
 
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 
-var _excluded = ["as", "className", "invert"];
+var _excluded = ["as", "className", "invert", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +39,7 @@ var ScrollElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var internalRef = (0, _hooks.useInitScrollRef)(null, invert);
@@ -46,7 +47,10 @@ var ScrollElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: handleRef,
-    className: (0, _classnames.default)("c-scroll-element tw-overflow-auto", className)
+    className: (0, _classnames.default)("c-scroll-element", className),
+    style: _objectSpread({
+      overflow: "auto"
+    }, style)
   });
 
   return /*#__PURE__*/_react.default.createElement(as, props);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":["ScrollElement","ref","as","className","invert","rest","internalRef","handleRef","props","React","createElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,aAAa,gBAAG,uBAC3B,gBAAqDC,GAArD,EAA6D;AAAA,qBAA1DC,EAA0D;AAAA,MAA1DA,EAA0D,wBAArD,KAAqD;AAAA,MAA9CC,SAA8C,QAA9CA,SAA8C;AAAA,yBAAnCC,MAAmC;AAAA,MAAnCA,MAAmC,4BAA1B,KAA0B;AAAA,MAAhBC,IAAgB;;AAC3D,MAAMC,WAAW,GAAG,6BAAiB,IAAjB,EAAuBF,MAAvB,CAApB;AACA,MAAMG,SAAS,GAAG,yBAAWD,WAAX,EAAwBL,GAAxB,CAAlB;;AAEA,MAAMO,KAAK,mCACNH,IADM;AAETJ,IAAAA,GAAG,EAAEM,SAFI;AAGTJ,IAAAA,SAAS,EAAE,yBAAW,mCAAX,EAAgDA,SAAhD;AAHF,IAAX;;AAMA,sBAAOM,eAAMC,aAAN,CAAoBR,EAApB,EAAwBM,KAAxB,CAAP;AACD,CAZ0B,CAAtB;;AAePR,aAAa,CAACW,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { useInitScrollRef } from \"../../hooks\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface IScrollElement extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  children?: ReactNode;\n  invert?: boolean;\n}\n\nexport const ScrollElement = forwardRef<HTMLElement, IScrollElement>(\n  ({ as = \"div\", className, invert = false, ...rest }, ref) => {\n    const internalRef = useInitScrollRef(null, invert);\n    const handleRef = useForkRef(internalRef, ref);\n\n    const props = {\n      ...rest,\n      ref: handleRef,\n      className: classNames(\"c-scroll-element tw-overflow-auto\", className),\n    };\n\n    return React.createElement(as, props);\n  }\n);\n\nScrollElement.displayName = \"ScrollElement\";\n"],"file":"ScrollElement.js"}
+{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":["ScrollElement","ref","as","className","invert","style","rest","internalRef","handleRef","props","overflow","React","createElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,aAAa,gBAAG,uBAC3B,gBAA4DC,GAA5D,EAAoE;AAAA,qBAAjEC,EAAiE;AAAA,MAAjEA,EAAiE,wBAA5D,KAA4D;AAAA,MAArDC,SAAqD,QAArDA,SAAqD;AAAA,yBAA1CC,MAA0C;AAAA,MAA1CA,MAA0C,4BAAjC,KAAiC;AAAA,MAA1BC,KAA0B,QAA1BA,KAA0B;AAAA,MAAhBC,IAAgB;;AAClE,MAAMC,WAAW,GAAG,6BAAiB,IAAjB,EAAuBH,MAAvB,CAApB;AACA,MAAMI,SAAS,GAAG,yBAAWD,WAAX,EAAwBN,GAAxB,CAAlB;;AAEA,MAAMQ,KAAK,mCACNH,IADM;AAETL,IAAAA,GAAG,EAAEO,SAFI;AAGTL,IAAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+BA,SAA/B,CAHF;AAITE,IAAAA,KAAK;AAAIK,MAAAA,QAAQ,EAAE;AAAd,OAAyBL,KAAzB;AAJI,IAAX;;AAOA,sBAAOM,eAAMC,aAAN,CAAoBV,EAApB,EAAwBO,KAAxB,CAAP;AACD,CAb0B,CAAtB;;AAgBPT,aAAa,CAACa,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { useInitScrollRef } from \"../../hooks\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface IScrollElement extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  children?: ReactNode;\n  invert?: boolean;\n}\n\nexport const ScrollElement = forwardRef<HTMLElement, IScrollElement>(\n  ({ as = \"div\", className, invert = false, style, ...rest }, ref) => {\n    const internalRef = useInitScrollRef(null, invert);\n    const handleRef = useForkRef(internalRef, ref);\n\n    const props = {\n      ...rest,\n      ref: handleRef,\n      className: classNames(\"c-scroll-element\", className),\n      style: { overflow: \"auto\", ...style },\n    };\n\n    return React.createElement(as, props);\n  }\n);\n\nScrollElement.displayName = \"ScrollElement\";\n"],"file":"ScrollElement.js"}

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

@@ -1 +1 @@
-{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,sBAAsB;IAErC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC"}
+{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,sBAAsB;IAErC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CAyBvD,CAAC"}

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js

@@ -19,10 +19,11 @@ export var CompleteCheckbox = function CompleteCheckbox(_ref) {
     $primary: primary,
     $completed: completed,
     $disabled: disabled,
-    $animation: !disabled && completed && animate
+    $animation: !disabled && completed && animate,
+    $checkMarkClassName: !!checkMarkClassName
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 48 48",
-    className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12"
+    className: checkMarkClassName
   }, /*#__PURE__*/React.createElement("path", {
     d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
   }), /*#__PURE__*/React.createElement("polyline", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,sBAAT,QAAuC,UAAvC;AAmBA,OAAO,IAAMC,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,oBAAC,sBAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,qBAAD,EAAwBO,SAAxB,CAFvB;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE;AANxC,kBAQE;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,SAAS,EAAEI,kBAAkB,GAAGA,kBAAH,GAAwB;AAFvD,kBAIE;AAAM,IAAA,CAAC,EAAC;AAAR,IAJF,eAKE;AAAU,IAAA,MAAM,EAAC;AAAjB,IALF,CARF,CADF;AAkBD,CA3BM;AA6BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n    >\n      <svg\n        viewBox=\"0 0 48 48\"\n        className={checkMarkClassName ? checkMarkClassName : \"tw-w-12 tw-h-12\"}\n      >\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,sBAAT,QAAuC,UAAvC;AAmBA,OAAO,IAAMC,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,oBAAC,sBAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,qBAAD,EAAwBO,SAAxB,CAFvB;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE,OANxC;AAOE,IAAA,mBAAmB,EAAE,CAAC,CAACI;AAPzB,kBASE;AAAK,IAAA,OAAO,EAAC,WAAb;AAAyB,IAAA,SAAS,EAAEA;AAApC,kBACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,eAEE;AAAU,IAAA,MAAM,EAAC;AAAjB,IAFF,CATF,CADF;AAgBD,CAzBM;AA2BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n      $checkMarkClassName={!!checkMarkClassName}\n    >\n      <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}

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

@@ -3,6 +3,7 @@ interface StyledCompleteCheckboxProps {
     $completed?: boolean;
     $disabled?: boolean;
     $animation?: boolean;
+    $checkMarkClassName?: boolean;
 }
 export declare const StyledCompleteCheckbox: import("styled-components").StyledComponent<"div", any, StyledCompleteCheckboxProps, never>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoBD,eAAO,MAAM,sBAAsB,6FAoHlC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAoBD,eAAO,MAAM,sBAAsB,6FA4HlC,CAAC"}

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

@@ -4,7 +4,7 @@ var burstAnimation = keyframes(["from{stroke-dashoffset:0;}to{stroke-dashoffset:
 export var StyledCompleteCheckbox = styled.div.withConfig({
   displayName: "Styles__StyledCompleteCheckbox",
   componentId: "sc-1801dzg-0"
-})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", ""], {
+})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
   "width": "1.5rem",
   "height": "1.5rem",
   "borderRadius": "9999px",
@@ -32,6 +32,11 @@ export var StyledCompleteCheckbox = styled.div.withConfig({
   return props.$disabled && css(["", " opacity:0.5;"], {
     "cursor": "default"
   });
+}, function (props) {
+  return !props.$checkMarkClassName && css(["svg{", "}"], {
+    "width": "3rem",
+    "height": "3rem"
+  });
 });
 StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["styled","css","keyframes","burstScale","burstAnimation","StyledCompleteCheckbox","div","props","$primary","$completed","$disabled","$animation","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AAUA,IAAMC,UAAU,GAAGD,SAAH,sDAAhB;AASA,IAAME,cAAc,GAAGF,SAAH,wDAApB;AASA,OAAO,IAAMG,sBAAsB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,gYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,4CADA;AAAA,CAnB+B,EAoC7B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,oCADA;AAAA,CApC6B,EA2C/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACE,UAAN,IACAR,GADA,+RAMI,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,qEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMM,KAAK,CAACC,QAAN,IACFP,GADE,uDAfN,EAwBMM,KAAK,CAACC,QAAN,IACFP,GADE,oCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACM,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,UAAP,IACA,CAACF,KAAK,CAACG,SADP,IAEAT,GAFA,8JAOM,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,kEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACI,UAAN,IACAV,GADA,mFAIiBE,UAJjB,EAKQC,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,IACAT,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,CAA5B;AAsHPI,sBAAsB,CAACO,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["styled","css","keyframes","burstScale","burstAnimation","StyledCompleteCheckbox","div","props","$primary","$completed","$disabled","$animation","$checkMarkClassName","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AAWA,IAAMC,UAAU,GAAGD,SAAH,sDAAhB;AASA,IAAME,cAAc,GAAGF,SAAH,wDAApB;AASA,OAAO,IAAMG,sBAAsB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,qYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,4CADA;AAAA,CAnB+B,EAoC7B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAP,GADA,oCADA;AAAA,CApC6B,EA2C/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACE,UAAN,IACAR,GADA,+RAMI,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,qEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMM,KAAK,CAACC,QAAN,IACFP,GADE,uDAfN,EAwBMM,KAAK,CAACC,QAAN,IACFP,GADE,oCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACM,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,UAAP,IACA,CAACF,KAAK,CAACG,SADP,IAEAT,GAFA,8JAOM,CAACM,KAAK,CAACC,QAAP,IACFP,GADE,kEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACI,UAAN,IACAV,GADA,mFAIiBE,UAJjB,EAKQC,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,IACAT,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,EAqH/B,UAACM,KAAD;AAAA,SACA,CAACA,KAAK,CAACK,mBAAP,IACAX,GADA,gBAGQ;AAAA;AAAA;AAAA,GAHR,CADA;AAAA,CArH+B,CAA5B;AA8HPI,sBAAsB,CAACQ,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n  $checkMarkClassName?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n\n  ${(props) =>\n    !props.$checkMarkClassName &&\n    css`\n      svg {\n        ${tw`tw-w-12 tw-h-12`}\n      }\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}

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

@@ -1 +1 @@
-{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,+FA+DzB,CAAC"}
+{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,mBAAmB;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,+FA+DzB,CAAC"}

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

@@ -5,7 +5,7 @@ import React, { forwardRef } from "react";
 import classNames from "classnames";
 import { Tooltip } from "../Tooltip/Tooltip";
 import CloseSmallIcon from "../Icons/collection/CloseSmall";
-import { StyledCounterButton, StyledCounterButtonCounter, StyledCounterButtonLabel, StyledCounterButtonReset } from "./Styles";
+import { StyledCounterButton, StyledCounterButtonCounter, StyledCounterButtonLabel, StyledCounterButtonReset, StyledCounterButtonWrapper } from "./Styles";
 export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var label = _ref.label,
       icon = _ref.icon,
@@ -17,8 +17,8 @@ export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref.className,
       args = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("tw-flex ac-font box-sizing", className)
+  return /*#__PURE__*/React.createElement(StyledCounterButtonWrapper, {
+    className: className
   }, /*#__PURE__*/React.createElement(StyledCounterButton, _extends({
     className: classNames("c-counter-button", {
       "c-counter-button__selected": counter

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,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\nexport interface 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"}
+{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledCounterButton","StyledCounterButtonCounter","StyledCounterButtonLabel","StyledCounterButtonReset","StyledCounterButtonWrapper","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,EAKEC,0BALF,QAMO,UANP;AAyBA,OAAO,IAAMC,aAAa,gBAAGT,UAAU,CACrC,gBAWEU,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,oBAAC,0BAAD;AAA4B,IAAA,SAAS,EAAED;AAAvC,kBACE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAEhB,UAAU,CAAC,kBAAD,EAAqB;AACxC,oCAA8Ba;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,iBACHb,KAAK,CAACoB,YAAN,CAAmBP,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAEhB,UAAU,CAAC,wBAAD;AADE,GAAzB,CAXJ,EAcGU,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  StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface 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      <StyledCounterButtonWrapper className={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      </StyledCounterButtonWrapper>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -3,6 +3,7 @@ interface StyledCounterButtonProps {
     $active?: boolean;
     $selected?: boolean;
 }
+export declare const StyledCounterButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCounterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/Button").IButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledCounterButtonProps, never>;
 export declare const StyledCounterButtonCounter: import("styled-components").StyledComponent<"div", any, {
     $selected?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAKA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,oMAUpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAItC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,oMAUpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC"}

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

@@ -1,9 +1,18 @@
 import styled, { css } from "styled-components";
 import { Body2 } from "../Typography/Variants/Body2";
 import { Button } from "../Button/Button";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { FontStyle } from "../FontStyle";
+export var StyledCounterButtonWrapper = styled.div.withConfig({
+  displayName: "Styles__StyledCounterButtonWrapper",
+  componentId: "sc-1ecrcba-0"
+})(["", " ", " ", ""], {
+  "display": "flex"
+}, FontStyle, BoxSizingStyle);
+StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
 export var StyledCounterButton = styled(Button).withConfig({
   displayName: "Styles__StyledCounterButton",
-  componentId: "sc-1ecrcba-0"
+  componentId: "sc-1ecrcba-1"
 })(["", " ", ""], function (props) {
   return props.$active && css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
 }, function (props) {
@@ -12,17 +21,17 @@ export var StyledCounterButton = styled(Button).withConfig({
 StyledCounterButton.displayName = "StyledCounterButton";
 export var StyledCounterButtonCounter = styled.div.withConfig({
   displayName: "Styles__StyledCounterButtonCounter",
-  componentId: "sc-1ecrcba-1"
+  componentId: "sc-1ecrcba-2"
 })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
 StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
 export var StyledCounterButtonReset = styled(Button).withConfig({
   displayName: "Styles__StyledCounterButtonReset",
-  componentId: "sc-1ecrcba-2"
+  componentId: "sc-1ecrcba-3"
 })(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
 StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
 export var StyledCounterButtonLabel = styled(Body2).withConfig({
   displayName: "Styles__StyledCounterButtonLabel",
-  componentId: "sc-1ecrcba-3"
+  componentId: "sc-1ecrcba-4"
 })(["", " ", ":hover &&{", "}", ""], {
   "pointerEvents": "none"
 }, StyledCounterButton, function (props) {

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,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"}
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,KAAT,QAAsB,8BAAtB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAV;AAAA;AAAA;AAAA,uBACjC;AAAA;AAAA,CADiC,EAEnCF,SAFmC,EAGnCD,cAHmC,CAAhC;AAMPE,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,kBAC5B,UAACO,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAV,GADA,gGADA;AAAA,CAD4B,EAe5B,UAACS,KAAD;AAAA,SACAA,KAAK,CAACE,SAAN,IACAX,GADA,uGADA;AAAA,CAf4B,CAAzB;AAwBPQ,mBAAmB,CAACD,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMK,0BAA0B,GAAGb,MAAM,CAACO,GAAV;AAAA;AAAA;AAAA,6MAAhC;AAaPM,0BAA0B,CAACL,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMM,wBAAwB,GAAGd,MAAM,CAACG,MAAD,CAAT;AAAA;AAAA;AAAA,+MAA9B;AAYPW,wBAAwB,CAACN,WAAzB,GAAuC,0BAAvC;AAEA,OAAO,IAAMO,wBAAwB,GAAGf,MAAM,CAACE,KAAD,CAAT;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCO,mBAHiC,EAI/B,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,IACAV,GADA,mCADA;AAAA,CAJ+B,EAWjC,UAACS,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,IACAV,GADA,iCADA;AAAA,CAXiC,CAA9B;AAkBPc,wBAAwB,CAACP,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\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n  ${tw`tw-flex`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\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/Menu/MenuHeader.js

@@ -24,7 +24,10 @@ export var MenuHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color: "secondary",
     weight: "bold",
     overflow: "truncate",
-    className: "tw-mx-1"
+    style: {
+      marginLeft: "4px",
+      marginRight: "4px "
+    }
   }, title), rightElement || /*#__PURE__*/React.createElement("div", {
     style: {
       minWidth: "24px"

package/dist/esm/components/Menu/MenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["React","forwardRef","classnames","Typography","StyledMenuHeader","MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkE,OAAlE;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,gBAAT,QAAiC,UAAjC;AASA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,gBAQEK,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,oBAAC,gBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAET,UAAU,CAAC,eAAD,EAAkBM,SAAlB,CAFvB;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,oBAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,SAAS,EAAC;AALZ,KAOGL,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BiC,CAA7B;AAiCPP,UAAU,CAACQ,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          className=\"tw-mx-1\"\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}
+{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["React","forwardRef","classnames","Typography","StyledMenuHeader","MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","marginLeft","marginRight","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkE,OAAlE;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,gBAAT,QAAiC,UAAjC;AASA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,gBAQEK,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,oBAAC,gBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAET,UAAU,CAAC,eAAD,EAAkBM,SAAlB,CAFvB;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,oBAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAE,KAAd;AAAqBC,MAAAA,WAAW,EAAE;AAAlC;AALT,KAOGP,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BiC,CAA7B;AAiCPP,UAAU,CAACU,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          style={{ marginLeft: \"4px\", marginRight: \"4px \" }}\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,UAAU,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,oFAazB,CAAC"}
+{"version":3,"file":"ScrollElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,UAAU,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,oFAczB,CAAC"}

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "invert"];
+var _excluded = ["as", "className", "invert", "style"];
 import React, { forwardRef } from "react";
 import classNames from "classnames";
 import { useInitScrollRef } from "../../hooks";
@@ -11,6 +11,7 @@ export var ScrollElement = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref.className,
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
+      style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var internalRef = useInitScrollRef(null, invert);
@@ -18,7 +19,10 @@ export var ScrollElement = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var props = _extends({}, rest, {
     ref: handleRef,
-    className: classNames("c-scroll-element tw-overflow-auto", className)
+    className: classNames("c-scroll-element", className),
+    style: _extends({
+      overflow: "auto"
+    }, style)
   });
 
   return /*#__PURE__*/React.createElement(as, props);