@spark-ui/components 17.9.2 → 17.10.0

package/dist/badge/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react/jsx-runtime`),n=require(`@spark-ui/internal-utils`);var r=(0,e.cva)([`inline-flex h-fit`,`empty:p-0`,`text-center font-bold`,`rounded-full box-content`],{variants:{intent:(0,n.makeVariants)({main:[`bg-main`,`text-on-main`,`border-surface`],support:[`bg-support`,`text-on-support`,`border-surface`],accent:[`bg-accent`,`text-on-accent`,`border-surface`],success:[`bg-success`,`text-on-success`,`border-surface`],alert:[`bg-alert`,`text-on-alert`,`border-surface`],danger:[`bg-error`,`text-on-error`,`border-surface`],info:[`bg-info`,`text-on-info`,`border-surface`],neutral:[`bg-neutral`,`text-on-neutral`,`border-surface`],surface:[`bg-surface`,`text-on-surface`,`border-surface`]}),size:(0,n.makeVariants)({sm:[`text-small`,`px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]`,`empty:size-sz-8`],md:[`text-caption`,`px-md py-sm`,`empty:size-sz-16`]}),type:{relative:[`absolute right-0 border-md`,`translate-x-1/2 -translate-y-1/2`],standalone:[]}},defaultVariants:{intent:`danger`,size:`md`,type:`relative`}}),i=({intent:e=`danger`,size:n=`md`,type:i=`relative`,count:a,overflowCount:o=99,"aria-label":s,className:c,...l})=>{let u=a&&a>o,d=typeof s==`function`?s({count:a,overflowCount:o}):s,f={...l,"aria-label":d};return(0,t.jsx)(`span`,{"data-spark-component":`badge`,role:`status`,className:r({intent:e,size:n,type:i,className:c}),...f,children:u?`${o}+`:a})};i.displayName=`BadgeItem`;var a=({children:e,...n})=>e?(0,t.jsxs)(`div`,{className:`relative inline-flex`,children:[e,(0,t.jsx)(i,{...n})]}):(0,t.jsx)(i,{type:`standalone`,...n});a.displayName=`Badge`,exports.Badge=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react/jsx-runtime`),n=require(`@spark-ui/internal-utils`);var r=(0,e.cva)([`inline-flex h-fit`,`empty:p-0`,`text-center`,`rounded-full box-content`],{variants:{intent:(0,n.makeVariants)({main:[`bg-main`,`text-on-main`,`border-surface`],support:[`bg-support`,`text-on-support`,`border-surface`],accent:[`bg-accent`,`text-on-accent`,`border-surface`],success:[`bg-success`,`text-on-success`,`border-surface`],alert:[`bg-alert`,`text-on-alert`,`border-surface`],danger:[`bg-error`,`text-on-error`,`border-surface`],info:[`bg-info`,`text-on-info`,`border-surface`],neutral:[`bg-neutral`,`text-on-neutral`,`border-surface`],surface:[`bg-surface`,`text-on-surface`,`border-surface`]}),size:(0,n.makeVariants)({sm:[`text-small-highlight`,`px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]`,`empty:size-sz-8`],md:[`text-caption-highlight`,`px-md py-sm`,`empty:size-sz-16`]}),type:{relative:[`absolute right-0 border-md`,`translate-x-1/2 -translate-y-1/2`],standalone:[]}},defaultVariants:{intent:`danger`,size:`md`,type:`relative`}}),i=({intent:e=`danger`,size:n=`md`,type:i=`relative`,count:a,overflowCount:o=99,"aria-label":s,className:c,...l})=>{let u=a&&a>o,d=typeof s==`function`?s({count:a,overflowCount:o}):s,f={...l,"aria-label":d};return(0,t.jsx)(`span`,{"data-spark-component":`badge`,role:`status`,className:r({intent:e,size:n,type:i,className:c}),...f,children:u?`${o}+`:a})};i.displayName=`BadgeItem`;var a=({children:e,...n})=>e?(0,t.jsxs)(`div`,{className:`relative inline-flex`,children:[e,(0,t.jsx)(i,{...n})]}):(0,t.jsx)(i,{type:`standalone`,...n});a.displayName=`Badge`,exports.Badge=a;
 //# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,wBAAyB,2BAA2B,CACvF,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CAAC,aAAc,oDAAqD,kBAAkB,CAC1F,GAAI,CAAC,eAAgB,cAAe,mBAAmB,CACxD,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CClBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YClDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,cAAe,2BAA2B,CAC7E,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CACF,uBACA,oDACA,kBACD,CACD,GAAI,CAAC,yBAA0B,cAAe,mBAAmB,CAClE,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CCtBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YClDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}

package/dist/badge/index.mjs

