@televet/kibble-ui 4.0.1 → 5.0.0-beta.hotfix.1

package/dist/chunks/avatarGroup.component-B-ZOhj7i.js

@@ -0,0 +1,75 @@
+import { j as e } from "./jsx-runtime-C5mzlN2N.js";
+import { useMemo as i, useState as l, createElement as k } from "react";
+import { a as M, A as p } from "./avatar.component-C-365mx3.js";
+import { M as N } from "./menu.component-DwTen8Uv.js";
+import { W as R } from "./text.component-CdTyTFds.js";
+import { B as G } from "./button.component-BO6oee_V.js";
+import { T as O } from "./tooltip.component-C_NS-AoH.js";
+import { B as W } from "./index-9BerxEcw.js";
+const X = ({
+  avatars: r,
+  max: d = 3,
+  onAdd: u,
+  onRemove: c,
+  showAddButton: x = !0,
+  showRemoveAvatarButton: f = !1,
+  size: t = "md",
+  variant: h = "default",
+  menuProps: n,
+  addButtonTooltipText: s,
+  ["data-testid"]: a = "kibble-avatar-group",
+  ...b
+}) => {
+  const g = i(() => r.map((o) => o.name).join(", "), [r]), j = t === "xs" || t === "sm" ? -1 : -2, [v, A] = l(!1), [B, C] = l(!1), m = i(() => ({
+    size: t === "xl" ? "lg" : t,
+    variant: "ghostNeutral",
+    borderRadius: "full",
+    borderWidth: "1px",
+    iconName: "plus",
+    borderColor: "border"
+  }), [t]);
+  return /* @__PURE__ */ e.jsxs(
+    M,
+    {
+      className: "AvatarGroup",
+      "data-testid": a,
+      gap: 0,
+      spaceX: j,
+      stacking: "first-on-top",
+      size: t,
+      ...b,
+      children: [
+        r.length > d ? /* @__PURE__ */ e.jsx(p, { size: t, variant: "contrast", showRemoveButton: !1, tooltipProps: { label: g }, children: /* @__PURE__ */ e.jsx(R, { size: t === "xs" || t === "sm" ? "xs" : "sm", variant: "onContrast", children: r.length.toString() }) }) : r.map((o) => /* @__PURE__ */ k(
+          p,
+          {
+            ...o,
+            key: o.name,
+            size: t,
+            variant: h || o.variant,
+            showRemoveButton: f,
+            onRemove: c
+          }
+        )),
+        x && /* @__PURE__ */ e.jsx(O, { disabled: !s?.length || v, label: s || "", children: n ? /* @__PURE__ */ e.jsx(W, { children: /* @__PURE__ */ e.jsx(
+          N,
+          {
+            open: B,
+            "data-testid": `${a}-add-button`,
+            ...n,
+            onOpenChange: ({ open: o }) => {
+              A(o), C(o);
+            },
+            buttonProps: {
+              ...m,
+              hideCaret: !0
+            }
+          }
+        ) }) : /* @__PURE__ */ e.jsx(G, { ...m, onClick: u }) })
+      ]
+    }
+  );
+};
+export {
+  X as A
+};
+//# sourceMappingURL=avatarGroup.component-B-ZOhj7i.js.map

