@cuemath/leap 2.9.9 → 2.9.11-as1

package/dist/features/ui/inputs/base-input/base-input-styled.js

@@ -1,114 +1,124 @@
-import g from "styled-components";
+import p from "styled-components";
 import C from "../../text/text.js";
-const E = g.div(
-  ({ theme: i, $size: s, $willShowMessage: c, $width: o, $widthX: e }) => {
-    const { height: a, marginTop: t, marginBottom: r } = i.input.sizes[s], n = a + t + (c ? r : 0);
+const k = p.div(
+  ({ theme: r, $size: e, $willShowMessage: n, $width: t, $widthX: o }) => {
+    const { height: c, marginTop: a, marginBottom: s } = r.input.sizes[e], i = c + a + (n ? s : 0);
     return `
-      width: ${o || "auto"}${typeof o == "number" ? "px" : ""};
-      ${e ? `width: ${e * i.layout.gutter}px;` : ""}
-      height: ${n}px;
+      width: ${t || "auto"}${typeof t == "number" ? "px" : ""};
+      ${o ? `width: ${o * r.layout.gutter}px;` : ""}
+      height: ${i}px;
     `;
   }
-), x = g.div(
-  ({ theme: i, $size: s, $renderAs: c, $disabled: o, $shape: e, $isTransparent: a }) => {
-    const { colors: t, input: r } = i, { height: n, marginTop: b, paddingLeft: f, paddingRight: u, borderRadius: h } = r.sizes[s], { borderColorName: d, backgroundColorName: $ } = r.variants[c], p = e === "borderLess", l = e === "curved", v = p ? 0 : h, m = a ? "transparent" : t[$ ?? "WHITE"];
+), b = p.div(
+  ({ theme: r, $size: e, $renderAs: n, $disabled: t, $shape: o, $isTransparent: c }) => {
+    const { colors: a, input: s } = r, { height: i, marginTop: x, paddingLeft: f, paddingRight: u, borderRadius: h } = s.sizes[e], { borderColorName: d, backgroundColorName: $ } = s.variants[n], l = o === "borderLess", g = o === "curved", m = l ? 0 : h, v = c ? "transparent" : a[$ ?? "WHITE"];
     return `
     position: relative;
     display: flex;
-    height: ${n}px;
-    margin-top: ${b}px;
-    padding-left: ${p ? 0 : f}px;
-    padding-right: ${p ? 0 : u}px;
-    padding-top: ${l ? 1 : 0}px;
-    padding-bottom: ${l ? 1 : 0}px;
-   ${p ? `
+    height: ${i}px;
+    margin-top: ${x}px;
+    padding-left: ${l ? 0 : f}px;
+    padding-right: ${l ? 0 : u}px;
+    padding-top: ${g ? 1 : 0}px;
+    padding-bottom: ${g ? 1 : 0}px;
+   ${l ? `
       border: none;
-      border-bottom: 1px solid ${t[d[o ? "disabled" : "inactive"]]};
-    ` : `border: 1px solid ${t[d[o ? "disabled" : l ? "active" : "inactive"]]};`}
-    border-radius: ${l ? 40 : v}px;
+      border-bottom: 1px solid ${a[d[t ? "disabled" : "inactive"]]};
+    ` : `border: 1px solid ${a[d[t ? "disabled" : g ? "active" : "inactive"]]};`}
+    border-radius: ${g ? 40 : m}px;
     transition: border-color 0.2s ease-in-out;
     
-    background: ${m};
+    background: ${v};
     
     &:focus-within {
-      border-color: ${t[d.active]};
+      border-color: ${a[d.active]};
     }
     
     &:hover {
-      ${o ? "" : `border-color: ${t[d.active]};`}
+      ${t ? "" : `border-color: ${a[d.active]};`}
     }
   `;
   }
-), R = g.div`
+), B = p.div`
   flex-grow: 1;
-`, k = g.div(
-  ({ theme: i, $inputRenderAs: s, $disabled: c, $size: o, $siblingPosition: e }) => {
-    const { colors: a, input: t } = i, { iconPadding: r } = t.sizes[o], { labelColorName: n } = t.variants[s];
+`, E = p.div(
+  ({ theme: r, $inputRenderAs: e, $disabled: n, $size: t, $siblingPosition: o }) => {
+    const { colors: c, input: a } = r, { iconPadding: s } = a.sizes[t], { labelColorName: i } = a.variants[e];
     return `
-      order: ${e === "left" ? -1 : 1};
-      padding-${e === "left" ? "right" : "left"}: ${r}px;
+      order: ${o === "left" ? -1 : 1};
+      padding-${o === "left" ? "right" : "left"}: ${s}px;
       align-self: center;
-      color: ${a[n[c ? "disabled" : "inactive"]]};
+      color: ${c[i[n ? "disabled" : "inactive"]]};
 
-      ${x}:focus-within & {
-        color: ${a[n.active]};
+      ${b}:focus-within & {
+        color: ${c[i.active]};
       }
       
-      ${x}:hover & {
-        ${c ? "" : `color: ${a[n.active]};`}
+      ${b}:hover & {
+        ${n ? "" : `color: ${c[i.active]};`}
       }
     `;
   }
-), y = g(C)(({
-  theme: i,
-  $size: s,
-  $inputRenderAs: c,
-  $stickyLabel: o,
-  $disabled: e,
-  $shape: a,
-  $isTransparent: t
+), H = p(C)(({
+  theme: r,
+  $size: e,
+  $inputRenderAs: n,
+  $stickyLabel: t,
+  $disabled: o,
+  $shape: c,
+  $isTransparent: a
 }) => {
-  const { colors: r, input: n, text: b, layout: f } = i, { gutter: u } = f, { height: h, paddingLeft: d } = n.sizes[s], { lineHeight: $ } = b[n.sizes[s].labelTextVariant], { labelColorName: p } = n.variants[c], l = h / 2 - $ / 2 - 1, v = -l - $ / 2 - 1, m = a === "borderLess", L = t ? "transparent" : r.WHITE;
+  const { colors: s, input: i, text: x, layout: f } = r, { gutter: u } = f, { height: h, paddingLeft: d } = i.sizes[e], { lineHeight: $ } = x[i.sizes[e].labelTextVariant], { labelColorName: l, labelBackgroundColorName: g } = i.variants[n], m = h / 2 - $ / 2 - 1, v = -m - $ / 2 - 1, N = c === "borderLess", T = a ? "transparent" : s[g ?? "WHITE"];
   return `
     position: absolute;
-    top: ${l}px;
-    left: ${(m ? 0 : d) - u * 0.375}px;
+    top: ${m}px;
+    left: ${(N ? 0 : d) - u * 0.375}px;
     padding: 0 ${u * 0.375}px;
-    background-color: ${L};
-    color: ${r[p[e ? "disabled" : "inactive"]]};
+    background-color: ${T};
+    color: ${s[l[o ? "disabled" : "inactive"]]};
     pointer-events: none;
     transform-origin: left;
-    transform: translateY(${o ? v : 0}px) scale(${o ? 0.75 : 1});
+    transform: translateY(${t ? v : 0}px) scale(${t ? 0.75 : 1});
     transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
 
-    ${x}:focus-within & {
-      color: ${r[p.active]};
+    ${b}:focus-within & {
+      color: ${s[l.active]};
       transform: translateY(${v}px) scale(0.75);
     }
     
-    ${x}:hover & {
-      ${e ? "" : `color: ${r[p.active]};`}
+    ${b}:hover & {
+      ${o ? "" : `color: ${s[l.active]};`}
     }
 
     & span {
-      color: ${r.RED};
+      color: ${s.RED};
       margin-left: 2px;
     }
   `;
-}), z = g(C)(
-  ({ theme: { colors: i } }) => `
-position: absolute;
-bottom: -2px;
-transform: translateY(calc(100%));
-color: ${i.RED};
-`
-);
+}), R = p(C)(({ theme: { input: r, colors: e }, $inputRenderAs: n }) => {
+  var o;
+  return `
+    position: absolute;
+    bottom: -2px;
+    transform: translateY(calc(100%));
+    color: ${e[((o = r.variants[n]) == null ? void 0 : o.errorMessageColorName) ?? "RED"]};
+`;
+}), y = p(C)(({ theme: { input: r, colors: e }, $inputRenderAs: n }) => {
+  var o;
+  return `
+    position: absolute;
+    bottom: -2px;
+    transform: translateY(calc(100%));
+    color: ${e[(o = r.variants[n]) == null ? void 0 : o.messageColorName.active]};
+`;
+});
 export {
-  E as Container,
-  z as Error,
-  R as InputWrapper,
-  y as Label,
-  k as SiblingWrapper,
-  x as Wrapper
+  k as Container,
+  R as Error,
+  y as HelperText,
+  B as InputWrapper,
+  H as Label,
+  E as SiblingWrapper,
+  b as Wrapper
 };
 //# sourceMappingURL=base-input-styled.js.map

package/dist/features/ui/inputs/base-input/base-input-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n  $size: IBaseInputProps['size'];\n  $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n  ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n    const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n    const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n    return `\n      width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n      height: ${containerHeight}px;\n    `;\n  },\n);\n\ninterface IWrapperProps {\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n  $renderAs: IBaseInputProps['renderAs'];\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent?: boolean;\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n  ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent }) => {\n    const { colors, input } = theme;\n    const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n    const { borderColorName, backgroundColorName } = input.variants[$renderAs];\n\n    const isBorderLessShape = $shape === 'borderLess';\n    const isCurvedShape = $shape === 'curved';\n    const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n    const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n    return `\n    position: relative;\n    display: flex;\n    height: ${height}px;\n    margin-top: ${marginTop}px;\n    padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n    padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n    padding-top: ${isCurvedShape ? 1 : 0}px;\n    padding-bottom: ${isCurvedShape ? 1 : 0}px;\n   ${\n     isBorderLessShape\n       ? `\n      border: none;\n      border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n    `\n       : `border: 1px solid ${\n           colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n         };`\n   }\n    border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n    transition: border-color 0.2s ease-in-out;\n    \n    background: ${background};\n    \n    &:focus-within {\n      border-color: ${colors[borderColorName.active]};\n    }\n    \n    &:hover {\n      ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n    }\n  `;\n  },\n);\n\nconst InputWrapper = styled.div`\n  flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n  $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n  ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n    const { colors, input } = theme;\n    const { iconPadding } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n      order: ${$siblingPosition === 'left' ? -1 : 1};\n      padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n      align-self: center;\n      color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n      ${Wrapper}:focus-within & {\n        color: ${colors[labelColorName.active]};\n      }\n      \n      ${Wrapper}:hover & {\n        ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n      }\n    `;\n  },\n);\n\ninterface ILabelProps {\n  $size: IBaseInputProps['size'];\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $stickyLabel: IBaseInputProps['stickyLabel'];\n  $disabled?: boolean;\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent: IBaseInputProps['isTransparent'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n  theme,\n  $size,\n  $inputRenderAs,\n  $stickyLabel,\n  $disabled,\n  $shape,\n  $isTransparent,\n}) => {\n  const { colors, input, text, layout } = theme;\n  const { gutter } = layout;\n  const { height, paddingLeft } = input.sizes[$size];\n  const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n  const { labelColorName } = input.variants[$inputRenderAs];\n  const topPosition = height / 2 - lineHeight / 2 - 1;\n  const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n  const isBorderLessShape = $shape === 'borderLess';\n\n  const backgroundColor = $isTransparent ? 'transparent' : colors.WHITE;\n\n  return `\n    position: absolute;\n    top: ${topPosition}px;\n    left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n    padding: 0 ${gutter * 0.375}px;\n    background-color: ${backgroundColor};\n    color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n    pointer-events: none;\n    transform-origin: left;\n    transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n      $stickyLabel ? 0.75 : 1\n    });\n    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n    ${Wrapper}:focus-within & {\n      color: ${colors[labelColorName.active]};\n      transform: translateY(${topPositionWhenActive}px) scale(0.75);\n    }\n    \n    ${Wrapper}:hover & {\n      ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n    }\n\n    & span {\n      color: ${colors.RED};\n      margin-left: 2px;\n    }\n  `;\n});\n\nconst Error = styled(Text)(\n  ({ theme: { colors } }) => `\nposition: absolute;\nbottom: -2px;\ntransform: translateY(calc(100%));\ncolor: ${colors.RED};\n`,\n);\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","topPosition","topPositionWhenActive","backgroundColor","Error"],"mappings":"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"}
+{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n  $size: IBaseInputProps['size'];\n  $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n  ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n    const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n    const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n    return `\n      width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n      height: ${containerHeight}px;\n    `;\n  },\n);\n\ninterface IWrapperProps {\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n  $renderAs: IBaseInputProps['renderAs'];\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent?: boolean;\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n  ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent }) => {\n    const { colors, input } = theme;\n    const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n    const { borderColorName, backgroundColorName } = input.variants[$renderAs];\n\n    const isBorderLessShape = $shape === 'borderLess';\n    const isCurvedShape = $shape === 'curved';\n    const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n    const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n    return `\n    position: relative;\n    display: flex;\n    height: ${height}px;\n    margin-top: ${marginTop}px;\n    padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n    padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n    padding-top: ${isCurvedShape ? 1 : 0}px;\n    padding-bottom: ${isCurvedShape ? 1 : 0}px;\n   ${\n     isBorderLessShape\n       ? `\n      border: none;\n      border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n    `\n       : `border: 1px solid ${\n           colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n         };`\n   }\n    border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n    transition: border-color 0.2s ease-in-out;\n    \n    background: ${background};\n    \n    &:focus-within {\n      border-color: ${colors[borderColorName.active]};\n    }\n    \n    &:hover {\n      ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n    }\n  `;\n  },\n);\n\nconst InputWrapper = styled.div`\n  flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n  $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n  ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n    const { colors, input } = theme;\n    const { iconPadding } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n      order: ${$siblingPosition === 'left' ? -1 : 1};\n      padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n      align-self: center;\n      color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n      ${Wrapper}:focus-within & {\n        color: ${colors[labelColorName.active]};\n      }\n      \n      ${Wrapper}:hover & {\n        ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n      }\n    `;\n  },\n);\n\ninterface ILabelProps {\n  $size: IBaseInputProps['size'];\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $stickyLabel: IBaseInputProps['stickyLabel'];\n  $disabled?: boolean;\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent: IBaseInputProps['isTransparent'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n  theme,\n  $size,\n  $inputRenderAs,\n  $stickyLabel,\n  $disabled,\n  $shape,\n  $isTransparent,\n}) => {\n  const { colors, input, text, layout } = theme;\n  const { gutter } = layout;\n  const { height, paddingLeft } = input.sizes[$size];\n  const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n  const { labelColorName, labelBackgroundColorName } = input.variants[$inputRenderAs];\n  const topPosition = height / 2 - lineHeight / 2 - 1;\n  const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n  const isBorderLessShape = $shape === 'borderLess';\n\n  const backgroundColor = $isTransparent\n    ? 'transparent'\n    : colors[labelBackgroundColorName ?? 'WHITE'];\n\n  return `\n    position: absolute;\n    top: ${topPosition}px;\n    left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n    padding: 0 ${gutter * 0.375}px;\n    background-color: ${backgroundColor};\n    color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n    pointer-events: none;\n    transform-origin: left;\n    transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n      $stickyLabel ? 0.75 : 1\n    });\n    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n    ${Wrapper}:focus-within & {\n      color: ${colors[labelColorName.active]};\n      transform: translateY(${topPositionWhenActive}px) scale(0.75);\n    }\n    \n    ${Wrapper}:hover & {\n      ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n    }\n\n    & span {\n      color: ${colors.RED};\n      margin-left: 2px;\n    }\n  `;\n});\n\ninterface IErrorProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n}\n\nconst Error = styled(Text)<IErrorProps>(({ theme: { input, colors }, $inputRenderAs }) => {\n  const color = colors[input.variants[$inputRenderAs]?.errorMessageColorName ?? 'RED'];\n\n  return `\n    position: absolute;\n    bottom: -2px;\n    transform: translateY(calc(100%));\n    color: ${color};\n`;\n});\n\nconst HelperText = styled(Text)<IErrorProps>(({ theme: { input, colors }, $inputRenderAs }) => {\n  const color = colors[input.variants[$inputRenderAs]?.messageColorName.active];\n\n  return `\n    position: absolute;\n    bottom: -2px;\n    transform: translateY(calc(100%));\n    color: ${color};\n`;\n});\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error, HelperText };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","labelBackgroundColorName","topPosition","topPositionWhenActive","backgroundColor","Error","_a","HelperText"],"mappings":"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"}