@@ -5,7 +5,7 @@ import { makeVariants as r } from "@spark-ui/internal-utils";
 var i = e([
 	"inline-flex h-fit",
 	"empty:p-0",
-	"text-center font-bold",
+	"text-center",
 	"rounded-full box-content"
 ], {
 	variants: {
@@ -58,12 +58,12 @@ var i = e([
 		}),
 		size: r({
 			sm: [
-				"text-small",
+				"text-small-highlight",
 				"px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]",
 				"empty:size-sz-8"
 			],
 			md: [
-				"text-caption",
+				"text-caption-highlight",
 				"px-md py-sm",
 				"empty:size-sz-16"
 			]

package/dist/badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAyB;CAA2B,EACvF;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,QAAQ;IAAC;IAAa;IAAkB;IAAiB;GACzD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,OAAO;IAAC;IAAY;IAAiB;IAAiB;GACtD,QAAQ;IAAC;IAAY;IAAiB;IAAiB;GACvD,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC7D,CAAC;EAKF,MAAM,EAAmC;GACvC,IAAI;IAAC;IAAc;IAAqD;IAAkB;GAC1F,IAAI;IAAC;IAAgB;IAAe;IAAmB;GACxD,CAAC;EAKF,MAAM;GACJ,UAAU,CAAC,8BAA8B,mCAAmC;GAC5E,YAAY,EAAE;GACf;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;EACP;CACF,CACF,EClBY,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;EAAe,CAAC,GAAG,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;EAAW;AAEpD,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;EAChC,CAAA;;AAIX,EAAU,cAAc;;;AClDxB,IAAa,KAAS,EAAE,aAAU,GAAG,QACb,IAKpB,kBAAC,OAAD;CAAK,WAAU;WAAf,CACG,GACD,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,CACpB;KALN,kBAAC,GAAD;CAAW,MAAK;CAAa,GAAI;CAAS,CAAA;AAS9C,EAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAe;CAA2B,EAC7E;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,QAAQ;IAAC;IAAa;IAAkB;IAAiB;GACzD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,OAAO;IAAC;IAAY;IAAiB;IAAiB;GACtD,QAAQ;IAAC;IAAY;IAAiB;IAAiB;GACvD,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC7D,CAAC;EAKF,MAAM,EAAmC;GACvC,IAAI;IACF;IACA;IACA;IACD;GACD,IAAI;IAAC;IAA0B;IAAe;IAAmB;GAClE,CAAC;EAKF,MAAM;GACJ,UAAU,CAAC,8BAA8B,mCAAmC;GAC5E,YAAY,EAAE;GACf;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;EACP;CACF,CACF,ECtBY,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;EAAe,CAAC,GAAG,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;EAAW;AAEpD,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;EAChC,CAAA;;AAIX,EAAU,cAAc;;;AClDxB,IAAa,KAAS,EAAE,aAAU,GAAG,QACb,IAKpB,kBAAC,OAAD;CAAK,WAAU;WAAf,CACG,GACD,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,CACpB;KALN,kBAAC,GAAD;CAAW,MAAK;CAAa,GAAI;CAAS,CAAA;AAS9C,EAAM,cAAc"}

package/dist/breadcrumb/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../text-link/index.js`);let r=require(`class-variance-authority`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`);var o=({className:e,"aria-label":t,ref:n,...a})=>(0,i.jsx)(`nav`,{"data-spark-component":`breadcrumb`,ref:n,"aria-label":t,className:(0,r.cx)(`text-caption text-neutral`,e),children:(0,i.jsx)(`ol`,{className:(0,r.cx)(`gap-sm flex flex-wrap items-center break-words`),...a})});o.displayName=`Breadcrumb.Breadcrumb`;var s=({asChild:t=!1,className:n,children:a,...o})=>(0,i.jsx)(t?e.Slot:`span`,{"data-spark-component":`breadcrumb-current-page`,role:`link`,"aria-disabled":!0,"aria-current":`page`,className:(0,r.cx)(`inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current`,n),...o,children:a});s.displayName=`Breadcrumb.CurrentPage`;var c=({className:e,...t})=>(0,i.jsx)(`li`,{"data-spark-component":`breadcrumb-item`,className:(0,r.cx)(`min-w-none gap-sm inline-flex items-center`,e),...t});c.displayName=`Breadcrumb.Item`;var l=({asChild:t=!1,className:a,bold:o=!0,intent:s=`current`,underline:c=!0,href:l,ref:u,...d})=>(0,i.jsx)(t?e.Slot:n.TextLink,{"data-spark-component":`breadcrumb-link`,href:l,ref:u,className:(0,r.cx)(`inline! overflow-hidden text-ellipsis whitespace-nowrap`,a),bold:o,intent:s,underline:c,...d});l.displayName=`Breadcrumb.Link`;var u=({asChild:n=!1,className:o,children:s,ref:c,...l})=>(0,i.jsx)(n?e.Slot:`li`,{role:`presentation`,"aria-hidden":!0,"data-spark-component":`breadcrumb-separator`,ref:c,className:(0,r.cx)(`gap-sm inline-flex items-center`,o),...l,children:s??(0,i.jsx)(t.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});u.displayName=`Breadcrumb.Separator`;var d=Object.assign(o,{Item:c,Link:l,CurrentPage:s,Separator:u});d.displayName=`Breadcrumb`,c.displayName=`Breadcrumb.Item`,l.displayName=`Breadcrumb.Link`,s.displayName=`Breadcrumb.CurrentPage`,u.displayName=`Breadcrumb.Separator`,exports.Breadcrumb=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../text-link/index.js`);let r=require(`class-variance-authority`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`);var o=({className:e,"aria-label":t,ref:n,...a})=>(0,i.jsx)(`nav`,{"data-spark-component":`breadcrumb`,ref:n,"aria-label":t,className:(0,r.cx)(`text-caption text-neutral`,e),children:(0,i.jsx)(`ol`,{className:(0,r.cx)(`gap-sm flex flex-wrap items-center break-words`),...a})});o.displayName=`Breadcrumb.Breadcrumb`;var s=({asChild:t=!1,className:n,children:a,...o})=>(0,i.jsx)(t?e.Slot:`span`,{"data-spark-component":`breadcrumb-current-page`,role:`link`,"aria-disabled":!0,"aria-current":`page`,className:(0,r.cx)(`inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current`,n),...o,children:a});s.displayName=`Breadcrumb.CurrentPage`;var c=({className:e,...t})=>(0,i.jsx)(`li`,{"data-spark-component":`breadcrumb-item`,className:(0,r.cx)(`min-w-none gap-sm inline-flex items-center`,e),...t});c.displayName=`Breadcrumb.Item`;var l=({asChild:t=!1,className:a,bold:o=!0,intent:s=`current`,underline:c=!0,href:l,ref:u,...d})=>(0,i.jsx)(t?e.Slot:n.TextLink,{"data-spark-component":`breadcrumb-link`,href:l,ref:u,className:(0,r.cx)(`inline! overflow-hidden text-ellipsis whitespace-nowrap`,a),bold:o,intent:s,underline:c,...d});l.displayName=`Breadcrumb.Link`;var u=({asChild:n=!1,className:o,children:s,ref:c,...l})=>(0,i.jsx)(n?e.Slot:`li`,{role:`presentation`,"aria-hidden":!0,"data-spark-component":`breadcrumb-separator`,ref:c,className:(0,r.cx)(`gap-sm inline-flex items-center`,o),...l,children:s??(0,i.jsx)(t.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});u.displayName=`Breadcrumb.Separator`;var d=Object.assign(o,{Item:c,Link:l,CurrentPage:s,Separator:u});d.displayName=`Breadcrumb`,c.displayName=`Breadcrumb.Item`,l.displayName=`Breadcrumb.Link`,s.displayName=`Breadcrumb.CurrentPage`,u.displayName=`Breadcrumb.Separator`,exports.Breadcrumb=d;
 //# sourceMappingURL=index.js.map

package/dist/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oUASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,WAErD,EAAA,EAAA,KAAC,KAAD,CAAI,WAAA,EAAA,EAAA,IAAc,iDAAiD,CAAE,GAAI,EAAQ,CAAA,CAC7E,CAAA,CAIV,EAAW,YAAc,wBCZzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,IACE,iFACA,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAIhB,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,IAAc,6CAA8C,EAAU,CACtE,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,IAAc,0DAA2D,EAAU,CAC7E,OACE,SACG,YACX,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACjB,CAAA,CAEC,CAAA,CAIhB,EAAU,YAAc,uBClCxB,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,OACA,cACA,YACD,CAAC,CAEF,EAAW,YAAc,aACzB,EAAK,YAAc,kBACnB,EAAK,YAAc,kBACnB,EAAY,YAAc,yBAC1B,EAAU,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oUASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,WAErD,EAAA,EAAA,KAAC,KAAD,CAAI,WAAA,EAAA,EAAA,IAAc,iDAAiD,CAAE,GAAI,EAAQ,CAAA,CAC7E,CAAA,CAIV,EAAW,YAAc,wBCZzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,IACE,mFACA,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAIhB,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,IAAc,6CAA8C,EAAU,CACtE,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,IAAc,0DAA2D,EAAU,CAC7E,OACE,SACG,YACX,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACjB,CAAA,CAEC,CAAA,CAIhB,EAAU,YAAc,uBClCxB,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,OACA,cACA,YACD,CAAC,CAEF,EAAW,YAAc,aACzB,EAAK,YAAc,kBACnB,EAAK,YAAc,kBACnB,EAAY,YAAc,yBAC1B,EAAU,YAAc"}

package/dist/breadcrumb/index.mjs

@@ -23,7 +23,7 @@ var s = ({ asChild: t = !1, className: n, children: a, ...o }) => /* @__PURE__ *
 	role: "link",
 	"aria-disabled": !0,
 	"aria-current": "page",
-	className: r("inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current", n),
+	className: r("inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current", n),
 	...o,
 	children: a
 });

package/dist/breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,EAAU;WAErD,kBAAC,MAAD;EAAI,WAAW,EAAG,iDAAiD;EAAE,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAIV,EAAW,cAAc;;;ACZzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,kFACA,EACD;CACD,GAAI;CAEH;CACS,CAAA;AAIhB,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,EAAU;CACtE,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,EAAU;CAC7E;CACE;CACG;CACX,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,EAAU;CAC3D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACjB,CAAA;CAEC,CAAA;AAIhB,EAAU,cAAc;;;AClCxB,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAW,cAAc,cACzB,EAAK,cAAc,mBACnB,EAAK,cAAc,mBACnB,EAAY,cAAc,0BAC1B,EAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,EAAU;WAErD,kBAAC,MAAD;EAAI,WAAW,EAAG,iDAAiD;EAAE,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAIV,EAAW,cAAc;;;ACZzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,oFACA,EACD;CACD,GAAI;CAEH;CACS,CAAA;AAIhB,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,EAAU;CACtE,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,EAAU;CAC7E;CACE;CACG;CACX,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,EAAU;CAC3D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACjB,CAAA;CAEC,CAAA;AAIhB,EAAU,cAAc;;;AClCxB,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAW,cAAc,cACzB,EAAK,cAAc,mBACnB,EAAK,cAAc,mBACnB,EAAY,cAAc,0BAC1B,EAAU,cAAc"}

package/dist/form-field/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../form-field-1sKqNg7F.js`);exports.FormField=e.t,exports.useFormFieldControl=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../form-field-CYGgse45.js`);exports.FormField=e.t,exports.useFormFieldControl=e.n;

package/dist/form-field/index.mjs

@@ -1,2 +1,2 @@
-import { n as e, t } from "../form-field-OhKW7u5I.mjs";
+import { n as e, t } from "../form-field-CV5dzt-I.mjs";
 export { t as FormField, e as useFormFieldControl };

package/dist/{form-field-OhKW7u5I.mjs → form-field-CV5dzt-I.mjs}

@@ -204,7 +204,7 @@ var N = ({ htmlFor: e, className: n, children: o, requiredIndicator: s = /* @__P
 		id: g,
 		"data-spark-component": "form-field-label",
 		htmlFor: c ? void 0 : e || d.id,
-		className: a("default:font-bold", n, f ? "text-on-surface/dim-3  pointer-events-none" : void 0),
+		className: a("default:font-medium", n, f ? "text-on-surface/dim-3  pointer-events-none" : void 0),
 		asChild: c,
 		...u,
 		children: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, { children: o }), _ && s] })
@@ -238,4 +238,4 @@ F.displayName = "FormField", N.displayName = "FormField.Label", A.displayName =
 //#endregion
 export { O as n, F as t };
 
-//# sourceMappingURL=form-field-OhKW7u5I.mjs.map
+//# sourceMappingURL=form-field-CV5dzt-I.mjs.map

package/dist/{form-field-OhKW7u5I.mjs.map → form-field-CV5dzt-I.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-OhKW7u5I.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-bold',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":";;;;;;;;;;;AAiDA,IAAa,IAAmB,EAA4C,KAAK,EAEpE,IAAY,eAEZ,UAAqB;CAChC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,wDAAwD;AAGtE,QAAO;GCjDI,KAAqB,EAChC,OACA,SACA,cAAW,IACX,cAAW,IACX,UACA,eACA,kBAC4B;CAC5B,IAAM,IAAU,GAAG,EAAU,SAAS,GAAO,IACvC,CAAC,GAAY,KAAiB,EAAmB,EAAE,CAAC,EACpD,IAAc,EAAW,SAAS,IAAI,EAAW,KAAK,IAAI,GAAG,KAAA,GAE7D,IAAqB,GAAa,MAAkB;AACxD,KAAc,MAAO,CAAC,GAAG,GAAK,EAAM,CAAC;IACpC,EAAE,CAAC,EAEA,IAAwB,GAAa,MAAkB;AAC3D,KAAc,MAAO,EAAI,QAAO,MAAW,MAAY,EAAM,CAAC;IAC7D,EAAE,CAAC,EAEA,IAAQ,SAGL;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAVgB,MAAU;EAW1B;EACA,gBAAgB;EAChB,mBAAmB;EACpB,GACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,kBAAC,EAAiB,UAAlB;EAAkC;EAAQ;EAAqC,CAAA;;AAGxF,EAAkB,cAAc;;;ACtChC,IAAa,KAAa,EACxB,cACA,cAAW,IACX,cAAW,IACX,SACA,UACA,gBAAa,IACb,aAAU,IACV,QACA,GAAG,QAMD,kBAAC,GAAD;CACM,IALG,GAAG,EAAU,GAAG,GAAO;CAMxB;CACM;CACF;CACA;CACH;WAEP,kBAXc,IAAU,IAAO,OAW/B;EACO;EACL,wBAAqB;EACrB,WAAW,EAAG,GAAW,uBAAuB;EAChD,GAAI;EACJ,CAAA;CACgB,CAAA;AAIxB,EAAU,cAAc;;;AClDxB,IAAa,KAAoB,EAC/B,IAAI,GACJ,cACA,QACA,GAAG,QACwB;CAC3B,IAAM,EAAE,mBAAgB,yBAAsB,GAAc,EACtD,IAAY,GAAG,EAAU,WAAW,GAAO,IAC3C,IAAK,KAAU;AAUrB,QARA,SACE,EAAe,EAAG,QAEL;AACX,IAAkB,EAAG;KAEtB;EAAC;EAAI;EAAgB;EAAkB,CAAC,EAGzC,kBAAC,QAAD;EACO;EACD;EACJ,wBAAqB;EACrB,WAAW,EAAG,GAAW,uBAAuB;EAChD,GAAI;EACJ,CAAA;;AAIN,EAAiB,cAAc;;;ACpB/B,IAAa,KAAyB,EACpC,cACA,UACA,aACA,QACA,GAAG,QAEW,GAAc,CAElB,UAAU,IAKlB,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,WAAW,EACT,4BACA,MAAU,UAAU,eAAe,yBACnC,EACD;CACD,GAAI;WARN;EAUG,MAAU,WACT,kBAAC,GAAD;GAAM,MAAK;aACT,kBAAC,GAAD,EAAkB,CAAA;GACb,CAAA;EAER,MAAU,WACT,kBAAC,GAAD;GAAM,MAAK;GAAK,QAAO;aACrB,kBAAC,GAAD,EAAgB,CAAA;GACX,CAAA;EAER,MAAU,aACT,kBAAC,GAAD;GAAM,MAAK;aACT,kBAAC,GAAD,EAAS,CAAA;GACJ,CAAA;EAGR;EACgB;KA/BZ;AAmCX,EAAsB,cAAc;;;ACtDpC,IAAa,KAAyB,EAAE,QAAK,GAAG,QAE5C,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,OAAM;CACN,GAAI;CACJ,CAAA;AAIN,EAAsB,cAAc;;;ACMpC,IAAa,KAA4B,EACvC,cACA,WAAQ,IACR,cACA,gBACA,qBACA,QACA,GAAG,QACgC;CACnC,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAM;AAa3D,QARA,QAAgB;EACd,IAAM,IAAY,iBAAiB;AACjC,KAAkB,EAAM;KACvB,IAAK;AAER,eAAa,aAAa,EAAU;IACnC,CAAC,EAAM,CAAC,EAGT,kBAAC,QAAD;EAAM,WAAU;YAAhB;GACG,KACC,kBAAC,GAAD;IAAkB,WAAU;cAAmB;IAA+B,CAAA;GAEhF,kBAAC,QAAD;IACO;IACL,eAAA;IACA,wBAAqB;IACrB,WAAW,EAAG,GAAW,gBAAgB,eAAe;IACxD,GAAI;cAEH,GAAG,EAAM,OAAO,GAAG;IACf,CAAA;GAEN,KACC,kBAAC,QAAD;IAAM,WAAU;IAAU,aAAU;cACjC,EAAiB,EAAE,gBAAgB,IAAY,EAAe,QAAQ,CAAC;IACnE,CAAA;GAEJ;;;AAIX,EAAyB,cAAc;;;ACjDvC,IAAa,UAA4B;CACvC,IAAM,EAAE,OAAI,SAAM,gBAAa,aAAU,aAAU,UAAO,YAAS,cAAW,kBAC5E,EAAW,EAAiB,IAAI,EAAE;AAEpC,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GAIU,KAAoB,EAAE,kBAG1B,kBAAA,GAAA,EAAA,UAAG,EAFI,GAAqB,CAEV,EAAI,CAAA;AAG/B,EAAiB,cAAc;;;ACtC/B,IAAa,KAAwB,EAAE,cAAW,QAAK,GAAG,QAEtD,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,qCAAqC,EAAU;CAC7D,GAAI;CACJ,CAAA;AAIN,EAAqB,cAAc;;;ACXnC,IAAa,KAAyB,EAAE,QAAK,GAAG,QAE5C,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,OAAM;CACN,GAAI;CACJ,CAAA;AAIN,EAAsB,cAAc;;;ACVpC,IAAa,KAA0B,EACrC,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,yBAAyB,EAAU;CACjD,GAAI;CACJ,CAAA;AAIN,EAAuB,cAAc;;;ACRrC,IAAa,KAAkB,EAC7B,SAAS,GACT,cACA,aACA,uBAAoB,kBAAC,GAAD,EAA8B,CAAA,EAClD,YACA,QACA,GAAG,QACsB;CACzB,IAAM,IAAU,GAAc,EAExB,EAAE,aAAU,YAAS,kBAAe;AAG1C,QACE,kBAAC,GAAD;EACO;EACL,IAAI;EACJ,wBAAqB;EACZ,SAPG,IAAU,KAAA,IAAY,KAAe,EAAQ;EAQzD,WAAW,EACT,qBACA,GACA,IAAW,+CAA+C,KAAA,EAC3D;EACQ;EACT,GAAI;YAEJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAY,aAAqB,CAAA,EAChC,KAAc,EACd,EAAA,CAAA;EACG,CAAA;;AAIZ,EAAe,cAAc;;;AC5C7B,IAAa,KAA2B,EAAE,QAAK,GAAG,QAE9C,kBAAC,GAAD;CACO;CACL,wBAAqB;CACrB,OAAM;CACN,GAAI;CACJ,CAAA;AAIN,EAAwB,cAAc;;;ACLtC,IAAa,IAWT,OAAO,OAAO,GAAM;CACtB,OAAO;CACP,aAAa;CACb,SAAS;CACT,cAAc;CACd,gBAAgB;CAChB,cAAc;CACd,cAAc;CACd,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,EAAU,cAAc,aACxB,EAAe,cAAc,mBAC7B,EAAqB,cAAc,yBACnC,EAAiB,cAAc,qBAC/B,EAAsB,cAAc,0BACpC,EAAwB,cAAc,4BACtC,EAAsB,cAAc,0BACpC,EAAsB,cAAc,0BACpC,EAAuB,cAAc,2BACrC,EAA2B,cAAc,+BACzC,EAAyB,cAAc"}
+{"version":3,"file":"form-field-CV5dzt-I.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/{form-field-1sKqNg7F.js → form-field-CYGgse45.js}

@@ -1,2 +1,2 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-BCSEss4U.js`),r=require(`./FormFieldRequiredIndicator-CEB8Ez-q.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`default:text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-description`,className:(0,i.cx)(`text-on-surface/dim-1 text-body-2`,e),...n});x.displayName=`FormField.Description`;var S=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});S.displayName=`FormField.ErrorMessage`;var C=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});C.displayName=`FormField.HelperMessage`;var w=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:l?void 0:t||p.id,className:(0,i.cx)(`default:font-bold`,a,m?`text-on-surface/dim-3  pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};w.displayName=`FormField.Label`;var T=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});T.displayName=`FormField.SuccessMessage`;var E=Object.assign(m,{Label:w,Description:x,Control:b,StateMessage:g,SuccessMessage:T,AlertMessage:_,ErrorMessage:S,HelperMessage:C,RequiredIndicator:r.t,CharactersCount:v});E.displayName=`FormField`,w.displayName=`FormField.Label`,x.displayName=`FormField.Description`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,T.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,S.displayName=`FormField.ErrorMessage`,C.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
-//# sourceMappingURL=form-field-1sKqNg7F.js.map
+require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-BCSEss4U.js`),r=require(`./FormFieldRequiredIndicator-CEB8Ez-q.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`default:text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-description`,className:(0,i.cx)(`text-on-surface/dim-1 text-body-2`,e),...n});x.displayName=`FormField.Description`;var S=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});S.displayName=`FormField.ErrorMessage`;var C=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});C.displayName=`FormField.HelperMessage`;var w=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:l?void 0:t||p.id,className:(0,i.cx)(`default:font-medium`,a,m?`text-on-surface/dim-3  pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};w.displayName=`FormField.Label`;var T=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});T.displayName=`FormField.SuccessMessage`;var E=Object.assign(m,{Label:w,Description:x,Control:b,StateMessage:g,SuccessMessage:T,AlertMessage:_,ErrorMessage:S,HelperMessage:C,RequiredIndicator:r.t,CharactersCount:v});E.displayName=`FormField`,w.displayName=`FormField.Label`,x.displayName=`FormField.Description`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,T.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,S.displayName=`FormField.ErrorMessage`,C.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
+//# sourceMappingURL=form-field-CYGgse45.js.map

package/dist/{form-field-1sKqNg7F.js.map → form-field-CYGgse45.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-1sKqNg7F.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-bold',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}
+{"version":3,"file":"form-field-CYGgse45.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"8YAiDA,IAAa,GAAA,EAAA,EAAA,eAA+D,KAAK,CAEpE,EAAY,cAEZ,MAAqB,CAChC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,wDAAwD,CAGtE,OAAO,GCjDI,GAAqB,CAChC,KACA,OACA,WAAW,GACX,WAAW,GACX,QACA,aACA,cAC4B,CAC5B,IAAM,EAAU,GAAG,EAAU,UAAA,EAAA,EAAA,QAAgB,GACvC,CAAC,EAAY,IAAA,EAAA,EAAA,UAAoC,EAAE,CAAC,CACpD,EAAc,EAAW,OAAS,EAAI,EAAW,KAAK,IAAI,CAAG,IAAA,GAE7D,GAAA,EAAA,EAAA,aAAkC,GAAkB,CACxD,EAAc,GAAO,CAAC,GAAG,EAAK,EAAM,CAAC,EACpC,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,aAAqC,GAAkB,CAC3D,EAAc,GAAO,EAAI,OAAO,GAAW,IAAY,EAAM,CAAC,EAC7D,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,cAGG,CACL,KACA,UACA,OACA,WACA,WACA,QACA,aACA,UAVgB,IAAU,QAW1B,cACA,eAAgB,EAChB,kBAAmB,EACpB,EACA,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAAC,CAEF,OAAO,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAAkC,QAAQ,WAAqC,CAAA,EAGxF,EAAkB,YAAc,oBCtChC,IAAa,GAAa,CACxB,YACA,WAAW,GACX,WAAW,GACX,OACA,QACA,aAAa,GACb,UAAU,GACV,MACA,GAAG,MAMD,EAAA,EAAA,KAAC,EAAD,CACM,GALG,GAAG,EAAU,IAAA,EAAA,EAAA,QAAU,GAMxB,OACM,aACF,WACA,WACH,kBAEP,EAAA,EAAA,KAXc,EAAU,EAAA,KAAO,MAW/B,CACO,MACL,uBAAqB,aACrB,WAAA,EAAA,EAAA,IAAc,EAAW,uBAAuB,CAChD,GAAI,EACJ,CAAA,CACgB,CAAA,CAIxB,EAAU,YAAc,YClDxB,IAAa,GAAoB,CAC/B,GAAI,EACJ,YACA,MACA,GAAG,KACwB,CAC3B,GAAM,CAAE,iBAAgB,qBAAsB,GAAc,CACtD,EAAY,GAAG,EAAU,YAAA,EAAA,EAAA,QAAkB,GAC3C,EAAK,GAAU,EAUrB,OARA,EAAA,EAAA,gBACE,EAAe,EAAG,KAEL,CACX,EAAkB,EAAG,GAEtB,CAAC,EAAI,EAAgB,EAAkB,CAAC,EAGzC,EAAA,EAAA,KAAC,OAAD,CACO,MACD,KACJ,uBAAqB,qBACrB,WAAA,EAAA,EAAA,IAAc,EAAW,uBAAuB,CAChD,GAAI,EACJ,CAAA,EAIN,EAAiB,YAAc,oBCpB/B,IAAa,GAAyB,CACpC,YACA,QACA,WACA,MACA,GAAG,KAEW,GAAc,CAElB,QAAU,GAKlB,EAAA,EAAA,MAAC,EAAD,CACO,MACL,uBAAqB,2BACrB,WAAA,EAAA,EAAA,IACE,2BACA,IAAU,QAAU,aAAe,wBACnC,EACD,CACD,GAAI,WARN,CAUG,IAAU,UACT,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,eAAD,EAAkB,CAAA,CACb,CAAA,CAER,IAAU,UACT,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,KAAK,OAAO,kBACrB,EAAA,EAAA,KAAC,EAAA,aAAD,EAAgB,CAAA,CACX,CAAA,CAER,IAAU,YACT,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CAGR,EACgB,GA/BZ,KAmCX,EAAsB,YAAc,yBCtDpC,IAAa,GAAyB,CAAE,MAAK,GAAG,MAE5C,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,2BACrB,MAAM,QACN,GAAI,EACJ,CAAA,CAIN,EAAsB,YAAc,yBCMpC,IAAa,GAA4B,CACvC,YACA,QAAQ,GACR,YACA,cACA,mBACA,MACA,GAAG,KACgC,CACnC,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,EAAM,CAa3D,OARA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAY,eAAiB,CACjC,EAAkB,EAAM,EACvB,IAAK,CAER,UAAa,aAAa,EAAU,EACnC,CAAC,EAAM,CAAC,EAGT,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,8BAAhB,CACG,IACC,EAAA,EAAA,KAAC,EAAD,CAAkB,UAAU,2BAAmB,EAA+B,CAAA,EAEhF,EAAA,EAAA,KAAC,OAAD,CACO,MACL,cAAA,GACA,uBAAqB,8BACrB,WAAA,EAAA,EAAA,IAAc,EAAW,eAAgB,eAAe,CACxD,GAAI,WAEH,GAAG,EAAM,OAAO,GAAG,IACf,CAAA,CAEN,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,UAAU,YAAU,kBACjC,EAAiB,CAAE,eAAgB,EAAY,EAAe,OAAQ,CAAC,CACnE,CAAA,CAEJ,IAIX,EAAyB,YAAc,4BCjDvC,IAAa,MAA4B,CACvC,GAAM,CAAE,KAAI,OAAM,cAAa,WAAU,WAAU,QAAO,UAAS,YAAW,eAAA,EAAA,EAAA,YACjE,EAAiB,EAAI,EAAE,CAEpC,MAAO,CACL,KACA,OACA,cACA,WACA,WACA,QACA,UACA,YACA,aACD,EAIU,GAAoB,CAAE,eAG1B,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SAAG,EAFI,GAAqB,CAEV,CAAI,CAAA,CAG/B,EAAiB,YAAc,oBCtC/B,IAAa,GAAwB,CAAE,YAAW,MAAK,GAAG,MAEtD,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,yBACrB,WAAA,EAAA,EAAA,IAAc,oCAAqC,EAAU,CAC7D,GAAI,EACJ,CAAA,CAIN,EAAqB,YAAc,wBCXnC,IAAa,GAAyB,CAAE,MAAK,GAAG,MAE5C,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,2BACrB,MAAM,QACN,GAAI,EACJ,CAAA,CAIN,EAAsB,YAAc,yBCVpC,IAAa,GAA0B,CACrC,YACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,4BACrB,WAAA,EAAA,EAAA,IAAc,wBAAyB,EAAU,CACjD,GAAI,EACJ,CAAA,CAIN,EAAuB,YAAc,0BCRrC,IAAa,GAAkB,CAC7B,QAAS,EACT,YACA,WACA,qBAAoB,EAAA,EAAA,KAAC,EAAA,EAAD,EAA8B,CAAA,CAClD,UACA,MACA,GAAG,KACsB,CACzB,IAAM,EAAU,GAAc,CAExB,CAAE,WAAU,UAAS,cAAe,EAG1C,OACE,EAAA,EAAA,KAAC,EAAA,EAAD,CACO,MACL,GAAI,EACJ,uBAAqB,mBACZ,QAPG,EAAU,IAAA,GAAY,GAAe,EAAQ,GAQzD,WAAA,EAAA,EAAA,IACE,sBACA,EACA,EAAW,6CAA+C,IAAA,GAC3D,CACQ,UACT,GAAI,YAEJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAY,WAAqB,CAAA,CAChC,GAAc,EACd,CAAA,CAAA,CACG,CAAA,EAIZ,EAAe,YAAc,kBC5C7B,IAAa,GAA2B,CAAE,MAAK,GAAG,MAE9C,EAAA,EAAA,KAAC,EAAD,CACO,MACL,uBAAqB,6BACrB,MAAM,UACN,GAAI,EACJ,CAAA,CAIN,EAAwB,YAAc,2BCLtC,IAAa,EAWT,OAAO,OAAO,EAAM,CACtB,MAAO,EACP,YAAa,EACb,QAAS,EACT,aAAc,EACd,eAAgB,EAChB,aAAc,EACd,aAAc,EACd,cAAe,EACf,kBAAmB,EAAA,EACnB,gBAAiB,EAClB,CAAC,CAEF,EAAU,YAAc,YACxB,EAAe,YAAc,kBAC7B,EAAqB,YAAc,wBACnC,EAAiB,YAAc,oBAC/B,EAAsB,YAAc,yBACpC,EAAwB,YAAc,2BACtC,EAAsB,YAAc,yBACpC,EAAsB,YAAc,yBACpC,EAAuB,YAAc,0BACrC,EAAA,EAA2B,YAAc,8BACzC,EAAyB,YAAc"}