@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

package/dist/features/ui/avatar/layers/mouth/variant-7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-7.js","sources":["../../../../../../src/features/ui/avatar/layers/mouth/variant-7.tsx"],"sourcesContent":["import type { ICustomSVGProps } from '../../avatar-types';\n\nimport React from 'react';\n\nconst Variant7: React.FC<ICustomSVGProps> = ({ color, ...props }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      {...props}\n    >\n      <path\n        d=\"M28.5527 52.4565L39.0527 70.4565L49.5527 52.4565L60.0527 70.4565L70.5527 52.4565\"\n        stroke=\"black\"\n        strokeWidth=\"2\"\n      />\n    </svg>\n  );\n};\n\nexport default Variant7;\n"],"names":["Variant7","color","props","jsx"],"mappings":";AAIA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAErD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAAA;"}

package/dist/features/ui/avatar/layers/mouth/variant-8.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+const i = ({ color: r, ...o }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    ...o,
+    children: /* @__PURE__ */ t("path", { d: "M60.392 52.3789L49.9997 70.3789L39.6074 52.3789", stroke: "black", strokeWidth: "2" })
+  }
+);
+export {
+  i as default
+};
+//# sourceMappingURL=variant-8.js.map

package/dist/features/ui/avatar/layers/mouth/variant-8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-8.js","sources":["../../../../../../src/features/ui/avatar/layers/mouth/variant-8.tsx"],"sourcesContent":["import type { ICustomSVGProps } from '../../avatar-types';\n\nimport React from 'react';\n\nconst Variant8: React.FC<ICustomSVGProps> = ({ color, ...props }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      {...props}\n    >\n      <path d=\"M60.392 52.3789L49.9997 70.3789L39.6074 52.3789\" stroke=\"black\" strokeWidth=\"2\" />\n    </svg>\n  );\n};\n\nexport default Variant8;\n"],"names":["Variant8","color","props","jsx"],"mappings":";AAIA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAErD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,4BAAC,QAAK,EAAA,GAAE,mDAAkD,QAAO,SAAQ,aAAY,KAAI;AAAA,EAAA;AAAA;"}

package/dist/features/ui/avatar/layers/mouth/variant-9.js

@@ -0,0 +1,27 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+const s = ({ color: e, ...o }) => /* @__PURE__ */ r(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    ...o,
+    children: [
+      /* @__PURE__ */ t("path", { d: "M33.1074 54.3789H67.1074V71.3789V88.3789H33.1074V71.3789V54.3789Z", fill: "white" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M33.1074 71.3789V88.3789H67.1074V71.3789M33.1074 71.3789V54.3789H67.1074V71.3789M33.1074 71.3789H67.1074",
+          stroke: "black",
+          strokeWidth: "2"
+        }
+      )
+    ]
+  }
+);
+export {
+  s as default
+};
+//# sourceMappingURL=variant-9.js.map

package/dist/features/ui/avatar/layers/mouth/variant-9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-9.js","sources":["../../../../../../src/features/ui/avatar/layers/mouth/variant-9.tsx"],"sourcesContent":["import type { ICustomSVGProps } from '../../avatar-types';\n\nimport React from 'react';\n\nconst Variant9: React.FC<ICustomSVGProps> = ({ color, ...props }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      {...props}\n    >\n      <path d=\"M33.1074 54.3789H67.1074V71.3789V88.3789H33.1074V71.3789V54.3789Z\" fill=\"white\" />\n      <path\n        d=\"M33.1074 71.3789V88.3789H67.1074V71.3789M33.1074 71.3789V54.3789H67.1074V71.3789M33.1074 71.3789H67.1074\"\n        stroke=\"black\"\n        strokeWidth=\"2\"\n      />\n    </svg>\n  );\n};\n\nexport default Variant9;\n"],"names":["Variant9","color","props","jsxs","jsx"],"mappings":";AAIA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAErD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAK,EAAA,GAAE,qEAAoE,MAAK,SAAQ;AAAA,MACzF,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/features/ui/border-path-animation/border-path-animation-styled.js

@@ -0,0 +1,51 @@
+import i, { css as s } from "styled-components";
+const o = i.div`
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+`, d = i(o)(
+  ({ $borderWidth: t }) => `
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${t}px;
+`
+), c = i(o)(
+  ({ $borderWidth: t }) => `
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: ${t}px;
+`
+), l = i(o)(
+  ({ $borderWidth: t }) => `
+  top: 0;
+  right: 0;
+  width: ${t}px;
+  height: 100%;
+`
+), $ = i(o)(
+  ({ $borderWidth: t }) => `
+  top: 0;
+  left: 0;
+  width: ${t}px;
+  height: 100%;
+`
+), g = i.div(
+  ({ theme: t, $width: n, $height: e, $borderColor: h, $animationDuration: p, $keyframes: r }) => s`
+    position: relative;
+    width: ${n}px;
+    height: ${e}px;
+    background-color: ${t.colors[h]};
+    opacity: 0;
+    animation: ${r} ${p}s linear infinite;
+  `
+);
+export {
+  c as BottomLineContainer,
+  $ as LeftLineContainer,
+  g as Line,
+  l as RightLineContainer,
+  d as TopLineContainer
+};
+//# sourceMappingURL=border-path-animation-styled.js.map