package/dist/features/ui/inputs/base-input/base-input.js

@@ -1,60 +1,62 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { useTheme as z } from "styled-components";
-import { Container as A, Wrapper as f, InputWrapper as L, Error as T, SiblingWrapper as x, Label as y } from "./base-input-styled.js";
-const j = (p) => {
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useTheme as g } from "styled-components";
+import { Container as x, Wrapper as z, InputWrapper as f, Error as L, HelperText as y, SiblingWrapper as R, Label as E } from "./base-input-styled.js";
+const k = (h) => {
   const {
-    label: t,
+    label: a,
     stickyLabel: $,
-    renderAs: i,
-    width: h,
-    widthX: b,
-    disabled: r,
-    willShowMessage: c,
-    inputElement: m,
-    siblingElement: l,
-    siblingPosition: u,
-    size: e,
-    errorMessage: d,
-    mandatory: w,
-    shape: n,
-    isTransparent: o = !1
-  } = p, { input: g } = z();
-  return /* @__PURE__ */ s(A, { $width: h, $widthX: b, $size: e, $willShowMessage: c, children: /* @__PURE__ */ a(
-    f,
+    renderAs: e,
+    width: b,
+    widthX: c,
+    disabled: i,
+    willShowMessage: u,
+    inputElement: w,
+    siblingElement: d,
+    siblingPosition: m,
+    size: s,
+    errorMessage: n,
+    mandatory: A,
+    shape: t,
+    isTransparent: p = !1,
+    helperText: o
+  } = h, { input: T } = g();
+  return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ l(
+    z,
     {
-      $renderAs: i,
-      $size: e,
-      $disabled: r,
-      $shape: n,
-      $isTransparent: o,
+      $renderAs: e,
+      $size: s,
+      $disabled: i,
+      $shape: t,
+      $isTransparent: p,
       children: [
-        /* @__PURE__ */ a(L, { children: [
-          m,
-          d && /* @__PURE__ */ s(T, { $renderAs: "body3", children: d })
+        /* @__PURE__ */ l(f, { children: [
+          w,
+          n && /* @__PURE__ */ r(L, { $renderAs: "body3", $inputRenderAs: e, children: n }),
+          o && !n && /* @__PURE__ */ r(y, { $renderAs: "ub3", $inputRenderAs: e, children: o })
         ] }),
-        l ? /* @__PURE__ */ s(
-          x,
+        d ? /* @__PURE__ */ r(
+          R,
           {
-            $inputRenderAs: i,
-            $disabled: r,
-            $size: e,
-            $siblingPosition: u ?? "right",
-            children: l
+            $inputRenderAs: e,
+            $disabled: i,
+            $size: s,
+            $siblingPosition: m ?? "right",
+            children: d
           }
         ) : void 0,
-        t && n !== "curved" && /* @__PURE__ */ a(
-          y,
+        a && t !== "curved" && /* @__PURE__ */ l(
+          E,
           {
-            $renderAs: g.sizes[e].labelTextVariant,
-            $inputRenderAs: i,
-            $size: e,
+            $renderAs: T.sizes[s].labelTextVariant,
+            $inputRenderAs: e,
+            $size: s,
             $stickyLabel: $,
-            $disabled: r,
-            $shape: n,
-            $isTransparent: o,
+            $disabled: i,
+            $shape: t,
+            $isTransparent: p,
             children: [
-              t,
-              w && /* @__PURE__ */ s("span", { children: "*" })
+              a,
+              A && /* @__PURE__ */ r("span", { children: "*" })
             ]
           }
         )
@@ -63,6 +65,6 @@ const j = (p) => {
   ) });
 };
 export {
-  j as default
+  k as default
 };
 //# sourceMappingURL=base-input.js.map

package/dist/features/ui/inputs/base-input/base-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n  Container,\n  Error,\n  InputWrapper,\n  Label,\n  SiblingWrapper,\n  Wrapper,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n  const {\n    label,\n    stickyLabel,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    inputElement,\n    siblingElement,\n    siblingPosition,\n    size,\n    errorMessage,\n    mandatory,\n    shape,\n    isTransparent = false,\n  } = props;\n  const { input } = useTheme();\n  const showLabel = label && shape !== 'curved';\n\n  return (\n    <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n      <Wrapper\n        $renderAs={renderAs}\n        $size={size}\n        $disabled={disabled}\n        $shape={shape}\n        $isTransparent={isTransparent}\n      >\n        <InputWrapper>\n          {inputElement}\n          {errorMessage && <Error $renderAs=\"body3\">{errorMessage}</Error>}\n        </InputWrapper>\n        {siblingElement ? (\n          <SiblingWrapper\n            $inputRenderAs={renderAs}\n            $disabled={disabled}\n            $size={size}\n            $siblingPosition={siblingPosition ?? 'right'}\n          >\n            {siblingElement}\n          </SiblingWrapper>\n        ) : undefined}\n        {showLabel && (\n          <Label\n            $renderAs={input.sizes[size].labelTextVariant}\n            $inputRenderAs={renderAs}\n            $size={size}\n            $stickyLabel={stickyLabel}\n            $disabled={disabled}\n            $shape={shape}\n            $isTransparent={isTransparent}\n          >\n            {label}\n            {mandatory && <span>*</span>}\n          </Label>\n        )}\n      </Wrapper>\n    </Container>\n  );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","SiblingWrapper","Label"],"mappings":";;;AAcA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,EACd,IAAAf,GACE,EAAE,OAAAgB,MAAUC;AAIhB,SAAA,gBAAAC,EAACC,KAAU,QAAQf,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWlB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAK,EAACE,GACE,EAAA,UAAA;AAAA,UAAAd;AAAA,UACAI,KAAgB,gBAAAM,EAACK,GAAM,EAAA,WAAU,SAAS,UAAaX,GAAA;AAAA,QAAA,GAC1D;AAAA,QACCH,IACC,gBAAAS;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,gBAAgBrB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAxBQR,KAASa,MAAU,YA0B7B,gBAAAM;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWT,EAAM,MAAML,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAK,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n  Container,\n  Error,\n  InputWrapper,\n  Label,\n  SiblingWrapper,\n  Wrapper,\n  HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n  const {\n    label,\n    stickyLabel,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    inputElement,\n    siblingElement,\n    siblingPosition,\n    size,\n    errorMessage,\n    mandatory,\n    shape,\n    isTransparent = false,\n    helperText,\n  } = props;\n  const { input } = useTheme();\n  const showLabel = label && shape !== 'curved';\n  const showHelperText = helperText && !errorMessage;\n\n  return (\n    <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n      <Wrapper\n        $renderAs={renderAs}\n        $size={size}\n        $disabled={disabled}\n        $shape={shape}\n        $isTransparent={isTransparent}\n      >\n        <InputWrapper>\n          {inputElement}\n          {errorMessage && (\n            <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n              {errorMessage}\n            </Error>\n          )}\n          {showHelperText && (\n            <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n              {helperText}\n            </HelperText>\n          )}\n        </InputWrapper>\n        {siblingElement ? (\n          <SiblingWrapper\n            $inputRenderAs={renderAs}\n            $disabled={disabled}\n            $size={size}\n            $siblingPosition={siblingPosition ?? 'right'}\n          >\n            {siblingElement}\n          </SiblingWrapper>\n        ) : undefined}\n        {showLabel && (\n          <Label\n            $renderAs={input.sizes[size].labelTextVariant}\n            $inputRenderAs={renderAs}\n            $size={size}\n            $stickyLabel={stickyLabel}\n            $disabled={disabled}\n            $shape={shape}\n            $isTransparent={isTransparent}\n          >\n            {label}\n            {mandatory && <span>*</span>}\n          </Label>\n        )}\n      </Wrapper>\n    </Container>\n  );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/features/ui/inputs/text-input/text-input.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import g from "../base-input/base-input.js";
-import { Input as h } from "./text-input-styled.js";
-const i = "regular", x = b((o, p) => {
+import { forwardRef as I } from "react";
+import T from "../base-input/base-input.js";
+import { Input as b } from "./text-input-styled.js";
+const i = "regular", g = I((o, p) => {
   const {
     type: e,
     label: l,
@@ -14,12 +14,13 @@ const i = "regular", x = b((o, p) => {
     willShowMessage: d,
     siblingElement: f,
     errorMessage: c,
-    shape: w,
+    shape: h,
     isTransparent: n,
-    ...I
+    helperText: w,
+    ...x
   } = o;
   return /* @__PURE__ */ a(
-    g,
+    T,
     {
       renderAs: r,
       label: l,
@@ -29,11 +30,12 @@ const i = "regular", x = b((o, p) => {
       disabled: s,
       willShowMessage: d,
       size: i,
-      shape: w,
+      shape: h,
       errorMessage: c,
+      helperText: w,
       isTransparent: n,
       inputElement: /* @__PURE__ */ a(
-        h,
+        b,
         {
           ref: p,
           type: e,
@@ -42,14 +44,14 @@ const i = "regular", x = b((o, p) => {
           $size: i,
           disabled: s,
           $isTransparent: n,
-          ...I
+          ...x
         }
       ),
       siblingElement: f
     }
   );
-}), y = x;
+}), z = g;
 export {
-  y as default
+  z as default
 };
 //# sourceMappingURL=text-input.js.map

package/dist/features/ui/inputs/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd;AAGF,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAhB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDQ,IAAepB;"}
+{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    helperText,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      helperText={helperText}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}

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

@@ -1,50 +1,67 @@
-import { jsx as L } from "react/jsx-runtime";
-import w from "lottie-web";
-import { memo as y, forwardRef as b, useRef as c, useImperativeHandle as A, useEffect as E } from "react";
+import { jsx as E } from "react/jsx-runtime";
+import g from "lottie-web";
+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 = b((p, h) => {
+const x = w((p, v) => {
   const {
-    src: s,
-    width: v = "100%",
-    height: g = "100%",
-    settings: u,
-    eventListener: r,
-    onRender: i,
-    animateOnIntersect: o
-  } = p, n = c(null), t = c(null), a = c(null);
-  return A(
-    h,
+    src: m,
+    width: L = "100%",
+    height: h = "100%",
+    settings: l,
+    eventListener: i,
+    onRender: a,
+    animateOnIntersect: c
+  } = p, o = u(null), e = u(null), s = u(null);
+  return b(
+    v,
     () => ({
-      playSegments: (m, e) => {
-        t.current && t.current.playSegments(m, 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);
+      },
+      play: () => {
+        var t;
+        return (t = e.current) == null ? void 0 : t.play();
+      },
+      stop: () => {
+        var t;
+        return (t = e.current) == null ? void 0 : t.stop();
       }
     }),
     []
-  ), E(() => ((async () => {
+  ), A(() => ((async () => {
     try {
-      const e = await $(s);
-      n.current && (t.current = w.loadAnimation({
-        container: n.current,
-        animationData: e,
+      const r = await $(m);
+      o.current && (e.current = g.loadAnimation({
+        container: o.current,
+        animationData: r,
         renderer: "svg",
         loop: !0,
         autoplay: !0,
-        ...u
-      }), o && (a.current = new IntersectionObserver(
-        ([l]) => {
+        ...l
+      }), c && (s.current = new IntersectionObserver(
+        ([n]) => {
           var f, d;
-          l && l.isIntersecting ? (f = t.current) == null || f.play() : (d = t.current) == null || d.pause();
+          n && n.isIntersecting ? (f = e.current) == null || f.play() : (d = e.current) == null || d.pause();
         },
         { threshold: 0 }
-      ), n.current && a.current.observe(n.current)), i == null || i(), r && t.current.addEventListener(r.name, r.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;
-    t.current && (r && t.current.removeEventListener(r.name, r.callback), o && ((e = a.current) == null || e.disconnect()), t.current.destroy());
-  }), [s, r, i, o, u]), /* @__PURE__ */ L(I, { ref: n, $width: v, $height: g });
+    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 { 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        if (animationInstance.current) {\n          animationInstance.current.playSegments(segments, forceFlag);\n        }\n      },\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","useEffect","animationData","fetchLottie","lottie","entry","_a","_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,MAAwB;AACjE,QAAIJ,EAAkB,WACFA,EAAA,QAAQ,aAAaG,GAAUC,CAAS;AAAA,MAE9D;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYhB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUQ,EAAO,cAAc;AAAA,QAC/C,WAAWV,EAAU;AAAA,QACrB,eAAAQ;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGZ;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACQ,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBC,IAAAV,EAAkB,YAAlB,QAAAU,EAA2B,UAE3BC,IAAAX,EAAkB,YAAlB,QAAAW,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbb,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFiB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAIZ,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFa,IAAAT,EAAqB,YAArB,QAAAS,EAA8B,eAEhCV,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDmB,GAAS,EAAA,KAAKf,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcqB,IAAAC,EAAK5B,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;"}