@televet/kibble-ui 4.0.0-beta.59 → 4.0.0-beta.6

package/dist/chunks/tabs.component-DQEEOmWs.js

@@ -0,0 +1,87 @@
+import { x as a } from "./vendor-BBfll6i3.js";
+import { I as r } from "./icon.component-CFH2bMLy.js";
+import { N as d } from "./notificationCounter.component-DU5P6Ilh.js";
+import { W as n } from "./heading.component-B8niLTxz.js";
+import { W as c, X as x, Y as T, Z as f } from "./chakra-BqBkjpvZ.js";
+const j = {
+  xs: "sm",
+  sm: "md",
+  md: "md",
+  lg: "lg"
+}, p = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+}, u = ({
+  iconName: e,
+  iconPosition: i = "left",
+  label: o,
+  notificationCounterProps: l,
+  showNotificationCounter: b,
+  size: t = "md",
+  ...s
+}) => /* @__PURE__ */ a.jsxs(c, { className: "Tab", "data-testid": "kibble-tab", ...s, children: [
+  !!e && i === "left" && /* @__PURE__ */ a.jsx(
+    r,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: t,
+      variant: "default"
+    }
+  ),
+  /* @__PURE__ */ a.jsx(
+    n,
+    {
+      className: "Tab__Label",
+      "data-testid": "kibble-tab-label",
+      size: p[t],
+      children: o
+    }
+  ),
+  !!e && i === "right" && /* @__PURE__ */ a.jsx(
+    r,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: t
+    }
+  ),
+  b && /* @__PURE__ */ a.jsx(
+    d,
+    {
+      className: "Tab__NotificationCounter",
+      "data-testid": "kibble-tab-notification-counter",
+      ...l,
+      size: j[t]
+    }
+  )
+] }), C = ({
+  align: e = "start",
+  onChange: i,
+  size: o = "md",
+  tabs: l,
+  tabsContents: b,
+  ...t
+}) => /* @__PURE__ */ a.jsxs(
+  x,
+  {
+    className: "Tabs",
+    "data-testid": "kibble-tabs",
+    justify: e || t.justify,
+    size: o,
+    onValueChange: ({ value: s }) => i?.(s),
+    ...t,
+    children: [
+      /* @__PURE__ */ a.jsx(T, { className: "Tabs__List", "data-testid": "kibble-tabs-list", children: l.map((s, m) => /* @__PURE__ */ a.jsx(u, { ...s }, `tab-${m}`)) }),
+      !!b && b.map((s, m) => /* @__PURE__ */ a.jsx(f, { ...s }, `tabContent-${m}`))
+    ]
+  }
+);
+export {
+  C as T
+};
+//# sourceMappingURL=tabs.component-DQEEOmWs.js.map

package/dist/chunks/tabs.component-DQEEOmWs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.component-DQEEOmWs.js","sources":["../../src/components/Tabs/components/Tab/tab.records.ts","../../src/components/Tabs/components/Tab/tab.component.tsx","../../src/components/Tabs/tabs.component.tsx"],"sourcesContent":["import { TabSize } from \"./tab.types\";\nimport { NotificationCounterSize } from \"components/NotificationCounter/notificationCounter.types\";\nimport { HeadingSize } from \"components/Heading/heading.types\";\n\nexport const tabNotificationCounterSize: Record<\n  TabSize,\n  NotificationCounterSize\n> = {\n  xs: \"sm\",\n  sm: \"md\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\nexport const tabLabelSize: Record<TabSize, HeadingSize> = {\n  xs: \"xs\",\n  sm: \"xs\",\n  md: \"sm\",\n  lg: \"md\",\n};\n","import React from \"react\";\nimport { Tabs } from \"@chakra-ui/react/tabs\";\nimport { Icon, IconName } from \"components/Icon\";\nimport {\n  NotificationCounter,\n  NotificationCounterProps,\n} from \"components/NotificationCounter/notificationCounter.component\";\nimport { TabIconPosition, TabSize } from \"./tab.types\";\nimport { tabLabelSize, tabNotificationCounterSize } from \"./tab.records\";\nimport { Heading } from \"components/Heading/heading.component\";\n\nexport interface TabProps extends Tabs.TriggerProps {\n  iconName?: IconName;\n  iconPosition?: TabIconPosition;\n  label: string;\n  notificationCounterProps?: Omit<NotificationCounterProps, \"size\">;\n  showNotificationCounter?: boolean;\n  size?: TabSize;\n}\n\nexport const Tab = ({\n  iconName,\n  iconPosition = \"left\",\n  label,\n  notificationCounterProps,\n  showNotificationCounter,\n  size = \"md\",\n  ...rest\n}: TabProps): React.JSX.Element => {\n  return (\n    <Tabs.Trigger className=\"Tab\" data-testid=\"kibble-tab\" {...rest}>\n      {!!iconName && iconPosition === \"left\" && (\n        <Icon\n          className=\"Tab__Icon\"\n          data-testid=\"kibble-tab-icon\"\n          name={iconName}\n          size={size}\n          variant=\"default\"\n        />\n      )}\n      <Heading\n        className=\"Tab__Label\"\n        data-testid=\"kibble-tab-label\"\n        size={tabLabelSize[size]}\n      >\n        {label}\n      </Heading>\n      {!!iconName && iconPosition === \"right\" && (\n        <Icon\n          className=\"Tab__Icon\"\n          data-testid=\"kibble-tab-icon\"\n          name={iconName}\n          size={size}\n        />\n      )}\n      {showNotificationCounter && (\n        <NotificationCounter\n          className=\"Tab__NotificationCounter\"\n          data-testid=\"kibble-tab-notification-counter\"\n          {...notificationCounterProps}\n          size={tabNotificationCounterSize[size]}\n        />\n      )}\n    </Tabs.Trigger>\n  );\n};\n","import React from \"react\";\nimport { Tabs as CTabs } from \"@chakra-ui/react/tabs\";\nimport { TabSize } from \"./components/Tab/tab.types\";\nimport { Tab, TabProps } from \"./components/Tab/tab.component\";\nimport { Alignment } from \"shared/types/alignment\";\n\nexport interface TabsProps\n  extends Omit<CTabs.RootProps, \"onChange\" | \"variant\"> {\n  align?: Alignment;\n  onChange?: (value: string) => void;\n  size?: TabSize;\n  tabs: TabProps[];\n  tabsContents?: CTabs.ContentProps[];\n}\n\nexport const Tabs = ({\n  align = \"start\",\n  onChange,\n  size = \"md\",\n  tabs,\n  tabsContents,\n  ...rest\n}: TabsProps): React.JSX.Element => {\n  return (\n    <CTabs.Root\n      className=\"Tabs\"\n      data-testid=\"kibble-tabs\"\n      justify={align || rest.justify}\n      size={size}\n      onValueChange={({ value }) => onChange?.(value)}\n      {...rest}\n    >\n      <CTabs.List className=\"Tabs__List\" data-testid=\"kibble-tabs-list\">\n        {tabs.map((tab, index) => (\n          <Tab key={`tab-${index}`} {...tab} />\n        ))}\n      </CTabs.List>\n      {!!tabsContents &&\n        tabsContents.map((tabContent, index) => (\n          <CTabs.Content key={`tabContent-${index}`} {...tabContent} />\n        ))}\n    </CTabs.Root>\n  );\n};\n"],"names":["tabNotificationCounterSize","tabLabelSize","Tab","iconName","iconPosition","label","notificationCounterProps","showNotificationCounter","size","rest","jsxs","Tabs.Trigger","jsx","Icon","Heading","NotificationCounter","Tabs","align","onChange","tabs","tabsContents","CTabs.Root","value","CTabs.List","tab","index","tabContent","CTabs.Content"],"mappings":";;;;;AAIO,MAAMA,IAGT;AAAA,EACF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAA6C;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCCaC,IAAM,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MAEIC,gBAAAA,EAAA,KAACC,GAAA,EAAa,WAAU,OAAM,eAAY,cAAc,GAAGF,GACxD,UAAA;AAAA,EAAC,CAAA,CAACN,KAAYC,MAAiB,UAC9BQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAMV;AAAA,MACN,MAAAK;AAAA,MACA,SAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEFI,gBAAAA,EAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAMb,EAAaO,CAAI;AAAA,MAEtB,UAAAH;AAAA,IAAA;AAAA,EACH;AAAA,EACC,CAAC,CAACF,KAAYC,MAAiB,WAC9BQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAMV;AAAA,MACN,MAAAK;AAAA,IAAA;AAAA,EACF;AAAA,EAEDD,KACCK,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACX,GAAGT;AAAA,MACJ,MAAMN,EAA2BQ,CAAI;AAAA,IAAA;AAAA,EAAA;AACvC,GAEJ,GChDSQ,IAAO,CAAC;AAAA,EACnB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,MAAAV,IAAO;AAAA,EACP,MAAAW;AAAA,EACA,cAAAC;AAAA,EACA,GAAGX;AACL,MAEIC,gBAAAA,EAAA;AAAA,EAACW;AAAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,SAASJ,KAASR,EAAK;AAAA,IACvB,MAAAD;AAAA,IACA,eAAe,CAAC,EAAE,OAAAc,QAAYJ,IAAWI,CAAK;AAAA,IAC7C,GAAGb;AAAA,IAEJ,UAAA;AAAA,MAACG,gBAAAA,MAAAW,GAAA,EAAW,WAAU,cAAa,eAAY,oBAC5C,YAAK,IAAI,CAACC,GAAKC,MACdb,gBAAAA,EAAA,IAACV,KAA0B,GAAGsB,EAAA,GAApB,OAAOC,CAAK,EAAa,CACpC,GACH;AAAA,MACC,CAAC,CAACL,KACDA,EAAa,IAAI,CAACM,GAAYD,MAC3Bb,gBAAAA,EAAAA,IAAAe,GAAA,EAA2C,GAAGD,KAA3B,cAAcD,CAAK,EAAoB,CAC5D;AAAA,IAAA;AAAA,EAAA;AACL;"}

