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

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

@@ -0,0 +1,84 @@
+import { j as e } from "./jsx-runtime-C5mzlN2N.js";
+import { forwardRef as x } from "react";
+import { c as T } from "./create-slot-recipe-context-D_FXDJGp.js";
+import { C as b } from "./icons-CoSqruIn.js";
+const {
+  withProvider: f,
+  withContext: r
+} = T({ key: "tag" }), h = f(
+  "div",
+  "root"
+), j = r(
+  "span",
+  "label"
+), v = r("button", "closeTrigger", { defaultProps: { children: /* @__PURE__ */ e.jsx(b, {}) } });
+r("span", "startElement");
+r(
+  "span",
+  "endElement"
+);
+const n = {
+  sm: 0,
+  md: 0.5,
+  lg: 1
+}, C = x(
+  ({
+    leftElement: s,
+    rightElement: g,
+    onClose: i,
+    label: d,
+    closeButtonDisplay: a = "never",
+    size: t = "md",
+    variant: c = "default",
+    ["data-testid"]: o = "kibble-tag",
+    ...m
+  }, p) => {
+    const l = !!i && a !== "never";
+    return /* @__PURE__ */ e.jsxs(
+      h,
+      {
+        className: "Tag group",
+        "data-testid": o,
+        ref: p,
+        variant: c,
+        size: t,
+        closeButtonDisplay: a,
+        ...l && a === "always" && {
+          pr: n[t]
+        },
+        ...m,
+        children: [
+          s,
+          /* @__PURE__ */ e.jsx(
+            j,
+            {
+              className: "Tag__Label",
+              "data-testid": `${o}-label`,
+              overflow: "hidden",
+              ...!!s && { ml: 1 },
+              ...!!g && { mr: 1 },
+              children: d
+            }
+          ),
+          g,
+          l && /* @__PURE__ */ e.jsx(
+            v,
+            {
+              className: "Tag__CloseTrigger",
+              "data-testid": `${o}-close-trigger`,
+              onClick: i,
+              ...a === "hover" && {
+                px: n[t]
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+C.displayName = "Tag";
+export {
+  C as T
+};
+//# sourceMappingURL=tag.component-B7V76XfM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component-B7V76XfM.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/tag/tag.js","../../src/components/Tag/tag.records.ts","../../src/components/Tag/tag.component.tsx"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { CloseIcon } from '../icons.js';\n\nconst {\n  withProvider,\n  withContext,\n  useStyles: useTagStyles,\n  PropsProvider\n} = createSlotRecipeContext({ key: \"tag\" });\nconst TagRoot = withProvider(\n  \"div\",\n  \"root\"\n);\nconst TagRootPropsProvider = PropsProvider;\nconst TagLabel = withContext(\n  \"span\",\n  \"label\"\n);\nconst TagCloseTrigger = withContext(\"button\", \"closeTrigger\", { defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, {}) } });\nconst TagStartElement = withContext(\"span\", \"startElement\");\nconst TagEndElement = withContext(\n  \"span\",\n  \"endElement\"\n);\n\nexport { TagCloseTrigger, TagEndElement, TagLabel, TagRoot, TagRootPropsProvider, TagStartElement, useTagStyles };\n","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  /** Left element for the tag, typically used for icons. */\n  leftElement?: React.ReactNode;\n  /** Right element for the tag, typically used for icons. */\n  rightElement?: React.ReactNode;\n  /** The text content of the tag. */\n  label: string;\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay?: CloseButtonDisplay;\n  /**\n   * The size of the tag.\n   * @default md\n   */\n  size?: TagSize;\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to 'always' or 'hover'. */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The color variant of the tag. This determines the background and text color.\n   * @default default\n   */\n  variant?: Status;\n  /**\n   * Data test id for the tag.\n   * @default kibble-tag\n   */\n  'data-testid'?: string;\n}\n\ninterface ClosableTagProps extends BaseTagProps {\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay: 'always' | 'hover';\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\ninterface NonClosableTagProps extends BaseTagProps {\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay?: 'never';\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */\n  onClose?: never;\n}\n\nexport type TagProps = ClosableTagProps | NonClosableTagProps;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      leftElement,\n      rightElement,\n      onClose,\n      label,\n      closeButtonDisplay = 'never',\n      size = 'md',\n      variant = 'default',\n      ['data-testid']: dataTestId = 'kibble-tag',\n      ...rest\n    },\n    ref,\n  ): React.JSX.Element => {\n    const closable = !!onClose && closeButtonDisplay !== 'never';\n\n    return (\n      <CTag.Root\n        className=\"Tag group\"\n        data-testid={dataTestId}\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={`${dataTestId}-label`}\n          overflow=\"hidden\"\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={`${dataTestId}-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":["withProvider","withContext","createSlotRecipeContext","TagRoot","TagLabel","TagCloseTrigger","jsx","CloseIcon","tagPaddingBySize","Tag","forwardRef","leftElement","rightElement","onClose","label","closeButtonDisplay","size","variant","dataTestId","rest","ref","closable","jsxs","CTag.Root","CTag.Label","CTag.CloseTrigger"],"mappings":";;;;AAMA,MAAM;AAAA,EACJ,cAAAA;AAAA,EACA,aAAAC;AAGF,IAAIC,EAAwB,EAAE,KAAK,MAAK,CAAE,GACpCC,IAAUH;AAAA,EACd;AAAA,EACA;AACF,GAEMI,IAAWH;AAAA,EACf;AAAA,EACA;AACF,GACMI,IAAkBJ,EAAY,UAAU,gBAAgB,EAAE,cAAc,EAAE,UAA0BK,gBAAAA,MAAIC,GAAW,CAAE,CAAA,EAAG,EAAA,CAAE;AACxGN,EAAY,QAAQ,cAAc;AACpCA;AAAA,EACpB;AAAA,EACA;AACF;ACxBO,MAAMO,IAA4C;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCqDaC,IAAMC;AAAA,EACjB,CACE;AAAA,IACE,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,CAAC,gBAAgBC,IAAa;AAAA,IAC9B,GAAGC;AAAA,KAELC,MACsB;AACtB,UAAMC,IAAW,CAAC,CAACR,KAAWE,MAAuB;AAGnD,WAAAO,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAaL;AAAA,QACb,KAAAE;AAAA,QACA,SAAAH;AAAA,QACA,MAAAD;AAAA,QACA,oBAAAD;AAAA,QACC,GAAIM,KACHN,MAAuB,YAAY;AAAA,UACjC,IAAIP,EAAiBQ,CAAI;AAAA,QAC3B;AAAA,QACD,GAAGG;AAAA,QAEH,UAAA;AAAA,UAAAR;AAAA,UACDL,gBAAAA,EAAA;AAAA,YAACkB;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAa,GAAGN,CAAU;AAAA,cAC1B,UAAS;AAAA,cACR,GAAI,CAAC,CAACP,KAAe,EAAE,IAAI,EAAE;AAAA,cAC7B,GAAI,CAAC,CAACC,KAAgB,EAAE,IAAI,EAAE;AAAA,cAE9B,UAAAE;AAAA,YAAA;AAAA,UACH;AAAA,UACCF;AAAA,UACAS,KACCf,gBAAAA,EAAA;AAAA,YAACmB;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAa,GAAGP,CAAU;AAAA,cAC1B,SAASL;AAAA,cACR,GAAIE,MAAuB,WAAW;AAAA,gBACrC,IAAIP,EAAiBQ,CAAI;AAAA,cAAA;AAAA,YAC3B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEAP,EAAI,cAAc;","x_google_ignoreList":[0]}

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

@@ -0,0 +1,2 @@
+"use strict";const t=require("./jsx-runtime-BjDatQAs.js"),p=require("react"),R=require("./create-slot-recipe-context-HXE1VazG.js"),T=require("./icons-B6Nwr9di.js"),{withProvider:j,withContext:r}=R.createSlotRecipeContext({key:"tag"}),b=j("div","root"),h=r("span","label"),v=r("button","closeTrigger",{defaultProps:{children:t.jsxRuntimeExports.jsx(T.CloseIcon,{})}});r("span","startElement");r("span","endElement");const g={sm:0,md:.5,lg:1},l=p.forwardRef(({leftElement:o,rightElement:n,onClose:i,label:d,closeButtonDisplay:e="never",size:s="md",variant:x="default",["data-testid"]:a="kibble-tag",...m},u)=>{const c=!!i&&e!=="never";return t.jsxRuntimeExports.jsxs(b,{className:"Tag group","data-testid":a,ref:u,variant:x,size:s,closeButtonDisplay:e,...c&&e==="always"&&{pr:g[s]},...m,children:[o,t.jsxRuntimeExports.jsx(h,{className:"Tag__Label","data-testid":`${a}-label`,overflow:"hidden",...!!o&&{ml:1},...!!n&&{mr:1},children:d}),n,c&&t.jsxRuntimeExports.jsx(v,{className:"Tag__CloseTrigger","data-testid":`${a}-close-trigger`,onClick:i,...e==="hover"&&{px:g[s]}})]})});l.displayName="Tag";exports.Tag=l;
+//# sourceMappingURL=tag.component-C98Wf07v.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component-C98Wf07v.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/tag/tag.js","../../src/components/Tag/tag.records.ts","../../src/components/Tag/tag.component.tsx"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { CloseIcon } from '../icons.js';\n\nconst {\n  withProvider,\n  withContext,\n  useStyles: useTagStyles,\n  PropsProvider\n} = createSlotRecipeContext({ key: \"tag\" });\nconst TagRoot = withProvider(\n  \"div\",\n  \"root\"\n);\nconst TagRootPropsProvider = PropsProvider;\nconst TagLabel = withContext(\n  \"span\",\n  \"label\"\n);\nconst TagCloseTrigger = withContext(\"button\", \"closeTrigger\", { defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, {}) } });\nconst TagStartElement = withContext(\"span\", \"startElement\");\nconst TagEndElement = withContext(\n  \"span\",\n  \"endElement\"\n);\n\nexport { TagCloseTrigger, TagEndElement, TagLabel, TagRoot, TagRootPropsProvider, TagStartElement, useTagStyles };\n","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  /** Left element for the tag, typically used for icons. */\n  leftElement?: React.ReactNode;\n  /** Right element for the tag, typically used for icons. */\n  rightElement?: React.ReactNode;\n  /** The text content of the tag. */\n  label: string;\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay?: CloseButtonDisplay;\n  /**\n   * The size of the tag.\n   * @default md\n   */\n  size?: TagSize;\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to 'always' or 'hover'. */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The color variant of the tag. This determines the background and text color.\n   * @default default\n   */\n  variant?: Status;\n  /**\n   * Data test id for the tag.\n   * @default kibble-tag\n   */\n  'data-testid'?: string;\n}\n\ninterface ClosableTagProps extends BaseTagProps {\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay: 'always' | 'hover';\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\ninterface NonClosableTagProps extends BaseTagProps {\n  /**\n   * The display behavior of the close button.\n   * @default never\n   */\n  closeButtonDisplay?: 'never';\n  /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */\n  onClose?: never;\n}\n\nexport type TagProps = ClosableTagProps | NonClosableTagProps;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      leftElement,\n      rightElement,\n      onClose,\n      label,\n      closeButtonDisplay = 'never',\n      size = 'md',\n      variant = 'default',\n      ['data-testid']: dataTestId = 'kibble-tag',\n      ...rest\n    },\n    ref,\n  ): React.JSX.Element => {\n    const closable = !!onClose && closeButtonDisplay !== 'never';\n\n    return (\n      <CTag.Root\n        className=\"Tag group\"\n        data-testid={dataTestId}\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={`${dataTestId}-label`}\n          overflow=\"hidden\"\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={`${dataTestId}-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":["withProvider","withContext","createSlotRecipeContext","TagRoot","TagLabel","TagCloseTrigger","jsx","CloseIcon","tagPaddingBySize","Tag","forwardRef","leftElement","rightElement","onClose","label","closeButtonDisplay","size","variant","dataTestId","rest","ref","closable","jsxs","CTag.Root","CTag.Label","CTag.CloseTrigger"],"mappings":"oKAMM,CACJ,aAAAA,EACA,YAAAC,CAGF,EAAIC,EAAuB,wBAAC,CAAE,IAAK,KAAK,CAAE,EACpCC,EAAUH,EACd,MACA,MACF,EAEMI,EAAWH,EACf,OACA,OACF,EACMI,EAAkBJ,EAAY,SAAU,eAAgB,CAAE,aAAc,CAAE,SAA0BK,wBAAIC,EAAAA,UAAW,CAAE,CAAA,CAAG,CAAA,CAAE,EACxGN,EAAY,OAAQ,cAAc,EACpCA,EACpB,OACA,YACF,ECxBO,MAAMO,EAA4C,CACvD,GAAI,EACJ,GAAI,GACJ,GAAI,CACN,ECqDaC,EAAMC,EAAA,WACjB,CACE,CACE,YAAAC,EACA,aAAAC,EACA,QAAAC,EACA,MAAAC,EACA,mBAAAC,EAAqB,QACrB,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,CAAC,eAAgBC,EAAa,aAC9B,GAAGC,GAELC,IACsB,CACtB,MAAMC,EAAW,CAAC,CAACR,GAAWE,IAAuB,QAGnD,OAAAO,EAAA,kBAAA,KAACC,EAAA,CACC,UAAU,YACV,cAAaL,EACb,IAAAE,EACA,QAAAH,EACA,KAAAD,EACA,mBAAAD,EACC,GAAIM,GACHN,IAAuB,UAAY,CACjC,GAAIP,EAAiBQ,CAAI,CAC3B,EACD,GAAGG,EAEH,SAAA,CAAAR,EACDL,EAAA,kBAAA,IAACkB,EAAA,CACC,UAAU,aACV,cAAa,GAAGN,CAAU,SAC1B,SAAS,SACR,GAAI,CAAC,CAACP,GAAe,CAAE,GAAI,CAAE,EAC7B,GAAI,CAAC,CAACC,GAAgB,CAAE,GAAI,CAAE,EAE9B,SAAAE,CAAA,CACH,EACCF,EACAS,GACCf,EAAA,kBAAA,IAACmB,EAAA,CACC,UAAU,oBACV,cAAa,GAAGP,CAAU,iBAC1B,QAASL,EACR,GAAIE,IAAuB,SAAW,CACrC,GAAIP,EAAiBQ,CAAI,CAAA,CAC3B,CAAA,CACF,CAAA,CAEJ,CAAA,CAGN,EAEAP,EAAI,YAAc","x_google_ignoreList":[0]}

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

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),a=require("./index-BQRnVsAg.js"),h=require("./button.component-DjdgBXDC.js"),E=require("./heading.component-DMAQO_-m.js"),N=require("./menu.component-D4-4xRDj.js"),v=require("./spinner.component-DuW1_IWM.js"),q=require("./tag.component-C98Wf07v.js"),_=require("./text.component-CeioUl0G.js"),i=require("./flex-BOU6tYUd.js"),w=require("./h-stack-D4MnHHRc.js"),T=n=>n&&n.__esModule?n:{default:n},$=T(d);var c=(n=>(n.Inactive="Inactive",n.Deleted="Deleted",n))(c||{});const y={size:"sm",variant:"secondarySubtle",iconName:"plus",text:"Add",hideCaret:!0},D=({title:n,menuProps:p,tags:o,canBeDeleted:B=!1,onClearAll:k,onRemoveTag:u,onDelete:R,hasError:m=!1,errorText:C="This field contains an error",displayTagsInGroups:x,loading:j=!1,["data-testid"]:r="kibble-tag-block"})=>{const b=d.useCallback(s=>{u&&u(s,o)},[u,o]),f=$.default.useMemo(()=>{if(!x)return[];const s={};for(const t of o){const l=t.groupLabel||"-";s[l]||(s[l]=[]),s[l].push(t)}return Object.entries(s).map(([t,l])=>({groupLabel:t,tags:l}))},[o,x]),g=d.useCallback(s=>s.map(t=>{const l=t.label.includes(c.Inactive)||t.label.includes(c.Deleted);return e.jsxRuntimeExports.jsx(q.Tag,{className:"TagBlock__Tag","data-testid":`${r}-tag`,mr:1,mb:1,label:t.label,onClose:()=>b(t.value),closeButtonDisplay:"always",fontWeight:"normal",color:l?"text.placeholder":"text",size:"md"},t.value)}),[b,r]);return e.jsxRuntimeExports.jsxs(a.Box,{className:"TagBlock","data-testid":r,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:j?"hidden":void 0,children:[e.jsxRuntimeExports.jsxs(i.Flex,{className:"TagBlock__ButtonContainer","data-testid":`${r}-button-container`,justifyContent:"space-between",children:[e.jsxRuntimeExports.jsxs(w.HStack,{gap:1,minH:10,children:[n&&e.jsxRuntimeExports.jsx(_.WrappedText,{className:"TagBlock__Title",mr:2,fontWeight:"bold",children:n}),e.jsxRuntimeExports.jsx(N.Menu,{"data-testid":`${r}-menu`,...p,buttonProps:p?.buttonProps||y}),e.jsxRuntimeExports.jsx(h.Button,{className:"TagBlock__Button--ClearAll","data-testid":`${r}-clear-all-button`,size:"sm",iconName:"arrowCircle",variant:"ghostNeutral",onClick:k,disabled:o.length<=0,children:"Clear All"})]}),B&&e.jsxRuntimeExports.jsx(a.Box,{children:e.jsxRuntimeExports.jsx(h.Button,{className:"TagBlock__Button--Delete","data-testid":`${r}-delete-button`,iconName:"trashcan",variant:"ghostNeutral",onClick:R,justifySelf:"flex-end"})})]}),!!o.length&&e.jsxRuntimeExports.jsx(i.Flex,{className:"TagBlock__TagContainer","data-testid":`${r}-tag-container`,mt:2,pb:1,alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:x&&f.length?e.jsxRuntimeExports.jsx(i.Flex,{direction:"column",children:f.map(({groupLabel:s,tags:t})=>e.jsxRuntimeExports.jsxs(a.Box,{mb:2,children:[e.jsxRuntimeExports.jsx(a.Box,{className:"TagBlock__GroupTitle","data-testid":`${r}-group-title`,children:e.jsxRuntimeExports.jsx(E.WrappedHeading,{size:"xs",pb:2,children:s})}),e.jsxRuntimeExports.jsx(i.Flex,{alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:g(t)})]},s))}):g(o)}),j&&e.jsxRuntimeExports.jsx(v.Spinner,{fullScreen:!0}),m&&e.jsxRuntimeExports.jsx(_.WrappedText,{className:"TagBlock__Error","data-testid":`${r}-error`,mt:2,size:"xs",variant:"danger",children:C})]})};exports.TagBlock=D;exports.TagDisabledState=c;
+//# sourceMappingURL=tagBlock.component-BGEvRu81.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tagBlock.component-BGEvRu81.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/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.component';\n\ninterface BaseTagBlockProps {\n  /**\n   * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n   * @default false\n   */\n  displayTagsInGroups?: boolean;\n  /**\n   * The error message to be displayed if the `hasError` prop is set to true.\n   * @default This field contains an error\n   */\n  errorText?: string;\n  /**\n   * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * If true, a loading spinner will cover the tag block preventing users from making further selections.\n   * @default false\n   */\n  loading?: boolean;\n  /** Configuration for the Menu component. See `Menu` stories for more information. */\n  menuProps?: MenuProps;\n  /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n  onClearAll?: () => void;\n  /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n  onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n  /** The selected items to be shown as tags in the tag block. */\n  tags: TagBlockTag[];\n  /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n  title?: string;\n  /** Data test id for the tag block. */\n  'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n  /**\n   * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n   * @default false\n   */\n  canBeDeleted?: false;\n  /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n  onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n  /**\n   * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n   * @default false\n   */\n  canBeDeleted: true;\n  /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is 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  ['data-testid']: dataTestId = 'kibble-tag-block',\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) || tag.label.includes(TagDisabledState.Deleted);\n\n        return (\n          <Tag\n            className=\"TagBlock__Tag\"\n            data-testid={`${dataTestId}-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, dataTestId],\n  );\n\n  return (\n    <Box\n      className=\"TagBlock\"\n      data-testid={dataTestId}\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={`${dataTestId}-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={`${dataTestId}-menu`}\n            {...menuProps}\n            buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n          />\n          <Button\n            className=\"TagBlock__Button--ClearAll\"\n            data-testid={`${dataTestId}-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={`${dataTestId}-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={`${dataTestId}-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 className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\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 className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\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","dataTestId","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-Cor6eakc.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tagBlock.component-Cor6eakc.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/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.component';\n\ninterface BaseTagBlockProps {\n  /**\n   * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n   * @default false\n   */\n  displayTagsInGroups?: boolean;\n  /**\n   * The error message to be displayed if the `hasError` prop is set to true.\n   * @default This field contains an error\n   */\n  errorText?: string;\n  /**\n   * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * If true, a loading spinner will cover the tag block preventing users from making further selections.\n   * @default false\n   */\n  loading?: boolean;\n  /** Configuration for the Menu component. See `Menu` stories for more information. */\n  menuProps?: MenuProps;\n  /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n  onClearAll?: () => void;\n  /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n  onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n  /** The selected items to be shown as tags in the tag block. */\n  tags: TagBlockTag[];\n  /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n  title?: string;\n  /** Data test id for the tag block. */\n  'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n  /**\n   * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n   * @default false\n   */\n  canBeDeleted?: false;\n  /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n  onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n  /**\n   * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n   * @default false\n   */\n  canBeDeleted: true;\n  /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is 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  ['data-testid']: dataTestId = 'kibble-tag-block',\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) || tag.label.includes(TagDisabledState.Deleted);\n\n        return (\n          <Tag\n            className=\"TagBlock__Tag\"\n            data-testid={`${dataTestId}-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, dataTestId],\n  );\n\n  return (\n    <Box\n      className=\"TagBlock\"\n      data-testid={dataTestId}\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={`${dataTestId}-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={`${dataTestId}-menu`}\n            {...menuProps}\n            buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n          />\n          <Button\n            className=\"TagBlock__Button--ClearAll\"\n            data-testid={`${dataTestId}-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={`${dataTestId}-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={`${dataTestId}-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 className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\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 className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\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","dataTestId","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/text.component-CdTyTFds.js

@@ -0,0 +1,12 @@
+import { j as o } from "./jsx-runtime-C5mzlN2N.js";
+import { c as r } from "./create-recipe-context-DfQ-MTih.js";
+import { w as x } from "./withTruncation-DTCfQ2yk.js";
+const { withContext: i } = r({
+  key: "text"
+}), n = i("p"), t = ({ children: e, ["data-testid"]: s = "kibble-text", ...a }) => /* @__PURE__ */ o.jsx(n, { className: "Text", "data-testid": s, ...a, children: e });
+t.displayName = "Text";
+const d = x(t);
+export {
+  d as W
+};
+//# sourceMappingURL=text.component-CdTyTFds.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.component-CdTyTFds.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/text/index.js","../../src/components/Text/text.component.tsx"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n  key: \"text\"\n});\nconst Text = withContext(\"p\");\nconst TextPropsProvider = PropsProvider;\n\nexport { Text, TextPropsProvider };\n","import React from 'react';\nimport { Text as CText, TextProps as CTextProps } from '@chakra-ui/react/text';\nimport { withTruncation, WithTruncationProps } from 'hocs/withTruncation';\nimport { TextSize } from './text.types';\nimport { TypographyVariant } from 'shared/types/typography';\nimport { ConditionalValue } from '@chakra-ui/react/styled-system';\n\nexport interface TextProps extends WithTruncationProps, Omit<CTextProps, 'truncate'> {\n  /**\n   * Size of the text.\n   * @default md\n   */\n  size?: ConditionalValue<TextSize>;\n  /**\n   * Color variant of the text.\n   * @default default\n   */\n  variant?: TypographyVariant;\n  /**\n   * Data test id for the text.\n   * @default kibble-text\n   */\n  'data-testid'?: string;\n}\n\nconst Text = ({ children, ['data-testid']: dataTestId = 'kibble-text', ...rest }: TextProps): React.JSX.Element => {\n  return (\n    <CText className=\"Text\" data-testid={dataTestId} {...rest}>\n      {children}\n    </CText>\n  );\n};\n\nText.displayName = 'Text';\n\nconst WrappedText = withTruncation(Text);\n\nexport { WrappedText as Text };\n"],"names":["withContext","createRecipeContext","Text","children","dataTestId","rest","jsx","CText","WrappedText","withTruncation"],"mappings":";;;AAIA,MAAM,EAAE,aAAAA,EAA2B,IAAIC,EAAoB;AAAA,EACzD,KAAK;AACP,CAAC,GACKC,IAAOF,EAAY,GAAG,GCkBtBE,IAAO,CAAC,EAAE,UAAAC,GAAU,CAAC,gBAAgBC,IAAa,eAAe,GAAGC,QAEtEC,gBAAAA,EAAA,IAACC,KAAM,WAAU,QAAO,eAAaH,GAAa,GAAGC,GAClD,UAAAF,GACH;AAIJD,EAAK,cAAc;AAEb,MAAAM,IAAcC,EAAeP,CAAI;","x_google_ignoreList":[0]}

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

@@ -0,0 +1,2 @@
+"use strict";const n=require("./jsx-runtime-BjDatQAs.js"),r=require("./create-recipe-context-CDw-39SC.js"),c=require("./withTruncation-DE3FFPE7.js"),{withContext:x}=r.createRecipeContext({key:"text"}),a=x("p"),t=({children:e,["data-testid"]:s="kibble-text",...i})=>n.jsxRuntimeExports.jsx(a,{className:"Text","data-testid":s,...i,children:e});t.displayName="Text";const o=c.withTruncation(t);exports.WrappedText=o;
+//# sourceMappingURL=text.component-CeioUl0G.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.component-CeioUl0G.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/text/index.js","../../src/components/Text/text.component.tsx"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n  key: \"text\"\n});\nconst Text = withContext(\"p\");\nconst TextPropsProvider = PropsProvider;\n\nexport { Text, TextPropsProvider };\n","import React from 'react';\nimport { Text as CText, TextProps as CTextProps } from '@chakra-ui/react/text';\nimport { withTruncation, WithTruncationProps } from 'hocs/withTruncation';\nimport { TextSize } from './text.types';\nimport { TypographyVariant } from 'shared/types/typography';\nimport { ConditionalValue } from '@chakra-ui/react/styled-system';\n\nexport interface TextProps extends WithTruncationProps, Omit<CTextProps, 'truncate'> {\n  /**\n   * Size of the text.\n   * @default md\n   */\n  size?: ConditionalValue<TextSize>;\n  /**\n   * Color variant of the text.\n   * @default default\n   */\n  variant?: TypographyVariant;\n  /**\n   * Data test id for the text.\n   * @default kibble-text\n   */\n  'data-testid'?: string;\n}\n\nconst Text = ({ children, ['data-testid']: dataTestId = 'kibble-text', ...rest }: TextProps): React.JSX.Element => {\n  return (\n    <CText className=\"Text\" data-testid={dataTestId} {...rest}>\n      {children}\n    </CText>\n  );\n};\n\nText.displayName = 'Text';\n\nconst WrappedText = withTruncation(Text);\n\nexport { WrappedText as Text };\n"],"names":["withContext","createRecipeContext","Text","children","dataTestId","rest","jsx","CText","WrappedText","withTruncation"],"mappings":"qJAIM,CAAE,YAAAA,CAA2B,EAAIC,sBAAoB,CACzD,IAAK,MACP,CAAC,EACKC,EAAOF,EAAY,GAAG,ECkBtBE,EAAO,CAAC,CAAE,SAAAC,EAAU,CAAC,eAAgBC,EAAa,cAAe,GAAGC,KAEtEC,EAAA,kBAAA,IAACC,GAAM,UAAU,OAAO,cAAaH,EAAa,GAAGC,EAClD,SAAAF,EACH,EAIJD,EAAK,YAAc,OAEb,MAAAM,EAAcC,iBAAeP,CAAI","x_google_ignoreList":[0]}

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

@@ -0,0 +1,108 @@
+import { j as t } from "./jsx-runtime-C5mzlN2N.js";
+import j, { forwardRef as N, useMemo as w } from "react";
+import { w as F } from "./withFormControl-DePFf9SY.js";
+import { B as y } from "./button.component-BO6oee_V.js";
+import { C as P } from "./characterCounter.component-Ch3P3GqC.js";
+import { F as R } from "./flex-CX-8gE9T.js";
+import { I as b } from "./input-group-CFelIL63.js";
+import { c as k } from "./create-recipe-context-DfQ-MTih.js";
+import { d as B } from "./use-locale-context-Bw4Gg9Z0.js";
+import { u as E } from "./use-field-context-DrC9mrDd.js";
+import { a6 as T } from "./index-fHSGm2nC.js";
+const u = N((r, s) => {
+  const o = E(), a = T(o?.getInputProps(), r);
+  return /* @__PURE__ */ t.jsx(B.input, { ...a, ref: s });
+});
+u.displayName = "FieldInput";
+const { withContext: D } = k({
+  key: "input"
+}), W = D(u), $ = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+}, l = j.forwardRef(
+  ({
+    charLimit: r = void 0,
+    clearable: s = !1,
+    disabled: o = !1,
+    inputRef: a,
+    invalid: c,
+    leftAddon: d,
+    leftElement: f,
+    onClear: i,
+    onContrast: x,
+    rightAddon: C,
+    rightElement: p,
+    size: m = "md",
+    value: e,
+    ["data-testid"]: n = "kibble-text-input",
+    ...I
+  }, g) => {
+    const h = () => {
+      i && i(e || "");
+    };
+    s && e && !o && (p = /* @__PURE__ */ t.jsx(
+      y,
+      {
+        className: "TextInput__ClearButton",
+        "data-testid": `${n}-clear-button`,
+        size: $[m],
+        variant: "ghostNeutral",
+        onClick: h,
+        iconName: "close"
+      }
+    ));
+    const _ = w(() => e?.toString()?.length || 0, [e]);
+    return /* @__PURE__ */ t.jsxs(R, { className: "TextInput__Wrapper", w: "100%", flexDirection: "column", gap: 1, alignItems: "flex-end", children: [
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          className: "TextInput__InputGroup",
+          "data-testid": `${n}-input-group`,
+          startElement: f,
+          startElementProps: {
+            color: "inherit",
+            _groupDisabled: { opacity: 0.6 }
+          },
+          endElement: p,
+          endElementProps: {
+            color: "inherit",
+            paddingInline: 1.5,
+            _groupDisabled: { opacity: 0.6 }
+          },
+          startAddon: d,
+          endAddon: C,
+          children: /* @__PURE__ */ t.jsx(
+            W,
+            {
+              "data-testid": n,
+              className: "TextInput",
+              ref: a || g,
+              value: e,
+              size: m,
+              disabled: o,
+              ...c && { "aria-invalid": !0 },
+              variant: x ? "onContrast" : "default",
+              ...I
+            }
+          )
+        }
+      ),
+      !!r && /* @__PURE__ */ t.jsx(
+        P,
+        {
+          "data-testid": `${n}-character-counter`,
+          withLimit: !0,
+          limit: r,
+          currentCount: _
+        }
+      )
+    ] });
+  }
+);
+l.displayName = "TextInput";
+const O = F(l);
+export {
+  O as W
+};
+//# sourceMappingURL=textInput.component-BC0Hi8R_.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textInput.component-BC0Hi8R_.js","sources":["../../node_modules/@ark-ui/react/dist/components/field/field-input.js","../../node_modules/@chakra-ui/react/dist/esm/components/input/input.js","../../src/components/TextInput/textInput.records.ts","../../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from './use-field-context.js';\n\nconst FieldInput = forwardRef((props, ref) => {\n  const field = useFieldContext();\n  const mergedProps = mergeProps(field?.getInputProps(), props);\n  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });\n});\nFieldInput.displayName = \"FieldInput\";\n\nexport { FieldInput };\n","\"use strict\";\n\"use client\";\nimport { Field } from '@ark-ui/react/field';\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n  key: \"input\"\n});\nconst Input = withContext(Field.Input);\nconst InputPropsProvider = PropsProvider;\n\nexport { Input, InputPropsProvider };\n","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, { useMemo } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { Input as CInput, InputProps as CInputProps } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\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  /** The maximum number of characters that can be entered into the input. */\n  charLimit?: number;\n  /** Ref to the input element. */\n  inputRef?: React.Ref<HTMLInputElement | null>;\n  /** Left addon element. */\n  leftAddon?: React.ReactNode;\n  /** Left element inside the input. */\n  leftElement?: React.ReactNode;\n  /**\n   * If true, the input will render a contrasting variant.\n   * @default false\n   */\n  onContrast?: boolean;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Right addon element. */\n  rightAddon?: React.ReactNode;\n  /** Right element inside the input. */\n  rightElement?: React.ReactNode;\n  /** The size of the input. */\n  size?: FormControlSize;\n  /**\n   * Data test id for the text input.\n   * @default kibble-text-input\n   */\n  'data-testid'?: string;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n  /**\n   * If true, the input will have a button to clear out the field.\n   * @default false\n   */\n  clearable?: never;\n  /** Callback function when the clear button is clicked. */\n  onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n  /**\n   * If true, the input will have a button to clear out the field.\n   * @default false\n   */\n  clearable?: boolean;\n  /** Callback function when the clear button is clicked. */\n  onClear?: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  (\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      ['data-testid']: dataTestId = 'kibble-text-input',\n      ...rest\n    },\n    ref,\n  ): 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={`${dataTestId}-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(() => value?.toString()?.length || 0, [value]);\n\n    return (\n      <Flex className=\"TextInput__Wrapper\" w=\"100%\" flexDirection=\"column\" gap={1} alignItems=\"flex-end\">\n        <InputGroup\n          className=\"TextInput__InputGroup\"\n          data-testid={`${dataTestId}-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={dataTestId}\n            className=\"TextInput\"\n            ref={inputRef || ref}\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            data-testid={`${dataTestId}-character-counter`}\n            withLimit={true}\n            limit={charLimit}\n            currentCount={currentCharCount}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\nTextInput.displayName = 'TextInput';\nconst WrappedTextInput = withFormControl<TextInputProps>(TextInput);\n\nexport { WrappedTextInput as TextInput };\n"],"names":["FieldInput","forwardRef","props","ref","field","useFieldContext","mergedProps","mergeProps","jsx","ark","withContext","createRecipeContext","Input","Field.Input","closeButtonSizeMap","TextInput","React","charLimit","clearable","disabled","inputRef","invalid","leftAddon","leftElement","onClear","onContrast","rightAddon","rightElement","size","value","dataTestId","rest","handleClear","Button","currentCharCount","useMemo","jsxs","Flex","InputGroup","CInput","CharacterCounter","WrappedTextInput","withFormControl"],"mappings":";;;;;;;;;;;AAOA,MAAMA,IAAaC,EAAW,CAACC,GAAOC,MAAQ;AAC5C,QAAMC,IAAQC,EAAiB,GACzBC,IAAcC,EAAWH,GAAO,cAAa,GAAIF,CAAK;AAC5D,SAAuBM,gBAAAA,EAAAA,IAAIC,EAAI,OAAO,EAAE,GAAGH,GAAa,KAAAH,GAAK;AAC/D,CAAC;AACDH,EAAW,cAAc;ACPzB,MAAM,EAAE,aAAAU,EAA2B,IAAIC,EAAoB;AAAA,EACzD,KAAK;AACP,CAAC,GACKC,IAAQF,EAAYG,CAAW,GCLxBC,IAA0D;AAAA,EACrE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCwDMC,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,CAAC,gBAAgBC,IAAa;AAAA,IAC9B,GAAGC;AAAA,KAEL5B,MACsB;AACtB,UAAM6B,IAAc,MAAY;AAC9B,MAAIR,KACFA,EAAQK,KAAS,EAAE;AAAA,IAEvB;AAEA,IAAIX,KAAeW,KAAS,CAACV,MAEzBQ,IAAAnB,gBAAAA,EAAA;AAAA,MAACyB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa,GAAGH,CAAU;AAAA,QAC1B,MAAMhB,EAAmBc,CAAuB;AAAA,QAChD,SAAQ;AAAA,QACR,SAASI;AAAA,QACT,UAAS;AAAA,MAAA;AAAA,IACX;AAIE,UAAAE,IAAmBC,EAAQ,MAAMN,GAAO,YAAY,UAAU,GAAG,CAACA,CAAK,CAAC;AAG5E,WAAAO,gBAAAA,EAAA,KAACC,GAAK,EAAA,WAAU,sBAAqB,GAAE,QAAO,eAAc,UAAS,KAAK,GAAG,YAAW,YACtF,UAAA;AAAA,MAAA7B,gBAAAA,EAAA;AAAA,QAAC8B;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa,GAAGR,CAAU;AAAA,UAC1B,cAAcP;AAAA,UACd,mBAAmB;AAAA,YACjB,OAAO;AAAA,YACP,gBAAgB,EAAE,SAAS,IAAI;AAAA,UACjC;AAAA,UACA,YAAYI;AAAA,UACZ,iBAAiB;AAAA,YACf,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAgB,EAAE,SAAS,IAAI;AAAA,UACjC;AAAA,UACA,YAAYL;AAAA,UACZ,UAAUI;AAAA,UAEV,UAAAlB,gBAAAA,EAAA;AAAA,YAAC+B;AAAAA,YAAA;AAAA,cACC,eAAaT;AAAA,cACb,WAAU;AAAA,cACV,KAAKV,KAAYjB;AAAA,cACjB,OAAA0B;AAAA,cACA,MAAAD;AAAA,cACA,UAAAT;AAAA,cACC,GAAIE,KAAW,EAAE,gBAAgB,GAAK;AAAA,cACvC,SAASI,IAAa,eAAe;AAAA,cACpC,GAAGM;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MACF;AAAA,MACC,CAAC,CAACd,KACDT,gBAAAA,EAAA;AAAA,QAACgC;AAAA,QAAA;AAAA,UACC,eAAa,GAAGV,CAAU;AAAA,UAC1B,WAAW;AAAA,UACX,OAAOb;AAAA,UACP,cAAciB;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB,GAEJ;AAAA,EAAA;AAGN;AAEAnB,EAAU,cAAc;AAClB,MAAA0B,IAAmBC,EAAgC3B,CAAS;","x_google_ignoreList":[0,1]}

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

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),u=require("react"),g=require("./withFormControl-wZA87Sd4.js"),q=require("./button.component-DjdgBXDC.js"),E=require("./characterCounter.component-CKDigkoD.js"),N=require("./flex-BOU6tYUd.js"),w=require("./input-group-DUdSDk4o.js"),F=require("./create-recipe-context-CDw-39SC.js"),b=require("./use-locale-context-ym21RUxU.js"),y=require("./use-field-context-Cm29IQ7H.js"),P=require("./index-CQURjLlA.js"),T=t=>t&&t.__esModule?t:{default:t},k=T(u),l=u.forwardRef((t,s)=>{const r=y.useFieldContext(),i=P.mergeProps(r?.getInputProps(),t);return e.jsxRuntimeExports.jsx(b.ark.input,{...i,ref:s})});l.displayName="FieldInput";const{withContext:D}=F.createRecipeContext({key:"input"}),B=D(l),G={sm:"xs",md:"sm",lg:"md"},d=k.default.forwardRef(({charLimit:t=void 0,clearable:s=!1,disabled:r=!1,inputRef:i,invalid:x,leftAddon:m,leftElement:f,onClear:a,onContrast:C,rightAddon:_,rightElement:c,size:p="md",value:n,["data-testid"]:o="kibble-text-input",...h},j)=>{const I=()=>{a&&a(n||"")};s&&n&&!r&&(c=e.jsxRuntimeExports.jsx(q.Button,{className:"TextInput__ClearButton","data-testid":`${o}-clear-button`,size:G[p],variant:"ghostNeutral",onClick:I,iconName:"close"}));const R=u.useMemo(()=>n?.toString()?.length||0,[n]);return e.jsxRuntimeExports.jsxs(N.Flex,{className:"TextInput__Wrapper",w:"100%",flexDirection:"column",gap:1,alignItems:"flex-end",children:[e.jsxRuntimeExports.jsx(w.InputGroup,{className:"TextInput__InputGroup","data-testid":`${o}-input-group`,startElement:f,startElementProps:{color:"inherit",_groupDisabled:{opacity:.6}},endElement:c,endElementProps:{color:"inherit",paddingInline:1.5,_groupDisabled:{opacity:.6}},startAddon:m,endAddon:_,children:e.jsxRuntimeExports.jsx(B,{"data-testid":o,className:"TextInput",ref:i||j,value:n,size:p,disabled:r,...x&&{"aria-invalid":!0},variant:C?"onContrast":"default",...h})}),!!t&&e.jsxRuntimeExports.jsx(E.CharacterCounter,{"data-testid":`${o}-character-counter`,withLimit:!0,limit:t,currentCount:R})]})});d.displayName="TextInput";const M=g.withFormControl(d);exports.WrappedTextInput=M;
+//# sourceMappingURL=textInput.component-C1vwy6pL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textInput.component-C1vwy6pL.js","sources":["../../node_modules/@ark-ui/react/dist/components/field/field-input.js","../../node_modules/@chakra-ui/react/dist/esm/components/input/input.js","../../src/components/TextInput/textInput.records.ts","../../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from './use-field-context.js';\n\nconst FieldInput = forwardRef((props, ref) => {\n  const field = useFieldContext();\n  const mergedProps = mergeProps(field?.getInputProps(), props);\n  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });\n});\nFieldInput.displayName = \"FieldInput\";\n\nexport { FieldInput };\n","\"use strict\";\n\"use client\";\nimport { Field } from '@ark-ui/react/field';\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n  key: \"input\"\n});\nconst Input = withContext(Field.Input);\nconst InputPropsProvider = PropsProvider;\n\nexport { Input, InputPropsProvider };\n","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, { useMemo } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { Input as CInput, InputProps as CInputProps } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\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  /** The maximum number of characters that can be entered into the input. */\n  charLimit?: number;\n  /** Ref to the input element. */\n  inputRef?: React.Ref<HTMLInputElement | null>;\n  /** Left addon element. */\n  leftAddon?: React.ReactNode;\n  /** Left element inside the input. */\n  leftElement?: React.ReactNode;\n  /**\n   * If true, the input will render a contrasting variant.\n   * @default false\n   */\n  onContrast?: boolean;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Right addon element. */\n  rightAddon?: React.ReactNode;\n  /** Right element inside the input. */\n  rightElement?: React.ReactNode;\n  /** The size of the input. */\n  size?: FormControlSize;\n  /**\n   * Data test id for the text input.\n   * @default kibble-text-input\n   */\n  'data-testid'?: string;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n  /**\n   * If true, the input will have a button to clear out the field.\n   * @default false\n   */\n  clearable?: never;\n  /** Callback function when the clear button is clicked. */\n  onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n  /**\n   * If true, the input will have a button to clear out the field.\n   * @default false\n   */\n  clearable?: boolean;\n  /** Callback function when the clear button is clicked. */\n  onClear?: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  (\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      ['data-testid']: dataTestId = 'kibble-text-input',\n      ...rest\n    },\n    ref,\n  ): 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={`${dataTestId}-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(() => value?.toString()?.length || 0, [value]);\n\n    return (\n      <Flex className=\"TextInput__Wrapper\" w=\"100%\" flexDirection=\"column\" gap={1} alignItems=\"flex-end\">\n        <InputGroup\n          className=\"TextInput__InputGroup\"\n          data-testid={`${dataTestId}-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={dataTestId}\n            className=\"TextInput\"\n            ref={inputRef || ref}\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            data-testid={`${dataTestId}-character-counter`}\n            withLimit={true}\n            limit={charLimit}\n            currentCount={currentCharCount}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\nTextInput.displayName = 'TextInput';\nconst WrappedTextInput = withFormControl<TextInputProps>(TextInput);\n\nexport { WrappedTextInput as TextInput };\n"],"names":["FieldInput","forwardRef","props","ref","field","useFieldContext","mergedProps","mergeProps","jsx","ark","withContext","createRecipeContext","Input","Field.Input","closeButtonSizeMap","TextInput","React","charLimit","clearable","disabled","inputRef","invalid","leftAddon","leftElement","onClear","onContrast","rightAddon","rightElement","size","value","dataTestId","rest","handleClear","Button","currentCharCount","useMemo","jsxs","Flex","InputGroup","CInput","CharacterCounter","WrappedTextInput","withFormControl"],"mappings":"wfAOMA,EAAaC,EAAU,WAAC,CAACC,EAAOC,IAAQ,CAC5C,MAAMC,EAAQC,EAAAA,gBAAiB,EACzBC,EAAcC,EAAU,WAACH,GAAO,cAAa,EAAIF,CAAK,EAC5D,OAAuBM,EAAAA,kBAAAA,IAAIC,EAAAA,IAAI,MAAO,CAAE,GAAGH,EAAa,IAAAH,EAAK,CAC/D,CAAC,EACDH,EAAW,YAAc,aCPzB,KAAM,CAAE,YAAAU,CAA2B,EAAIC,sBAAoB,CACzD,IAAK,OACP,CAAC,EACKC,EAAQF,EAAYG,CAAW,ECLxBC,EAA0D,CACrE,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,ECwDMC,EAAYC,EAAM,QAAA,WACtB,CACE,CACE,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,CAAC,eAAgBC,EAAa,oBAC9B,GAAGC,GAEL5B,IACsB,CACtB,MAAM6B,EAAc,IAAY,CAC1BR,GACFA,EAAQK,GAAS,EAAE,CAEvB,EAEIX,GAAeW,GAAS,CAACV,IAEzBQ,EAAAnB,EAAA,kBAAA,IAACyB,EAAA,OAAA,CACC,UAAU,yBACV,cAAa,GAAGH,CAAU,gBAC1B,KAAMhB,EAAmBc,CAAuB,EAChD,QAAQ,eACR,QAASI,EACT,SAAS,OAAA,CACX,GAIE,MAAAE,EAAmBC,UAAQ,IAAMN,GAAO,YAAY,QAAU,EAAG,CAACA,CAAK,CAAC,EAG5E,OAAAO,EAAA,kBAAA,KAACC,EAAK,KAAA,CAAA,UAAU,qBAAqB,EAAE,OAAO,cAAc,SAAS,IAAK,EAAG,WAAW,WACtF,SAAA,CAAA7B,EAAA,kBAAA,IAAC8B,EAAA,WAAA,CACC,UAAU,wBACV,cAAa,GAAGR,CAAU,eAC1B,aAAcP,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,SAAAlB,EAAA,kBAAA,IAAC+B,EAAA,CACC,cAAaT,EACb,UAAU,YACV,IAAKV,GAAYjB,EACjB,MAAA0B,EACA,KAAAD,EACA,SAAAT,EACC,GAAIE,GAAW,CAAE,eAAgB,EAAK,EACvC,QAASI,EAAa,aAAe,UACpC,GAAGM,CAAA,CAAA,CACN,CACF,EACC,CAAC,CAACd,GACDT,EAAA,kBAAA,IAACgC,EAAA,iBAAA,CACC,cAAa,GAAGV,CAAU,qBAC1B,UAAW,GACX,MAAOb,EACP,aAAciB,CAAA,CAAA,CAChB,EAEJ,CAAA,CAGN,EAEAnB,EAAU,YAAc,YAClB,MAAA0B,EAAmBC,kBAAgC3B,CAAS","x_google_ignoreList":[0,1]}

package/dist/chunks/textarea.component-D15hA9Jb.js

@@ -0,0 +1,2 @@
+"use strict";const l=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),h=require("./withFormControl-wZA87Sd4.js"),v=require("./characterCounter.component-CKDigkoD.js"),w=require("./flex-BOU6tYUd.js"),b=require("./create-recipe-context-CDw-39SC.js"),p=require("./index-CQURjLlA.js"),x=require("./use-locale-context-ym21RUxU.js"),C=require("./use-field-context-Cm29IQ7H.js"),F=e=>e&&e.__esModule?e:{default:e},y=F(c);var R=e=>{if(!e)return;const t=p.getComputedStyle(e),o=p.getWindow(e),i=p.getDocument(e),r=()=>{requestAnimationFrame(()=>{e.style.height="auto";let a;t.boxSizing==="content-box"?a=e.scrollHeight-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):a=e.scrollHeight+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),t.maxHeight!=="none"&&a>parseFloat(t.maxHeight)?(t.overflowY==="hidden"&&(e.style.overflowY="scroll"),a=parseFloat(t.maxHeight)):t.overflowY!=="hidden"&&(e.style.overflowY="hidden"),e.style.height=`${a}px`})};e.addEventListener("input",r),e.form?.addEventListener("reset",r);const n=Object.getPrototypeOf(e),s=Object.getOwnPropertyDescriptor(n,"value");Object.defineProperty(e,"value",{...s,set(){s?.set?.apply(this,arguments),r()}});const d=new o.ResizeObserver(()=>{requestAnimationFrame(()=>r())});d.observe(e);const u=new o.MutationObserver(()=>r());return u.observe(e,{attributes:!0,attributeFilter:["rows","placeholder"]}),i.fonts?.addEventListener("loadingdone",r),()=>{e.removeEventListener("input",r),e.form?.removeEventListener("reset",r),i.fonts?.removeEventListener("loadingdone",r),d.disconnect(),u.disconnect()}};const m=c.forwardRef((e,t)=>{const{autoresize:o,...i}=e,r=c.useRef(null),n=C.useFieldContext(),s=p.mergeProps(n?.getTextareaProps(),{style:{resize:o?"none":void 0}},i);return c.useEffect(()=>{if(o)return R(r.current)},[o]),l.jsxRuntimeExports.jsx(x.ark.textarea,{...s,ref:x.composeRefs(t,r)})});m.displayName="FieldTextarea";const{withContext:j}=b.createRecipeContext({key:"textarea"}),T=j(m),f=y.default.forwardRef(({charLimit:e=void 0,invalid:t,onContrast:o,resize:i="none",textareaRef:r,value:n,["data-testid"]:s="kibble-textarea",...d},u)=>{const a=o?"onContrast":"default",g=c.useMemo(()=>n?.toString()?.length||0,[n]);return l.jsxRuntimeExports.jsxs(w.Flex,{className:"Textarea__Wrapper",flexDirection:"column",w:"100%",gap:1,alignItems:"flex-end",children:[l.jsxRuntimeExports.jsx(T,{className:"Textarea","data-testid":s,ref:r||u,resize:i,variant:a,value:n,...t&&{"aria-invalid":!0},minH:"140px",...d}),!!e&&l.jsxRuntimeExports.jsx(v.CharacterCounter,{"data-testid":`${s}-character-counter`,withLimit:!0,limit:e,currentCount:g})]})});f.displayName="Textarea";const q=h.withFormControl(f);exports.WrappedTextarea=q;
+//# sourceMappingURL=textarea.component-D15hA9Jb.js.map