package/dist/features/ui/border-path-animation/border-path-animation-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-path-animation-styled.js","sources":["../../../../src/features/ui/border-path-animation/border-path-animation-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\nimport type { keyframes } from 'styled-components';\n\nimport styled, { css } from 'styled-components';\n\nconst LineContainer = styled.div`\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n`;\n\nexport const TopLineContainer = styled(LineContainer)<{\n  $borderWidth: number;\n}>(\n  ({ $borderWidth }) => `\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: ${$borderWidth}px;\n`,\n);\n\nexport const BottomLineContainer = styled(LineContainer)<{\n  $borderWidth: number;\n}>(\n  ({ $borderWidth }) => `\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: ${$borderWidth}px;\n`,\n);\n\nexport const RightLineContainer = styled(LineContainer)<{\n  $borderWidth: number;\n}>(\n  ({ $borderWidth }) => `\n  top: 0;\n  right: 0;\n  width: ${$borderWidth}px;\n  height: 100%;\n`,\n);\n\nexport const LeftLineContainer = styled(LineContainer)<{\n  $borderWidth: number;\n}>(\n  ({ $borderWidth }) => `\n  top: 0;\n  left: 0;\n  width: ${$borderWidth}px;\n  height: 100%;\n`,\n);\n\nexport const Line = styled.div<{\n  $borderColor: TColorNames;\n  $animationDuration: number;\n  $keyframes: ReturnType<typeof keyframes>;\n  $width: number;\n  $height: number;\n}>(\n  ({ theme, $width, $height, $borderColor, $animationDuration, $keyframes }) => css`\n    position: relative;\n    width: ${$width}px;\n    height: ${$height}px;\n    background-color: ${theme.colors[$borderColor]};\n    opacity: 0;\n    animation: ${$keyframes} ${$animationDuration}s linear infinite;\n  `,\n);\n"],"names":["LineContainer","styled","TopLineContainer","$borderWidth","BottomLineContainer","RightLineContainer","LeftLineContainer","Line","theme","$width","$height","$borderColor","$animationDuration","$keyframes","css"],"mappings":";AAKA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMhBC,IAAmBD,EAAOD,CAAa;AAAA,EAGlD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA;AAAA,YAIZA,CAAY;AAAA;AAExB,GAEaC,IAAsBH,EAAOD,CAAa;AAAA,EAGrD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA;AAAA,YAIZA,CAAY;AAAA;AAExB,GAEaE,IAAqBJ,EAAOD,CAAa;AAAA,EAGpD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA,WAGbA,CAAY;AAAA;AAAA;AAGvB,GAEaG,IAAoBL,EAAOD,CAAa;AAAA,EAGnD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA,WAGbA,CAAY;AAAA;AAAA;AAGvB,GAEaI,IAAON,EAAO;AAAA,EAOzB,CAAC,EAAE,OAAAO,GAAO,QAAAC,GAAQ,SAAAC,GAAS,cAAAC,GAAc,oBAAAC,GAAoB,YAAAC,EAAiB,MAAAC;AAAA;AAAA,aAEnEL,CAAM;AAAA,cACLC,CAAO;AAAA,wBACGF,EAAM,OAAOG,CAAY,CAAC;AAAA;AAAA,iBAEjCE,CAAU,IAAID,CAAkB;AAAA;AAEjD;"}

package/dist/features/ui/border-path-animation/border-path-animation.js

@@ -0,0 +1,108 @@
+import { jsxs as p, Fragment as g, jsx as s } from "react/jsx-runtime";
+import { memo as b, useState as d, useMemo as l, useRef as u, useLayoutEffect as C } from "react";
+import { keyframes as L } from "styled-components";
+import { TopLineContainer as k, Line as c, RightLineContainer as W, BottomLineContainer as R, LeftLineContainer as D } from "./border-path-animation-styled.js";
+const F = (i, r) => {
+  const t = (i + r) * 2, o = i, e = r, y = i / t, n = (i + r) / t, a = (i + r + i) / t;
+  return {
+    top: [
+      [0, { x: 0, y: 0, o: 1 }],
+      [y, { x: o, y: 0, o: 1 }],
+      [y + 1e-3, { x: o, y: 0, o: 0 }],
+      [n - 1e-3, { x: -o, y: 0, o: 0 }],
+      [n, { x: -o, y: 0, o: 1 }],
+      [a, { x: 0, y: 0, o: 1 }],
+      [1, { x: 0, y: 0, o: 1 }]
+    ],
+    right: [
+      [0, { x: 0, y: 0, o: 1 }],
+      [y, { x: 0, y: 0, o: 1 }],
+      [n, { x: 0, y: e, o: 1 }],
+      [n + 1e-3, { x: 0, y: e, o: 0 }],
+      [a - 1e-3, { x: 0, y: -e, o: 0 }],
+      [a, { x: 0, y: -e, o: 1 }],
+      [1, { x: 0, y: 0, o: 1 }]
+    ],
+    bottom: [
+      [0, { x: o, y: 0, o: 1 }],
+      [y, { x: 0, y: 0, o: 1 }],
+      [n, { x: 0, y: 0, o: 1 }],
+      [a, { x: -o, y: 0, o: 1 }],
+      [a + 1e-3, { x: -o, y: 0, o: 0 }],
+      [a + 2e-3, { x: o, y: 0, o: 0 }],
+      [1, { x: o, y: 0, o: 1 }]
+    ],
+    left: [
+      [0, { x: 0, y: e, o: 1 }],
+      [y, { x: 0, y: e, o: 1 }],
+      [n, { x: 0, y: 0, o: 1 }],
+      [a, { x: 0, y: 0, o: 1 }],
+      [1, { x: 0, y: -e, o: 1 }]
+    ]
+  };
+}, $ = (i) => L`
+    ${i.map(
+  ([r, { x: t, y: o, o: e }]) => `${r * 100}% {
+          transform: translate(${t}px, ${o}px);
+          opacity: ${e};
+        }`
+).join(" ")}
+  `, K = b((i) => {
+  const { animationDuration: r = 6, borderWidth: t = 1, borderColor: o = "YELLOW_3" } = i, [e, y] = d(1), [n, a] = d(1), m = l(() => F(e, n), [e, n]), x = l(
+    () => ({
+      top: $(m.top),
+      right: $(m.right),
+      bottom: $(m.bottom),
+      left: $(m.left)
+    }),
+    [m]
+  ), f = u(null), h = u(null);
+  return C(() => {
+    f.current && y(f.current.getBoundingClientRect().width), h.current && a(h.current.getBoundingClientRect().height);
+  }, []), /* @__PURE__ */ p(g, { children: [
+    /* @__PURE__ */ s(k, { className: "top-line", ref: f, $borderWidth: t, children: /* @__PURE__ */ s(
+      c,
+      {
+        $borderColor: o,
+        $width: e,
+        $height: t,
+        $animationDuration: r,
+        $keyframes: x.top
+      }
+    ) }),
+    /* @__PURE__ */ s(W, { ref: h, $borderWidth: t, children: /* @__PURE__ */ s(
+      c,
+      {
+        $width: t,
+        $height: n,
+        $borderColor: o,
+        $animationDuration: r,
+        $keyframes: x.right
+      }
+    ) }),
+    /* @__PURE__ */ s(R, { $borderWidth: t, children: /* @__PURE__ */ s(
+      c,
+      {
+        $borderColor: o,
+        $width: e,
+        $height: t,
+        $animationDuration: r,
+        $keyframes: x.bottom
+      }
+    ) }),
+    /* @__PURE__ */ s(D, { $borderWidth: t, children: /* @__PURE__ */ s(
+      c,
+      {
+        $width: t,
+        $height: n,
+        $borderColor: o,
+        $animationDuration: r,
+        $keyframes: x.left
+      }
+    ) })
+  ] });
+});
+export {
+  K as default
+};
+//# sourceMappingURL=border-path-animation.js.map