package/dist/chunks/tag.component-DK64cZSr.js

@@ -0,0 +1,67 @@
+import { x as s } from "./vendor-BBfll6i3.js";
+import { forwardRef as b } from "react";
+import { t as T, v as p, w as x } from "./chakra-BqBkjpvZ.js";
+const i = {
+  sm: 0,
+  md: 0.5,
+  lg: 1
+}, f = b(
+  (g, m) => {
+    const {
+      leftElement: t,
+      rightElement: l,
+      onClose: r,
+      label: n,
+      closeButtonDisplay: a = "never",
+      size: e = "md",
+      variant: d = "default",
+      ...c
+    } = g, o = !!r && a !== "never";
+    return /* @__PURE__ */ s.jsxs(
+      T,
+      {
+        className: "Tag group",
+        "data-testid": "kibble-tag",
+        ref: m,
+        variant: d,
+        size: e,
+        closeButtonDisplay: a,
+        ...o && a === "always" && {
+          pr: i[e]
+        },
+        ...c,
+        children: [
+          t,
+          /* @__PURE__ */ s.jsx(
+            p,
+            {
+              className: "Tag__Label",
+              "data-testid": "kibble-tag-label",
+              ...!!t && { ml: 1 },
+              ...!!l && { mr: 1 },
+              children: n
+            }
+          ),
+          l,
+          o && /* @__PURE__ */ s.jsx(
+            x,
+            {
+              className: "Tag__CloseTrigger",
+              "data-testid": "kibble-tag-close-trigger",
+              onClick: r,
+              ...a === "hover" && {
+                px: i[e]
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+f.displayName = "Tag";
+export {
+  f as T,
+  i as t
+};
+//# sourceMappingURL=tag.component-DK64cZSr.js.map

package/dist/chunks/tag.component-DK64cZSr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component-DK64cZSr.js","sources":["../../src/components/Tag/tag.records.ts","../../src/components/Tag/tag.component.tsx"],"sourcesContent":["import { TagSize } from \"./tag.types\";\n\nexport const tagPaddingBySize: Record<TagSize, number> = {\n  sm: 0,\n  md: 0.5,\n  lg: 1,\n};\n","import React, { forwardRef } from \"react\";\nimport { Tag as CTag } from \"@chakra-ui/react/tag\";\nimport { CloseButtonDisplay, TagSize } from \"./tag.types\";\nimport { Status } from \"shared/types/status\";\nimport { tagPaddingBySize } from \"./tag.records\";\n\nexport interface BaseTagProps extends Omit<CTag.RootProps, \"children\"> {\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n  label: string;\n  closeButtonDisplay?: CloseButtonDisplay;\n  size?: TagSize;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: Status;\n}\n\ninterface ClosableTagProps extends BaseTagProps {\n  closeButtonDisplay: \"always\" | \"hover\";\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\ninterface NonClosableTagProps extends BaseTagProps {\n  closeButtonDisplay?: \"never\";\n  onClose?: never;\n}\n\nexport type TagProps = ClosableTagProps | NonClosableTagProps;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(\n  (props, ref): React.JSX.Element => {\n    const {\n      leftElement,\n      rightElement,\n      onClose,\n      label,\n      closeButtonDisplay = \"never\",\n      size = \"md\",\n      variant = \"default\",\n      ...rest\n    } = props;\n    const closable = !!onClose && closeButtonDisplay !== \"never\";\n\n    return (\n      <CTag.Root\n        className=\"Tag group\"\n        data-testid=\"kibble-tag\"\n        ref={ref}\n        variant={variant}\n        size={size}\n        closeButtonDisplay={closeButtonDisplay}\n        {...(closable &&\n          closeButtonDisplay === \"always\" && {\n            pr: tagPaddingBySize[size],\n          })}\n        {...rest}\n      >\n        {leftElement}\n        <CTag.Label\n          className=\"Tag__Label\"\n          data-testid=\"kibble-tag-label\"\n          {...(!!leftElement && { ml: 1 })}\n          {...(!!rightElement && { mr: 1 })}\n        >\n          {label}\n        </CTag.Label>\n        {rightElement}\n        {closable && (\n          <CTag.CloseTrigger\n            className=\"Tag__CloseTrigger\"\n            data-testid=\"kibble-tag-close-trigger\"\n            onClick={onClose}\n            {...(closeButtonDisplay === \"hover\" && {\n              px: tagPaddingBySize[size],\n            })}\n          />\n        )}\n      </CTag.Root>\n    );\n  },\n);\n\nTag.displayName = \"Tag\";\n"],"names":["tagPaddingBySize","Tag","forwardRef","props","ref","leftElement","rightElement","onClose","label","closeButtonDisplay","size","variant","rest","closable","jsxs","CTag.Root","jsx","CTag.Label","CTag.CloseTrigger"],"mappings":";;;AAEO,MAAMA,IAA4C;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCsBaC,IAAMC;AAAA,EACjB,CAACC,GAAOC,MAA2B;AAC3B,UAAA;AAAA,MACJ,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,oBAAAC,IAAqB;AAAA,MACrB,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,GAAGC;AAAA,IAAA,IACDT,GACEU,IAAW,CAAC,CAACN,KAAWE,MAAuB;AAGnD,WAAAK,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,KAAAX;AAAA,QACA,SAAAO;AAAA,QACA,MAAAD;AAAA,QACA,oBAAAD;AAAA,QACC,GAAII,KACHJ,MAAuB,YAAY;AAAA,UACjC,IAAIT,EAAiBU,CAAI;AAAA,QAC3B;AAAA,QACD,GAAGE;AAAA,QAEH,UAAA;AAAA,UAAAP;AAAA,UACDW,gBAAAA,EAAA;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACX,GAAI,CAAC,CAACZ,KAAe,EAAE,IAAI,EAAE;AAAA,cAC7B,GAAI,CAAC,CAACC,KAAgB,EAAE,IAAI,EAAE;AAAA,cAE9B,UAAAE;AAAA,YAAA;AAAA,UACH;AAAA,UACCF;AAAA,UACAO,KACCG,gBAAAA,EAAA;AAAA,YAACE;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAASX;AAAA,cACR,GAAIE,MAAuB,WAAW;AAAA,gBACrC,IAAIT,EAAiBU,CAAI;AAAA,cAAA;AAAA,YAC3B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEAT,EAAI,cAAc;"}

package/dist/chunks/tag.component-D_hbxu6m.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("./vendor-D-x6W6ez.js"),T=require("react"),s=require("./chakra-DmF8Cxqs.js"),r={sm:0,md:.5,lg:1},n=T.forwardRef((c,d)=>{const{leftElement:l,rightElement:i,onClose:g,label:m,closeButtonDisplay:e="never",size:a="md",variant:b="default",...u}=c,o=!!g&&e!=="never";return t.jsxRuntimeExports.jsxs(s.TagRoot,{className:"Tag group","data-testid":"kibble-tag",ref:d,variant:b,size:a,closeButtonDisplay:e,...o&&e==="always"&&{pr:r[a]},...u,children:[l,t.jsxRuntimeExports.jsx(s.TagLabel,{className:"Tag__Label","data-testid":"kibble-tag-label",...!!l&&{ml:1},...!!i&&{mr:1},children:m}),i,o&&t.jsxRuntimeExports.jsx(s.TagCloseTrigger,{className:"Tag__CloseTrigger","data-testid":"kibble-tag-close-trigger",onClick:g,...e==="hover"&&{px:r[a]}})]})});n.displayName="Tag";exports.Tag=n;exports.tagPaddingBySize=r;
+//# sourceMappingURL=tag.component-D_hbxu6m.js.map

package/dist/chunks/tag.component-D_hbxu6m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component-D_hbxu6m.js","sources":["../../src/components/Tag/tag.records.ts","../../src/components/Tag/tag.component.tsx"],"sourcesContent":["import { TagSize } from \"./tag.types\";\n\nexport const tagPaddingBySize: Record<TagSize, number> = {\n  sm: 0,\n  md: 0.5,\n  lg: 1,\n};\n","import React, { forwardRef } from \"react\";\nimport { Tag as CTag } from \"@chakra-ui/react/tag\";\nimport { CloseButtonDisplay, TagSize } from \"./tag.types\";\nimport { Status } from \"shared/types/status\";\nimport { tagPaddingBySize } from \"./tag.records\";\n\nexport interface BaseTagProps extends Omit<CTag.RootProps, \"children\"> {\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n  label: string;\n  closeButtonDisplay?: CloseButtonDisplay;\n  size?: TagSize;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: Status;\n}\n\ninterface ClosableTagProps extends BaseTagProps {\n  closeButtonDisplay: \"always\" | \"hover\";\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\ninterface NonClosableTagProps extends BaseTagProps {\n  closeButtonDisplay?: \"never\";\n  onClose?: never;\n}\n\nexport type TagProps = ClosableTagProps | NonClosableTagProps;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(\n  (props, ref): React.JSX.Element => {\n    const {\n      leftElement,\n      rightElement,\n      onClose,\n      label,\n      closeButtonDisplay = \"never\",\n      size = \"md\",\n      variant = \"default\",\n      ...rest\n    } = props;\n    const closable = !!onClose && closeButtonDisplay !== \"never\";\n\n    return (\n      <CTag.Root\n        className=\"Tag group\"\n        data-testid=\"kibble-tag\"\n        ref={ref}\n        variant={variant}\n        size={size}\n        closeButtonDisplay={closeButtonDisplay}\n        {...(closable &&\n          closeButtonDisplay === \"always\" && {\n            pr: tagPaddingBySize[size],\n          })}\n        {...rest}\n      >\n        {leftElement}\n        <CTag.Label\n          className=\"Tag__Label\"\n          data-testid=\"kibble-tag-label\"\n          {...(!!leftElement && { ml: 1 })}\n          {...(!!rightElement && { mr: 1 })}\n        >\n          {label}\n        </CTag.Label>\n        {rightElement}\n        {closable && (\n          <CTag.CloseTrigger\n            className=\"Tag__CloseTrigger\"\n            data-testid=\"kibble-tag-close-trigger\"\n            onClick={onClose}\n            {...(closeButtonDisplay === \"hover\" && {\n              px: tagPaddingBySize[size],\n            })}\n          />\n        )}\n      </CTag.Root>\n    );\n  },\n);\n\nTag.displayName = \"Tag\";\n"],"names":["tagPaddingBySize","Tag","forwardRef","props","ref","leftElement","rightElement","onClose","label","closeButtonDisplay","size","variant","rest","closable","jsxs","CTag.Root","jsx","CTag.Label","CTag.CloseTrigger"],"mappings":"0GAEaA,EAA4C,CACvD,GAAI,EACJ,GAAI,GACJ,GAAI,CACN,ECsBaC,EAAMC,EAAA,WACjB,CAACC,EAAOC,IAA2B,CAC3B,KAAA,CACJ,YAAAC,EACA,aAAAC,EACA,QAAAC,EACA,MAAAC,EACA,mBAAAC,EAAqB,QACrB,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,GAAGC,CAAA,EACDT,EACEU,EAAW,CAAC,CAACN,GAAWE,IAAuB,QAGnD,OAAAK,EAAA,kBAAA,KAACC,EAAK,QAAL,CACC,UAAU,YACV,cAAY,aACZ,IAAAX,EACA,QAAAO,EACA,KAAAD,EACA,mBAAAD,EACC,GAAII,GACHJ,IAAuB,UAAY,CACjC,GAAIT,EAAiBU,CAAI,CAC3B,EACD,GAAGE,EAEH,SAAA,CAAAP,EACDW,EAAA,kBAAA,IAACC,EAAK,SAAL,CACC,UAAU,aACV,cAAY,mBACX,GAAI,CAAC,CAACZ,GAAe,CAAE,GAAI,CAAE,EAC7B,GAAI,CAAC,CAACC,GAAgB,CAAE,GAAI,CAAE,EAE9B,SAAAE,CAAA,CACH,EACCF,EACAO,GACCG,EAAA,kBAAA,IAACE,EAAK,gBAAL,CACC,UAAU,oBACV,cAAY,2BACZ,QAASX,EACR,GAAIE,IAAuB,SAAW,CACrC,GAAIT,EAAiBU,CAAI,CAAA,CAC3B,CAAA,CACF,CAAA,CAEJ,CAAA,CAGN,EAEAT,EAAI,YAAc"}

package/dist/chunks/tagBlock.component-CTHTbwpF.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("./vendor-D-x6W6ez.js"),x=require("react"),j=require("./button.component-rY01WurX.js"),R=require("./heading.component-CExbjSBi.js"),C=require("./menu.component-CBuqFeyR.js"),E=require("./spinner.component-CUuidnSK.js"),T=require("./tag.component-D_hbxu6m.js"),k=require("./text.component-CBa_saMP.js"),s=require("./chakra-DmF8Cxqs.js");var l=(r=>(r.Inactive="Inactive",r.Deleted="Deleted",r))(l||{});const v={size:"sm",variant:"secondarySubtle",iconName:"plus",text:"Add",hideCaret:!0},N=({title:r,menuProps:u,tags:a,canBeDeleted:h=!1,onClearAll:f,onRemoveTag:i,onDelete:B,hasError:d=!1,errorText:_="This field contains an error",displayTagsInGroups:c,loading:b=!1})=>{const p=x.useCallback(n=>{i&&i(n,a)},[i,a]),m=x.useMemo(()=>{if(!c)return[];const n={};for(const t of a){const o=t.groupLabel||"-";n[o]||(n[o]=[]),n[o].push(t)}return Object.entries(n).map(([t,o])=>({groupLabel:t,tags:o}))},[a,c]),g=x.useCallback(n=>n.map(t=>{const o=t.label.includes(l.Inactive)||t.label.includes(l.Deleted);return e.jsxRuntimeExports.jsx(T.Tag,{className:"TagBlock__Tag","data-testid":"kibble-tag-block-tag",mr:1,mb:1,label:t.label,onClose:()=>p(t.value),closeButtonDisplay:"always",fontWeight:"normal",color:o?"text.placeholder":"text",size:"md"},t.value)}),[p]);return e.jsxRuntimeExports.jsxs(s.Box,{className:"TagBlock","data-testid":"kibble-tag-block",position:"relative",mb:3,py:2,pl:4,pr:2,bg:"background.subtle",borderRadius:"lg",boxShadow:d?"0 0 0 2px var(--chakra-colors-border-danger)":"",border:"1px",borderColor:"border",overflow:b?"hidden":void 0,children:[e.jsxRuntimeExports.jsxs(s.Flex,{className:"TagBlock__ButtonContainer","data-testid":"kibble-tag-block-button-container",justifyContent:"space-between",children:[e.jsxRuntimeExports.jsxs(s.HStack,{gap:1,minH:10,children:[r&&e.jsxRuntimeExports.jsx(k.WrappedText,{className:"TagBlock__Title",mr:2,fontWeight:"bold",children:r}),e.jsxRuntimeExports.jsx(C.Menu,{"data-testid":"kibble-tag-block-menu",...u,buttonProps:u?.buttonProps||v}),e.jsxRuntimeExports.jsx(j.Button,{className:"TagBlock__Button--ClearAll","data-testid":"kibble-tag-block-clear-all-button",size:"sm",iconName:"arrowCircle",variant:"ghostNeutral",onClick:f,disabled:a.length<=0,children:"Clear All"})]}),h&&e.jsxRuntimeExports.jsx(s.Box,{children:e.jsxRuntimeExports.jsx(j.Button,{className:"TagBlock__Button--Delete","data-testid":"kibble-tag-block-delete-button",iconName:"trashcan",variant:"ghostNeutral",onClick:B,justifySelf:"flex-end"})})]}),!!a.length&&e.jsxRuntimeExports.jsx(s.Flex,{className:"TagBlock__TagContainer","data-testid":"kibble-tag-block-tag-container",mt:2,pb:1,alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:c&&m.length?e.jsxRuntimeExports.jsx(s.Flex,{direction:"column",children:m.map(({groupLabel:n,tags:t})=>e.jsxRuntimeExports.jsxs(s.Box,{mb:2,children:[e.jsxRuntimeExports.jsx(s.Box,{className:"TagBlock__GroupTitle","data-testid":"kibble-tag-block-group-title",children:e.jsxRuntimeExports.jsx(R.WrappedHeading,{size:"xs",pb:2,children:n})}),e.jsxRuntimeExports.jsx(s.Flex,{alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:g(t)})]},n))}):g(a)}),b&&e.jsxRuntimeExports.jsx(E.Spinner,{fullScreen:!0}),d&&e.jsxRuntimeExports.jsx(k.WrappedText,{className:"TagBlock__Error","data-testid":"kibble-tag-block-error",mt:2,size:"xs",as:"p",variant:"danger",children:_})]})};exports.TagBlock=N;exports.TagDisabledState=l;
+//# sourceMappingURL=tagBlock.component-CTHTbwpF.js.map

package/dist/chunks/tagBlock.component-CTHTbwpF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagBlock.component-CTHTbwpF.js","sources":["../../src/patterns/TagBlock/tagBlock.types.ts","../../src/patterns/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n  Inactive = \"Inactive\",\n  Deleted = \"Deleted\",\n}\n\nexport interface TagBlockTag {\n  label: string;\n  value: string;\n  groupLabel?: string;\n}\n","import React, { useCallback } from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport { HStack } from \"@chakra-ui/react/stack\";\nimport { Button } from \"components/Button/button.component\";\nimport { Heading } from \"components/Heading/heading.component\";\nimport { Menu, MenuProps } from \"components/Menu/menu.component\";\nimport { Spinner } from \"components/Spinner/spinner.component\";\nimport { Tag } from \"components/Tag/tag.component\";\nimport { Text } from \"components/Text/text.component\";\nimport { TagBlockTag, TagDisabledState } from \"./tagBlock.types\";\nimport { MenuButtonProps } from \"components/Menu/components/MenuButton/menuButton.components\";\n\ninterface BaseTagBlockProps {\n  displayTagsInGroups?: boolean;\n  errorText?: string;\n  hasError?: boolean;\n  loading?: boolean;\n  menuProps?: MenuProps;\n  onClearAll?: () => void;\n  onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n  tags: TagBlockTag[];\n  title?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n  canBeDeleted?: false;\n  onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n  canBeDeleted: true;\n  onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n  size: \"sm\",\n  variant: \"secondarySubtle\",\n  iconName: \"plus\",\n  text: \"Add\",\n  hideCaret: true,\n};\n\nexport const TagBlock = ({\n  title,\n  menuProps,\n  tags,\n  canBeDeleted = false,\n  onClearAll,\n  onRemoveTag,\n  onDelete,\n  hasError = false,\n  errorText = \"This field contains an error\",\n  displayTagsInGroups,\n  loading = false,\n}: TagBlockProps): React.JSX.Element => {\n  const handleRemoveTag = useCallback(\n    (value: string): void => {\n      if (onRemoveTag) {\n        onRemoveTag(value, tags);\n      }\n    },\n    [onRemoveTag, tags],\n  );\n\n  const tagsByGroup = React.useMemo(() => {\n    if (!displayTagsInGroups) {\n      return [];\n    }\n    const grouped = {} as Record<string, TagBlockTag[]>;\n    for (const tag of tags) {\n      const group = tag.groupLabel || \"-\";\n      if (!grouped[group]) {\n        grouped[group] = [];\n      }\n      grouped[group].push(tag);\n    }\n    return Object.entries(grouped).map(([groupLabel, tags]) => ({\n      groupLabel,\n      tags,\n    }));\n  }, [tags, displayTagsInGroups]);\n\n  const renderTags = useCallback(\n    (tags: TagBlockTag[]) => {\n      return tags.map((tag) => {\n        const isDisabled =\n          tag.label.includes(TagDisabledState.Inactive) ||\n          tag.label.includes(TagDisabledState.Deleted);\n\n        return (\n          <Tag\n            className=\"TagBlock__Tag\"\n            data-testid=\"kibble-tag-block-tag\"\n            mr={1}\n            mb={1}\n            key={tag.value}\n            label={tag.label}\n            onClose={(): void => handleRemoveTag(tag.value)}\n            closeButtonDisplay=\"always\"\n            fontWeight=\"normal\"\n            color={isDisabled ? \"text.placeholder\" : \"text\"}\n            size=\"md\"\n          />\n        );\n      });\n    },\n    [handleRemoveTag],\n  );\n\n  return (\n    <Box\n      className=\"TagBlock\"\n      data-testid=\"kibble-tag-block\"\n      position=\"relative\"\n      mb={3}\n      py={2}\n      pl={4}\n      pr={2}\n      bg=\"background.subtle\"\n      borderRadius=\"lg\"\n      boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : \"\"}\n      border=\"1px\"\n      borderColor=\"border\"\n      overflow={loading ? \"hidden\" : undefined}\n    >\n      <Flex\n        className=\"TagBlock__ButtonContainer\"\n        data-testid=\"kibble-tag-block-button-container\"\n        justifyContent=\"space-between\"\n      >\n        <HStack gap={1} minH={10}>\n          {title && (\n            <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n              {title}\n            </Text>\n          )}\n          <Menu\n            data-testid=\"kibble-tag-block-menu\"\n            {...menuProps}\n            buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n          />\n          <Button\n            className=\"TagBlock__Button--ClearAll\"\n            data-testid=\"kibble-tag-block-clear-all-button\"\n            size=\"sm\"\n            iconName=\"arrowCircle\"\n            variant=\"ghostNeutral\"\n            onClick={onClearAll}\n            disabled={tags.length <= 0}\n          >\n            Clear All\n          </Button>\n        </HStack>\n        {canBeDeleted && (\n          <Box>\n            <Button\n              className=\"TagBlock__Button--Delete\"\n              data-testid=\"kibble-tag-block-delete-button\"\n              iconName=\"trashcan\"\n              variant=\"ghostNeutral\"\n              onClick={onDelete}\n              justifySelf=\"flex-end\"\n            />\n          </Box>\n        )}\n      </Flex>\n      {Boolean(tags.length) && (\n        <Flex\n          className=\"TagBlock__TagContainer\"\n          data-testid=\"kibble-tag-block-tag-container\"\n          mt={2}\n          pb={1}\n          alignContent=\"space-between\"\n          flexWrap=\"wrap\"\n          justifyContent=\"flex-start\"\n          alignItems=\"flex-start\"\n        >\n          {displayTagsInGroups && tagsByGroup.length ? (\n            <Flex direction=\"column\">\n              {tagsByGroup.map(({ groupLabel, tags }) => (\n                <Box key={groupLabel} mb={2}>\n                  <Box\n                    className=\"TagBlock__GroupTitle\"\n                    data-testid=\"kibble-tag-block-group-title\"\n                  >\n                    <Heading size=\"xs\" pb={2}>\n                      {groupLabel}\n                    </Heading>\n                  </Box>\n                  <Flex\n                    alignContent=\"space-between\"\n                    flexWrap=\"wrap\"\n                    justifyContent=\"flex-start\"\n                    alignItems=\"flex-start\"\n                  >\n                    {renderTags(tags)}\n                  </Flex>\n                </Box>\n              ))}\n            </Flex>\n          ) : (\n            renderTags(tags)\n          )}\n        </Flex>\n      )}\n      {loading && <Spinner fullScreen />}\n      {hasError && (\n        <Text\n          className=\"TagBlock__Error\"\n          data-testid=\"kibble-tag-block-error\"\n          mt={2}\n          size=\"xs\"\n          as=\"p\"\n          variant=\"danger\"\n        >\n          {errorText}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":"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"}

package/dist/chunks/tagBlock.component-Cn5fYoot.js

@@ -0,0 +1,185 @@
+import { x as e } from "./vendor-BBfll6i3.js";
+import T, { useCallback as g } from "react";
+import { B as k } from "./button.component-SBirRhyz.js";
+import { W as N } from "./heading.component-B8niLTxz.js";
+import { M as v } from "./menu.component-BRlsabFY.js";
+import { S as w } from "./spinner.component-D5tkelNc.js";
+import { T as W } from "./tag.component-DK64cZSr.js";
+import { W as h } from "./text.component-XYjOAc2s.js";
+import { B as s, F as n, s as y } from "./chakra-BqBkjpvZ.js";
+var d = /* @__PURE__ */ ((o) => (o.Inactive = "Inactive", o.Deleted = "Deleted", o))(d || {});
+const S = {
+  size: "sm",
+  variant: "secondarySubtle",
+  iconName: "plus",
+  text: "Add",
+  hideCaret: !0
+}, E = ({
+  title: o,
+  menuProps: b,
+  tags: l,
+  canBeDeleted: j = !1,
+  onClearAll: B,
+  onRemoveTag: i,
+  onDelete: _,
+  hasError: m = !1,
+  errorText: C = "This field contains an error",
+  displayTagsInGroups: c,
+  loading: u = !1
+}) => {
+  const p = g(
+    (a) => {
+      i && i(a, l);
+    },
+    [i, l]
+  ), x = T.useMemo(() => {
+    if (!c)
+      return [];
+    const a = {};
+    for (const t of l) {
+      const r = t.groupLabel || "-";
+      a[r] || (a[r] = []), a[r].push(t);
+    }
+    return Object.entries(a).map(([t, r]) => ({
+      groupLabel: t,
+      tags: r
+    }));
+  }, [l, c]), f = g(
+    (a) => a.map((t) => {
+      const r = t.label.includes(d.Inactive) || t.label.includes(d.Deleted);
+      return /* @__PURE__ */ e.jsx(
+        W,
+        {
+          className: "TagBlock__Tag",
+          "data-testid": "kibble-tag-block-tag",
+          mr: 1,
+          mb: 1,
+          label: t.label,
+          onClose: () => p(t.value),
+          closeButtonDisplay: "always",
+          fontWeight: "normal",
+          color: r ? "text.placeholder" : "text",
+          size: "md"
+        },
+        t.value
+      );
+    }),
+    [p]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    s,
+    {
+      className: "TagBlock",
+      "data-testid": "kibble-tag-block",
+      position: "relative",
+      mb: 3,
+      py: 2,
+      pl: 4,
+      pr: 2,
+      bg: "background.subtle",
+      borderRadius: "lg",
+      boxShadow: m ? "0 0 0 2px var(--chakra-colors-border-danger)" : "",
+      border: "1px",
+      borderColor: "border",
+      overflow: u ? "hidden" : void 0,
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          n,
+          {
+            className: "TagBlock__ButtonContainer",
+            "data-testid": "kibble-tag-block-button-container",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ e.jsxs(y, { gap: 1, minH: 10, children: [
+                o && /* @__PURE__ */ e.jsx(h, { className: "TagBlock__Title", mr: 2, fontWeight: "bold", children: o }),
+                /* @__PURE__ */ e.jsx(
+                  v,
+                  {
+                    "data-testid": "kibble-tag-block-menu",
+                    ...b,
+                    buttonProps: b?.buttonProps || S
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  k,
+                  {
+                    className: "TagBlock__Button--ClearAll",
+                    "data-testid": "kibble-tag-block-clear-all-button",
+                    size: "sm",
+                    iconName: "arrowCircle",
+                    variant: "ghostNeutral",
+                    onClick: B,
+                    disabled: l.length <= 0,
+                    children: "Clear All"
+                  }
+                )
+              ] }),
+              j && /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsx(
+                k,
+                {
+                  className: "TagBlock__Button--Delete",
+                  "data-testid": "kibble-tag-block-delete-button",
+                  iconName: "trashcan",
+                  variant: "ghostNeutral",
+                  onClick: _,
+                  justifySelf: "flex-end"
+                }
+              ) })
+            ]
+          }
+        ),
+        !!l.length && /* @__PURE__ */ e.jsx(
+          n,
+          {
+            className: "TagBlock__TagContainer",
+            "data-testid": "kibble-tag-block-tag-container",
+            mt: 2,
+            pb: 1,
+            alignContent: "space-between",
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            children: c && x.length ? /* @__PURE__ */ e.jsx(n, { direction: "column", children: x.map(({ groupLabel: a, tags: t }) => /* @__PURE__ */ e.jsxs(s, { mb: 2, children: [
+              /* @__PURE__ */ e.jsx(
+                s,
+                {
+                  className: "TagBlock__GroupTitle",
+                  "data-testid": "kibble-tag-block-group-title",
+                  children: /* @__PURE__ */ e.jsx(N, { size: "xs", pb: 2, children: a })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                n,
+                {
+                  alignContent: "space-between",
+                  flexWrap: "wrap",
+                  justifyContent: "flex-start",
+                  alignItems: "flex-start",
+                  children: f(t)
+                }
+              )
+            ] }, a)) }) : f(l)
+          }
+        ),
+        u && /* @__PURE__ */ e.jsx(w, { fullScreen: !0 }),
+        m && /* @__PURE__ */ e.jsx(
+          h,
+          {
+            className: "TagBlock__Error",
+            "data-testid": "kibble-tag-block-error",
+            mt: 2,
+            size: "xs",
+            as: "p",
+            variant: "danger",
+            children: C
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as T,
+  d as a
+};
+//# sourceMappingURL=tagBlock.component-Cn5fYoot.js.map

package/dist/chunks/tagBlock.component-Cn5fYoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagBlock.component-Cn5fYoot.js","sources":["../../src/patterns/TagBlock/tagBlock.types.ts","../../src/patterns/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n  Inactive = \"Inactive\",\n  Deleted = \"Deleted\",\n}\n\nexport interface TagBlockTag {\n  label: string;\n  value: string;\n  groupLabel?: string;\n}\n","import React, { useCallback } from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport { HStack } from \"@chakra-ui/react/stack\";\nimport { Button } from \"components/Button/button.component\";\nimport { Heading } from \"components/Heading/heading.component\";\nimport { Menu, MenuProps } from \"components/Menu/menu.component\";\nimport { Spinner } from \"components/Spinner/spinner.component\";\nimport { Tag } from \"components/Tag/tag.component\";\nimport { Text } from \"components/Text/text.component\";\nimport { TagBlockTag, TagDisabledState } from \"./tagBlock.types\";\nimport { MenuButtonProps } from \"components/Menu/components/MenuButton/menuButton.components\";\n\ninterface BaseTagBlockProps {\n  displayTagsInGroups?: boolean;\n  errorText?: string;\n  hasError?: boolean;\n  loading?: boolean;\n  menuProps?: MenuProps;\n  onClearAll?: () => void;\n  onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n  tags: TagBlockTag[];\n  title?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n  canBeDeleted?: false;\n  onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n  canBeDeleted: true;\n  onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n  size: \"sm\",\n  variant: \"secondarySubtle\",\n  iconName: \"plus\",\n  text: \"Add\",\n  hideCaret: true,\n};\n\nexport const TagBlock = ({\n  title,\n  menuProps,\n  tags,\n  canBeDeleted = false,\n  onClearAll,\n  onRemoveTag,\n  onDelete,\n  hasError = false,\n  errorText = \"This field contains an error\",\n  displayTagsInGroups,\n  loading = false,\n}: TagBlockProps): React.JSX.Element => {\n  const handleRemoveTag = useCallback(\n    (value: string): void => {\n      if (onRemoveTag) {\n        onRemoveTag(value, tags);\n      }\n    },\n    [onRemoveTag, tags],\n  );\n\n  const tagsByGroup = React.useMemo(() => {\n    if (!displayTagsInGroups) {\n      return [];\n    }\n    const grouped = {} as Record<string, TagBlockTag[]>;\n    for (const tag of tags) {\n      const group = tag.groupLabel || \"-\";\n      if (!grouped[group]) {\n        grouped[group] = [];\n      }\n      grouped[group].push(tag);\n    }\n    return Object.entries(grouped).map(([groupLabel, tags]) => ({\n      groupLabel,\n      tags,\n    }));\n  }, [tags, displayTagsInGroups]);\n\n  const renderTags = useCallback(\n    (tags: TagBlockTag[]) => {\n      return tags.map((tag) => {\n        const isDisabled =\n          tag.label.includes(TagDisabledState.Inactive) ||\n          tag.label.includes(TagDisabledState.Deleted);\n\n        return (\n          <Tag\n            className=\"TagBlock__Tag\"\n            data-testid=\"kibble-tag-block-tag\"\n            mr={1}\n            mb={1}\n            key={tag.value}\n            label={tag.label}\n            onClose={(): void => handleRemoveTag(tag.value)}\n            closeButtonDisplay=\"always\"\n            fontWeight=\"normal\"\n            color={isDisabled ? \"text.placeholder\" : \"text\"}\n            size=\"md\"\n          />\n        );\n      });\n    },\n    [handleRemoveTag],\n  );\n\n  return (\n    <Box\n      className=\"TagBlock\"\n      data-testid=\"kibble-tag-block\"\n      position=\"relative\"\n      mb={3}\n      py={2}\n      pl={4}\n      pr={2}\n      bg=\"background.subtle\"\n      borderRadius=\"lg\"\n      boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : \"\"}\n      border=\"1px\"\n      borderColor=\"border\"\n      overflow={loading ? \"hidden\" : undefined}\n    >\n      <Flex\n        className=\"TagBlock__ButtonContainer\"\n        data-testid=\"kibble-tag-block-button-container\"\n        justifyContent=\"space-between\"\n      >\n        <HStack gap={1} minH={10}>\n          {title && (\n            <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n              {title}\n            </Text>\n          )}\n          <Menu\n            data-testid=\"kibble-tag-block-menu\"\n            {...menuProps}\n            buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n          />\n          <Button\n            className=\"TagBlock__Button--ClearAll\"\n            data-testid=\"kibble-tag-block-clear-all-button\"\n            size=\"sm\"\n            iconName=\"arrowCircle\"\n            variant=\"ghostNeutral\"\n            onClick={onClearAll}\n            disabled={tags.length <= 0}\n          >\n            Clear All\n          </Button>\n        </HStack>\n        {canBeDeleted && (\n          <Box>\n            <Button\n              className=\"TagBlock__Button--Delete\"\n              data-testid=\"kibble-tag-block-delete-button\"\n              iconName=\"trashcan\"\n              variant=\"ghostNeutral\"\n              onClick={onDelete}\n              justifySelf=\"flex-end\"\n            />\n          </Box>\n        )}\n      </Flex>\n      {Boolean(tags.length) && (\n        <Flex\n          className=\"TagBlock__TagContainer\"\n          data-testid=\"kibble-tag-block-tag-container\"\n          mt={2}\n          pb={1}\n          alignContent=\"space-between\"\n          flexWrap=\"wrap\"\n          justifyContent=\"flex-start\"\n          alignItems=\"flex-start\"\n        >\n          {displayTagsInGroups && tagsByGroup.length ? (\n            <Flex direction=\"column\">\n              {tagsByGroup.map(({ groupLabel, tags }) => (\n                <Box key={groupLabel} mb={2}>\n                  <Box\n                    className=\"TagBlock__GroupTitle\"\n                    data-testid=\"kibble-tag-block-group-title\"\n                  >\n                    <Heading size=\"xs\" pb={2}>\n                      {groupLabel}\n                    </Heading>\n                  </Box>\n                  <Flex\n                    alignContent=\"space-between\"\n                    flexWrap=\"wrap\"\n                    justifyContent=\"flex-start\"\n                    alignItems=\"flex-start\"\n                  >\n                    {renderTags(tags)}\n                  </Flex>\n                </Box>\n              ))}\n            </Flex>\n          ) : (\n            renderTags(tags)\n          )}\n        </Flex>\n      )}\n      {loading && <Spinner fullScreen />}\n      {hasError && (\n        <Text\n          className=\"TagBlock__Error\"\n          data-testid=\"kibble-tag-block-error\"\n          mt={2}\n          size=\"xs\"\n          as=\"p\"\n          variant=\"danger\"\n        >\n          {errorText}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":";;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,UAAU,WAFAA,IAAAA,KAAA,CAAA,CAAA;ACqCZ,MAAMC,IAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,GAEaC,IAAW,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,qBAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,MAAwC;AACtC,QAAMC,IAAkBC;AAAA,IACtB,CAACC,MAAwB;AACvB,MAAIR,KACFA,EAAYQ,GAAOX,CAAI;AAAA,IAE3B;AAAA,IACA,CAACG,GAAaH,CAAI;AAAA,EACpB,GAEMY,IAAcC,EAAM,QAAQ,MAAM;AACtC,QAAI,CAACN;AACH,aAAO,CAAC;AAEV,UAAMO,IAAU,CAAC;AACjB,eAAWC,KAAOf,GAAM;AAChB,YAAAgB,IAAQD,EAAI,cAAc;AAC5B,MAACD,EAAQE,CAAK,MACRF,EAAAE,CAAK,IAAI,CAAC,IAEZF,EAAAE,CAAK,EAAE,KAAKD,CAAG;AAAA,IAAA;AAElB,WAAA,OAAO,QAAQD,CAAO,EAAE,IAAI,CAAC,CAACG,GAAYjB,CAAI,OAAO;AAAA,MAC1D,YAAAiB;AAAA,MACA,MAAAjB;AAAAA,IAAA,EACA;AAAA,EAAA,GACD,CAACA,GAAMO,CAAmB,CAAC,GAExBW,IAAaR;AAAA,IACjB,CAACV,MACQA,EAAK,IAAI,CAACe,MAAQ;AACjB,YAAAI,IACJJ,EAAI,MAAM,SAASpB,EAAiB,QAAQ,KAC5CoB,EAAI,MAAM,SAASpB,EAAiB,OAAO;AAG3C,aAAAyB,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,IAAI;AAAA,UACJ,IAAI;AAAA,UAEJ,OAAON,EAAI;AAAA,UACX,SAAS,MAAYN,EAAgBM,EAAI,KAAK;AAAA,UAC9C,oBAAmB;AAAA,UACnB,YAAW;AAAA,UACX,OAAOI,IAAa,qBAAqB;AAAA,UACzC,MAAK;AAAA,QAAA;AAAA,QANAJ,EAAI;AAAA,MAOX;AAAA,IAAA,CAEH;AAAA,IAEH,CAACN,CAAe;AAAA,EAClB;AAGE,SAAAa,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,cAAa;AAAA,MACb,WAAWlB,IAAW,iDAAiD;AAAA,MACvE,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,UAAUG,IAAU,WAAW;AAAA,MAE/B,UAAA;AAAA,QAAAc,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,gBAAe;AAAA,YAEf,UAAA;AAAA,cAAAF,gBAAAA,EAAA,KAACG,GAAO,EAAA,KAAK,GAAG,MAAM,IACnB,UAAA;AAAA,gBACC3B,KAAAsB,gBAAAA,EAAA,IAACM,KAAK,WAAU,mBAAkB,IAAI,GAAG,YAAW,QACjD,UACH5B,EAAA,CAAA;AAAA,gBAEFsB,gBAAAA,EAAA;AAAA,kBAACO;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACX,GAAG5B;AAAA,oBACJ,aAAaA,GAAW,eAAeH;AAAA,kBAAA;AAAA,gBACzC;AAAA,gBACAwB,gBAAAA,EAAA;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,eAAY;AAAA,oBACZ,MAAK;AAAA,oBACL,UAAS;AAAA,oBACT,SAAQ;AAAA,oBACR,SAAS1B;AAAA,oBACT,UAAUF,EAAK,UAAU;AAAA,oBAC1B,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAED,GACF;AAAA,cACCC,2BACEsB,GACC,EAAA,UAAAH,gBAAAA,EAAA;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,UAAS;AAAA,kBACT,SAAQ;AAAA,kBACR,SAASxB;AAAA,kBACT,aAAY;AAAA,gBAAA;AAAA,cAAA,EAEhB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,QACC,EAAQJ,EAAK,UACZoB,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,cAAa;AAAA,YACb,UAAS;AAAA,YACT,gBAAe;AAAA,YACf,YAAW;AAAA,YAEV,eAAuBZ,EAAY,+BACjCY,GAAK,EAAA,WAAU,UACb,UAAYZ,EAAA,IAAI,CAAC,EAAE,YAAAK,GAAY,MAAAjB,QAC7BsB,gBAAAA,OAAAC,GAAA,EAAqB,IAAI,GACxB,UAAA;AAAA,cAAAH,gBAAAA,EAAA;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBAEZ,gCAACM,GAAQ,EAAA,MAAK,MAAK,IAAI,GACpB,UACHZ,EAAA,CAAA;AAAA,gBAAA;AAAA,cACF;AAAA,cACAG,gBAAAA,EAAA;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,cAAa;AAAA,kBACb,UAAS;AAAA,kBACT,gBAAe;AAAA,kBACf,YAAW;AAAA,kBAEV,YAAWxB,CAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,GAhBQiB,CAiBV,CACD,GACH,IAEAC,EAAWlB,CAAI;AAAA,UAAA;AAAA,QAEnB;AAAA,QAEDQ,KAAWY,gBAAAA,EAAAA,IAACU,GAAQ,EAAA,YAAU,GAAC,CAAA;AAAA,QAC/BzB,KACCe,gBAAAA,EAAA;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,IAAG;AAAA,YACH,SAAQ;AAAA,YAEP,UAAApB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/chunks/text.component-CBa_saMP.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("./vendor-D-x6W6ez.js"),a=require("./withTruncation-BskZBBVs.js"),i=require("./chakra-DmF8Cxqs.js"),t=({children:e,...r})=>s.jsxRuntimeExports.jsx(i.Text,{className:"Text","data-testid":"kibble-text",...r,children:e});t.displayName="Text";const n=a.withTruncation(t);exports.WrappedText=n;
+//# sourceMappingURL=text.component-CBa_saMP.js.map

package/dist/chunks/text.component-CBa_saMP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.component-CBa_saMP.js","sources":["../../src/components/Text/text.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Text as CText,\n  TextProps as CTextProps,\n} from \"@chakra-ui/react/typography\";\nimport { withTruncation, WithTruncationProps } from \"hocs/withTruncation\";\nimport { TextSize } from \"./text.types\";\nimport { TypographyVariant } from \"shared/types/typography\";\n\nexport interface KTextProps extends WithTruncationProps {\n  size?: TextSize;\n  variant?: TypographyVariant;\n}\n\nexport type TextProps = KTextProps & CTextProps;\n\nconst Text = ({ children, ...rest }: TextProps): React.JSX.Element => {\n  return (\n    <CText className=\"Text\" data-testid=\"kibble-text\" {...rest}>\n      {children}\n    </CText>\n  );\n};\n\nText.displayName = \"Text\";\n\nconst WrappedText = withTruncation(Text);\n\nexport { WrappedText as Text };\n"],"names":["Text","children","rest","jsx","CText","WrappedText","withTruncation"],"mappings":"iIAgBMA,EAAO,CAAC,CAAE,SAAAC,EAAU,GAAGC,KAEzBC,EAAA,kBAAA,IAACC,QAAM,UAAU,OAAO,cAAY,cAAe,GAAGF,EACnD,SAAAD,EACH,EAIJD,EAAK,YAAc,OAEb,MAAAK,EAAcC,iBAAeN,CAAI"}

package/dist/chunks/text.component-XYjOAc2s.js

@@ -0,0 +1,10 @@
+import { x as a } from "./vendor-BBfll6i3.js";
+import { w as r } from "./withTruncation-C2xFKhgB.js";
+import { k as o } from "./chakra-BqBkjpvZ.js";
+const t = ({ children: e, ...s }) => /* @__PURE__ */ a.jsx(o, { className: "Text", "data-testid": "kibble-text", ...s, children: e });
+t.displayName = "Text";
+const p = r(t);
+export {
+  p as W
+};
+//# sourceMappingURL=text.component-XYjOAc2s.js.map

package/dist/chunks/text.component-XYjOAc2s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.component-XYjOAc2s.js","sources":["../../src/components/Text/text.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Text as CText,\n  TextProps as CTextProps,\n} from \"@chakra-ui/react/typography\";\nimport { withTruncation, WithTruncationProps } from \"hocs/withTruncation\";\nimport { TextSize } from \"./text.types\";\nimport { TypographyVariant } from \"shared/types/typography\";\n\nexport interface KTextProps extends WithTruncationProps {\n  size?: TextSize;\n  variant?: TypographyVariant;\n}\n\nexport type TextProps = KTextProps & CTextProps;\n\nconst Text = ({ children, ...rest }: TextProps): React.JSX.Element => {\n  return (\n    <CText className=\"Text\" data-testid=\"kibble-text\" {...rest}>\n      {children}\n    </CText>\n  );\n};\n\nText.displayName = \"Text\";\n\nconst WrappedText = withTruncation(Text);\n\nexport { WrappedText as Text };\n"],"names":["Text","children","rest","jsx","CText","WrappedText","withTruncation"],"mappings":";;;AAgBA,MAAMA,IAAO,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAEzBC,gBAAAA,EAAA,IAACC,KAAM,WAAU,QAAO,eAAY,eAAe,GAAGF,GACnD,UAAAD,GACH;AAIJD,EAAK,cAAc;AAEb,MAAAK,IAAcC,EAAeN,CAAI;"}