package/dist/chunks/avatarGroup.component-B-ZOhj7i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarGroup.component-B-ZOhj7i.js","sources":["../../src/components/AvatarGroup/avatarGroup.component.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { AvatarGroup as CAvatarGroup, AvatarGroupProps as CAvatarGroupProps } from '@chakra-ui/react/avatar';\nimport { Avatar, AvatarProps } from 'components/Avatar/avatar.component';\nimport { AvatarSize, AvatarVariant } from 'components/Avatar/avatar.types';\nimport { Menu, MenuProps } from 'components/Menu';\nimport { Text } from 'components/Text/text.component';\nimport { Button, ButtonProps } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\nimport { Box } from '@chakra-ui/react/box';\n\nexport interface AvatarGroupProps extends CAvatarGroupProps {\n  /** Tooltip text for when the add button is hovered. */\n  addButtonTooltipText?: string;\n  /** Array of avatars to display in the group. */\n  avatars: AvatarProps[];\n  /** Maximum number of avatars to display before it shows a counter instead. */\n  max?: number;\n  /** Callback function when the add button is clicked. */\n  onAdd?: () => void;\n  /** Callback function when the remove button is clicked. */\n  onRemove?: (value?: string) => void;\n  /** If true, an add button will be displayed at the end of the avatar group.\n   * @default true\n   */\n  showAddButton?: boolean;\n  /** If true, a remove button will be displayed when hovering over an avatar.\n   * @default false\n   */\n  showRemoveAvatarButton?: boolean;\n  /** Size of the avatars in the group.\n   * @default md\n   */\n  size?: AvatarSize;\n  /** Variant of the avatars in the group.\n   * @default default\n   */\n  variant?: AvatarVariant;\n  /** Props to customize the add button Menu. See `Menu` for more information. */\n  menuProps?: Omit<MenuProps, 'buttonProps'>;\n  /** Data test id for the avatar group.\n   * @default kibble-avatar-group\n   */\n  'data-testid'?: string;\n}\n\nexport const AvatarGroup = ({\n  avatars,\n  max = 3,\n  onAdd,\n  onRemove,\n  showAddButton = true,\n  showRemoveAvatarButton = false,\n  size = 'md',\n  variant = 'default',\n  menuProps,\n  addButtonTooltipText,\n  ['data-testid']: dataTestId = 'kibble-avatar-group',\n  ...rest\n}: AvatarGroupProps): React.JSX.Element => {\n  const mergedNames = useMemo(() => avatars.map((avatar) => avatar.name).join(', '), [avatars]);\n  const spacing = size === 'xs' || size === 'sm' ? -1 : -2;\n  const [hideTooltip, setHideTooltip] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const buttonProps: ButtonProps = useMemo(() => {\n    return {\n      size: size === 'xl' ? 'lg' : size,\n      variant: 'ghostNeutral',\n      borderRadius: 'full',\n      borderWidth: '1px',\n      iconName: 'plus',\n      borderColor: 'border',\n    };\n  }, [size]);\n\n  return (\n    <CAvatarGroup\n      className=\"AvatarGroup\"\n      data-testid={dataTestId}\n      gap={0}\n      spaceX={spacing}\n      stacking=\"first-on-top\"\n      size={size}\n      {...rest}\n    >\n      {avatars.length > max ? (\n        <Avatar size={size} variant=\"contrast\" showRemoveButton={false} tooltipProps={{ label: mergedNames }}>\n          <Text size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'} variant=\"onContrast\">\n            {avatars.length.toString()}\n          </Text>\n        </Avatar>\n      ) : (\n        avatars.map((avatar) => (\n          <Avatar\n            {...avatar}\n            key={avatar.name}\n            size={size}\n            variant={variant || avatar.variant}\n            showRemoveButton={showRemoveAvatarButton}\n            onRemove={onRemove}\n          />\n        ))\n      )}\n      {showAddButton && (\n        <Tooltip disabled={!addButtonTooltipText?.length || hideTooltip} label={addButtonTooltipText || ''}>\n          {menuProps ? (\n            <Box>\n              <Menu\n                open={menuOpen}\n                data-testid={`${dataTestId}-add-button`}\n                {...menuProps}\n                onOpenChange={({ open }) => {\n                  setHideTooltip(open);\n                  setMenuOpen(open);\n                }}\n                buttonProps={{\n                  ...buttonProps,\n                  hideCaret: true,\n                }}\n              />\n            </Box>\n          ) : (\n            <Button {...buttonProps} onClick={onAdd} />\n          )}\n        </Tooltip>\n      )}\n    </CAvatarGroup>\n  );\n};\n"],"names":["AvatarGroup","avatars","max","onAdd","onRemove","showAddButton","showRemoveAvatarButton","size","variant","menuProps","addButtonTooltipText","dataTestId","rest","mergedNames","useMemo","avatar","spacing","hideTooltip","setHideTooltip","useState","menuOpen","setMenuOpen","buttonProps","jsxs","CAvatarGroup","jsx","Avatar","Text","createElement","Tooltip","Box","Menu","open","Button"],"mappings":";;;;;;;;AA6CO,MAAMA,IAAc,CAAC;AAAA,EAC1B,SAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,wBAAAC,IAAyB;AAAA,EACzB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,CAAC,gBAAgBC,IAAa;AAAA,EAC9B,GAAGC;AACL,MAA2C;AACzC,QAAMC,IAAcC,EAAQ,MAAMb,EAAQ,IAAI,CAACc,MAAWA,EAAO,IAAI,EAAE,KAAK,IAAI,GAAG,CAACd,CAAO,CAAC,GACtFe,IAAUT,MAAS,QAAQA,MAAS,OAAO,KAAK,IAChD,CAACU,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GAExCG,IAA2BR,EAAQ,OAChC;AAAA,IACL,MAAMP,MAAS,OAAO,OAAOA;AAAA,IAC7B,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,UAAU;AAAA,IACV,aAAa;AAAA,EACf,IACC,CAACA,CAAI,CAAC;AAGP,SAAAgB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,KAAK;AAAA,MACL,QAAQK;AAAA,MACR,UAAS;AAAA,MACT,MAAAT;AAAA,MACC,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAX,EAAQ,SAASC,IACfuB,gBAAAA,EAAAA,IAAAC,GAAA,EAAO,MAAAnB,GAAY,SAAQ,YAAW,kBAAkB,IAAO,cAAc,EAAE,OAAOM,EAAY,GACjG,gCAACc,GAAK,EAAA,MAAMpB,MAAS,QAAQA,MAAS,OAAO,OAAO,MAAM,SAAQ,cAC/D,UAAAN,EAAQ,OAAO,YAClB,EACF,CAAA,IAEAA,EAAQ,IAAI,CAACc,MACX,gBAAAa;AAAA,UAACF;AAAA,UAAA;AAAA,YACE,GAAGX;AAAA,YACJ,KAAKA,EAAO;AAAA,YACZ,MAAAR;AAAA,YACA,SAASC,KAAWO,EAAO;AAAA,YAC3B,kBAAkBT;AAAA,YAClB,UAAAF;AAAA,UAAA;AAAA,QAAA,CAEH;AAAA,QAEFC,KACCoB,gBAAAA,EAAA,IAACI,GAAQ,EAAA,UAAU,CAACnB,GAAsB,UAAUO,GAAa,OAAOP,KAAwB,IAC7F,UAAAD,0BACEqB,GACC,EAAA,UAAAL,gBAAAA,EAAA;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,MAAMX;AAAA,YACN,eAAa,GAAGT,CAAU;AAAA,YACzB,GAAGF;AAAA,YACJ,cAAc,CAAC,EAAE,MAAAuB,QAAW;AAC1B,cAAAd,EAAec,CAAI,GACnBX,EAAYW,CAAI;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,cACX,GAAGV;AAAA,cACH,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QAAA,GAEJ,IAECG,gBAAAA,EAAA,IAAAQ,GAAA,EAAQ,GAAGX,GAAa,SAASnB,GAAO,EAE7C,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/chunks/avatarGroup.component-CTBfGiSm.js

@@ -0,0 +1,2 @@
+"use strict";const o=require("./jsx-runtime-BjDatQAs.js"),r=require("react"),s=require("./avatar.component-B1HGlwVW.js"),f=require("./menu.component-D4-4xRDj.js"),A=require("./text.component-CeioUl0G.js"),C=require("./button.component-DjdgBXDC.js"),_=require("./tooltip.component-BkFDi5yK.js"),k=require("./index-BQRnVsAg.js"),G=({avatars:n,max:c=3,onAdd:l,onRemove:m,showAddButton:x=!0,showRemoveAvatarButton:d=!1,size:t="md",variant:j="default",menuProps:a,addButtonTooltipText:u,["data-testid"]:i="kibble-avatar-group",...h})=>{const b=r.useMemo(()=>n.map(e=>e.name).join(", "),[n]),g=t==="xs"||t==="sm"?-1:-2,[R,v]=r.useState(!1),[q,E]=r.useState(!1),p=r.useMemo(()=>({size:t==="xl"?"lg":t,variant:"ghostNeutral",borderRadius:"full",borderWidth:"1px",iconName:"plus",borderColor:"border"}),[t]);return o.jsxRuntimeExports.jsxs(s.AvatarGroup,{className:"AvatarGroup","data-testid":i,gap:0,spaceX:g,stacking:"first-on-top",size:t,...h,children:[n.length>c?o.jsxRuntimeExports.jsx(s.Avatar,{size:t,variant:"contrast",showRemoveButton:!1,tooltipProps:{label:b},children:o.jsxRuntimeExports.jsx(A.WrappedText,{size:t==="xs"||t==="sm"?"xs":"sm",variant:"onContrast",children:n.length.toString()})}):n.map(e=>r.createElement(s.Avatar,{...e,key:e.name,size:t,variant:j||e.variant,showRemoveButton:d,onRemove:m})),x&&o.jsxRuntimeExports.jsx(_.Tooltip,{disabled:!u?.length||R,label:u||"",children:a?o.jsxRuntimeExports.jsx(k.Box,{children:o.jsxRuntimeExports.jsx(f.Menu,{open:q,"data-testid":`${i}-add-button`,...a,onOpenChange:({open:e})=>{v(e),E(e)},buttonProps:{...p,hideCaret:!0}})}):o.jsxRuntimeExports.jsx(C.Button,{...p,onClick:l})})]})};exports.AvatarGroup=G;
+//# sourceMappingURL=avatarGroup.component-CTBfGiSm.js.map

package/dist/chunks/avatarGroup.component-CTBfGiSm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarGroup.component-CTBfGiSm.js","sources":["../../src/components/AvatarGroup/avatarGroup.component.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { AvatarGroup as CAvatarGroup, AvatarGroupProps as CAvatarGroupProps } from '@chakra-ui/react/avatar';\nimport { Avatar, AvatarProps } from 'components/Avatar/avatar.component';\nimport { AvatarSize, AvatarVariant } from 'components/Avatar/avatar.types';\nimport { Menu, MenuProps } from 'components/Menu';\nimport { Text } from 'components/Text/text.component';\nimport { Button, ButtonProps } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\nimport { Box } from '@chakra-ui/react/box';\n\nexport interface AvatarGroupProps extends CAvatarGroupProps {\n  /** Tooltip text for when the add button is hovered. */\n  addButtonTooltipText?: string;\n  /** Array of avatars to display in the group. */\n  avatars: AvatarProps[];\n  /** Maximum number of avatars to display before it shows a counter instead. */\n  max?: number;\n  /** Callback function when the add button is clicked. */\n  onAdd?: () => void;\n  /** Callback function when the remove button is clicked. */\n  onRemove?: (value?: string) => void;\n  /** If true, an add button will be displayed at the end of the avatar group.\n   * @default true\n   */\n  showAddButton?: boolean;\n  /** If true, a remove button will be displayed when hovering over an avatar.\n   * @default false\n   */\n  showRemoveAvatarButton?: boolean;\n  /** Size of the avatars in the group.\n   * @default md\n   */\n  size?: AvatarSize;\n  /** Variant of the avatars in the group.\n   * @default default\n   */\n  variant?: AvatarVariant;\n  /** Props to customize the add button Menu. See `Menu` for more information. */\n  menuProps?: Omit<MenuProps, 'buttonProps'>;\n  /** Data test id for the avatar group.\n   * @default kibble-avatar-group\n   */\n  'data-testid'?: string;\n}\n\nexport const AvatarGroup = ({\n  avatars,\n  max = 3,\n  onAdd,\n  onRemove,\n  showAddButton = true,\n  showRemoveAvatarButton = false,\n  size = 'md',\n  variant = 'default',\n  menuProps,\n  addButtonTooltipText,\n  ['data-testid']: dataTestId = 'kibble-avatar-group',\n  ...rest\n}: AvatarGroupProps): React.JSX.Element => {\n  const mergedNames = useMemo(() => avatars.map((avatar) => avatar.name).join(', '), [avatars]);\n  const spacing = size === 'xs' || size === 'sm' ? -1 : -2;\n  const [hideTooltip, setHideTooltip] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const buttonProps: ButtonProps = useMemo(() => {\n    return {\n      size: size === 'xl' ? 'lg' : size,\n      variant: 'ghostNeutral',\n      borderRadius: 'full',\n      borderWidth: '1px',\n      iconName: 'plus',\n      borderColor: 'border',\n    };\n  }, [size]);\n\n  return (\n    <CAvatarGroup\n      className=\"AvatarGroup\"\n      data-testid={dataTestId}\n      gap={0}\n      spaceX={spacing}\n      stacking=\"first-on-top\"\n      size={size}\n      {...rest}\n    >\n      {avatars.length > max ? (\n        <Avatar size={size} variant=\"contrast\" showRemoveButton={false} tooltipProps={{ label: mergedNames }}>\n          <Text size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'} variant=\"onContrast\">\n            {avatars.length.toString()}\n          </Text>\n        </Avatar>\n      ) : (\n        avatars.map((avatar) => (\n          <Avatar\n            {...avatar}\n            key={avatar.name}\n            size={size}\n            variant={variant || avatar.variant}\n            showRemoveButton={showRemoveAvatarButton}\n            onRemove={onRemove}\n          />\n        ))\n      )}\n      {showAddButton && (\n        <Tooltip disabled={!addButtonTooltipText?.length || hideTooltip} label={addButtonTooltipText || ''}>\n          {menuProps ? (\n            <Box>\n              <Menu\n                open={menuOpen}\n                data-testid={`${dataTestId}-add-button`}\n                {...menuProps}\n                onOpenChange={({ open }) => {\n                  setHideTooltip(open);\n                  setMenuOpen(open);\n                }}\n                buttonProps={{\n                  ...buttonProps,\n                  hideCaret: true,\n                }}\n              />\n            </Box>\n          ) : (\n            <Button {...buttonProps} onClick={onAdd} />\n          )}\n        </Tooltip>\n      )}\n    </CAvatarGroup>\n  );\n};\n"],"names":["AvatarGroup","avatars","max","onAdd","onRemove","showAddButton","showRemoveAvatarButton","size","variant","menuProps","addButtonTooltipText","dataTestId","rest","mergedNames","useMemo","avatar","spacing","hideTooltip","setHideTooltip","useState","menuOpen","setMenuOpen","buttonProps","jsxs","CAvatarGroup","jsx","Avatar","Text","createElement","Tooltip","Box","Menu","open","Button"],"mappings":"uUA6CaA,EAAc,CAAC,CAC1B,QAAAC,EACA,IAAAC,EAAM,EACN,MAAAC,EACA,SAAAC,EACA,cAAAC,EAAgB,GAChB,uBAAAC,EAAyB,GACzB,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,UAAAC,EACA,qBAAAC,EACA,CAAC,eAAgBC,EAAa,sBAC9B,GAAGC,CACL,IAA2C,CACzC,MAAMC,EAAcC,EAAA,QAAQ,IAAMb,EAAQ,IAAKc,GAAWA,EAAO,IAAI,EAAE,KAAK,IAAI,EAAG,CAACd,CAAO,CAAC,EACtFe,EAAUT,IAAS,MAAQA,IAAS,KAAO,GAAK,GAChD,CAACU,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAC9C,CAACC,EAAUC,CAAW,EAAIF,EAAAA,SAAS,EAAK,EAExCG,EAA2BR,EAAAA,QAAQ,KAChC,CACL,KAAMP,IAAS,KAAO,KAAOA,EAC7B,QAAS,eACT,aAAc,OACd,YAAa,MACb,SAAU,OACV,YAAa,QACf,GACC,CAACA,CAAI,CAAC,EAGP,OAAAgB,EAAA,kBAAA,KAACC,EAAA,YAAA,CACC,UAAU,cACV,cAAab,EACb,IAAK,EACL,OAAQK,EACR,SAAS,eACT,KAAAT,EACC,GAAGK,EAEH,SAAA,CAAAX,EAAQ,OAASC,EACfuB,EAAAA,kBAAAA,IAAAC,EAAAA,OAAA,CAAO,KAAAnB,EAAY,QAAQ,WAAW,iBAAkB,GAAO,aAAc,CAAE,MAAOM,CAAY,EACjG,iCAACc,EAAAA,YAAK,CAAA,KAAMpB,IAAS,MAAQA,IAAS,KAAO,KAAO,KAAM,QAAQ,aAC/D,SAAAN,EAAQ,OAAO,WAClB,CACF,CAAA,EAEAA,EAAQ,IAAKc,GACXa,EAAA,cAACF,EAAA,OAAA,CACE,GAAGX,EACJ,IAAKA,EAAO,KACZ,KAAAR,EACA,QAASC,GAAWO,EAAO,QAC3B,iBAAkBT,EAClB,SAAAF,CAAA,CAAA,CAEH,EAEFC,GACCoB,EAAA,kBAAA,IAACI,UAAQ,CAAA,SAAU,CAACnB,GAAsB,QAAUO,EAAa,MAAOP,GAAwB,GAC7F,SAAAD,0BACEqB,EACC,IAAA,CAAA,SAAAL,EAAA,kBAAA,IAACM,EAAA,KAAA,CACC,KAAMX,EACN,cAAa,GAAGT,CAAU,cACzB,GAAGF,EACJ,aAAc,CAAC,CAAE,KAAAuB,KAAW,CAC1Bd,EAAec,CAAI,EACnBX,EAAYW,CAAI,CAClB,EACA,YAAa,CACX,GAAGV,EACH,UAAW,EAAA,CACb,CAAA,EAEJ,EAECG,EAAA,kBAAA,IAAAQ,SAAA,CAAQ,GAAGX,EAAa,QAASnB,EAAO,CAE7C,CAAA,CAAA,CAAA,CAEJ,CAEJ"}

package/dist/chunks/button.component-BO6oee_V.js

@@ -0,0 +1,69 @@
+import { j as t } from "./jsx-runtime-C5mzlN2N.js";
+import { forwardRef as x, useMemo as B } from "react";
+import { I as b } from "./icon.component-PV_nHBId.js";
+import { I as j, B as g } from "./icon-button-CcZMCNUJ.js";
+const h = (r) => r.replace(/([A-Z])/g, " $1").replace(/^\w/, (s) => s.toUpperCase()), w = x(
+  ({
+    active: r,
+    children: s,
+    iconName: o,
+    iconPosition: n = "left",
+    fullWidth: m = !1,
+    onContrast: l = !1,
+    size: e = "md",
+    variant: p = "primary",
+    ["data-testid"]: d = "kibble-button",
+    ...i
+  }, u) => {
+    let a;
+    const c = B(
+      () => `${p}${l ? "OnContrast" : ""}`,
+      [l, p]
+    );
+    if (o && (a = /* @__PURE__ */ t.jsx(b, { size: e, name: o }), !s)) {
+      const f = h(o);
+      return /* @__PURE__ */ t.jsx(
+        j,
+        {
+          className: "IconButton",
+          "data-testid": d,
+          ref: u,
+          "aria-label": f,
+          size: e,
+          variant: c,
+          ...r && { "data-active": !0 },
+          ...i,
+          ...m && { width: "100%" },
+          children: a
+        }
+      );
+    }
+    return /* @__PURE__ */ t.jsxs(
+      g,
+      {
+        className: "Button",
+        "data-testid": d,
+        fontWeight: "semibold",
+        ref: u,
+        size: e,
+        variant: c,
+        ...r && { "data-active": !0 },
+        ...i,
+        ...m && { width: "100%" },
+        ...!!o && {
+          gap: e === "xs" || e === "sm" ? 1 : 2
+        },
+        children: [
+          a && n === "left" ? a : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+          s,
+          a && n === "right" ? a : /* @__PURE__ */ t.jsx(t.Fragment, {})
+        ]
+      }
+    );
+  }
+);
+w.displayName = "Button";
+export {
+  w as B
+};
+//# sourceMappingURL=button.component-BO6oee_V.js.map

package/dist/chunks/button.component-BO6oee_V.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component-BO6oee_V.js","sources":["../../src/shared/utils/strings.ts","../../src/components/Button/button.component.tsx"],"sourcesContent":["export const camelCaseToLabel = (s: string): string =>\n  s.replace(/([A-Z])/g, ' $1').replace(/^\\w/, (c) => c.toUpperCase());\n\nexport const toTitleCase = (s: string): string => {\n  const smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|v.?|vs.?|via)$/i;\n  const alphanumericPattern = /([A-Za-z0-9\\u00C0-\\u00FF])/;\n  const wordSeparators = /([ :–—-])/;\n\n  return s\n    .split(wordSeparators)\n    .map(function (current, index, array) {\n      if (\n        /* Check for small words */\n        current.search(smallWords) > -1 &&\n        /* Skip first and last word */\n        index !== 0 &&\n        index !== array.length - 1 &&\n        /* Ignore title end and subtitle start */\n        array[index - 3] !== ':' &&\n        array[index + 1] !== ':' &&\n        /* Ignore small words that start a hyphenated phrase */\n        (array[index + 1] !== '-' || (array[index - 1] === '-' && array[index + 1] === '-'))\n      ) {\n        return current.toLowerCase();\n      }\n\n      /* Ignore intentional capitalization */\n      if (current.substring(1).search(/[A-Z]|\\../) > -1) {\n        return current;\n      }\n\n      /* Ignore URLs */\n      if (array[index + 1] === ':' && array[index + 2] !== '') {\n        return current;\n      }\n\n      /* Capitalize the first letter */\n      return current.replace(alphanumericPattern, (match) => match.toUpperCase());\n    })\n    .join('');\n};\n","import React, { ForwardedRef, forwardRef, useMemo } from 'react';\nimport { Button as CButton, ButtonProps as CButtonProps, IconButton as CIconButton } from '@chakra-ui/react/button';\nimport { IconName } from 'components/Icon/icon.types';\nimport {\n  ButtonConfigVariant,\n  ButtonIconPosition,\n  ButtonSize,\n  ButtonSpinnerPlacement,\n  ButtonVariant,\n} from './button.types';\nimport { camelCaseToLabel } from 'shared/utils/strings';\nimport { Icon } from 'components/Icon';\n\nexport interface ButtonProps extends Omit<CButtonProps, 'variant'> {\n  /** If set to true, the button will be rendered in an active state. */\n  active?: boolean;\n  /** Name of the icon. */\n  iconName?: IconName;\n  /** Position of the icon in relation to the text. */\n  iconPosition?: ButtonIconPosition;\n  /** Set this to true to make the button expand to the inner width of its container. Mainly used in mobile layouts. */\n  fullWidth?: boolean;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /**\n   * If loading is true and loadingText is defined, positions spinner before or after the loading text. If loadingText is omitted, spinner will be centered and this value can be left undefined.\n   * @default start\n   */\n  spinnerPlacement?: ButtonSpinnerPlacement;\n  /** Determines whether the button should render a contrasting variant. */\n  onContrast?: boolean;\n  /** Variants are used to adjust the button look and feel. Choose a variant that aligns with the button intent and role in the overall design. */\n  variant?: ButtonVariant;\n  /** Data test id for the button. */\n  'data-testid'?: string;\n}\n\nexport const Button = forwardRef(\n  (\n    {\n      active,\n      children,\n      iconName,\n      iconPosition = 'left',\n      fullWidth = false,\n      onContrast = false,\n      size = 'md',\n      variant = 'primary',\n      ['data-testid']: dataTestId = 'kibble-button',\n      ...rest\n    }: ButtonProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ): React.JSX.Element => {\n    let icon;\n    const computedVariant = useMemo(\n      () => `${variant}${onContrast ? 'OnContrast' : ''}` as ButtonConfigVariant,\n      [onContrast, variant],\n    );\n\n    if (iconName) {\n      icon = <Icon size={size} name={iconName} />;\n\n      if (!children) {\n        const label = camelCaseToLabel(iconName);\n        return (\n          <CIconButton\n            className=\"IconButton\"\n            data-testid={dataTestId}\n            ref={ref}\n            aria-label={label}\n            size={size}\n            variant={computedVariant as CButtonProps['variant']}\n            {...(active && { 'data-active': true })}\n            {...rest}\n            {...(fullWidth && { width: '100%' })}\n          >\n            {icon}\n          </CIconButton>\n        );\n      }\n    }\n\n    return (\n      <CButton\n        className=\"Button\"\n        data-testid={dataTestId}\n        fontWeight=\"semibold\"\n        ref={ref}\n        size={size}\n        variant={computedVariant as CButtonProps['variant']}\n        {...(active && { 'data-active': true })}\n        {...rest}\n        {...(fullWidth && { width: '100%' })}\n        {...(!!iconName && {\n          gap: size === 'xs' || size === 'sm' ? 1 : 2,\n        })}\n      >\n        {icon && iconPosition === 'left' ? icon : <></>}\n        {children}\n        {icon && iconPosition === 'right' ? icon : <></>}\n      </CButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["camelCaseToLabel","s","c","Button","forwardRef","active","children","iconName","iconPosition","fullWidth","onContrast","size","variant","dataTestId","rest","ref","icon","computedVariant","useMemo","jsx","Icon","label","CIconButton","jsxs","CButton","Fragment"],"mappings":";;;;AAAO,MAAMA,IAAmB,CAACC,MAC/BA,EAAE,QAAQ,YAAY,KAAK,EAAE,QAAQ,OAAO,CAACC,MAAMA,EAAE,aAAa,GCoCvDC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,CAAC,gBAAgBC,IAAa;AAAA,IAC9B,GAAGC;AAAA,KAELC,MACsB;AAClB,QAAAC;AACJ,UAAMC,IAAkBC;AAAA,MACtB,MAAM,GAAGN,CAAO,GAAGF,IAAa,eAAe,EAAE;AAAA,MACjD,CAACA,GAAYE,CAAO;AAAA,IACtB;AAEA,QAAIL,MACFS,IAAQG,gBAAAA,EAAA,IAAAC,GAAA,EAAK,MAAAT,GAAY,MAAMJ,GAAU,GAErC,CAACD,IAAU;AACP,YAAAe,IAAQrB,EAAiBO,CAAQ;AAErC,aAAAY,gBAAAA,EAAA;AAAA,QAACG;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAaT;AAAA,UACb,KAAAE;AAAA,UACA,cAAYM;AAAA,UACZ,MAAAV;AAAA,UACA,SAASM;AAAA,UACR,GAAIZ,KAAU,EAAE,eAAe,GAAK;AAAA,UACpC,GAAGS;AAAA,UACH,GAAIL,KAAa,EAAE,OAAO,OAAO;AAAA,UAEjC,UAAAO;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAMJ,WAAAO,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAaX;AAAA,QACb,YAAW;AAAA,QACX,KAAAE;AAAA,QACA,MAAAJ;AAAA,QACA,SAASM;AAAA,QACR,GAAIZ,KAAU,EAAE,eAAe,GAAK;AAAA,QACpC,GAAGS;AAAA,QACH,GAAIL,KAAa,EAAE,OAAO,OAAO;AAAA,QACjC,GAAI,CAAC,CAACF,KAAY;AAAA,UACjB,KAAKI,MAAS,QAAQA,MAAS,OAAO,IAAI;AAAA,QAC5C;AAAA,QAEC,UAAA;AAAA,UAAQK,KAAAR,MAAiB,SAASQ,IAASG,gBAAAA,EAAA,IAAAM,EAAA,UAAA,EAAA;AAAA,UAC3CnB;AAAA,UACAU,KAAQR,MAAiB,UAAUQ,IAASG,gBAAAA,EAAA,IAAAM,EAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA;AAGN;AAEAtB,EAAO,cAAc;"}

package/dist/chunks/button.component-DjdgBXDC.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),b=require("./icon.component-B1hr5lLa.js"),j=require("./icon-button-B9rScw-E.js"),f=n=>n.replace(/([A-Z])/g," $1").replace(/^\w/,a=>a.toUpperCase()),R=d.forwardRef(({active:n,children:a,iconName:r,iconPosition:o="left",fullWidth:u=!1,onContrast:i=!1,size:s="md",variant:c="primary",["data-testid"]:x="kibble-button",...m},l)=>{let e;const p=d.useMemo(()=>`${c}${i?"OnContrast":""}`,[i,c]);if(r&&(e=t.jsxRuntimeExports.jsx(b.Icon,{size:s,name:r}),!a)){const B=f(r);return t.jsxRuntimeExports.jsx(j.IconButton,{className:"IconButton","data-testid":x,ref:l,"aria-label":B,size:s,variant:p,...n&&{"data-active":!0},...m,...u&&{width:"100%"},children:e})}return t.jsxRuntimeExports.jsxs(j.Button,{className:"Button","data-testid":x,fontWeight:"semibold",ref:l,size:s,variant:p,...n&&{"data-active":!0},...m,...u&&{width:"100%"},...!!r&&{gap:s==="xs"||s==="sm"?1:2},children:[e&&o==="left"?e:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{}),a,e&&o==="right"?e:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{})]})});R.displayName="Button";exports.Button=R;
+//# sourceMappingURL=button.component-DjdgBXDC.js.map

package/dist/chunks/button.component-DjdgBXDC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component-DjdgBXDC.js","sources":["../../src/shared/utils/strings.ts","../../src/components/Button/button.component.tsx"],"sourcesContent":["export const camelCaseToLabel = (s: string): string =>\n  s.replace(/([A-Z])/g, ' $1').replace(/^\\w/, (c) => c.toUpperCase());\n\nexport const toTitleCase = (s: string): string => {\n  const smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|v.?|vs.?|via)$/i;\n  const alphanumericPattern = /([A-Za-z0-9\\u00C0-\\u00FF])/;\n  const wordSeparators = /([ :–—-])/;\n\n  return s\n    .split(wordSeparators)\n    .map(function (current, index, array) {\n      if (\n        /* Check for small words */\n        current.search(smallWords) > -1 &&\n        /* Skip first and last word */\n        index !== 0 &&\n        index !== array.length - 1 &&\n        /* Ignore title end and subtitle start */\n        array[index - 3] !== ':' &&\n        array[index + 1] !== ':' &&\n        /* Ignore small words that start a hyphenated phrase */\n        (array[index + 1] !== '-' || (array[index - 1] === '-' && array[index + 1] === '-'))\n      ) {\n        return current.toLowerCase();\n      }\n\n      /* Ignore intentional capitalization */\n      if (current.substring(1).search(/[A-Z]|\\../) > -1) {\n        return current;\n      }\n\n      /* Ignore URLs */\n      if (array[index + 1] === ':' && array[index + 2] !== '') {\n        return current;\n      }\n\n      /* Capitalize the first letter */\n      return current.replace(alphanumericPattern, (match) => match.toUpperCase());\n    })\n    .join('');\n};\n","import React, { ForwardedRef, forwardRef, useMemo } from 'react';\nimport { Button as CButton, ButtonProps as CButtonProps, IconButton as CIconButton } from '@chakra-ui/react/button';\nimport { IconName } from 'components/Icon/icon.types';\nimport {\n  ButtonConfigVariant,\n  ButtonIconPosition,\n  ButtonSize,\n  ButtonSpinnerPlacement,\n  ButtonVariant,\n} from './button.types';\nimport { camelCaseToLabel } from 'shared/utils/strings';\nimport { Icon } from 'components/Icon';\n\nexport interface ButtonProps extends Omit<CButtonProps, 'variant'> {\n  /** If set to true, the button will be rendered in an active state. */\n  active?: boolean;\n  /** Name of the icon. */\n  iconName?: IconName;\n  /** Position of the icon in relation to the text. */\n  iconPosition?: ButtonIconPosition;\n  /** Set this to true to make the button expand to the inner width of its container. Mainly used in mobile layouts. */\n  fullWidth?: boolean;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /**\n   * If loading is true and loadingText is defined, positions spinner before or after the loading text. If loadingText is omitted, spinner will be centered and this value can be left undefined.\n   * @default start\n   */\n  spinnerPlacement?: ButtonSpinnerPlacement;\n  /** Determines whether the button should render a contrasting variant. */\n  onContrast?: boolean;\n  /** Variants are used to adjust the button look and feel. Choose a variant that aligns with the button intent and role in the overall design. */\n  variant?: ButtonVariant;\n  /** Data test id for the button. */\n  'data-testid'?: string;\n}\n\nexport const Button = forwardRef(\n  (\n    {\n      active,\n      children,\n      iconName,\n      iconPosition = 'left',\n      fullWidth = false,\n      onContrast = false,\n      size = 'md',\n      variant = 'primary',\n      ['data-testid']: dataTestId = 'kibble-button',\n      ...rest\n    }: ButtonProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ): React.JSX.Element => {\n    let icon;\n    const computedVariant = useMemo(\n      () => `${variant}${onContrast ? 'OnContrast' : ''}` as ButtonConfigVariant,\n      [onContrast, variant],\n    );\n\n    if (iconName) {\n      icon = <Icon size={size} name={iconName} />;\n\n      if (!children) {\n        const label = camelCaseToLabel(iconName);\n        return (\n          <CIconButton\n            className=\"IconButton\"\n            data-testid={dataTestId}\n            ref={ref}\n            aria-label={label}\n            size={size}\n            variant={computedVariant as CButtonProps['variant']}\n            {...(active && { 'data-active': true })}\n            {...rest}\n            {...(fullWidth && { width: '100%' })}\n          >\n            {icon}\n          </CIconButton>\n        );\n      }\n    }\n\n    return (\n      <CButton\n        className=\"Button\"\n        data-testid={dataTestId}\n        fontWeight=\"semibold\"\n        ref={ref}\n        size={size}\n        variant={computedVariant as CButtonProps['variant']}\n        {...(active && { 'data-active': true })}\n        {...rest}\n        {...(fullWidth && { width: '100%' })}\n        {...(!!iconName && {\n          gap: size === 'xs' || size === 'sm' ? 1 : 2,\n        })}\n      >\n        {icon && iconPosition === 'left' ? icon : <></>}\n        {children}\n        {icon && iconPosition === 'right' ? icon : <></>}\n      </CButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["camelCaseToLabel","s","c","Button","forwardRef","active","children","iconName","iconPosition","fullWidth","onContrast","size","variant","dataTestId","rest","ref","icon","computedVariant","useMemo","jsx","Icon","label","CIconButton","jsxs","CButton","Fragment"],"mappings":"8JAAaA,EAAoBC,GAC/BA,EAAE,QAAQ,WAAY,KAAK,EAAE,QAAQ,MAAQC,GAAMA,EAAE,aAAa,ECoCvDC,EAASC,EAAA,WACpB,CACE,CACE,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,OACf,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,CAAC,eAAgBC,EAAa,gBAC9B,GAAGC,GAELC,IACsB,CAClB,IAAAC,EACJ,MAAMC,EAAkBC,EAAA,QACtB,IAAM,GAAGN,CAAO,GAAGF,EAAa,aAAe,EAAE,GACjD,CAACA,EAAYE,CAAO,CACtB,EAEA,GAAIL,IACFS,EAAQG,EAAA,kBAAA,IAAAC,EAAA,KAAA,CAAK,KAAAT,EAAY,KAAMJ,EAAU,EAErC,CAACD,GAAU,CACP,MAAAe,EAAQrB,EAAiBO,CAAQ,EAErC,OAAAY,EAAA,kBAAA,IAACG,EAAA,WAAA,CACC,UAAU,aACV,cAAaT,EACb,IAAAE,EACA,aAAYM,EACZ,KAAAV,EACA,QAASM,EACR,GAAIZ,GAAU,CAAE,cAAe,EAAK,EACpC,GAAGS,EACH,GAAIL,GAAa,CAAE,MAAO,MAAO,EAEjC,SAAAO,CAAA,CACH,CAAA,CAMJ,OAAAO,EAAA,kBAAA,KAACC,EAAA,OAAA,CACC,UAAU,SACV,cAAaX,EACb,WAAW,WACX,IAAAE,EACA,KAAAJ,EACA,QAASM,EACR,GAAIZ,GAAU,CAAE,cAAe,EAAK,EACpC,GAAGS,EACH,GAAIL,GAAa,CAAE,MAAO,MAAO,EACjC,GAAI,CAAC,CAACF,GAAY,CACjB,IAAKI,IAAS,MAAQA,IAAS,KAAO,EAAI,CAC5C,EAEC,SAAA,CAAQK,GAAAR,IAAiB,OAASQ,EAASG,EAAA,kBAAA,IAAAM,EAAA,kBAAA,SAAA,EAAA,EAC3CnB,EACAU,GAAQR,IAAiB,QAAUQ,EAASG,EAAA,kBAAA,IAAAM,EAAA,kBAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAC/C,CAAA,CAGN,EAEAtB,EAAO,YAAc"}