package/dist/features/ui/border-path-animation/border-path-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-path-animation.js","sources":["../../../../src/features/ui/border-path-animation/border-path-animation.tsx"],"sourcesContent":["import type {\n  IBorderPathAnimationProps,\n  IGetKeyFrames,\n  IGetKeyFramesConfig,\n} from './border-path-animation-types';\nimport type { FC } from 'react';\n\nimport { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { keyframes } from 'styled-components';\n\nimport * as Styled from './border-path-animation-styled';\n\nconst getKeyFramesConfig: IGetKeyFramesConfig = (width, height) => {\n  const p = (width + height) * 2; // perimeter\n  const w = width;\n  const h = height;\n  const bp1 = width / p;\n  const bp2 = (width + height) / p;\n  const bp3 = (width + height + width) / p;\n\n  return {\n    top: [\n      [0, { x: 0, y: 0, o: 1 }],\n      [bp1, { x: w, y: 0, o: 1 }],\n\n      [bp1 + 0.001, { x: w, y: 0, o: 0 }],\n      [bp2 - 0.001, { x: -w, y: 0, o: 0 }],\n\n      [bp2, { x: -w, y: 0, o: 1 }],\n      [bp3, { x: 0, y: 0, o: 1 }],\n      [1, { x: 0, y: 0, o: 1 }],\n    ],\n    right: [\n      [0, { x: 0, y: 0, o: 1 }],\n      [bp1, { x: 0, y: 0, o: 1 }],\n      [bp2, { x: 0, y: h, o: 1 }],\n\n      [bp2 + 0.001, { x: 0, y: h, o: 0 }],\n      [bp3 - 0.001, { x: 0, y: -h, o: 0 }],\n\n      [bp3, { x: 0, y: -h, o: 1 }],\n      [1, { x: 0, y: 0, o: 1 }],\n    ],\n    bottom: [\n      [0, { x: w, y: 0, o: 1 }],\n      [bp1, { x: 0, y: 0, o: 1 }],\n      [bp2, { x: 0, y: 0, o: 1 }],\n      [bp3, { x: -w, y: 0, o: 1 }],\n\n      [bp3 + 0.001, { x: -w, y: 0, o: 0 }],\n      [bp3 + 0.002, { x: w, y: 0, o: 0 }],\n      [1, { x: w, y: 0, o: 1 }],\n    ],\n    left: [\n      [0, { x: 0, y: h, o: 1 }],\n      [bp1, { x: 0, y: h, o: 1 }],\n      [bp2, { x: 0, y: 0, o: 1 }],\n      [bp3, { x: 0, y: 0, o: 1 }],\n      [1, { x: 0, y: -h, o: 1 }],\n    ],\n  };\n};\n\nconst getKeyFrames: IGetKeyFrames = config => {\n  return keyframes`\n    ${config\n      .map(\n        ([percentage, { x, y, o }]) => `${percentage * 100}% {\n          transform: translate(${x}px, ${y}px);\n          opacity: ${o};\n        }`,\n      )\n      .join(' ')}\n  `;\n};\n\nconst BorderPathAnimation: FC<IBorderPathAnimationProps> = memo(props => {\n  const { animationDuration = 6, borderWidth = 1, borderColor = 'YELLOW_3' } = props;\n  const [width, setWidth] = useState(1);\n  const [height, setHeight] = useState(1);\n  const keyFramesConfig = useMemo(() => getKeyFramesConfig(width, height), [width, height]);\n  const keyFrames = useMemo(\n    () => ({\n      top: getKeyFrames(keyFramesConfig.top),\n      right: getKeyFrames(keyFramesConfig.right),\n      bottom: getKeyFrames(keyFramesConfig.bottom),\n      left: getKeyFrames(keyFramesConfig.left),\n    }),\n    [keyFramesConfig],\n  );\n  const topRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (topRef.current) {\n      setWidth(topRef.current.getBoundingClientRect().width);\n    }\n\n    if (rightRef.current) {\n      setHeight(rightRef.current.getBoundingClientRect().height);\n    }\n  }, []);\n\n  return (\n    <>\n      <Styled.TopLineContainer className=\"top-line\" ref={topRef} $borderWidth={borderWidth}>\n        <Styled.Line\n          $borderColor={borderColor}\n          $width={width}\n          $height={borderWidth}\n          $animationDuration={animationDuration}\n          $keyframes={keyFrames.top}\n        />\n      </Styled.TopLineContainer>\n      <Styled.RightLineContainer ref={rightRef} $borderWidth={borderWidth}>\n        <Styled.Line\n          $width={borderWidth}\n          $height={height}\n          $borderColor={borderColor}\n          $animationDuration={animationDuration}\n          $keyframes={keyFrames.right}\n        />\n      </Styled.RightLineContainer>\n      <Styled.BottomLineContainer $borderWidth={borderWidth}>\n        <Styled.Line\n          $borderColor={borderColor}\n          $width={width}\n          $height={borderWidth}\n          $animationDuration={animationDuration}\n          $keyframes={keyFrames.bottom}\n        />\n      </Styled.BottomLineContainer>\n      <Styled.LeftLineContainer $borderWidth={borderWidth}>\n        <Styled.Line\n          $width={borderWidth}\n          $height={height}\n          $borderColor={borderColor}\n          $animationDuration={animationDuration}\n          $keyframes={keyFrames.left}\n        />\n      </Styled.LeftLineContainer>\n    </>\n  );\n});\n\nexport default BorderPathAnimation;\n"],"names":["getKeyFramesConfig","width","height","p","w","h","bp1","bp2","bp3","getKeyFrames","config","keyframes","percentage","x","y","o","BorderPathAnimation","memo","props","animationDuration","borderWidth","borderColor","setWidth","useState","setHeight","keyFramesConfig","useMemo","keyFrames","topRef","useRef","rightRef","useLayoutEffect","jsxs","Fragment","jsx","Styled.TopLineContainer","Styled.Line","Styled.RightLineContainer","Styled.BottomLineContainer","Styled.LeftLineContainer"],"mappings":"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"}

package/dist/features/ui/buttons/button/button-styled.js

@@ -0,0 +1,110 @@
+import u from "styled-components";
+import x from "../../text/text.js";
+const d = u.button(
+  ({ theme: c, $width: e, $widthX: i, $alignSelf: o, $justifyContent: t, $renderAs: a, $size: n, $shape: $ }) => {
+    const { button: b, colors: r, layout: p } = c, { backgroundColorName: s, borderColorName: l } = b.variants[a], { height: v, paddingHorizontal: g, borderWidth: h } = b.sizes[n];
+    return `
+      position: relative;
+      display: flex;
+      justify-content: ${t};
+      align-items: center;
+      ${o ? `align-self: ${o};` : ""}
+      
+      width: ${e ? `${e}px` : "auto"};
+      ${i ? `width: ${i * p.gutter}px;` : ""}
+      height: ${v}px;
+      padding: 0 ${g}px;
+      border-width: ${h}px;
+      border-style: solid;
+      border-radius: ${$ === "curved" ? v / 2 : 0}px;
+      outline: none;
+
+      background-color: ${r[s.inactive]};
+      border-color: ${r[l.inactive]};
+      
+      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+      cursor: pointer;
+
+      &:hover {
+        background-color: ${r[s.active]};
+        border-color: ${r[l.active]};
+      }
+
+      &:active  {
+        background: ${r[s.inactive]};
+        border-color: ${r[l.inactive]};
+      }
+
+      &[data-busy="true"] {
+        cursor: wait;
+        background-color: ${r[s.active]};
+        border-color: ${r[l.active]};
+      }
+
+      &:disabled {
+        background-color: ${r[s.disabled]};
+        border-color: ${r[l.disabled]};
+        cursor: not-allowed;
+      }
+  `;
+  }
+), k = u(x)(({ theme: c, $buttonRenderAs: e }) => {
+  const { button: i, colors: o } = c, { colorName: t } = i.variants[e];
+  return `
+      color: ${o[t.inactive]};
+      transition: color 0.2s ease-in-out;
+
+      ${d}:hover & {
+        color: ${o[t.active]};
+      }
+      
+      ${d}:active & {
+        color: ${o[t.inactive]};
+      }
+
+      ${d}:disabled & {
+        color: ${o[t.disabled]};
+        opacity: 0.5;
+      }
+    `;
+}), f = u.div(({ theme: c, $buttonRenderAs: e, $size: i, $iconPosition: o }) => {
+  const { button: t, colors: a } = c, { colorName: n } = t.variants[e], { iconSize: $, iconPadding: b } = t.sizes[i];
+  return `
+      ${o === "left" ? "padding-right" : "padding-left"}: ${b}px;
+      order: ${o === "left" ? -1 : 1};
+      
+      & svg {
+        display: block;
+        width: ${$}px;
+        height: ${$}px;
+        color: ${a[n.inactive]};
+        transition: color 0.2s ease-in-out;
+
+        ${d}:hover & {
+          color: ${a[n.active]};
+        }
+
+        ${d}:active & {
+          color: ${a[n.inactive]};
+        }
+
+        ${d}:disabled & {
+          color: ${a[n.disabled]};
+          opacity: 0.5;
+        }
+      }
+    `;
+}), z = u.img(({ theme: c, $size: e }) => {
+  const { button: i } = c, { loaderSize: o } = i.sizes[e];
+  return `
+    width: ${o}px;
+    height: ${o}px;
+  `;
+});
+export {
+  d as Button,
+  f as Icon,
+  k as Label,
+  z as Loader
+};
+//# sourceMappingURL=button-styled.js.map

package/dist/features/ui/buttons/button/button-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-styled.js","sources":["../../../../../src/features/ui/buttons/button/button-styled.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IStyledButtonProps {\n  $width: IButtonProps['width'];\n  $widthX: IButtonProps['widthX'];\n  $alignSelf: IButtonProps['alignSelf'];\n  $renderAs: IButtonProps['renderAs'];\n  $size: Required<IButtonProps>['size'];\n  $shape: Required<IButtonProps>['shape'];\n  $justifyContent: IButtonProps['justifyContent'];\n}\n\nconst Button = styled.button<IStyledButtonProps>(\n  ({ theme, $width, $widthX, $alignSelf, $justifyContent, $renderAs, $size, $shape }) => {\n    const { button, colors, layout } = theme;\n    const { backgroundColorName, borderColorName } = button.variants[$renderAs];\n    const { height, paddingHorizontal, borderWidth } = button.sizes[$size];\n\n    return `\n      position: relative;\n      display: flex;\n      justify-content: ${$justifyContent};\n      align-items: center;\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      \n      width: ${$width ? `${$width}px` : 'auto'};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      height: ${height}px;\n      padding: 0 ${paddingHorizontal}px;\n      border-width: ${borderWidth}px;\n      border-style: solid;\n      border-radius: ${$shape === 'curved' ? height / 2 : 0}px;\n      outline: none;\n\n      background-color: ${colors[backgroundColorName.inactive]};\n      border-color: ${colors[borderColorName.inactive]};\n      \n      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n      cursor: pointer;\n\n      &:hover {\n        background-color: ${colors[backgroundColorName.active]};\n        border-color: ${colors[borderColorName.active]};\n      }\n\n      &:active  {\n        background: ${colors[backgroundColorName.inactive]};\n        border-color: ${colors[borderColorName.inactive]};\n      }\n\n      &[data-busy=\"true\"] {\n        cursor: wait;\n        background-color: ${colors[backgroundColorName.active]};\n        border-color: ${colors[borderColorName.active]};\n      }\n\n      &:disabled {\n        background-color: ${colors[backgroundColorName.disabled]};\n        border-color: ${colors[borderColorName.disabled]};\n        cursor: not-allowed;\n      }\n  `;\n  },\n);\n\ninterface IStyledTextProps {\n  $buttonRenderAs: IButtonProps['renderAs'];\n}\n\nconst Label = styled(Text)<IStyledTextProps>(({ theme, $buttonRenderAs }) => {\n  const { button, colors } = theme;\n  const { colorName } = button.variants[$buttonRenderAs];\n\n  return `\n      color: ${colors[colorName.inactive]};\n      transition: color 0.2s ease-in-out;\n\n      ${Button}:hover & {\n        color: ${colors[colorName.active]};\n      }\n      \n      ${Button}:active & {\n        color: ${colors[colorName.inactive]};\n      }\n\n      ${Button}:disabled & {\n        color: ${colors[colorName.disabled]};\n        opacity: 0.5;\n      }\n    `;\n});\n\ninterface IStyledIconProps {\n  $size: NonNullable<IButtonProps['size']>;\n  $iconPosition: NonNullable<IButtonProps['iconPosition']>;\n  $buttonRenderAs: IButtonProps['renderAs'];\n}\n\nconst Icon = styled.div<IStyledIconProps>(({ theme, $buttonRenderAs, $size, $iconPosition }) => {\n  const { button, colors } = theme;\n  const { colorName } = button.variants[$buttonRenderAs];\n  const { iconSize, iconPadding } = button.sizes[$size];\n\n  return `\n      ${$iconPosition === 'left' ? 'padding-right' : 'padding-left'}: ${iconPadding}px;\n      order: ${$iconPosition === 'left' ? -1 : 1};\n      \n      & svg {\n        display: block;\n        width: ${iconSize}px;\n        height: ${iconSize}px;\n        color: ${colors[colorName.inactive]};\n        transition: color 0.2s ease-in-out;\n\n        ${Button}:hover & {\n          color: ${colors[colorName.active]};\n        }\n\n        ${Button}:active & {\n          color: ${colors[colorName.inactive]};\n        }\n\n        ${Button}:disabled & {\n          color: ${colors[colorName.disabled]};\n          opacity: 0.5;\n        }\n      }\n    `;\n});\n\ninterface IStyledLoaderProps {\n  $size: Required<IButtonProps>['size'];\n}\n\nconst Loader = styled.img<IStyledLoaderProps>(({ theme, $size }) => {\n  const { button } = theme;\n  const { loaderSize } = button.sizes[$size];\n\n  return `\n    width: ${loaderSize}px;\n    height: ${loaderSize}px;\n  `;\n});\n\nexport { Button, Label, Icon, Loader };\n"],"names":["Button","styled","theme","$width","$widthX","$alignSelf","$justifyContent","$renderAs","$size","$shape","button","colors","layout","backgroundColorName","borderColorName","height","paddingHorizontal","borderWidth","Label","Text","$buttonRenderAs","colorName","Icon","$iconPosition","iconSize","iconPadding","Loader","loaderSize"],"mappings":"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"}

package/dist/features/ui/buttons/button/button.js

@@ -0,0 +1,55 @@
+import { jsx as t, jsxs as B, Fragment as R } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { useTheme as j } from "styled-components";
+import { ILLUSTRATIONS as I } from "../../../../assets/illustrations/illustrations.js";
+import O from "../../hooks/use-click-handler.js";
+import { Button as S, Loader as T, Icon as b, Label as v } from "./button-styled.js";
+const w = ({
+  label: r,
+  renderAs: o,
+  size: n = "regular",
+  shape: s = "curved",
+  disabled: a = !1,
+  busy: e = !1,
+  width: c,
+  widthX: d,
+  Icon: i,
+  iconPosition: u = "left",
+  onClick: m,
+  alignSelf: $,
+  justifyContent: f = "center",
+  analyticsLabel: h,
+  analyticsProps: p,
+  children: C,
+  ...L
+}) => {
+  const { button: k } = j(), { textVariant: x } = k.sizes[n], { handleClick: l } = O({ label: r, analyticsLabel: h, analyticsProps: p }, m), A = g(() => {
+    if (e) return null;
+    l();
+  }, [e, l]);
+  return /* @__PURE__ */ t(
+    S,
+    {
+      disabled: a,
+      $alignSelf: $,
+      $justifyContent: f,
+      $width: c,
+      $widthX: d,
+      $renderAs: o,
+      $size: n,
+      $shape: s,
+      onClick: A,
+      "data-busy": e,
+      ...L,
+      children: e ? /* @__PURE__ */ t(T, { src: I.LOADER, alt: "Loader", $size: n }) : /* @__PURE__ */ B(R, { children: [
+        i ? /* @__PURE__ */ t(b, { $buttonRenderAs: o, $iconPosition: u, $size: n, children: /* @__PURE__ */ t(i, {}) }) : void 0,
+        /* @__PURE__ */ t(v, { $renderAs: x, $buttonRenderAs: o, children: r }),
+        C
+      ] })
+    }
+  );
+}, P = w;
+export {
+  P as default
+};
+//# sourceMappingURL=button.js.map

package/dist/features/ui/buttons/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../../../src/features/ui/buttons/button/button.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport React, { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport * as Styled from './button-styled';\n\nconst Button: React.FC<IButtonProps> = ({\n  label,\n  renderAs,\n  size = 'regular',\n  shape = 'curved',\n  disabled = false,\n  busy = false,\n  width,\n  widthX,\n  Icon,\n  iconPosition = 'left',\n  onClick,\n  alignSelf,\n  justifyContent = 'center',\n  analyticsLabel,\n  analyticsProps,\n  children,\n  ...rest\n}) => {\n  const { button } = useTheme();\n  const { textVariant } = button.sizes[size];\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n  const handleOnClick = useCallback(() => {\n    if (busy) return null;\n\n    handleClick();\n  }, [busy, handleClick]);\n\n  return (\n    <Styled.Button\n      disabled={disabled}\n      $alignSelf={alignSelf}\n      $justifyContent={justifyContent}\n      $width={width}\n      $widthX={widthX}\n      $renderAs={renderAs}\n      $size={size}\n      $shape={shape}\n      onClick={handleOnClick}\n      data-busy={busy}\n      {...rest}\n    >\n      {busy ? (\n        <Styled.Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={size} />\n      ) : (\n        <>\n          {Icon ? (\n            <Styled.Icon $buttonRenderAs={renderAs} $iconPosition={iconPosition} $size={size}>\n              <Icon />\n            </Styled.Icon>\n          ) : undefined}\n\n          <Styled.Label $renderAs={textVariant} $buttonRenderAs={renderAs}>\n            {label}\n          </Styled.Label>\n\n          {children}\n        </>\n      )}\n    </Styled.Button>\n  );\n};\n\nexport default Button;\n"],"names":["Button","label","renderAs","size","shape","disabled","busy","width","widthX","Icon","iconPosition","onClick","alignSelf","justifyContent","analyticsLabel","analyticsProps","children","rest","button","useTheme","textVariant","handleClick","useClickHandler","handleOnClick","useCallback","jsx","Styled.Button","Styled.Loader","ILLUSTRATIONS","jsxs","Fragment","Styled.Icon","Styled.Label","Button$1"],"mappings":";;;;;;AASA,MAAMA,IAAiC,CAAC;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EAAA,MACAC;AAAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACb,EAAE,aAAAC,EAAgB,IAAAF,EAAO,MAAMf,CAAI,GACnC,EAAE,aAAAkB,EAAgB,IAAAC,EAAgB,EAAE,OAAArB,GAAO,gBAAAa,GAAgB,gBAAAC,KAAkBJ,CAAO,GAEpFY,IAAgBC,EAAY,MAAM;AACtC,QAAIlB,EAAa,QAAA;AAEL,IAAAe;EAAA,GACX,CAACf,GAAMe,CAAW,CAAC;AAGpB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAArB;AAAA,MACA,YAAYO;AAAA,MACZ,iBAAiBC;AAAA,MACjB,QAAQN;AAAA,MACR,SAASC;AAAA,MACT,WAAWN;AAAA,MACX,OAAOC;AAAA,MACP,QAAQC;AAAA,MACR,SAASmB;AAAA,MACT,aAAWjB;AAAA,MACV,GAAGW;AAAA,MAEH,UACCX,IAAA,gBAAAmB,EAACE,GAAA,EAAc,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOzB,EAAM,CAAA,IAGjE,gBAAA0B,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAArB,IACE,gBAAAgB,EAAAM,GAAA,EAAY,iBAAiB7B,GAAU,eAAeQ,GAAc,OAAOP,GAC1E,UAAC,gBAAAsB,EAAAhB,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QAEJ,gBAAAgB,EAACO,GAAA,EAAa,WAAWZ,GAAa,iBAAiBlB,GACpD,UACHD,GAAA;AAAA,QAECe;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAiB,IAAejC;"}

package/dist/features/ui/buttons/clickable/clickable-styled.js

@@ -0,0 +1,18 @@
+import r from "styled-components";
+const t = r.div(
+  ({ $cursor: e }) => `
+  ${e ? "cursor: pointer;" : ""}
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &[aria-disabled='true']:active {
+    pointer-events: none;
+  }
+`
+);
+export {
+  t as ClickableWrapper
+};
+//# sourceMappingURL=clickable-styled.js.map

package/dist/features/ui/buttons/clickable/clickable-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable-styled.js","sources":["../../../../../src/features/ui/buttons/clickable/clickable-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\ninterface IClickableWrapperProps {\n  $cursor?: string;\n}\n\nconst ClickableWrapper = styled.div<IClickableWrapperProps>(\n  ({ $cursor }) => `\n  ${$cursor ? 'cursor: pointer;' : ''}\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-disabled='true']:active {\n    pointer-events: none;\n  }\n`,\n);\n\nexport { ClickableWrapper };\n"],"names":["ClickableWrapper","styled","$cursor"],"mappings":";AAMA,MAAMA,IAAmBC,EAAO;AAAA,EAC9B,CAAC,EAAE,SAAAC,EAAA,MAAc;AAAA,IACfA,IAAU,qBAAqB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrC;"}

package/dist/features/ui/buttons/clickable/clickable.js

@@ -0,0 +1,26 @@
+import { jsx as s } from "react/jsx-runtime";
+import c from "../../hooks/use-click-handler.js";
+import { ClickableWrapper as n } from "./clickable-styled.js";
+const p = ({
+  disabled: e = !1,
+  onClick: r,
+  children: l,
+  label: a,
+  analyticsLabel: o,
+  analyticsProps: i
+}) => {
+  const { handleClick: t } = c({ label: a, analyticsLabel: o, analyticsProps: i }, r);
+  return /* @__PURE__ */ s(
+    n,
+    {
+      "aria-disabled": e ? "true" : "false",
+      $cursor: r ? "pointer" : void 0,
+      onClick: t,
+      children: l
+    }
+  );
+}, k = p;
+export {
+  k as default
+};
+//# sourceMappingURL=clickable.js.map

package/dist/features/ui/buttons/clickable/clickable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable.js","sources":["../../../../../src/features/ui/buttons/clickable/clickable.tsx"],"sourcesContent":["import type { IClickableAnalyticsProps } from '../../types';\n\nimport React from 'react';\n\nimport useClickHandler from '../../hooks/use-click-handler';\nimport * as Styled from './clickable-styled';\n\nexport interface IClickableProps extends IClickableAnalyticsProps {\n  label: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  children: React.ReactNode;\n}\n\nconst Clickable: React.FC<IClickableProps> = ({\n  disabled = false,\n  onClick,\n  children,\n  label,\n  analyticsLabel,\n  analyticsProps,\n}) => {\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n  return (\n    <Styled.ClickableWrapper\n      aria-disabled={disabled ? 'true' : 'false'}\n      $cursor={onClick ? 'pointer' : undefined}\n      onClick={handleClick}\n    >\n      {children}\n    </Styled.ClickableWrapper>\n  );\n};\n\nexport default Clickable;\n"],"names":["Clickable","disabled","onClick","children","label","analyticsLabel","analyticsProps","handleClick","useClickHandler","jsx","Styled.ClickableWrapper","Clickable$1"],"mappings":";;;AAcA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACE,QAAA,EAAE,aAAAC,EAAgB,IAAAC,EAAgB,EAAE,OAAAJ,GAAO,gBAAAC,GAAgB,gBAAAC,KAAkBJ,CAAO;AAGxF,SAAA,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,iBAAeT,IAAW,SAAS;AAAA,MACnC,SAASC,IAAU,YAAY;AAAA,MAC/B,SAASK;AAAA,MAER,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,GAEAQ,IAAeX;"}

package/dist/features/ui/buttons/icon-button/icon-button-styled.js

@@ -0,0 +1,66 @@
+import l from "styled-components";
+const d = l.button(
+  ({ theme: n, $size: a, $buttonRenderAs: s, $customBgColor: e }) => {
+    const { colors: o, button: t } = n, { height: r, borderWidth: b } = t.sizes[a || "small"], { backgroundColorName: i, borderColorName: c } = t.variants[s];
+    return `
+    width: ${r}px;
+    height: ${r}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 6px;
+
+    background-color: ${e ? o[e] : o[i.inactive]};
+    border-color: ${o[c.inactive]};
+    border-width: ${b}px;
+    border-style: solid;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: ${o[i.active]};
+      border-color: ${o[c.active]};
+    }
+
+    &:active  {
+      background: ${o[i.inactive]};
+      border-color: ${o[c.inactive]};
+    }
+
+    &:disabled {
+      background-color: ${o[i.disabled]};
+      border-color: ${o[c.disabled]};
+      cursor: not-allowed;
+    }
+  `;
+  }
+), u = l.div(({ theme: n, $size: a, $buttonRenderAs: s }) => {
+  const { button: e, colors: o } = n, { iconSize: t } = e.sizes[a || "small"], { colorName: r } = e.variants[s];
+  return `
+    & svg {
+        width: ${t}px;
+        height: ${t}px;
+        color: ${o[r.inactive]};
+        transition: color 0.2s ease-out;
+
+        ${d}:hover & {
+            color: ${o[r.active]};
+        }
+
+        ${d}:active & {
+            color: ${o[r.inactive]};
+        }
+
+        ${d}:disabled & {
+            color: ${o[r.disabled]};
+            opacity: 0.5;
+        }
+    }
+  `;
+});
+export {
+  d as IconButtonWrapper,
+  u as IconWrapper
+};
+//# sourceMappingURL=icon-button-styled.js.map

package/dist/features/ui/buttons/icon-button/icon-button-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-styled.js","sources":["../../../../../src/features/ui/buttons/icon-button/icon-button-styled.tsx"],"sourcesContent":["import type { IIconButtonProps } from './icon-button-types';\n\nimport styled from 'styled-components';\n\ninterface IIconButtonWrapperProps {\n  $buttonRenderAs: IIconButtonProps['renderAs'];\n  $size?: IIconButtonProps['size'];\n  $customBgColor?: IIconButtonProps['customBgColor'];\n}\n\nconst IconButtonWrapper = styled.button<IIconButtonWrapperProps>(\n  ({ theme, $size, $buttonRenderAs, $customBgColor }) => {\n    const { colors, button } = theme;\n    const { height, borderWidth } = button.sizes[$size || 'small'];\n    const { backgroundColorName, borderColorName } = button.variants[$buttonRenderAs];\n\n    return `\n    width: ${height}px;\n    height: ${height}px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    cursor: pointer;\n    padding: 6px;\n\n    background-color: ${\n      $customBgColor ? colors[$customBgColor] : colors[backgroundColorName.inactive]\n    };\n    border-color: ${colors[borderColorName.inactive]};\n    border-width: ${borderWidth}px;\n    border-style: solid;\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n    &:hover {\n      background-color: ${colors[backgroundColorName.active]};\n      border-color: ${colors[borderColorName.active]};\n    }\n\n    &:active  {\n      background: ${colors[backgroundColorName.inactive]};\n      border-color: ${colors[borderColorName.inactive]};\n    }\n\n    &:disabled {\n      background-color: ${colors[backgroundColorName.disabled]};\n      border-color: ${colors[borderColorName.disabled]};\n      cursor: not-allowed;\n    }\n  `;\n  },\n);\n\nconst IconWrapper = styled.div<IIconButtonWrapperProps>(({ theme, $size, $buttonRenderAs }) => {\n  const { button, colors } = theme;\n  const { iconSize } = button.sizes[$size || 'small'];\n  const { colorName } = button.variants[$buttonRenderAs];\n\n  return `\n    & svg {\n        width: ${iconSize}px;\n        height: ${iconSize}px;\n        color: ${colors[colorName.inactive]};\n        transition: color 0.2s ease-out;\n\n        ${IconButtonWrapper}:hover & {\n            color: ${colors[colorName.active]};\n        }\n\n        ${IconButtonWrapper}:active & {\n            color: ${colors[colorName.inactive]};\n        }\n\n        ${IconButtonWrapper}:disabled & {\n            color: ${colors[colorName.disabled]};\n            opacity: 0.5;\n        }\n    }\n  `;\n});\n\nexport { IconButtonWrapper, IconWrapper };\n"],"names":["IconButtonWrapper","styled","theme","$size","$buttonRenderAs","$customBgColor","colors","button","height","borderWidth","backgroundColorName","borderColorName","IconWrapper","iconSize","colorName"],"mappings":";AAUA,MAAMA,IAAoBC,EAAO;AAAA,EAC/B,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,iBAAAC,GAAiB,gBAAAC,QAAqB;AAC/C,UAAA,EAAE,QAAAC,GAAQ,QAAAC,EAAW,IAAAL,GACrB,EAAE,QAAAM,GAAQ,aAAAC,MAAgBF,EAAO,MAAMJ,KAAS,OAAO,GACvD,EAAE,qBAAAO,GAAqB,iBAAAC,EAAA,IAAoBJ,EAAO,SAASH,CAAe;AAEzE,WAAA;AAAA,aACEI,CAAM;AAAA,cACLA,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASdH,IAAiBC,EAAOD,CAAc,IAAIC,EAAOI,EAAoB,QAAQ,CAC/E;AAAA,oBACgBJ,EAAOK,EAAgB,QAAQ,CAAC;AAAA,oBAChCF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKLH,EAAOI,EAAoB,MAAM,CAAC;AAAA,sBACtCJ,EAAOK,EAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIhCL,EAAOI,EAAoB,QAAQ,CAAC;AAAA,sBAClCJ,EAAOK,EAAgB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,0BAI5BL,EAAOI,EAAoB,QAAQ,CAAC;AAAA,sBACxCJ,EAAOK,EAAgB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAIpD;AACF,GAEMC,IAAcX,EAAO,IAA6B,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,iBAAAC,QAAsB;AACvF,QAAA,EAAE,QAAAG,GAAQ,QAAAD,EAAW,IAAAJ,GACrB,EAAE,UAAAW,EAAS,IAAIN,EAAO,MAAMJ,KAAS,OAAO,GAC5C,EAAE,WAAAW,EAAc,IAAAP,EAAO,SAASH,CAAe;AAE9C,SAAA;AAAA;AAAA,iBAEQS,CAAQ;AAAA,kBACPA,CAAQ;AAAA,iBACTP,EAAOQ,EAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,UAGjCd,CAAiB;AAAA,qBACNM,EAAOQ,EAAU,MAAM,CAAC;AAAA;AAAA;AAAA,UAGnCd,CAAiB;AAAA,qBACNM,EAAOQ,EAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,UAGrCd,CAAiB;AAAA,qBACNM,EAAOQ,EAAU,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAK/C,CAAC;"}

package/dist/features/ui/buttons/icon-button/icon-button.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { ILLUSTRATIONS as u } from "../../../../assets/illustrations/illustrations.js";
+import f from "../../hooks/use-click-handler.js";
+import { Loader as I } from "../button/button-styled.js";
+import { IconButtonWrapper as $, IconWrapper as C } from "./icon-button-styled.js";
+const L = p((n) => {
+  const {
+    Icon: e,
+    size: r,
+    onClick: s,
+    renderAs: t,
+    disabled: c,
+    analyticsLabel: i,
+    analyticsProps: l,
+    customBgColor: m,
+    busy: a
+  } = n, { handleClick: d } = f({ analyticsLabel: i, analyticsProps: l }, s);
+  return /* @__PURE__ */ o(
+    $,
+    {
+      disabled: c,
+      $size: r,
+      $buttonRenderAs: t,
+      onClick: d,
+      $customBgColor: m,
+      children: a ? /* @__PURE__ */ o(I, { src: u.LOADER, alt: "Loader", $size: r || "small" }) : /* @__PURE__ */ o(C, { $size: r, $buttonRenderAs: t, children: /* @__PURE__ */ o(e, {}) })
+    }
+  );
+}), h = L;
+export {
+  h as default
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/features/ui/buttons/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../../../src/features/ui/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import type { IIconButtonProps } from './icon-button-types';\n\nimport { memo, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport { Loader } from '../button/button-styled';\nimport * as Styled from './icon-button-styled';\n\nconst IconButton: FC<IIconButtonProps> = memo(props => {\n  const {\n    Icon,\n    size,\n    onClick,\n    renderAs,\n    disabled,\n    analyticsLabel,\n    analyticsProps,\n    customBgColor,\n    busy,\n  } = props;\n  const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n\n  return (\n    <Styled.IconButtonWrapper\n      disabled={disabled}\n      $size={size}\n      $buttonRenderAs={renderAs}\n      onClick={handleClick}\n      $customBgColor={customBgColor}\n    >\n      {busy ? (\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={size || 'small'} />\n      ) : (\n        <Styled.IconWrapper $size={size} $buttonRenderAs={renderAs}>\n          <Icon />\n        </Styled.IconWrapper>\n      )}\n    </Styled.IconButtonWrapper>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","memo","props","Icon","size","onClick","renderAs","disabled","analyticsLabel","analyticsProps","customBgColor","busy","handleClick","useClickHandler","jsx","Styled.IconButtonWrapper","Loader","ILLUSTRATIONS","Styled.IconWrapper","IconButton$1"],"mappings":";;;;;;AASA,MAAMA,IAAmCC,EAAK,CAASC,MAAA;AAC/C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,EACE,IAAAT,GACE,EAAE,aAAAU,MAAgBC,EAAgB,EAAE,gBAAAL,GAAgB,gBAAAC,EAAA,GAAkBJ,CAAO;AAGjF,SAAA,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAR;AAAA,MACA,OAAOH;AAAA,MACP,iBAAiBE;AAAA,MACjB,SAASM;AAAA,MACT,gBAAgBF;AAAA,MAEf,UAAAC,sBACEK,GAAO,EAAA,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOb,KAAQ,SAAS,IAEvE,gBAAAU,EAAAI,GAAA,EAAmB,OAAOd,GAAM,iBAAiBE,GAChD,UAAC,gBAAAQ,EAAAX,GAAA,CAAA,CAAK,EACR,CAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC,GAEDgB,IAAenB;"}

package/dist/features/ui/buttons/text-button/text-button-styled.js

@@ -0,0 +1,30 @@
+import i from "styled-components";
+import c from "../../text/text.js";
+import { ClickableWrapper as d } from "../clickable/clickable-styled.js";
+const p = i(c)(({ theme: t, $buttonSize: n }) => {
+  const { textButton: o } = t, { underlineHeight: e, underlineOffset: r } = o.sizes[n];
+  return `
+    text-decoration: underline;
+    text-decoration-thickness: ${e}px;
+    text-underline-offset: ${r}px;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active  {
+      text-decoration: underline;
+      text-decoration-thickness: ${e}px;
+    }
+
+    ${d}[aria-disabled='true'] & {
+      text-decoration: underline;
+      text-decoration-thickness: ${e}px;
+      opacity: 0.5;
+    }
+  `;
+});
+export {
+  p as Text
+};
+//# sourceMappingURL=text-button-styled.js.map