package/dist/chunks/text.records-BK_JBYsT.js

@@ -0,0 +1,16 @@
+const x = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl"
+];
+export {
+  x as t
+};
+//# sourceMappingURL=text.records-BK_JBYsT.js.map

package/dist/chunks/text.records-BK_JBYsT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.records-BK_JBYsT.js","sources":["../../src/components/Text/text.records.ts"],"sourcesContent":["import { TextSize } from \"./text.types\";\n\nexport const textSizes: TextSize[] = [\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"2xl\",\n  \"3xl\",\n  \"4xl\",\n  \"5xl\",\n  \"6xl\",\n];\n"],"names":["textSizes"],"mappings":"AAEO,MAAMA,IAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/chunks/text.records-CIL3bbY0.js

@@ -0,0 +1,2 @@
+"use strict";const x=["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl"];exports.textSizes=x;
+//# sourceMappingURL=text.records-CIL3bbY0.js.map

package/dist/chunks/text.records-CIL3bbY0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.records-CIL3bbY0.js","sources":["../../src/components/Text/text.records.ts"],"sourcesContent":["import { TextSize } from \"./text.types\";\n\nexport const textSizes: TextSize[] = [\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"2xl\",\n  \"3xl\",\n  \"4xl\",\n  \"5xl\",\n  \"6xl\",\n];\n"],"names":["textSizes"],"mappings":"aAEO,MAAMA,EAAwB,CACnC,KACA,KACA,KACA,KACA,KACA,MACA,MACA,MACA,MACA,KACF"}

