acinguiux-ds-react-framework 0.1.18 → 0.1.20

package/build/esm/components/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import S from "classnames";
 import { Sizes as g, Variants as N } from "../../react-base/src/consts/index.js";
 import { convertDeprecateSelectionType as T } from "../../react-base/src/components/ButtonGroup/ButtonGroup.utils.js";
@@ -7,59 +7,59 @@ import k from "./components/RadioButton/RadioButton.js";
 import O from "./components/CheckboxButton/CheckboxButton.js";
 import { BUTTON_GROUP_CLASS as P } from "../../react-base/src/consts/classes.js";
 const D = ({
-  className: p,
-  type: d = "single",
-  size: m = g.Medium,
-  variant: a = N.Filled,
-  name: s = "buttonGroup",
+  className: c,
+  type: f = "single",
+  size: e = g.Medium,
+  variant: m = N.Filled,
+  name: p = "buttonGroup",
   buttonsFill: i = !1,
-  selectedKey: n,
-  iconPosition: b,
-  iconOnly: $,
-  onChange: l,
-  items: r,
-  groupDisabled: u,
+  selectedKey: a,
+  iconPosition: d,
+  iconOnly: b,
+  onChange: n,
+  items: $,
+  groupDisabled: l,
   ...B
 }) => {
-  const c = T(d);
-  return /* @__PURE__ */ e(
+  const u = T(f);
+  return /* @__PURE__ */ r(
     h,
     {
-      className: S(P, p),
-      $variant: a,
-      $size: m,
-      $type: c,
-      $groupDisabled: u,
+      className: S(P, c),
+      $variant: m,
+      $size: e,
+      $type: u,
+      $groupDisabled: l,
       $buttonsFill: i,
       ...B,
-      children: r == null ? void 0 : r.map(({ value: t, icon: G, tooltip: x, ...o }) => {
-        const f = {
+      children: $?.map(({ value: t, icon: G, tooltip: x, ...o }) => {
+        const s = {
           value: t ?? o.label,
-          disabled: u || o.disabled,
+          disabled: l || o.disabled,
           buttonsFill: i,
-          name: s,
-          size: m,
+          name: p,
+          size: e,
           icon: G,
-          iconOnly: $,
-          iconPosition: b,
+          iconOnly: b,
+          iconPosition: d,
           tooltip: x,
-          variant: a
+          variant: m
         };
-        return c === "single" ? /* @__PURE__ */ e(
+        return u === "single" ? /* @__PURE__ */ r(
           k,
           {
-            selectedKey: n,
-            onChange: l,
-            ...f,
+            selectedKey: a,
+            onChange: n,
+            ...s,
             ...o
           },
           `group-radio-${t ?? o.label}`
-        ) : /* @__PURE__ */ e(
+        ) : /* @__PURE__ */ r(
           O,
           {
-            selectedKey: n,
-            onChange: l,
-            ...f,
+            selectedKey: a,
+            onChange: n,
+            ...s,
             ...o
           },
           `group-checkbox-${t ?? o.label}`

package/build/esm/components/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Variants, BUTTON_GROUP_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { type ButtonGroupTypes, ButtonGroupUtils } from 'acinguiux-ds-react-base/components/ButtonGroup';\n\nimport * as Styled from './ButtonGroup.styles';\nimport RadioButton from './components/RadioButton/RadioButton';\nimport CheckboxButton from './components/CheckboxButton/CheckboxButton';\n\nconst ButtonGroup = ({\n  className,\n  type = 'single',\n  size = Sizes.Medium,\n  variant = Variants.Filled,\n  name = 'buttonGroup',\n  buttonsFill = false,\n  selectedKey,\n  iconPosition,\n  iconOnly,\n  onChange,\n  items,\n  groupDisabled,\n  ...rest\n}: ButtonGroupTypes.IButtonGroupProps): ReactElement => {\n  const $type = ButtonGroupUtils.convertDeprecateSelectionType(type);\n\n  return (\n    <Styled.ButtonGroup\n      className={classNames(BUTTON_GROUP_CLASS, className)}\n      $variant={variant}\n      $size={size}\n      $type={$type}\n      $groupDisabled={groupDisabled}\n      $buttonsFill={buttonsFill}\n      {...rest}\n    >\n      {items?.map(({ value, icon, tooltip, ...props }) => {\n        const commonProps = {\n          value: value ?? props.label,\n          disabled: groupDisabled || props.disabled,\n          buttonsFill,\n          name,\n          size,\n          icon,\n          iconOnly,\n          iconPosition,\n          tooltip,\n          variant,\n        };\n\n        if ($type === 'single') {\n          return (\n            <RadioButton\n              selectedKey={selectedKey as ButtonGroupTypes.SingleSelectionButtonValue}\n              onChange={onChange as ButtonGroupTypes.SingleSelectionOnChange}\n              key={`group-radio-${value ?? props.label}`}\n              {...commonProps}\n              {...props}\n            />\n          );\n        }\n\n        return (\n          <CheckboxButton\n            selectedKey={selectedKey as ButtonGroupTypes.MultipleSelectionButtonValue}\n            onChange={onChange as ButtonGroupTypes.MultipleSelectionButtonOnChange}\n            key={`group-checkbox-${value ?? props.label}`}\n            {...commonProps}\n            {...props}\n          />\n        );\n      })}\n    </Styled.ButtonGroup>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","className","type","size","Sizes","variant","Variants","name","buttonsFill","selectedKey","iconPosition","iconOnly","onChange","items","groupDisabled","rest","$type","ButtonGroupUtils.convertDeprecateSelectionType","jsx","Styled.ButtonGroup","classNames","BUTTON_GROUP_CLASS","value","icon","tooltip","props","commonProps","RadioButton","CheckboxButton"],"mappings":";;;;;;;;AAUA,MAAMA,IAAc,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAOC,EAAM;AAAA,EACb,SAAAC,IAAUC,EAAS;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAwD;AACtD,QAAMC,IAAQC,EAA+Cf,CAAI;AAEjE,SACE,gBAAAgB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAoBpB,CAAS;AAAA,MACnD,UAAUI;AAAA,MACV,OAAOF;AAAA,MACP,OAAAa;AAAA,MACA,gBAAgBF;AAAA,MAChB,cAAcN;AAAA,MACb,GAAGO;AAAA,MAEH,UAAAF,KAAA,gBAAAA,EAAO,IAAI,CAAC,EAAE,OAAAS,GAAO,MAAAC,GAAM,SAAAC,GAAS,GAAGC,QAAY;AAClD,cAAMC,IAAc;AAAA,UAClB,OAAOJ,KAASG,EAAM;AAAA,UACtB,UAAUX,KAAiBW,EAAM;AAAA,UACjC,aAAAjB;AAAA,UACA,MAAAD;AAAA,UACA,MAAAJ;AAAA,UACA,MAAAoB;AAAA,UACA,UAAAZ;AAAA,UACA,cAAAD;AAAA,UACA,SAAAc;AAAA,UACA,SAAAnB;AAAA,QAAA;AAGF,eAAIW,MAAU,WAEV,gBAAAE;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,aAAAlB;AAAA,YACA,UAAAG;AAAA,YAEC,GAAGc;AAAA,YACH,GAAGD;AAAA,UAAA;AAAA,UAFC,eAAeH,KAASG,EAAM,KAAK;AAAA,QAAA,IAQ5C,gBAAAP;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,aAAAnB;AAAA,YACA,UAAAG;AAAA,YAEC,GAAGc;AAAA,YACH,GAAGD;AAAA,UAAA;AAAA,UAFC,kBAAkBH,KAASG,EAAM,KAAK;AAAA,QAAA;AAAA,MAKjD;AAAA,IAAC;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Variants, BUTTON_GROUP_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { type ButtonGroupTypes, ButtonGroupUtils } from 'acinguiux-ds-react-base/components/ButtonGroup';\n\nimport * as Styled from './ButtonGroup.styles';\nimport RadioButton from './components/RadioButton/RadioButton';\nimport CheckboxButton from './components/CheckboxButton/CheckboxButton';\n\nconst ButtonGroup = ({\n  className,\n  type = 'single',\n  size = Sizes.Medium,\n  variant = Variants.Filled,\n  name = 'buttonGroup',\n  buttonsFill = false,\n  selectedKey,\n  iconPosition,\n  iconOnly,\n  onChange,\n  items,\n  groupDisabled,\n  ...rest\n}: ButtonGroupTypes.IButtonGroupProps): ReactElement => {\n  const $type = ButtonGroupUtils.convertDeprecateSelectionType(type);\n\n  return (\n    <Styled.ButtonGroup\n      className={classNames(BUTTON_GROUP_CLASS, className)}\n      $variant={variant}\n      $size={size}\n      $type={$type}\n      $groupDisabled={groupDisabled}\n      $buttonsFill={buttonsFill}\n      {...rest}\n    >\n      {items?.map(({ value, icon, tooltip, ...props }) => {\n        const commonProps = {\n          value: value ?? props.label,\n          disabled: groupDisabled || props.disabled,\n          buttonsFill,\n          name,\n          size,\n          icon,\n          iconOnly,\n          iconPosition,\n          tooltip,\n          variant,\n        };\n\n        if ($type === 'single') {\n          return (\n            <RadioButton\n              selectedKey={selectedKey as ButtonGroupTypes.SingleSelectionButtonValue}\n              onChange={onChange as ButtonGroupTypes.SingleSelectionOnChange}\n              key={`group-radio-${value ?? props.label}`}\n              {...commonProps}\n              {...props}\n            />\n          );\n        }\n\n        return (\n          <CheckboxButton\n            selectedKey={selectedKey as ButtonGroupTypes.MultipleSelectionButtonValue}\n            onChange={onChange as ButtonGroupTypes.MultipleSelectionButtonOnChange}\n            key={`group-checkbox-${value ?? props.label}`}\n            {...commonProps}\n            {...props}\n          />\n        );\n      })}\n    </Styled.ButtonGroup>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","className","type","size","Sizes","variant","Variants","name","buttonsFill","selectedKey","iconPosition","iconOnly","onChange","items","groupDisabled","rest","$type","ButtonGroupUtils.convertDeprecateSelectionType","jsx","Styled.ButtonGroup","classNames","BUTTON_GROUP_CLASS","value","icon","tooltip","props","commonProps","RadioButton","CheckboxButton"],"mappings":";;;;;;;;AAUA,MAAMA,IAAc,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAOC,EAAM;AAAA,EACb,SAAAC,IAAUC,EAAS;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAwD;AACtD,QAAMC,IAAQC,EAA+Cf,CAAI;AAEjE,SACE,gBAAAgB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAoBpB,CAAS;AAAA,MACnD,UAAUI;AAAA,MACV,OAAOF;AAAA,MACP,OAAAa;AAAA,MACA,gBAAgBF;AAAA,MAChB,cAAcN;AAAA,MACb,GAAGO;AAAA,MAEH,UAAAF,GAAO,IAAI,CAAC,EAAE,OAAAS,GAAO,MAAAC,GAAM,SAAAC,GAAS,GAAGC,QAAY;AAClD,cAAMC,IAAc;AAAA,UAClB,OAAOJ,KAASG,EAAM;AAAA,UACtB,UAAUX,KAAiBW,EAAM;AAAA,UACjC,aAAAjB;AAAA,UACA,MAAAD;AAAA,UACA,MAAAJ;AAAA,UACA,MAAAoB;AAAA,UACA,UAAAZ;AAAA,UACA,cAAAD;AAAA,UACA,SAAAc;AAAA,UACA,SAAAnB;AAAA,QAAA;AAGF,eAAIW,MAAU,WAEV,gBAAAE;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,aAAAlB;AAAA,YACA,UAAAG;AAAA,YAEC,GAAGc;AAAA,YACH,GAAGD;AAAA,UAAA;AAAA,UAFC,eAAeH,KAASG,EAAM,KAAK;AAAA,QAAA,IAQ5C,gBAAAP;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,aAAAnB;AAAA,YACA,UAAAG;AAAA,YAEC,GAAGc;AAAA,YACH,GAAGD;AAAA,UAAA;AAAA,UAFC,kBAAkBH,KAASG,EAAM,KAAK;AAAA,QAAA;AAAA,MAKjD,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/build/esm/components/ButtonGroup/components/CheckboxButton/CheckboxButton.js

@@ -1,75 +1,75 @@
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import { forwardRef as z, useId as D, useRef as F, useImperativeHandle as G } from "react";
-import { Positions as L, Sizes as O } from "../../../../react-base/src/consts/index.js";
-import { ButtonGroupLabel as P, ButtonGroupCheckbox as S } from "../../ButtonGroup.styles.js";
-import V from "../../../Tooltip/Tooltip.js";
-const q = z(
+import { jsxs as v, jsx as l } from "react/jsx-runtime";
+import { forwardRef as B, useId as I, useRef as R, useImperativeHandle as j } from "react";
+import { Positions as z, Sizes as D } from "../../../../react-base/src/consts/index.js";
+import { ButtonGroupLabel as F, ButtonGroupCheckbox as G } from "../../ButtonGroup.styles.js";
+import L from "../../../Tooltip/Tooltip.js";
+const H = B(
   ({
-    size: $ = `${O.Medium}`,
-    selectedKey: r,
-    disabled: u = !1,
-    onChange: t,
-    value: i,
-    label: b,
-    icon: a,
-    iconPosition: k = `${L.Left}`,
-    iconOnly: c = !1,
-    buttonsFill: l = !1,
-    tooltip: f,
-    variant: x,
-    ...h
-  }, w) => {
-    const m = D(), n = F(null);
-    G(w, () => n.current);
-    const A = (o) => {
-      ["Space", "Enter"].includes(o.code) && (n != null && n.current) && n.current.click();
-    }, d = (o) => {
-      if (r && r.length > 0 && r.includes(o.target.value)) {
-        const B = Array.isArray(r) ? r.filter((I) => I !== o.target.value) : [];
-        t == null || t(B, o);
+    size: p = `${D.Medium}`,
+    selectedKey: o,
+    disabled: e = !1,
+    onChange: i,
+    value: n,
+    label: m,
+    icon: u,
+    iconPosition: h = `${z.Left}`,
+    iconOnly: a = !1,
+    buttonsFill: $ = !1,
+    tooltip: c,
+    variant: b,
+    ...d
+  }, k) => {
+    const s = I(), r = R(null);
+    j(k, () => r.current);
+    const x = (t) => {
+      ["Space", "Enter"].includes(t.code) && r?.current && r.current.click();
+    }, g = (t) => {
+      if (o && o.length > 0 && o.includes(t.target.value)) {
+        const w = Array.isArray(o) ? o.filter((A) => A !== t.target.value) : [];
+        i?.(w, t);
         return;
       }
-      const v = [...Array.isArray(r) ? [...r] : [], o.target.value];
-      t == null || t(v, o);
-    }, s = /* @__PURE__ */ j(
-      P,
+      const C = [...Array.isArray(o) ? [...o] : [], t.target.value];
+      i?.(C, t);
+    }, f = /* @__PURE__ */ v(
+      F,
       {
-        $size: $,
-        htmlFor: `button-group-item-${m}`,
-        onKeyDown: A,
-        checked: i ? r == null ? void 0 : r.includes(i) : !1,
-        disabled: u,
-        "aria-label": `${i} button`,
-        tabIndex: u ? void 0 : 0,
-        $icon: a,
-        $iconPosition: k,
-        $iconOnly: c,
-        $variant: x,
+        $size: p,
+        htmlFor: `button-group-item-${s}`,
+        onKeyDown: x,
+        checked: n ? o?.includes(n) : !1,
+        disabled: e,
+        "aria-label": `${n} button`,
+        tabIndex: e ? void 0 : 0,
+        $icon: u,
+        $iconPosition: h,
+        $iconOnly: a,
+        $variant: b,
         $type: "multiple",
-        $buttonsFill: l,
+        $buttonsFill: $,
         children: [
-          a,
-          !c && b,
-          /* @__PURE__ */ p(
-            S,
+          u,
+          !a && m,
+          /* @__PURE__ */ l(
+            G,
             {
               type: "checkbox",
-              id: `button-group-item-${m}`,
-              value: i ?? "",
-              checked: i ? r == null ? void 0 : r.includes(i) : !1,
-              disabled: u,
-              onChange: d,
-              ref: n,
-              ...h
+              id: `button-group-item-${s}`,
+              value: n ?? "",
+              checked: n ? o?.includes(n) : !1,
+              disabled: e,
+              onChange: g,
+              ref: r,
+              ...d
             }
           )
         ]
       }
     );
-    return f ? /* @__PURE__ */ p(V, { overlay: f, trigger: s }) : s;
+    return c ? /* @__PURE__ */ l(L, { overlay: c, trigger: f }) : f;
   }
 );
 export {
-  q as default
+  H as default
 };
 //# sourceMappingURL=CheckboxButton.js.map

package/build/esm/components/ButtonGroup/components/CheckboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../../../../../src/components/ButtonGroup/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useImperativeHandle,\n  forwardRef,\n  useRef,\n  useId,\n} from 'react';\n\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from '../../ButtonGroup.styles';\nimport type { ICheckboxButtonGroupButtonProps } from './CheckboxButton.types';\nimport Tooltip from '../../../Tooltip/Tooltip';\n\ntype InputRefType = HTMLInputElement | null;\n\nconst CheckboxButton: (props: ICheckboxButtonGroupButtonProps) => ReactNode = forwardRef<\n  HTMLInputElement,\n  ICheckboxButtonGroupButtonProps\n>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      selectedKey,\n      disabled = false,\n      onChange,\n      value,\n      label,\n      icon,\n      iconPosition = `${Positions.Left}`,\n      iconOnly = false,\n      buttonsFill = false,\n      tooltip,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const inputRef = useRef<InputRefType>(null);\n\n    useImperativeHandle<InputRefType, InputRefType>(ref, () => inputRef.current);\n\n    const handleOnKeyDown: KeyboardEventHandler = (e) => {\n      if (['Space', 'Enter'].includes(e.code) && inputRef?.current) {\n        inputRef.current.click();\n      }\n    };\n\n    const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      if (selectedKey && selectedKey.length > 0 && selectedKey.includes(e.target.value)) {\n        const newCheckedCheckboxes: string[] = Array.isArray(selectedKey)\n          ? selectedKey.filter((checkbox) => checkbox !== e.target.value)\n          : [];\n        onChange?.(newCheckedCheckboxes, e);\n\n        return;\n      }\n\n      const newValue = Array.isArray(selectedKey) ? [...selectedKey] : [];\n\n      const updatedCheckedCheckboxes = [...newValue, e.target.value];\n      onChange?.(updatedCheckedCheckboxes, e);\n    };\n\n    const checkboxComponent = (\n      <Styled.ButtonGroupLabel\n        $size={size}\n        htmlFor={`button-group-item-${id}`}\n        onKeyDown={handleOnKeyDown}\n        checked={value ? selectedKey?.includes(value) : false}\n        disabled={disabled}\n        aria-label={`${value} button`}\n        tabIndex={disabled ? undefined : 0}\n        $icon={icon}\n        $iconPosition={iconPosition}\n        $iconOnly={iconOnly}\n        $variant={variant}\n        $type=\"multiple\"\n        $buttonsFill={buttonsFill}\n      >\n        {icon}\n        {!iconOnly && label}\n        <Styled.ButtonGroupCheckbox\n          type=\"checkbox\"\n          id={`button-group-item-${id}`}\n          value={value ?? ''}\n          checked={value ? selectedKey?.includes(value) : false}\n          disabled={disabled}\n          onChange={handleOnChange}\n          ref={inputRef}\n          {...rest}\n        />\n      </Styled.ButtonGroupLabel>\n    );\n\n    return tooltip ? <Tooltip overlay={tooltip} trigger={checkboxComponent} /> : checkboxComponent;\n  },\n);\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","size","Sizes","selectedKey","disabled","onChange","value","label","icon","iconPosition","Positions","iconOnly","buttonsFill","tooltip","variant","rest","ref","id","useId","inputRef","useRef","useImperativeHandle","handleOnKeyDown","e","handleOnChange","newCheckedCheckboxes","checkbox","updatedCheckedCheckboxes","checkboxComponent","jsxs","Styled.ButtonGroupLabel","jsx","Styled.ButtonGroupCheckbox","Tooltip"],"mappings":";;;;;AAkBA,MAAMA,IAAwEC;AAAA,EAI5E,CACE;AAAA,IACE,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe,GAAGC,EAAU,IAAI;AAAA,IAChC,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GACLC,IAAWC,EAAqB,IAAI;AAE1C,IAAAC,EAAgDL,GAAK,MAAMG,EAAS,OAAO;AAE3E,UAAMG,IAAwC,CAACC,MAAM;AACnD,MAAI,CAAC,SAAS,OAAO,EAAE,SAASA,EAAE,IAAI,MAAKJ,KAAA,QAAAA,EAAU,YACnDA,EAAS,QAAQ,MAAA;AAAA,IAErB,GAEMK,IAAuD,CAACD,MAAM;AAClE,UAAIpB,KAAeA,EAAY,SAAS,KAAKA,EAAY,SAASoB,EAAE,OAAO,KAAK,GAAG;AACjF,cAAME,IAAiC,MAAM,QAAQtB,CAAW,IAC5DA,EAAY,OAAO,CAACuB,MAAaA,MAAaH,EAAE,OAAO,KAAK,IAC5D,CAAA;AACJ,QAAAlB,KAAA,QAAAA,EAAWoB,GAAsBF;AAEjC;AAAA,MACF;AAIA,YAAMI,IAA2B,CAAC,GAFjB,MAAM,QAAQxB,CAAW,IAAI,CAAC,GAAGA,CAAW,IAAI,CAAA,GAElBoB,EAAE,OAAO,KAAK;AAC7D,MAAAlB,KAAA,QAAAA,EAAWsB,GAA0BJ;AAAA,IACvC,GAEMK,IACJ,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO7B;AAAA,QACP,SAAS,qBAAqBgB,CAAE;AAAA,QAChC,WAAWK;AAAA,QACX,SAAShB,IAAQH,KAAA,gBAAAA,EAAa,SAASG,KAAS;AAAA,QAChD,UAAAF;AAAA,QACA,cAAY,GAAGE,CAAK;AAAA,QACpB,UAAUF,IAAW,SAAY;AAAA,QACjC,OAAOI;AAAA,QACP,eAAeC;AAAA,QACf,WAAWE;AAAA,QACX,UAAUG;AAAA,QACV,OAAM;AAAA,QACN,cAAcF;AAAA,QAEb,UAAA;AAAA,UAAAJ;AAAA,UACA,CAACG,KAAYJ;AAAA,UACd,gBAAAwB;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,qBAAqBf,CAAE;AAAA,cAC3B,OAAOX,KAAS;AAAA,cAChB,SAASA,IAAQH,KAAA,gBAAAA,EAAa,SAASG,KAAS;AAAA,cAChD,UAAAF;AAAA,cACA,UAAUoB;AAAA,cACV,KAAKL;AAAA,cACJ,GAAGJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAOF,IAAU,gBAAAkB,EAACE,GAAA,EAAQ,SAASpB,GAAS,SAASe,GAAmB,IAAKA;AAAA,EAC/E;AACF;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../../../../../src/components/ButtonGroup/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useImperativeHandle,\n  forwardRef,\n  useRef,\n  useId,\n} from 'react';\n\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from '../../ButtonGroup.styles';\nimport type { ICheckboxButtonGroupButtonProps } from './CheckboxButton.types';\nimport Tooltip from '../../../Tooltip/Tooltip';\n\ntype InputRefType = HTMLInputElement | null;\n\nconst CheckboxButton: (props: ICheckboxButtonGroupButtonProps) => ReactNode = forwardRef<\n  HTMLInputElement,\n  ICheckboxButtonGroupButtonProps\n>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      selectedKey,\n      disabled = false,\n      onChange,\n      value,\n      label,\n      icon,\n      iconPosition = `${Positions.Left}`,\n      iconOnly = false,\n      buttonsFill = false,\n      tooltip,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const inputRef = useRef<InputRefType>(null);\n\n    useImperativeHandle<InputRefType, InputRefType>(ref, () => inputRef.current);\n\n    const handleOnKeyDown: KeyboardEventHandler = (e) => {\n      if (['Space', 'Enter'].includes(e.code) && inputRef?.current) {\n        inputRef.current.click();\n      }\n    };\n\n    const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      if (selectedKey && selectedKey.length > 0 && selectedKey.includes(e.target.value)) {\n        const newCheckedCheckboxes: string[] = Array.isArray(selectedKey)\n          ? selectedKey.filter((checkbox) => checkbox !== e.target.value)\n          : [];\n        onChange?.(newCheckedCheckboxes, e);\n\n        return;\n      }\n\n      const newValue = Array.isArray(selectedKey) ? [...selectedKey] : [];\n\n      const updatedCheckedCheckboxes = [...newValue, e.target.value];\n      onChange?.(updatedCheckedCheckboxes, e);\n    };\n\n    const checkboxComponent = (\n      <Styled.ButtonGroupLabel\n        $size={size}\n        htmlFor={`button-group-item-${id}`}\n        onKeyDown={handleOnKeyDown}\n        checked={value ? selectedKey?.includes(value) : false}\n        disabled={disabled}\n        aria-label={`${value} button`}\n        tabIndex={disabled ? undefined : 0}\n        $icon={icon}\n        $iconPosition={iconPosition}\n        $iconOnly={iconOnly}\n        $variant={variant}\n        $type=\"multiple\"\n        $buttonsFill={buttonsFill}\n      >\n        {icon}\n        {!iconOnly && label}\n        <Styled.ButtonGroupCheckbox\n          type=\"checkbox\"\n          id={`button-group-item-${id}`}\n          value={value ?? ''}\n          checked={value ? selectedKey?.includes(value) : false}\n          disabled={disabled}\n          onChange={handleOnChange}\n          ref={inputRef}\n          {...rest}\n        />\n      </Styled.ButtonGroupLabel>\n    );\n\n    return tooltip ? <Tooltip overlay={tooltip} trigger={checkboxComponent} /> : checkboxComponent;\n  },\n);\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","size","Sizes","selectedKey","disabled","onChange","value","label","icon","iconPosition","Positions","iconOnly","buttonsFill","tooltip","variant","rest","ref","id","useId","inputRef","useRef","useImperativeHandle","handleOnKeyDown","e","handleOnChange","newCheckedCheckboxes","checkbox","updatedCheckedCheckboxes","checkboxComponent","jsxs","Styled.ButtonGroupLabel","jsx","Styled.ButtonGroupCheckbox","Tooltip"],"mappings":";;;;;AAkBA,MAAMA,IAAwEC;AAAA,EAI5E,CACE;AAAA,IACE,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe,GAAGC,EAAU,IAAI;AAAA,IAChC,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GACLC,IAAWC,EAAqB,IAAI;AAE1C,IAAAC,EAAgDL,GAAK,MAAMG,EAAS,OAAO;AAE3E,UAAMG,IAAwC,CAACC,MAAM;AACnD,MAAI,CAAC,SAAS,OAAO,EAAE,SAASA,EAAE,IAAI,KAAKJ,GAAU,WACnDA,EAAS,QAAQ,MAAA;AAAA,IAErB,GAEMK,IAAuD,CAACD,MAAM;AAClE,UAAIpB,KAAeA,EAAY,SAAS,KAAKA,EAAY,SAASoB,EAAE,OAAO,KAAK,GAAG;AACjF,cAAME,IAAiC,MAAM,QAAQtB,CAAW,IAC5DA,EAAY,OAAO,CAACuB,MAAaA,MAAaH,EAAE,OAAO,KAAK,IAC5D,CAAA;AACJ,QAAAlB,IAAWoB,GAAsBF,CAAC;AAElC;AAAA,MACF;AAIA,YAAMI,IAA2B,CAAC,GAFjB,MAAM,QAAQxB,CAAW,IAAI,CAAC,GAAGA,CAAW,IAAI,CAAA,GAElBoB,EAAE,OAAO,KAAK;AAC7D,MAAAlB,IAAWsB,GAA0BJ,CAAC;AAAA,IACxC,GAEMK,IACJ,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO7B;AAAA,QACP,SAAS,qBAAqBgB,CAAE;AAAA,QAChC,WAAWK;AAAA,QACX,SAAShB,IAAQH,GAAa,SAASG,CAAK,IAAI;AAAA,QAChD,UAAAF;AAAA,QACA,cAAY,GAAGE,CAAK;AAAA,QACpB,UAAUF,IAAW,SAAY;AAAA,QACjC,OAAOI;AAAA,QACP,eAAeC;AAAA,QACf,WAAWE;AAAA,QACX,UAAUG;AAAA,QACV,OAAM;AAAA,QACN,cAAcF;AAAA,QAEb,UAAA;AAAA,UAAAJ;AAAA,UACA,CAACG,KAAYJ;AAAA,UACd,gBAAAwB;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,qBAAqBf,CAAE;AAAA,cAC3B,OAAOX,KAAS;AAAA,cAChB,SAASA,IAAQH,GAAa,SAASG,CAAK,IAAI;AAAA,cAChD,UAAAF;AAAA,cACA,UAAUoB;AAAA,cACV,KAAKL;AAAA,cACJ,GAAGJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAOF,IAAU,gBAAAkB,EAACE,GAAA,EAAQ,SAASpB,GAAS,SAASe,GAAmB,IAAKA;AAAA,EAC/E;AACF;"}

package/build/esm/components/ButtonGroup/components/RadioButton/RadioButton.js

@@ -1,69 +1,69 @@
-import { jsxs as B, jsx as d } from "react/jsx-runtime";
-import { forwardRef as k, useId as w, useRef as I, useImperativeHandle as O } from "react";
-import { Positions as R, Sizes as j } from "../../../../react-base/src/consts/index.js";
-import { ButtonGroupLabel as v, ButtonGroupRadio as z } from "../../ButtonGroup.styles.js";
-import D from "../../../Tooltip/Tooltip.js";
-const E = k(
+import { jsxs as y, jsx as p } from "react/jsx-runtime";
+import { forwardRef as B, useId as k, useRef as w, useImperativeHandle as C } from "react";
+import { Positions as I, Sizes as O } from "../../../../react-base/src/consts/index.js";
+import { ButtonGroupLabel as j, ButtonGroupRadio as v } from "../../ButtonGroup.styles.js";
+import z from "../../../Tooltip/Tooltip.js";
+const S = B(
   ({
-    size: l = `${j.Medium}`,
-    selectedKey: i,
+    size: f = `${O.Medium}`,
+    selectedKey: r,
     disabled: e = !1,
-    onChange: n,
+    onChange: m,
     value: o,
-    label: p,
-    icon: s,
-    iconPosition: f = `${R.Left}`,
-    iconOnly: u = !1,
+    label: d,
+    icon: i,
+    iconPosition: l = `${I.Left}`,
+    iconOnly: a = !1,
     buttonsFill: $ = !1,
-    tooltip: c,
-    variant: b,
-    ...g
-  }, h) => {
-    const a = w(), t = I(null);
-    O(h, () => t.current);
-    const x = (r) => {
-      ["Space", "Enter"].includes(r.code) && (t != null && t.current) && t.current.click();
-    }, y = (r) => {
-      n == null || n(r.target.value, r);
-    }, m = /* @__PURE__ */ B(
-      v,
+    tooltip: u,
+    variant: g,
+    ...h
+  }, b) => {
+    const s = k(), t = w(null);
+    C(b, () => t.current);
+    const R = (n) => {
+      ["Space", "Enter"].includes(n.code) && t?.current && t.current.click();
+    }, x = (n) => {
+      m?.(n.target.value, n);
+    }, c = /* @__PURE__ */ y(
+      j,
       {
-        $size: l,
-        htmlFor: `button-group-item-${a}`,
-        onKeyDown: x,
-        checked: i === o,
+        $size: f,
+        htmlFor: `button-group-item-${s}`,
+        onKeyDown: R,
+        checked: r === o,
         disabled: e,
         "aria-label": `Option ${o} button`,
         tabIndex: e ? void 0 : 0,
-        $icon: s,
-        $iconOnly: u,
-        $iconPosition: f,
-        $variant: b,
+        $icon: i,
+        $iconOnly: a,
+        $iconPosition: l,
+        $variant: g,
         $type: "single",
         $buttonsFill: $,
         children: [
-          s,
-          !u && p,
-          /* @__PURE__ */ d(
-            z,
+          i,
+          !a && d,
+          /* @__PURE__ */ p(
+            v,
             {
               type: "radio",
-              id: `button-group-item-${a}`,
+              id: `button-group-item-${s}`,
               value: o,
-              checked: i === o,
+              checked: r === o,
               disabled: e,
-              onChange: y,
+              onChange: x,
               ref: t,
-              ...g
+              ...h
             }
           )
         ]
       }
     );
-    return c ? /* @__PURE__ */ d(D, { overlay: c, trigger: m }) : m;
+    return u ? /* @__PURE__ */ p(z, { overlay: u, trigger: c }) : c;
   }
 );
 export {
-  E as default
+  S as default
 };
 //# sourceMappingURL=RadioButton.js.map

package/build/esm/components/ButtonGroup/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../../../../src/components/ButtonGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  ReactNode,\n  useId,\n} from 'react';\n\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from '../../ButtonGroup.styles';\nimport type { IRadioButtonGroupButtonProps } from './RadioButton.types';\nimport Tooltip from '../../../Tooltip/Tooltip';\n\ntype InputRefType = HTMLInputElement | null;\n\nconst RadioButton: (props: IRadioButtonGroupButtonProps) => ReactNode = forwardRef<\n  HTMLInputElement,\n  IRadioButtonGroupButtonProps\n>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      selectedKey,\n      disabled = false,\n      onChange,\n      value,\n      label,\n      icon,\n      iconPosition = `${Positions.Left}`,\n      iconOnly = false,\n      buttonsFill = false,\n      tooltip,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n\n    const inputRef = useRef<InputRefType>(null);\n    useImperativeHandle<InputRefType, InputRefType>(ref, () => inputRef.current);\n\n    const handleOnKeyDown: KeyboardEventHandler = (e) => {\n      if (['Space', 'Enter'].includes(e.code) && inputRef?.current) {\n        inputRef.current.click();\n      }\n    };\n\n    const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      onChange?.(e.target.value, e);\n    };\n\n    const radioButtonComponent = (\n      <Styled.ButtonGroupLabel\n        $size={size}\n        htmlFor={`button-group-item-${id}`}\n        onKeyDown={handleOnKeyDown}\n        checked={selectedKey === value}\n        disabled={disabled}\n        aria-label={`Option ${value} button`}\n        tabIndex={disabled ? undefined : 0}\n        $icon={icon}\n        $iconOnly={iconOnly}\n        $iconPosition={iconPosition}\n        $variant={variant}\n        $type=\"single\"\n        $buttonsFill={buttonsFill}\n      >\n        {icon}\n        {!iconOnly && label}\n        <Styled.ButtonGroupRadio\n          type=\"radio\"\n          id={`button-group-item-${id}`}\n          value={value}\n          checked={selectedKey === value}\n          disabled={disabled}\n          onChange={handleOnChange}\n          ref={inputRef}\n          {...rest}\n        />\n      </Styled.ButtonGroupLabel>\n    );\n\n    return tooltip ? <Tooltip overlay={tooltip} trigger={radioButtonComponent} /> : radioButtonComponent;\n  },\n);\n\nexport default RadioButton;\n"],"names":["RadioButton","forwardRef","size","Sizes","selectedKey","disabled","onChange","value","label","icon","iconPosition","Positions","iconOnly","buttonsFill","tooltip","variant","rest","ref","id","useId","inputRef","useRef","useImperativeHandle","handleOnKeyDown","e","handleOnChange","radioButtonComponent","jsxs","Styled.ButtonGroupLabel","jsx","Styled.ButtonGroupRadio","Tooltip"],"mappings":";;;;;AAkBA,MAAMA,IAAkEC;AAAA,EAItE,CACE;AAAA,IACE,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe,GAAGC,EAAU,IAAI;AAAA,IAChC,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GAELC,IAAWC,EAAqB,IAAI;AAC1C,IAAAC,EAAgDL,GAAK,MAAMG,EAAS,OAAO;AAE3E,UAAMG,IAAwC,CAACC,MAAM;AACnD,MAAI,CAAC,SAAS,OAAO,EAAE,SAASA,EAAE,IAAI,MAAKJ,KAAA,QAAAA,EAAU,YACnDA,EAAS,QAAQ,MAAA;AAAA,IAErB,GAEMK,IAAuD,CAACD,MAAM;AAClE,MAAAlB,KAAA,QAAAA,EAAWkB,EAAE,OAAO,OAAOA;AAAA,IAC7B,GAEME,IACJ,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO1B;AAAA,QACP,SAAS,qBAAqBgB,CAAE;AAAA,QAChC,WAAWK;AAAA,QACX,SAASnB,MAAgBG;AAAA,QACzB,UAAAF;AAAA,QACA,cAAY,UAAUE,CAAK;AAAA,QAC3B,UAAUF,IAAW,SAAY;AAAA,QACjC,OAAOI;AAAA,QACP,WAAWG;AAAA,QACX,eAAeF;AAAA,QACf,UAAUK;AAAA,QACV,OAAM;AAAA,QACN,cAAcF;AAAA,QAEb,UAAA;AAAA,UAAAJ;AAAA,UACA,CAACG,KAAYJ;AAAA,UACd,gBAAAqB;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,qBAAqBZ,CAAE;AAAA,cAC3B,OAAAX;AAAA,cACA,SAASH,MAAgBG;AAAA,cACzB,UAAAF;AAAA,cACA,UAAUoB;AAAA,cACV,KAAKL;AAAA,cACJ,GAAGJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAOF,IAAU,gBAAAe,EAACE,GAAA,EAAQ,SAASjB,GAAS,SAASY,GAAsB,IAAKA;AAAA,EAClF;AACF;"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../../../src/components/ButtonGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  ReactNode,\n  useId,\n} from 'react';\n\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport * as Styled from '../../ButtonGroup.styles';\nimport type { IRadioButtonGroupButtonProps } from './RadioButton.types';\nimport Tooltip from '../../../Tooltip/Tooltip';\n\ntype InputRefType = HTMLInputElement | null;\n\nconst RadioButton: (props: IRadioButtonGroupButtonProps) => ReactNode = forwardRef<\n  HTMLInputElement,\n  IRadioButtonGroupButtonProps\n>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      selectedKey,\n      disabled = false,\n      onChange,\n      value,\n      label,\n      icon,\n      iconPosition = `${Positions.Left}`,\n      iconOnly = false,\n      buttonsFill = false,\n      tooltip,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n\n    const inputRef = useRef<InputRefType>(null);\n    useImperativeHandle<InputRefType, InputRefType>(ref, () => inputRef.current);\n\n    const handleOnKeyDown: KeyboardEventHandler = (e) => {\n      if (['Space', 'Enter'].includes(e.code) && inputRef?.current) {\n        inputRef.current.click();\n      }\n    };\n\n    const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      onChange?.(e.target.value, e);\n    };\n\n    const radioButtonComponent = (\n      <Styled.ButtonGroupLabel\n        $size={size}\n        htmlFor={`button-group-item-${id}`}\n        onKeyDown={handleOnKeyDown}\n        checked={selectedKey === value}\n        disabled={disabled}\n        aria-label={`Option ${value} button`}\n        tabIndex={disabled ? undefined : 0}\n        $icon={icon}\n        $iconOnly={iconOnly}\n        $iconPosition={iconPosition}\n        $variant={variant}\n        $type=\"single\"\n        $buttonsFill={buttonsFill}\n      >\n        {icon}\n        {!iconOnly && label}\n        <Styled.ButtonGroupRadio\n          type=\"radio\"\n          id={`button-group-item-${id}`}\n          value={value}\n          checked={selectedKey === value}\n          disabled={disabled}\n          onChange={handleOnChange}\n          ref={inputRef}\n          {...rest}\n        />\n      </Styled.ButtonGroupLabel>\n    );\n\n    return tooltip ? <Tooltip overlay={tooltip} trigger={radioButtonComponent} /> : radioButtonComponent;\n  },\n);\n\nexport default RadioButton;\n"],"names":["RadioButton","forwardRef","size","Sizes","selectedKey","disabled","onChange","value","label","icon","iconPosition","Positions","iconOnly","buttonsFill","tooltip","variant","rest","ref","id","useId","inputRef","useRef","useImperativeHandle","handleOnKeyDown","e","handleOnChange","radioButtonComponent","jsxs","Styled.ButtonGroupLabel","jsx","Styled.ButtonGroupRadio","Tooltip"],"mappings":";;;;;AAkBA,MAAMA,IAAkEC;AAAA,EAItE,CACE;AAAA,IACE,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe,GAAGC,EAAU,IAAI;AAAA,IAChC,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GAELC,IAAWC,EAAqB,IAAI;AAC1C,IAAAC,EAAgDL,GAAK,MAAMG,EAAS,OAAO;AAE3E,UAAMG,IAAwC,CAACC,MAAM;AACnD,MAAI,CAAC,SAAS,OAAO,EAAE,SAASA,EAAE,IAAI,KAAKJ,GAAU,WACnDA,EAAS,QAAQ,MAAA;AAAA,IAErB,GAEMK,IAAuD,CAACD,MAAM;AAClE,MAAAlB,IAAWkB,EAAE,OAAO,OAAOA,CAAC;AAAA,IAC9B,GAEME,IACJ,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO1B;AAAA,QACP,SAAS,qBAAqBgB,CAAE;AAAA,QAChC,WAAWK;AAAA,QACX,SAASnB,MAAgBG;AAAA,QACzB,UAAAF;AAAA,QACA,cAAY,UAAUE,CAAK;AAAA,QAC3B,UAAUF,IAAW,SAAY;AAAA,QACjC,OAAOI;AAAA,QACP,WAAWG;AAAA,QACX,eAAeF;AAAA,QACf,UAAUK;AAAA,QACV,OAAM;AAAA,QACN,cAAcF;AAAA,QAEb,UAAA;AAAA,UAAAJ;AAAA,UACA,CAACG,KAAYJ;AAAA,UACd,gBAAAqB;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,qBAAqBZ,CAAE;AAAA,cAC3B,OAAAX;AAAA,cACA,SAASH,MAAgBG;AAAA,cACzB,UAAAF;AAAA,cACA,UAAUoB;AAAA,cACV,KAAKL;AAAA,cACJ,GAAGJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAOF,IAAU,gBAAAe,EAACE,GAAA,EAAQ,SAASjB,GAAS,SAASY,GAAsB,IAAKA;AAAA,EAClF;AACF;"}

package/build/esm/components/Card/Card.styles.d.ts

@@ -2,13 +2,14 @@ import { PickTransient } from '../../react-base/src/types';
 import type { ICardProps, IInsetCardProps } from './Card.types';
 type CardStylePropKeys = 'outlined' | 'direction' | 'isClickable' | 'size';
 declare const Card: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<ICardProps, CardStylePropKeys>>>> & string;
+declare const InsetCardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const InsetCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size" | "$direction" | "$outlined" | "$isClickable"> & Required<PickTransient<ICardProps, CardStylePropKeys>>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, PickTransient<IInsetCardProps, "interactive" | "backgroundImage">>> & string;
+}, PickTransient<IInsetCardProps, "interactive" | "backgroundImage" | "backgroundPosition">>> & string;
 type CardBodyStylePropKeys = 'padding' | 'bgColor' | 'direction' | 'borders';
 declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<ICardProps, "size">> & PickTransient<ICardProps, CardBodyStylePropKeys> & {
     $withHeader?: boolean;
     $withFooter?: boolean;
 }>> & string;
-export { Card, InsetCard, CardBody };
+export { Card, InsetCard, InsetCardBody, CardBody };
 //# sourceMappingURL=Card.styles.d.ts.map

package/build/esm/components/Card/Card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,KAAK,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE3E,QAAA,MAAM,IAAI,2RAoCT,CAAC;AAEF,QAAA,MAAM,SAAS;;+EAiCd,CAAC;AAEF,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7E,QAAA,MAAM,QAAQ;kBAGM,OAAO;kBACP,OAAO;YAqD1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,KAAK,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAE3E,QAAA,MAAM,IAAI,2RAoCT,CAAC;AAEF,QAAA,MAAM,aAAa,6NAQlB,CAAC;AAEF,QAAA,MAAM,SAAS;;sGAiCd,CAAC;AAEF,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7E,QAAA,MAAM,QAAQ;kBAGM,OAAO;kBACP,OAAO;YAmDzB,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}

package/build/esm/components/Card/Card.styles.js

@@ -1,16 +1,16 @@
-import { css as d, styled as l } from "styled-components";
-import { Directions as n, Sizes as c } from "../../react-base/src/consts/index.js";
+import { styled as l, css as d } from "styled-components";
+import { Directions as s, Sizes as g } from "../../react-base/src/consts/index.js";
 import { consts as o } from "../../react-base/src/components/Card/Card.consts.js";
 import { Variables as p } from "../../react-base/src/theme/types/layer.js";
-import { getFocusStyles as g } from "../../react-base/src/utils/stylesUtils.js";
-import { getParagraphTypographySize as f } from "../../react-base/src/utils/sizesUtils.js";
-import { CardBar as x } from "./components/CardBar/CardBar.styles.js";
-const m = l.div`
-  ${({ $size: r, $outlined: i, $direction: e, $isClickable: s, theme: a }) => {
-  const t = a.layer({ foundation: "surface" });
-  return d`
+import { getFocusStyles as f } from "../../react-base/src/utils/stylesUtils.js";
+import { getParagraphTypographySize as x } from "../../react-base/src/utils/sizesUtils.js";
+import { CardBar as $ } from "./components/CardBar/CardBar.styles.js";
+const m = l.div(
+  ({ $size: r, $outlined: i, $direction: e, $isClickable: n, theme: a }) => {
+    const t = a.layer({ foundation: "surface" });
+    return d`
       display: flex;
-      flex-direction: ${e === n.Vertical ? "column" : "row"};
+      flex-direction: ${e === s.Vertical ? "column" : "row"};
       width: 100%;
       background-color: ${t[p.BackgroundFoundation]};
       ${i && d`
@@ -19,7 +19,7 @@ const m = l.div`
       transition: filter 0.3s ease;
       border-radius: ${o[r].borderRadius}px;
 
-      ${s && d`
+      ${n && d`
         text-decoration: none;
         color: inherit;
         cursor: pointer;
@@ -34,87 +34,91 @@ const m = l.div`
       `}
 
       &:focus-visible {
-        ${g(a)};
+        ${f(a)};
       }
     `;
-}};
-`, S = l(m)`
-  ${({ $size: r = `${c.Medium}`, $backgroundImage: i, $interactive: e }) => d`
+  }
+), b = l.div`
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s;
+`, S = l(m)(
+  ({ $size: r = `${g.Medium}`, $backgroundImage: i, $interactive: e, $backgroundPosition: n = "center", theme: a }) => d`
     position: relative;
     align-items: flex-end;
     height: 100%;
     padding: ${o[r].padding}px;
+    border-radius: ${o[r].borderRadius}px;
+    background-color: ${a.layer()[p.BackgroundFoundation]};
+    overflow: hidden;
 
-    & > ${x} {
+    & > ${$} {
       padding: ${o[r].innerCardPadding}px;
       position: relative;
     }
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: ${o[r].borderRadius}px;
-      background-image: url(${i});
-      background-size: cover;
-      transition: all 0.5s;
+    & > ${b} {
+      ${i && d`
+        background-image: url(${i});
+        background-position: ${n};
+        background-size: cover;
+      `}
     }
 
     ${e && d`
-      &:hover::before {
+      &:hover > ${b} {
         transform: scale(1.05);
       }
     `}
-  `}
-`, B = l.div`
-  ${({ $size: r, $padding: i, $bgColor: e, $withHeader: s, $withFooter: a, $direction: t, theme: u }) => {
-  const b = u.layer({ foundation: e ? "section" : "surface" });
+  `
+), C = l.div(({ $size: r, $padding: i, $bgColor: e, $withHeader: n, $withFooter: a, $direction: t, theme: u }) => {
+  const c = u.layer({ foundation: e ? "section" : "surface" });
   return d`
-      ${u.typography("paragraph", f(r))};
-      display: grid;
-      flex-grow: 1;
-      color: ${b[p.TextOnFoundationStrong]};
-      background-color: ${b[p.BackgroundFoundation]};
+    ${u.typography("paragraph", x(r))};
+    display: grid;
+    flex-grow: 1;
+    color: ${c[p.TextOnFoundationStrong]};
+    background-color: ${c[p.BackgroundFoundation]};
 
-      ${i && d`
-        padding: ${o[r].padding}px;
-      `}
+    ${i && d`
+      padding: ${o[r].padding}px;
+    `}
 
-      ${t === n.Horizontal && !s && d`
-        border-top-left-radius: ${o[r].borderRadius}px;
-        border-bottom-left-radius: ${o[r].borderRadius}px;
-      `}
+    ${t === s.Horizontal && !n && d`
+      border-top-left-radius: ${o[r].borderRadius}px;
+      border-bottom-left-radius: ${o[r].borderRadius}px;
+    `}
       
-      ${t === n.Horizontal && !a && d`
-        border-top-right-radius: ${o[r].borderRadius}px;
-        border-bottom-right-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Horizontal && !a && d`
+      border-top-right-radius: ${o[r].borderRadius}px;
+      border-bottom-right-radius: ${o[r].borderRadius}px;
+    `}
 
-      ${t === n.Vertical && !s && d`
-        border-top-left-radius: ${o[r].borderRadius}px;
-        border-top-right-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Vertical && !n && d`
+      border-top-left-radius: ${o[r].borderRadius}px;
+      border-top-right-radius: ${o[r].borderRadius}px;
+    `}
 
-      ${t === n.Vertical && !a && d`
-        border-bottom-right-radius: ${o[r].borderRadius}px;
-        border-bottom-left-radius: ${o[r].borderRadius}px;
-      `}
+      ${t === s.Vertical && !a && d`
+      border-bottom-right-radius: ${o[r].borderRadius}px;
+      border-bottom-left-radius: ${o[r].borderRadius}px;
+    `}
 
       > img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    `;
-}};
-`;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  `;
+});
 export {
   m as Card,
-  B as CardBody,
-  S as InsetCard
+  C as CardBody,
+  S as InsetCard,
+  b as InsetCardBody
 };
 //# sourceMappingURL=Card.styles.js.map