@cuemath/leap 2.9.11 → 3.0.0

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js

@@ -1,17 +1,17 @@
-import { jsxs as D, Fragment as I, jsx as r } from "react/jsx-runtime";
-import U from "../../../node_modules/lodash.throttle/index.js";
-import { useRef as W, useState as m, useCallback as $, useEffect as Y } from "react";
-import { useTheme as H } from "styled-components";
+import { jsxs as I, Fragment as U, jsx as r } from "react/jsx-runtime";
+import W from "../../../node_modules/lodash.throttle/index.js";
+import { useRef as Y, useState as m, useCallback as $, useEffect as H } from "react";
+import { useTheme as P } from "styled-components";
 import C from "../layout/flex-view.js";
-import P from "../portal/portal.js";
-import V from "../text/text.js";
-import { TooltipBody as Z } from "./arrow-tooltip-styled.js";
-import { computeTooltipNewCoOrdinates as q } from "./arrow-tooltip-util.js";
-const y = 8, G = 100, J = ({
+import V from "../portal/portal.js";
+import Z from "../text/text.js";
+import { TooltipBody as q } from "./arrow-tooltip-styled.js";
+import { computeTooltipNewCoOrdinates as y } from "./arrow-tooltip-util.js";
+const G = 8, J = 100, K = ({
   isAnimated: O,
   alwaysVisible: o = !1,
   arrowColor: T,
-  arrowSize: h = y,
+  arrowSize: h = G,
   arrowXCoOrdinates: g,
   arrowYCoOrdinates: w,
   backgroundColor: R,
@@ -27,61 +27,62 @@ const y = 8, G = 100, J = ({
   tooltipYCoOrdinates: k,
   width: F,
   widthX: L,
-  zIndex: M
+  zIndex: M,
+  parentWidth: S
 }) => {
-  const { arrowTooltip: S } = H(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[i], u = W(null), [_, p] = m(o), [j, v] = m(
+  const { arrowTooltip: X } = P(), { tooltipVariants: a } = X, { backgroundColorName: _ } = a[i], u = Y(null), [j, p] = m(o), [v, z] = m(
     null
   ), s = $(
     (e, n) => {
-      v(e), p(n);
+      z(e), p(n);
     },
     []
-  ), z = $(() => {
+  ), B = $(() => {
     if (t || o)
       return null;
     s(null, !1);
-  }, [o, s, t]), d = U(() => {
+  }, [o, s, t]), d = W(() => {
     var f;
     const { current: e } = u;
     if (t || !e) return null;
-    const n = (f = e.children[0]) == null ? void 0 : f.getBoundingClientRect(), B = n ? q(c, n) : null;
-    return s(B, !0), null;
-  }, G);
-  return Y(() => {
+    const n = (f = e.children[0]) == null ? void 0 : f.getBoundingClientRect(), D = n ? y(c, n) : null;
+    return s(D, !0), null;
+  }, J);
+  return H(() => {
     t && p(!1), o && d();
-  }, [o, t]), /* @__PURE__ */ D(I, { children: [
+  }, [o, t]), /* @__PURE__ */ I(U, { children: [
     /* @__PURE__ */ r(
       C,
       {
-        $width: "fit-content",
+        $width: S || "fit-content",
         ref: u,
         onMouseEnter: d,
-        onMouseLeave: z,
+        onMouseLeave: B,
         children: /* @__PURE__ */ r(C, { children: x })
       }
     ),
-    _ && /* @__PURE__ */ r(P, { portalId: "tooltip-root", children: /* @__PURE__ */ r(
-      Z,
+    j && /* @__PURE__ */ r(V, { portalId: "tooltip-root", children: /* @__PURE__ */ r(
+      q,
       {
         $arrowSize: h,
         $arrowXCoOrdinates: g,
         $arrowYCoOrdinates: w,
         $position: c,
         $renderAs: i,
-        $tooltipCoOrdinates: j,
+        $tooltipCoOrdinates: v,
         $tooltipOffset: E,
         $tooltipXCoOrdinates: N,
         $tooltipYCoOrdinates: k,
         $width: F,
         $widthX: L,
         $zIndex: M,
-        $background: X,
+        $background: _,
         $backgroundColor: R,
         $arrowColor: T,
         $borderColor: b,
         $isAnimated: O,
         children: typeof l == "string" ? /* @__PURE__ */ r(
-          V,
+          Z,
           {
             $renderAs: A || "body3",
             $color: a[i].textColorName,
@@ -92,8 +93,8 @@ const y = 8, G = 100, J = ({
       }
     ) })
   ] });
-}, so = J;
+}, co = K;
 export {
-  so as default
+  co as default
 };
 //# sourceMappingURL=arrow-tooltip.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width=\"fit-content\"\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}
+{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n  parentWidth,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width={parentWidth || 'fit-content'}\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}

package/dist/features/ui/constants/z-index.js

@@ -1,7 +1,7 @@
 const _ = {
   CHAPTER_CROWN_ICON: 4,
   CHAPTER_PLUS_ICON: 2,
-  CHAPTER_PROGRESS_SVG: 1,
+  CHAPTER_PROGRESS_SVG: 2,
   LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,
   LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,
   MODAL: 20,

package/dist/features/ui/constants/z-index.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 1,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAC5B;"}
+{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 2,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAC5B;"}

package/dist/features/ui/context-menu/context-menu-styled.js

@@ -1,27 +1,41 @@
-import e from "styled-components";
-const s = e.div`
-  width: fit-content;
+import o from "styled-components";
+const d = o.div`
+  width: auto;
   height: fit-content;
   position: relative;
   border-radius: 50%;
-`, p = e.div(
-  ({ $visible: t, $menuOffset: o, $startLeft: n, $menuZIndex: i, $placeTop: r }) => `
+`, f = o.div(
+  ({
+    $visible: t,
+    $menuOffset: a,
+    $startLeft: i,
+    $menuZIndex: s,
+    $placeTop: e,
+    $menuWidth: r,
+    $menuWidthX: n,
+    theme: p
+  }) => {
+    const { layout: u } = p;
+    return `
     position: absolute;
-    top: calc(${r ? "0% -" : "100% +"} ${o ?? 0}px);
-    ${n ? "left: 0" : "right: 0"};
-    z-index: ${i ?? "unset"};
+    width: ${r ? `${r}` : "auto"}${typeof r == "number" ? "px" : ""};
+    ${n ? `width: ${n * u.gutter}px;` : ""}
+    top: calc(${e ? "0% -" : "100% +"} ${a ?? 0}px);
+    ${i ? "left: 0" : "right: 0"};
+    z-index: ${s ?? "unset"};
 
     transform-origin: top;
-    transform: scaleY(${t ? 1 : 0}) rotate(${r ? 180 : 0}deg);
+    transform: scaleY(${t ? 1 : 0}) rotate(${e ? 180 : 0}deg);
     opacity: ${t ? 1 : 0};
     transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  `
-), d = e.div(({ $placeTop: t }) => `
+  `;
+  }
+), $ = o.div(({ $placeTop: t }) => `
     transform: rotate(${t ? 180 : 0}deg);
   `);
 export {
-  d as MenuElementWrapper,
-  p as OptionsMenuWrapper,
-  s as TargetElementWrapper
+  $ as MenuElementWrapper,
+  f as OptionsMenuWrapper,
+  d as TargetElementWrapper
 };
 //# sourceMappingURL=context-menu-styled.js.map

package/dist/features/ui/context-menu/context-menu-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-styled.js","sources":["../../../../src/features/ui/context-menu/context-menu-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst TargetElementWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  position: relative;\n  border-radius: 50%;\n`;\n\ninterface IOptionsMenuWrapperProps {\n  $visible: boolean;\n  $startLeft?: boolean;\n  $menuOffset?: number;\n  $menuZIndex?: number;\n  $placeTop?: boolean;\n}\n\nconst OptionsMenuWrapper = styled.div<IOptionsMenuWrapperProps>(\n  ({ $visible, $menuOffset, $startLeft, $menuZIndex, $placeTop }) => {\n    return `\n    position: absolute;\n    top: calc(${$placeTop ? '0% -' : '100% +'} ${$menuOffset ?? 0}px);\n    ${$startLeft ? 'left: 0' : 'right: 0'};\n    z-index: ${$menuZIndex ?? 'unset'};\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0}) rotate(${$placeTop ? 180 : 0}deg);\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n  `;\n  },\n);\n\ninterface IMenuElementWrapperProps {\n  $placeTop?: boolean;\n}\n\nconst MenuElementWrapper = styled.div<IMenuElementWrapperProps>(({ $placeTop }) => {\n  return `\n    transform: rotate(${$placeTop ? 180 : 0}deg);\n  `;\n});\n\nexport { TargetElementWrapper, OptionsMenuWrapper, MenuElementWrapper };\n"],"names":["TargetElementWrapper","styled","OptionsMenuWrapper","$visible","$menuOffset","$startLeft","$menuZIndex","$placeTop","MenuElementWrapper"],"mappings":";AAEA,MAAMA,IAAuBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAe9BC,IAAqBD,EAAO;AAAA,EAChC,CAAC,EAAE,UAAAE,GAAU,aAAAC,GAAa,YAAAC,GAAY,aAAAC,GAAa,WAAAC,QAC1C;AAAA;AAAA,gBAEKA,IAAY,SAAS,QAAQ,IAAIH,KAAe,CAAC;AAAA,MAC3DC,IAAa,YAAY,UAAU;AAAA,eAC1BC,KAAe,OAAO;AAAA;AAAA;AAAA,wBAGbH,IAAW,IAAI,CAAC,YAAYI,IAAY,MAAM,CAAC;AAAA,eACxDJ,IAAW,IAAI,CAAC;AAAA;AAAA;AAI/B,GAMMK,IAAqBP,EAAO,IAA8B,CAAC,EAAE,WAAAM,QAC1D;AAAA,wBACeA,IAAY,MAAM,CAAC;AAAA,GAE1C;"}
+{"version":3,"file":"context-menu-styled.js","sources":["../../../../src/features/ui/context-menu/context-menu-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst TargetElementWrapper = styled.div`\n  width: auto;\n  height: fit-content;\n  position: relative;\n  border-radius: 50%;\n`;\n\ninterface IOptionsMenuWrapperProps {\n  $visible: boolean;\n  $startLeft?: boolean;\n  $menuOffset?: number;\n  $menuZIndex?: number;\n  $placeTop?: boolean;\n  $menuWidth?: number | string;\n  $menuWidthX?: number;\n}\n\nconst OptionsMenuWrapper = styled.div<IOptionsMenuWrapperProps>(\n  ({\n    $visible,\n    $menuOffset,\n    $startLeft,\n    $menuZIndex,\n    $placeTop,\n    $menuWidth,\n    $menuWidthX,\n    theme,\n  }) => {\n    const { layout } = theme;\n\n    return `\n    position: absolute;\n    width: ${$menuWidth ? `${$menuWidth}` : 'auto'}${typeof $menuWidth === 'number' ? 'px' : ''};\n    ${$menuWidthX ? `width: ${$menuWidthX * layout.gutter}px;` : ''}\n    top: calc(${$placeTop ? '0% -' : '100% +'} ${$menuOffset ?? 0}px);\n    ${$startLeft ? 'left: 0' : 'right: 0'};\n    z-index: ${$menuZIndex ?? 'unset'};\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0}) rotate(${$placeTop ? 180 : 0}deg);\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n  `;\n  },\n);\n\ninterface IMenuElementWrapperProps {\n  $placeTop?: boolean;\n}\n\nconst MenuElementWrapper = styled.div<IMenuElementWrapperProps>(({ $placeTop }) => {\n  return `\n    transform: rotate(${$placeTop ? 180 : 0}deg);\n  `;\n});\n\nexport { TargetElementWrapper, OptionsMenuWrapper, MenuElementWrapper };\n"],"names":["TargetElementWrapper","styled","OptionsMenuWrapper","$visible","$menuOffset","$startLeft","$menuZIndex","$placeTop","$menuWidth","$menuWidthX","theme","layout","MenuElementWrapper"],"mappings":";AAEA,MAAMA,IAAuBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB9BC,IAAqBD,EAAO;AAAA,EAChC,CAAC;AAAA,IACC,UAAAE;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,MACI;AACE,UAAA,EAAE,QAAAC,EAAW,IAAAD;AAEZ,WAAA;AAAA;AAAA,aAEEF,IAAa,GAAGA,CAAU,KAAK,MAAM,GAAG,OAAOA,KAAe,WAAW,OAAO,EAAE;AAAA,MACzFC,IAAc,UAAUA,IAAcE,EAAO,MAAM,QAAQ,EAAE;AAAA,gBACnDJ,IAAY,SAAS,QAAQ,IAAIH,KAAe,CAAC;AAAA,MAC3DC,IAAa,YAAY,UAAU;AAAA,eAC1BC,KAAe,OAAO;AAAA;AAAA;AAAA,wBAGbH,IAAW,IAAI,CAAC,YAAYI,IAAY,MAAM,CAAC;AAAA,eACxDJ,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA,EAG7B;AACF,GAMMS,IAAqBX,EAAO,IAA8B,CAAC,EAAE,WAAAM,QAC1D;AAAA,wBACeA,IAAY,MAAM,CAAC;AAAA,GAE1C;"}

package/dist/features/ui/context-menu/context-menu.js

@@ -1,37 +1,45 @@
-import { jsxs as u, jsx as m } from "react/jsx-runtime";
-import { memo as x, useRef as $, useEffect as d } from "react";
-import a from "../hooks/use-context-menu-click-handler.js";
-import { TargetElementWrapper as k, OptionsMenuWrapper as E, MenuElementWrapper as W } from "./context-menu-styled.js";
-const j = x(
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { memo as a, useRef as W, useEffect as k } from "react";
+import E from "../hooks/use-context-menu-click-handler.js";
+import { TargetElementWrapper as j, OptionsMenuWrapper as O, MenuElementWrapper as R } from "./context-menu-styled.js";
+const T = a(
   ({
-    targetElement: n,
+    targetElement: o,
     menuElement: p,
     menuOffset: c,
     startLeft: f,
-    menuZIndex: s,
+    menuZIndex: u,
     placeTop: t,
+    menuWidth: s,
+    menuWidthX: l,
+    handleOnMenuClick: $,
     onMenuVisibilityChange: e
   }) => {
-    const o = $(null), { menuVisible: r, onMenuClick: l } = a(o);
-    return d(() => {
+    const m = W(null), { menuVisible: r, onMenuClick: d } = E(
+      m,
+      $
+    );
+    return k(() => {
       e == null || e(r);
-    }, [r, e]), /* @__PURE__ */ u(k, { ref: o, onClick: l, children: [
-      n,
-      /* @__PURE__ */ m(
-        E,
+    }, [r, e]), /* @__PURE__ */ x(j, { ref: m, onClick: d, children: [
+      o,
+      /* @__PURE__ */ n(
+        O,
         {
           $menuOffset: c,
           $visible: r,
           $startLeft: f,
-          $menuZIndex: s,
+          $menuZIndex: u,
           $placeTop: t,
-          children: /* @__PURE__ */ m(W, { $placeTop: t, children: p })
+          $menuWidth: s,
+          $menuWidthX: l,
+          children: /* @__PURE__ */ n(R, { $placeTop: t, children: p })
         }
       )
     ] });
   }
-), C = j;
+), L = T;
 export {
-  C as default
+  L as default
 };
 //# sourceMappingURL=context-menu.js.map

package/dist/features/ui/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","sources":["../../../../src/features/ui/context-menu/context-menu.tsx"],"sourcesContent":["import type { IContextMenuProps } from './context-menu-types';\nimport type { FC } from 'react';\n\nimport { memo, useEffect, useRef } from 'react';\n\nimport useContextMenuClickHandler from '../hooks/use-context-menu-click-handler';\nimport * as Styled from './context-menu-styled';\n\nconst ContextMenu: FC<IContextMenuProps> = memo(\n  ({\n    targetElement,\n    menuElement,\n    menuOffset,\n    startLeft,\n    menuZIndex,\n    placeTop,\n    onMenuVisibilityChange,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { menuVisible, onMenuClick } = useContextMenuClickHandler(containerRef);\n\n    useEffect(() => {\n      onMenuVisibilityChange?.(menuVisible);\n    }, [menuVisible, onMenuVisibilityChange]);\n\n    return (\n      <Styled.TargetElementWrapper ref={containerRef} onClick={onMenuClick}>\n        {targetElement}\n\n        <Styled.OptionsMenuWrapper\n          $menuOffset={menuOffset}\n          $visible={menuVisible}\n          $startLeft={startLeft}\n          $menuZIndex={menuZIndex}\n          $placeTop={placeTop}\n        >\n          <Styled.MenuElementWrapper $placeTop={placeTop}>{menuElement}</Styled.MenuElementWrapper>\n        </Styled.OptionsMenuWrapper>\n      </Styled.TargetElementWrapper>\n    );\n  },\n);\n\nexport default ContextMenu;\n"],"names":["ContextMenu","memo","targetElement","menuElement","menuOffset","startLeft","menuZIndex","placeTop","onMenuVisibilityChange","containerRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","useEffect","Styled.TargetElementWrapper","jsx","Styled.OptionsMenuWrapper","Styled.MenuElementWrapper","ContextMenu$1"],"mappings":";;;;AAQA,MAAMA,IAAqCC;AAAA,EACzC,CAAC;AAAA,IACC,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAeC,EAAuB,IAAI,GAC1C,EAAE,aAAAC,GAAa,aAAAC,EAAY,IAAIC,EAA2BJ,CAAY;AAE5E,WAAAK,EAAU,MAAM;AACd,MAAAN,KAAA,QAAAA,EAAyBG;AAAA,IAAW,GACnC,CAACA,GAAaH,CAAsB,CAAC,qBAGrCO,GAAA,EAA4B,KAAKN,GAAc,SAASG,GACtD,UAAA;AAAA,MAAAV;AAAA,MAED,gBAAAc;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,UAAUO;AAAA,UACV,YAAYN;AAAA,UACZ,aAAaC;AAAA,UACb,WAAWC;AAAA,UAEX,4BAACW,GAAA,EAA0B,WAAWX,GAAW,UAAYJ,GAAA;AAAA,QAAA;AAAA,MAC/D;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF,GAEAgB,IAAenB;"}
+{"version":3,"file":"context-menu.js","sources":["../../../../src/features/ui/context-menu/context-menu.tsx"],"sourcesContent":["import type { IContextMenuProps } from './context-menu-types';\nimport type { FC } from 'react';\n\nimport { memo, useEffect, useRef } from 'react';\n\nimport useContextMenuClickHandler from '../hooks/use-context-menu-click-handler';\nimport * as Styled from './context-menu-styled';\n\nconst ContextMenu: FC<IContextMenuProps> = memo(\n  ({\n    targetElement,\n    menuElement,\n    menuOffset,\n    startLeft,\n    menuZIndex,\n    placeTop,\n    menuWidth,\n    menuWidthX,\n    handleOnMenuClick,\n    onMenuVisibilityChange,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n      containerRef,\n      handleOnMenuClick,\n    );\n\n    useEffect(() => {\n      onMenuVisibilityChange?.(menuVisible);\n    }, [menuVisible, onMenuVisibilityChange]);\n\n    return (\n      <Styled.TargetElementWrapper ref={containerRef} onClick={onMenuClick}>\n        {targetElement}\n\n        <Styled.OptionsMenuWrapper\n          $menuOffset={menuOffset}\n          $visible={menuVisible}\n          $startLeft={startLeft}\n          $menuZIndex={menuZIndex}\n          $placeTop={placeTop}\n          $menuWidth={menuWidth}\n          $menuWidthX={menuWidthX}\n        >\n          <Styled.MenuElementWrapper $placeTop={placeTop}>{menuElement}</Styled.MenuElementWrapper>\n        </Styled.OptionsMenuWrapper>\n      </Styled.TargetElementWrapper>\n    );\n  },\n);\n\nexport default ContextMenu;\n"],"names":["ContextMenu","memo","targetElement","menuElement","menuOffset","startLeft","menuZIndex","placeTop","menuWidth","menuWidthX","handleOnMenuClick","onMenuVisibilityChange","containerRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","useEffect","Styled.TargetElementWrapper","jsx","Styled.OptionsMenuWrapper","Styled.MenuElementWrapper","ContextMenu$1"],"mappings":";;;;AAQA,MAAMA,IAAqCC;AAAA,EACzC,CAAC;AAAA,IACC,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAeC,EAAuB,IAAI,GAE1C,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,MACnCJ;AAAA,MACAF;AAAA,IAAA;AAGF,WAAAO,EAAU,MAAM;AACd,MAAAN,KAAA,QAAAA,EAAyBG;AAAA,IAAW,GACnC,CAACA,GAAaH,CAAsB,CAAC,qBAGrCO,GAAA,EAA4B,KAAKN,GAAc,SAASG,GACtD,UAAA;AAAA,MAAAb;AAAA,MAED,gBAAAiB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,aAAahB;AAAA,UACb,UAAUU;AAAA,UACV,YAAYT;AAAA,UACZ,aAAaC;AAAA,UACb,WAAWC;AAAA,UACX,YAAYC;AAAA,UACZ,aAAaC;AAAA,UAEb,4BAACY,GAAA,EAA0B,WAAWd,GAAW,UAAYJ,GAAA;AAAA,QAAA;AAAA,MAC/D;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF,GAEAmB,IAAetB;"}

package/dist/features/ui/lottie-animation/lottie-animation.js

@@ -1,60 +1,68 @@
 import { jsx as E } from "react/jsx-runtime";
 import g from "lottie-web";
-import { memo as w, forwardRef as y, useRef as u, useImperativeHandle as b, useEffect as A } from "react";
+import { memo as y, forwardRef as w, useRef as u, useImperativeHandle as b, useEffect as A } from "react";
 import I from "../layout/flex-view.js";
 import { fetchLottie as $ } from "./helper.js";
-const x = y((v, p) => {
+const x = w((p, v) => {
   const {
     src: m,
     width: L = "100%",
     height: h = "100%",
     settings: l,
-    eventListener: n,
+    eventListener: i,
     onRender: a,
     animateOnIntersect: c
-  } = v, o = u(null), r = u(null), s = u(null);
+  } = p, o = u(null), e = u(null), s = u(null);
   return b(
-    p,
+    v,
     () => ({
-      playSegments: (i, e) => {
-        var t;
-        return (t = r.current) == null ? void 0 : t.playSegments(i, e);
+      playSegments: (t, r) => {
+        var n;
+        return (n = e.current) == null ? void 0 : n.playSegments(t, r);
+      },
+      addEventListener: (t, r) => {
+        var n;
+        return (n = e.current) == null ? void 0 : n.addEventListener(t, r);
+      },
+      removeEventListener: (t, r) => {
+        var n;
+        return (n = e.current) == null ? void 0 : n.removeEventListener(t, r);
       },
-      addEventListener: (i, e) => {
+      play: () => {
         var t;
-        return (t = r.current) == null ? void 0 : t.addEventListener(i, e);
+        return (t = e.current) == null ? void 0 : t.play();
       },
-      removeEventListener: (i, e) => {
+      stop: () => {
         var t;
-        return (t = r.current) == null ? void 0 : t.removeEventListener(i, e);
+        return (t = e.current) == null ? void 0 : t.stop();
       }
     }),
     []
   ), A(() => ((async () => {
     try {
-      const e = await $(m);
-      o.current && (r.current = g.loadAnimation({
+      const r = await $(m);
+      o.current && (e.current = g.loadAnimation({
         container: o.current,
-        animationData: e,
+        animationData: r,
         renderer: "svg",
         loop: !0,
         autoplay: !0,
         ...l
       }), c && (s.current = new IntersectionObserver(
-        ([t]) => {
+        ([n]) => {
           var f, d;
-          t && t.isIntersecting ? (f = r.current) == null || f.play() : (d = r.current) == null || d.pause();
+          n && n.isIntersecting ? (f = e.current) == null || f.play() : (d = e.current) == null || d.pause();
         },
         { threshold: 0 }
-      ), o.current && s.current.observe(o.current)), a == null || a(), n && r.current.addEventListener(n.name, n.callback));
-    } catch (e) {
-      throw Error(`Error loading Lottie animation: ${e}`);
+      ), o.current && s.current.observe(o.current)), a == null || a(), i && e.current.addEventListener(i.name, i.callback));
+    } catch (r) {
+      throw Error(`Error loading Lottie animation: ${r}`);
     }
   })(), () => {
-    var e;
-    r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
-  }), [m, n, a, c, l]), /* @__PURE__ */ E(I, { ref: o, $width: L, $height: h });
-}), F = w(x);
+    var r;
+    e.current && (i && e.current.removeEventListener(i.name, i.callback), c && ((r = s.current) == null || r.disconnect()), e.current.destroy());
+  }), [m, i, a, c, l]), /* @__PURE__ */ E(I, { ref: o, $width: L, $height: h });
+}), F = y(x);
 export {
   F as default
 };

package/dist/features/ui/lottie-animation/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            renderer: 'svg',\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,IAAQ;AAAA,IAE5F,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYnB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUW,EAAO,cAAc;AAAA,QAC/C,WAAWb,EAAU;AAAA,QACrB,eAAAW;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGf;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACW,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBP,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BQ,IAAAb,EAAkB,YAAlB,QAAAa,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbf,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFmB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAId,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDqB,GAAS,EAAA,KAAKjB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcuB,IAAAC,EAAK9B,CAAe;"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            renderer: 'svg',\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYnB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUW,EAAO,cAAc;AAAA,QAC/C,WAAWb,EAAU;AAAA,QACrB,eAAAW;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGf;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACW,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBP,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BQ,IAAAb,EAAkB,YAAlB,QAAAa,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbf,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFmB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAId,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDqB,GAAS,EAAA,KAAKjB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcuB,IAAAC,EAAK9B,CAAe;"}

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

@@ -1,4 +1,4 @@
-const o = (i) => ({ sizes: {
+const e = (i) => ({ sizes: {
   xsmall: {
     height: i * 2,
     paddingHorizontal: i * 1.375,
@@ -81,18 +81,35 @@ const o = (i) => ({ sizes: {
   },
   tertiary: {
     backgroundColorName: {
-      inactive: "WHITE",
-      active: "RED",
+      inactive: "RED",
+      active: "BLACK",
       disabled: "GREY_3"
     },
     colorName: {
-      inactive: "RED",
+      inactive: "WHITE",
       active: "WHITE",
       disabled: "BLACK"
     },
     borderColorName: {
-      inactive: "RED",
-      active: "RED",
+      inactive: "BLACK",
+      active: "BLACK",
+      disabled: "GREY_3"
+    }
+  },
+  "secondary-gray": {
+    backgroundColorName: {
+      inactive: "WHITE",
+      active: "WHITE_4",
+      disabled: "GREY_3"
+    },
+    colorName: {
+      inactive: "BLACK",
+      active: "BLACK",
+      disabled: "BLACK"
+    },
+    borderColorName: {
+      inactive: "BLACK",
+      active: "BLACK",
       disabled: "GREY_3"
     }
   },
@@ -217,6 +234,6 @@ const o = (i) => ({ sizes: {
   // },
 } });
 export {
-  o as default
+  e as default
 };
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    'primary': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'tertiary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'RED',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-dark': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_10',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'WHITE_T_38',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_15',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'yellow-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'black': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_T_60',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'black-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_T_40',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    'primary': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'tertiary': {\n      backgroundColorName: {\n        inactive: 'RED',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-gray': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE_4',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-dark': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_10',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'WHITE_T_38',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_15',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'yellow-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'black': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_T_60',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'black-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_T_40',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"AAcM,MAAAA,IAAoC,CAACC,OA+OlC,EAAE,OA9O8C;AAAA,EACrD,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAU;AAAA,IAC7B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAUA;AAAA,IACV,aAAaA,IAAS;AAAA,IACtB,YAAYA,IAAS;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAU;AAAA,IAC7B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAUA,IAAS;AAAA,IACnB,aAAaA,IAAS;AAAA,IACtB,YAAYA,IAAS;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAU;AAAA,IAC7B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAUA,IAAS;AAAA,IACnB,aAAaA,IAAS;AAAA,IACtB,YAAYA,IAAS;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAU;AAAA,IAC7B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAUA,IAAS;AAAA,IACnB,aAAaA,IAAS;AAAA,IACtB,YAAYA,IAAS;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAU;AAAA,IAC7B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAUA,IAAS;AAAA,IACnB,aAAaA,IAAS;AAAA,IACtB,YAAYA,IAAS;AAAA,EACvB;AAAA,GAiMc,UA9LgD;AAAA,EAC9D,SAAW;AAAA,IACT,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,WAAa;AAAA,IACX,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,UAAY;AAAA,IACV,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}