package/dist/chunks/textInput.component-B4drMRyW.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("./vendor-D-x6W6ez.js"),p=require("react"),f=require("./withFormControl-DQbPM8m9.js"),E=require("./button.component-rY01WurX.js"),R=require("./characterCounter.component-BXxyn_IB.js"),o=require("./chakra-DmF8Cxqs.js"),c={sm:"xs",md:"sm",lg:"md"},T=f.withFormControl(({charLimit:n=void 0,clearable:r=!1,disabled:s=!1,inputRef:x,invalid:d,leftAddon:m,leftElement:h,onClear:i,onContrast:j,rightAddon:I,rightElement:a,size:u="md",value:e,...C})=>{const _=()=>{i&&i(e||"")};r&&e&&!s&&(a=t.jsxRuntimeExports.jsx(E.Button,{className:"TextInput__ClearButton","data-testid":"kibble-text-input-clear-button",size:c[u],variant:"ghostNeutral",onClick:_,iconName:"close"}));const b=p.useMemo(()=>e?.toString()?.length||0,[e]);return t.jsxRuntimeExports.jsxs(o.Box,{className:"TextInput__Wrapper",position:"relative",w:"100%",children:[t.jsxRuntimeExports.jsx(o.InputGroup,{className:"TextInput__InputGroup","data-testid":"kibble-text-input-group",startElement:h,startElementProps:{color:"inherit",_groupDisabled:{opacity:.6}},endElement:a,endElementProps:{color:"inherit",paddingInline:1.5,_groupDisabled:{opacity:.6}},startAddon:m,endAddon:I,children:t.jsxRuntimeExports.jsx(o.Input,{"data-testid":"kibble-text-input",className:"TextInput",ref:x,value:e,size:u,disabled:s,...d&&{"aria-invalid":!0},variant:j?"onContrast":"default",...C})}),!!n&&t.jsxRuntimeExports.jsx(R.CharacterCounter,{withLimit:!0,limit:n,currentCount:b})]})}),l=p.forwardRef((n,r)=>t.jsxRuntimeExports.jsx(T,{inputRef:r,...n}));l.displayName="TextInput";exports.WrappedTextInput=l;exports.closeButtonSizeMap=c;
+//# sourceMappingURL=textInput.component-B4drMRyW.js.map

package/dist/chunks/textInput.component-B4drMRyW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textInput.component-B4drMRyW.js","sources":["../../src/components/TextInput/textInput.records.ts","../../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["import { ButtonSize } from \"components/Button/button.types\";\nimport { FormControlSize } from \"hocs/withFormControl/withFormControl.types\";\n\nexport const closeButtonSizeMap: Record<FormControlSize, ButtonSize> = {\n  sm: \"xs\",\n  md: \"sm\",\n  lg: \"md\",\n};\n","import React, { ForwardedRef, useMemo } from \"react\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport {\n  withFormControl,\n  WithFormControlProps,\n} from \"hocs/withFormControl/withFormControl\";\nimport {\n  Input as CInput,\n  InputProps as CInputProps,\n  InputGroup,\n} from \"@chakra-ui/react/input\";\nimport { FormControlSize } from \"hocs/withFormControl/withFormControl.types\";\nimport { Button } from \"components/Button/button.component\";\nimport { CharacterCounter } from \"components/CharacterCounter/characterCounter.component\";\nimport { closeButtonSizeMap } from \"./textInput.records\";\n\nexport interface TextInputBaseProps extends WithFormControlProps {\n  charLimit?: number;\n  inputRef?: ForwardedRef<HTMLInputElement>;\n  onContrast?: boolean;\n  leftAddon?: React.ReactNode;\n  leftElement?: React.ReactNode;\n  rightAddon?: React.ReactNode;\n  rightElement?: React.ReactNode;\n  size?: FormControlSize;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n  clearable?: never;\n  onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n  clearable?: boolean;\n  onClear?: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = withFormControl(\n  ({\n    charLimit = undefined,\n    clearable = false,\n    disabled = false,\n    inputRef,\n    invalid,\n    leftAddon,\n    leftElement,\n    onClear,\n    onContrast,\n    rightAddon,\n    rightElement,\n    size = \"md\",\n    value,\n    ...rest\n  }: TextInputProps): React.JSX.Element => {\n    const handleClear = (): void => {\n      if (onClear) {\n        onClear(value || \"\");\n      }\n    };\n\n    if (clearable && !!value && !disabled) {\n      rightElement = (\n        <Button\n          className=\"TextInput__ClearButton\"\n          data-testid=\"kibble-text-input-clear-button\"\n          size={closeButtonSizeMap[size as FormControlSize]}\n          variant=\"ghostNeutral\"\n          onClick={handleClear}\n          iconName=\"close\"\n        />\n      );\n    }\n\n    const currentCharCount = useMemo(\n      () => value?.toString()?.length || 0,\n      [value],\n    );\n\n    return (\n      <Box className=\"TextInput__Wrapper\" position=\"relative\" w=\"100%\">\n        <InputGroup\n          className=\"TextInput__InputGroup\"\n          data-testid=\"kibble-text-input-group\"\n          startElement={leftElement}\n          startElementProps={{\n            color: \"inherit\",\n            _groupDisabled: { opacity: 0.6 },\n          }}\n          endElement={rightElement}\n          endElementProps={{\n            color: \"inherit\",\n            paddingInline: 1.5,\n            _groupDisabled: { opacity: 0.6 },\n          }}\n          startAddon={leftAddon}\n          endAddon={rightAddon}\n        >\n          <CInput\n            data-testid=\"kibble-text-input\"\n            className=\"TextInput\"\n            ref={inputRef}\n            value={value}\n            size={size}\n            disabled={disabled}\n            {...(invalid && { \"aria-invalid\": true })}\n            variant={onContrast ? \"onContrast\" : \"default\"}\n            {...rest}\n          />\n        </InputGroup>\n        {!!charLimit && (\n          <CharacterCounter\n            withLimit={true}\n            limit={charLimit}\n            currentCount={currentCharCount}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nconst WrappedTextInput = React.forwardRef(\n  (props: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (\n    <TextInput inputRef={ref} {...props} />\n  ),\n);\n\nWrappedTextInput.displayName = \"TextInput\";\n\nexport { WrappedTextInput as TextInput };\n"],"names":["closeButtonSizeMap","TextInput","withFormControl","charLimit","clearable","disabled","inputRef","invalid","leftAddon","leftElement","onClear","onContrast","rightAddon","rightElement","size","value","rest","handleClear","jsx","Button","currentCharCount","useMemo","Box","InputGroup","CInput","CharacterCounter","WrappedTextInput","React","props","ref"],"mappings":"uPAGaA,EAA0D,CACrE,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,ECkCMC,EAAYC,EAAA,gBAChB,CAAC,CACC,UAAAC,EAAY,OACZ,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,GAAGC,CAAA,IACoC,CACvC,MAAMC,EAAc,IAAY,CAC1BP,GACFA,EAAQK,GAAS,EAAE,CAEvB,EAEIX,GAAeW,GAAS,CAACV,IAEzBQ,EAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACC,UAAU,yBACV,cAAY,iCACZ,KAAMnB,EAAmBc,CAAuB,EAChD,QAAQ,eACR,QAASG,EACT,SAAS,OAAA,CACX,GAIJ,MAAMG,EAAmBC,EAAA,QACvB,IAAMN,GAAO,YAAY,QAAU,EACnC,CAACA,CAAK,CACR,EAEA,gCACGO,MAAI,CAAA,UAAU,qBAAqB,SAAS,WAAW,EAAE,OACxD,SAAA,CAAAJ,EAAA,kBAAA,IAACK,EAAA,WAAA,CACC,UAAU,wBACV,cAAY,0BACZ,aAAcd,EACd,kBAAmB,CACjB,MAAO,UACP,eAAgB,CAAE,QAAS,EAAI,CACjC,EACA,WAAYI,EACZ,gBAAiB,CACf,MAAO,UACP,cAAe,IACf,eAAgB,CAAE,QAAS,EAAI,CACjC,EACA,WAAYL,EACZ,SAAUI,EAEV,SAAAM,EAAA,kBAAA,IAACM,EAAA,MAAA,CACC,cAAY,oBACZ,UAAU,YACV,IAAKlB,EACL,MAAAS,EACA,KAAAD,EACA,SAAAT,EACC,GAAIE,GAAW,CAAE,eAAgB,EAAK,EACvC,QAASI,EAAa,aAAe,UACpC,GAAGK,CAAA,CAAA,CACN,CACF,EACC,CAAC,CAACb,GACDe,EAAA,kBAAA,IAACO,EAAA,iBAAA,CACC,UAAW,GACX,MAAOtB,EACP,aAAciB,CAAA,CAAA,CAChB,EAEJ,CAAA,CAGN,EAEMM,EAAmBC,EAAM,WAC7B,CAACC,EAAuBC,IACtBX,wBAACjB,GAAU,SAAU4B,EAAM,GAAGD,CAAO,CAAA,CAEzC,EAEAF,EAAiB,YAAc"}

package/dist/chunks/textInput.component-CwQ7nucZ.js

@@ -0,0 +1,99 @@
+import { x as t } from "./vendor-BBfll6i3.js";
+import C, { useMemo as _ } from "react";
+import { w as h } from "./withFormControl-BZ7odEAw.js";
+import { B as b } from "./button.component-SBirRhyz.js";
+import { C as g } from "./characterCounter.component-DhiMcztY.js";
+import { B as j, K as N, M as T } from "./chakra-BqBkjpvZ.js";
+const B = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+}, w = h(
+  ({
+    charLimit: o = void 0,
+    clearable: r = !1,
+    disabled: n = !1,
+    inputRef: p,
+    invalid: u,
+    leftAddon: l,
+    leftElement: m,
+    onClear: a,
+    onContrast: d,
+    rightAddon: c,
+    rightElement: s,
+    size: i = "md",
+    value: e,
+    ...x
+  }) => {
+    const f = () => {
+      a && a(e || "");
+    };
+    r && e && !n && (s = /* @__PURE__ */ t.jsx(
+      b,
+      {
+        className: "TextInput__ClearButton",
+        "data-testid": "kibble-text-input-clear-button",
+        size: B[i],
+        variant: "ghostNeutral",
+        onClick: f,
+        iconName: "close"
+      }
+    ));
+    const I = _(
+      () => e?.toString()?.length || 0,
+      [e]
+    );
+    return /* @__PURE__ */ t.jsxs(j, { className: "TextInput__Wrapper", position: "relative", w: "100%", children: [
+      /* @__PURE__ */ t.jsx(
+        N,
+        {
+          className: "TextInput__InputGroup",
+          "data-testid": "kibble-text-input-group",
+          startElement: m,
+          startElementProps: {
+            color: "inherit",
+            _groupDisabled: { opacity: 0.6 }
+          },
+          endElement: s,
+          endElementProps: {
+            color: "inherit",
+            paddingInline: 1.5,
+            _groupDisabled: { opacity: 0.6 }
+          },
+          startAddon: l,
+          endAddon: c,
+          children: /* @__PURE__ */ t.jsx(
+            T,
+            {
+              "data-testid": "kibble-text-input",
+              className: "TextInput",
+              ref: p,
+              value: e,
+              size: i,
+              disabled: n,
+              ...u && { "aria-invalid": !0 },
+              variant: d ? "onContrast" : "default",
+              ...x
+            }
+          )
+        }
+      ),
+      !!o && /* @__PURE__ */ t.jsx(
+        g,
+        {
+          withLimit: !0,
+          limit: o,
+          currentCount: I
+        }
+      )
+    ] });
+  }
+), k = C.forwardRef(
+  (o, r) => /* @__PURE__ */ t.jsx(w, { inputRef: r, ...o })
+);
+k.displayName = "TextInput";
+export {
+  k as W,
+  B as c
+};
+//# sourceMappingURL=textInput.component-CwQ7nucZ.js.map