@alma-oss/spirit-web-react 4.4.2 → 4.6.0

package/dist/components/Skeleton/useSkeletonShapeStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSkeletonShapeStyleProps.cjs","sources":["../../../src/components/Skeleton/useSkeletonShapeStyleProps.ts"],"sourcesContent":["import { cssVariablePrefix } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type CSSProperties, type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonShapeStyleProps, type SpiritSkeletonShapeProps } from '../../types';\n\ninterface CustomizedCSSProperties extends CSSProperties {\n  [key: string]: string | undefined | number;\n}\n\nconst setCustomDimension = (prefix: string, size: number | undefined): CustomizedCSSProperties => {\n  if (!size) return {};\n\n  const propName = `--${prefix}`;\n\n  return { [propName]: `${size?.toString()}px` } as CustomizedCSSProperties;\n};\n\nconst setCustomBorderRadius = (\n  prefix: string,\n  radius: object | number | string | undefined,\n): CustomizedCSSProperties => {\n  const style: CustomizedCSSProperties = {};\n  const cssPrefix: string = `--${cssVariablePrefix}radius-`;\n\n  if (typeof radius === 'object' && radius !== null) {\n    Object.keys(radius).forEach((key) => {\n      const breakpointSuffix = key === 'mobile' ? '' : `-${key}`;\n      const value = (radius as Record<string, string | undefined>)[key];\n      (style as Record<string, string | undefined>)[`--${prefix}${breakpointSuffix}`] = `var(${cssPrefix}${value})`;\n    });\n  } else if (radius) {\n    (style as Record<string, string | undefined>)[`--${prefix}`] = `var(${cssPrefix}${radius})`;\n  }\n\n  return style;\n};\n\nexport interface SkeletonShapeStyles<T extends ElementType = 'div', E = void> {\n  classProps: string;\n  skeletonShapeStyleProps: CustomizedCSSProperties;\n  props: Omit<SpiritSkeletonShapeProps<T, E>, keyof SkeletonShapeStyleProps<T, E>>;\n}\n\nexport const useSkeletonShapeStyleProps = <T extends ElementType = 'div', E = void>(\n  props: SpiritSkeletonShapeProps<T, E>,\n): SkeletonShapeStyles<T, E> => {\n  const { height, width, borderRadius, ...otherProps } = props;\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonItemClass = `${skeletonClass}--shape`;\n\n  const classProps = classNames(skeletonClass, skeletonItemClass);\n  const stylePrefix: string = `${cssVariablePrefix}skeleton-shape`;\n\n  const customizedShapeStyle = {\n    ...setCustomDimension(`${stylePrefix}-width`, width),\n    ...setCustomDimension(`${stylePrefix}-height`, height),\n    ...(borderRadius ? setCustomBorderRadius(`${stylePrefix}-radius`, borderRadius) : {}),\n  };\n\n  return {\n    classProps,\n    skeletonShapeStyleProps: customizedShapeStyle,\n    props: otherProps,\n  };\n};\n"],"names":["setCustomDimension","prefix","size","setCustomBorderRadius","radius","style","cssPrefix","cssVariablePrefix","key","breakpointSuffix","value","useSkeletonShapeStyleProps","props","height","width","borderRadius","otherProps","skeletonClass","useClassNamePrefix","skeletonItemClass","classProps","classNames","stylePrefix","customizedShapeStyle"],"mappings":"0MAUMA,EAAqB,CAACC,EAAgBC,IACrCA,EAIE,CAAE,CAFQ,KAAKD,CAAM,EAEV,EAAG,GAAGC,GAAM,SAAA,CAAU,IAAA,EAJtB,CAAA,EAOdC,EAAwB,CAC5BF,EACAG,IAC4B,CAC5B,MAAMC,EAAiC,CAAA,EACjCC,EAAoB,KAAKC,EAAAA,iBAAiB,UAEhD,OAAI,OAAOH,GAAW,UAAYA,IAAW,KAC3C,OAAO,KAAKA,CAAM,EAAE,QAASI,GAAQ,CACnC,MAAMC,EAAmBD,IAAQ,SAAW,GAAK,IAAIA,CAAG,GAClDE,EAASN,EAA8CI,CAAG,EAC/DH,EAA6C,KAAKJ,CAAM,GAAGQ,CAAgB,EAAE,EAAI,OAAOH,CAAS,GAAGI,CAAK,GAC5G,CAAC,EACQN,IACRC,EAA6C,KAAKJ,CAAM,EAAE,EAAI,OAAOK,CAAS,GAAGF,CAAM,KAGnFC,CACT,EAQaM,EACXC,GAC8B,CAC9B,KAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,aAAAC,EAAc,GAAGC,GAAeJ,EAEjDK,EAAgBC,EAAAA,mBAAmB,UAAU,EAC7CC,EAAoB,GAAGF,CAAa,UAEpCG,EAAaC,EAAWJ,EAAeE,CAAiB,EACxDG,EAAsB,GAAGf,EAAAA,iBAAiB,iBAE1CgB,EAAuB,CAC3B,GAAGvB,EAAmB,GAAGsB,CAAW,SAAUR,CAAK,EACnD,GAAGd,EAAmB,GAAGsB,CAAW,UAAWT,CAAM,EACrD,GAAIE,EAAeZ,EAAsB,GAAGmB,CAAW,UAAWP,CAAY,EAAI,CAAA,CAAC,EAGrF,MAAO,CACL,WAAAK,EACA,wBAAyBG,EACzB,MAAOP,CAAA,CAEX"}
+{"version":3,"file":"useSkeletonShapeStyleProps.cjs","sources":["../../../src/components/Skeleton/useSkeletonShapeStyleProps.ts"],"sourcesContent":["import { cssVariablePrefix } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type CSSProperties } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonShapeBaseProps } from '../../types';\n\ninterface CustomizedCSSProperties extends CSSProperties {\n  [key: string]: string | undefined | number;\n}\n\nconst setCustomDimension = (prefix: string, size: number | undefined): CustomizedCSSProperties => {\n  if (!size) return {};\n\n  const propName = `--${prefix}`;\n\n  return { [propName]: `${size?.toString()}px` } as CustomizedCSSProperties;\n};\n\nconst setCustomBorderRadius = (\n  prefix: string,\n  radius: object | number | string | undefined,\n): CustomizedCSSProperties => {\n  const style: CustomizedCSSProperties = {};\n  const cssPrefix: string = `--${cssVariablePrefix}radius-`;\n\n  if (typeof radius === 'object' && radius !== null) {\n    Object.keys(radius).forEach((key) => {\n      const breakpointSuffix = key === 'mobile' ? '' : `-${key}`;\n      const value = (radius as Record<string, string | undefined>)[key];\n      (style as Record<string, string | undefined>)[`--${prefix}${breakpointSuffix}`] = `var(${cssPrefix}${value})`;\n    });\n  } else if (radius) {\n    (style as Record<string, string | undefined>)[`--${prefix}`] = `var(${cssPrefix}${radius})`;\n  }\n\n  return style;\n};\n\nexport const useSkeletonShapeStyleProps = <E = void>(props: SkeletonShapeBaseProps<E>) => {\n  const { height, width, borderRadius, ...otherProps } = props;\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonItemClass = `${skeletonClass}--shape`;\n\n  const classProps = classNames(skeletonClass, skeletonItemClass);\n  const stylePrefix: string = `${cssVariablePrefix}skeleton-shape`;\n\n  const customizedShapeStyle = {\n    ...setCustomDimension(`${stylePrefix}-width`, width),\n    ...setCustomDimension(`${stylePrefix}-height`, height),\n    ...(borderRadius ? setCustomBorderRadius(`${stylePrefix}-radius`, borderRadius) : {}),\n  };\n\n  return {\n    classProps,\n    skeletonShapeStyleProps: customizedShapeStyle,\n    props: otherProps,\n  };\n};\n"],"names":["setCustomDimension","prefix","size","setCustomBorderRadius","radius","style","cssPrefix","cssVariablePrefix","key","breakpointSuffix","value","useSkeletonShapeStyleProps","props","height","width","borderRadius","otherProps","skeletonClass","useClassNamePrefix","skeletonItemClass","classProps","classNames","stylePrefix","customizedShapeStyle"],"mappings":"0MAUMA,EAAqB,CAACC,EAAgBC,IACrCA,EAIE,CAAE,CAFQ,KAAKD,CAAM,EAEV,EAAG,GAAGC,GAAM,SAAA,CAAU,IAAA,EAJtB,CAAA,EAOdC,EAAwB,CAC5BF,EACAG,IAC4B,CAC5B,MAAMC,EAAiC,CAAA,EACjCC,EAAoB,KAAKC,EAAAA,iBAAiB,UAEhD,OAAI,OAAOH,GAAW,UAAYA,IAAW,KAC3C,OAAO,KAAKA,CAAM,EAAE,QAASI,GAAQ,CACnC,MAAMC,EAAmBD,IAAQ,SAAW,GAAK,IAAIA,CAAG,GAClDE,EAASN,EAA8CI,CAAG,EAC/DH,EAA6C,KAAKJ,CAAM,GAAGQ,CAAgB,EAAE,EAAI,OAAOH,CAAS,GAAGI,CAAK,GAC5G,CAAC,EACQN,IACRC,EAA6C,KAAKJ,CAAM,EAAE,EAAI,OAAOK,CAAS,GAAGF,CAAM,KAGnFC,CACT,EAEaM,EAAwCC,GAAqC,CACxF,KAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,aAAAC,EAAc,GAAGC,GAAeJ,EAEjDK,EAAgBC,EAAAA,mBAAmB,UAAU,EAC7CC,EAAoB,GAAGF,CAAa,UAEpCG,EAAaC,EAAWJ,EAAeE,CAAiB,EACxDG,EAAsB,GAAGf,EAAAA,iBAAiB,iBAE1CgB,EAAuB,CAC3B,GAAGvB,EAAmB,GAAGsB,CAAW,SAAUR,CAAK,EACnD,GAAGd,EAAmB,GAAGsB,CAAW,UAAWT,CAAM,EACrD,GAAIE,EAAeZ,EAAsB,GAAGmB,CAAW,UAAWP,CAAY,EAAI,CAAA,CAAC,EAGrF,MAAO,CACL,WAAAK,EACA,wBAAyBG,EACzB,MAAOP,CAAA,CAEX"}

package/dist/components/Skeleton/useSkeletonShapeStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSkeletonShapeStyleProps.js","sources":["../../../src/components/Skeleton/useSkeletonShapeStyleProps.ts"],"sourcesContent":["import { cssVariablePrefix } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type CSSProperties, type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonShapeStyleProps, type SpiritSkeletonShapeProps } from '../../types';\n\ninterface CustomizedCSSProperties extends CSSProperties {\n  [key: string]: string | undefined | number;\n}\n\nconst setCustomDimension = (prefix: string, size: number | undefined): CustomizedCSSProperties => {\n  if (!size) return {};\n\n  const propName = `--${prefix}`;\n\n  return { [propName]: `${size?.toString()}px` } as CustomizedCSSProperties;\n};\n\nconst setCustomBorderRadius = (\n  prefix: string,\n  radius: object | number | string | undefined,\n): CustomizedCSSProperties => {\n  const style: CustomizedCSSProperties = {};\n  const cssPrefix: string = `--${cssVariablePrefix}radius-`;\n\n  if (typeof radius === 'object' && radius !== null) {\n    Object.keys(radius).forEach((key) => {\n      const breakpointSuffix = key === 'mobile' ? '' : `-${key}`;\n      const value = (radius as Record<string, string | undefined>)[key];\n      (style as Record<string, string | undefined>)[`--${prefix}${breakpointSuffix}`] = `var(${cssPrefix}${value})`;\n    });\n  } else if (radius) {\n    (style as Record<string, string | undefined>)[`--${prefix}`] = `var(${cssPrefix}${radius})`;\n  }\n\n  return style;\n};\n\nexport interface SkeletonShapeStyles<T extends ElementType = 'div', E = void> {\n  classProps: string;\n  skeletonShapeStyleProps: CustomizedCSSProperties;\n  props: Omit<SpiritSkeletonShapeProps<T, E>, keyof SkeletonShapeStyleProps<T, E>>;\n}\n\nexport const useSkeletonShapeStyleProps = <T extends ElementType = 'div', E = void>(\n  props: SpiritSkeletonShapeProps<T, E>,\n): SkeletonShapeStyles<T, E> => {\n  const { height, width, borderRadius, ...otherProps } = props;\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonItemClass = `${skeletonClass}--shape`;\n\n  const classProps = classNames(skeletonClass, skeletonItemClass);\n  const stylePrefix: string = `${cssVariablePrefix}skeleton-shape`;\n\n  const customizedShapeStyle = {\n    ...setCustomDimension(`${stylePrefix}-width`, width),\n    ...setCustomDimension(`${stylePrefix}-height`, height),\n    ...(borderRadius ? setCustomBorderRadius(`${stylePrefix}-radius`, borderRadius) : {}),\n  };\n\n  return {\n    classProps,\n    skeletonShapeStyleProps: customizedShapeStyle,\n    props: otherProps,\n  };\n};\n"],"names":["setCustomDimension","prefix","size","setCustomBorderRadius","radius","style","cssPrefix","cssVariablePrefix","key","breakpointSuffix","value","useSkeletonShapeStyleProps","props","height","width","borderRadius","otherProps","skeletonClass","useClassNamePrefix","skeletonItemClass","classProps","classNames","stylePrefix","customizedShapeStyle"],"mappings":";;;AAUA,MAAMA,IAAqB,CAACC,GAAgBC,MACrCA,IAIE,EAAE,CAFQ,KAAKD,CAAM,EAEV,GAAG,GAAGC,GAAM,SAAA,CAAU,KAAA,IAJtB,CAAA,GAOdC,IAAwB,CAC5BF,GACAG,MAC4B;AAC5B,QAAMC,IAAiC,CAAA,GACjCC,IAAoB,KAAKC,CAAiB;AAEhD,SAAI,OAAOH,KAAW,YAAYA,MAAW,OAC3C,OAAO,KAAKA,CAAM,EAAE,QAAQ,CAACI,MAAQ;AACnC,UAAMC,IAAmBD,MAAQ,WAAW,KAAK,IAAIA,CAAG,IAClDE,IAASN,EAA8CI,CAAG;AAC/D,IAAAH,EAA6C,KAAKJ,CAAM,GAAGQ,CAAgB,EAAE,IAAI,OAAOH,CAAS,GAAGI,CAAK;AAAA,EAC5G,CAAC,IACQN,MACRC,EAA6C,KAAKJ,CAAM,EAAE,IAAI,OAAOK,CAAS,GAAGF,CAAM,MAGnFC;AACT,GAQaM,IAA6B,CACxCC,MAC8B;AAC9B,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,GAAGC,MAAeJ,GAEjDK,IAAgBC,EAAmB,UAAU,GAC7CC,IAAoB,GAAGF,CAAa,WAEpCG,IAAaC,EAAWJ,GAAeE,CAAiB,GACxDG,IAAsB,GAAGf,CAAiB,kBAE1CgB,IAAuB;AAAA,IAC3B,GAAGvB,EAAmB,GAAGsB,CAAW,UAAUR,CAAK;AAAA,IACnD,GAAGd,EAAmB,GAAGsB,CAAW,WAAWT,CAAM;AAAA,IACrD,GAAIE,IAAeZ,EAAsB,GAAGmB,CAAW,WAAWP,CAAY,IAAI,CAAA;AAAA,EAAC;AAGrF,SAAO;AAAA,IACL,YAAAK;AAAA,IACA,yBAAyBG;AAAA,IACzB,OAAOP;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useSkeletonShapeStyleProps.js","sources":["../../../src/components/Skeleton/useSkeletonShapeStyleProps.ts"],"sourcesContent":["import { cssVariablePrefix } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type CSSProperties } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonShapeBaseProps } from '../../types';\n\ninterface CustomizedCSSProperties extends CSSProperties {\n  [key: string]: string | undefined | number;\n}\n\nconst setCustomDimension = (prefix: string, size: number | undefined): CustomizedCSSProperties => {\n  if (!size) return {};\n\n  const propName = `--${prefix}`;\n\n  return { [propName]: `${size?.toString()}px` } as CustomizedCSSProperties;\n};\n\nconst setCustomBorderRadius = (\n  prefix: string,\n  radius: object | number | string | undefined,\n): CustomizedCSSProperties => {\n  const style: CustomizedCSSProperties = {};\n  const cssPrefix: string = `--${cssVariablePrefix}radius-`;\n\n  if (typeof radius === 'object' && radius !== null) {\n    Object.keys(radius).forEach((key) => {\n      const breakpointSuffix = key === 'mobile' ? '' : `-${key}`;\n      const value = (radius as Record<string, string | undefined>)[key];\n      (style as Record<string, string | undefined>)[`--${prefix}${breakpointSuffix}`] = `var(${cssPrefix}${value})`;\n    });\n  } else if (radius) {\n    (style as Record<string, string | undefined>)[`--${prefix}`] = `var(${cssPrefix}${radius})`;\n  }\n\n  return style;\n};\n\nexport const useSkeletonShapeStyleProps = <E = void>(props: SkeletonShapeBaseProps<E>) => {\n  const { height, width, borderRadius, ...otherProps } = props;\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonItemClass = `${skeletonClass}--shape`;\n\n  const classProps = classNames(skeletonClass, skeletonItemClass);\n  const stylePrefix: string = `${cssVariablePrefix}skeleton-shape`;\n\n  const customizedShapeStyle = {\n    ...setCustomDimension(`${stylePrefix}-width`, width),\n    ...setCustomDimension(`${stylePrefix}-height`, height),\n    ...(borderRadius ? setCustomBorderRadius(`${stylePrefix}-radius`, borderRadius) : {}),\n  };\n\n  return {\n    classProps,\n    skeletonShapeStyleProps: customizedShapeStyle,\n    props: otherProps,\n  };\n};\n"],"names":["setCustomDimension","prefix","size","setCustomBorderRadius","radius","style","cssPrefix","cssVariablePrefix","key","breakpointSuffix","value","useSkeletonShapeStyleProps","props","height","width","borderRadius","otherProps","skeletonClass","useClassNamePrefix","skeletonItemClass","classProps","classNames","stylePrefix","customizedShapeStyle"],"mappings":";;;AAUA,MAAMA,IAAqB,CAACC,GAAgBC,MACrCA,IAIE,EAAE,CAFQ,KAAKD,CAAM,EAEV,GAAG,GAAGC,GAAM,SAAA,CAAU,KAAA,IAJtB,CAAA,GAOdC,IAAwB,CAC5BF,GACAG,MAC4B;AAC5B,QAAMC,IAAiC,CAAA,GACjCC,IAAoB,KAAKC,CAAiB;AAEhD,SAAI,OAAOH,KAAW,YAAYA,MAAW,OAC3C,OAAO,KAAKA,CAAM,EAAE,QAAQ,CAACI,MAAQ;AACnC,UAAMC,IAAmBD,MAAQ,WAAW,KAAK,IAAIA,CAAG,IAClDE,IAASN,EAA8CI,CAAG;AAC/D,IAAAH,EAA6C,KAAKJ,CAAM,GAAGQ,CAAgB,EAAE,IAAI,OAAOH,CAAS,GAAGI,CAAK;AAAA,EAC5G,CAAC,IACQN,MACRC,EAA6C,KAAKJ,CAAM,EAAE,IAAI,OAAOK,CAAS,GAAGF,CAAM,MAGnFC;AACT,GAEaM,IAA6B,CAAWC,MAAqC;AACxF,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,GAAGC,MAAeJ,GAEjDK,IAAgBC,EAAmB,UAAU,GAC7CC,IAAoB,GAAGF,CAAa,WAEpCG,IAAaC,EAAWJ,GAAeE,CAAiB,GACxDG,IAAsB,GAAGf,CAAiB,kBAE1CgB,IAAuB;AAAA,IAC3B,GAAGvB,EAAmB,GAAGsB,CAAW,UAAUR,CAAK;AAAA,IACnD,GAAGd,EAAmB,GAAGsB,CAAW,WAAWT,CAAM;AAAA,IACrD,GAAIE,IAAeZ,EAAsB,GAAGmB,CAAW,WAAWP,CAAY,IAAI,CAAA;AAAA,EAAC;AAGrF,SAAO;AAAA,IACL,YAAAK;AAAA,IACA,yBAAyBG;AAAA,IACzB,OAAOP;AAAA,EAAA;AAEX;"}

package/dist/components/Skeleton/useSkeletonStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSkeletonStyleProps.cjs","sources":["../../../src/components/Skeleton/useSkeletonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonProps, type SpiritSkeletonProps } from '../../types';\n\nexport interface SkeletonStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    text: string;\n    heading: string;\n    item: string;\n  };\n  /** props to be passed to the element */\n  props: SkeletonProps;\n}\n\nexport function useSkeletonStyleProps<E extends ElementType = 'div', C = void>(\n  props?: SpiritSkeletonProps<E, C>,\n): SkeletonStyles {\n  const { size, ...restProps } = props || {};\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonSizeClass = `${skeletonClass}--${size}`;\n  const skeletonTextClass = `${skeletonClass}--text`;\n  const skeletonHeadingClass = `${skeletonClass}--heading`;\n  const skeletonItemClass = `${skeletonClass}__item`;\n\n  const classProps = classNames(skeletonClass, {\n    [skeletonSizeClass]: size,\n  });\n\n  return {\n    classProps: {\n      root: classProps,\n      text: skeletonTextClass,\n      heading: skeletonHeadingClass,\n      item: skeletonItemClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSkeletonStyleProps","props","size","restProps","skeletonClass","useClassNamePrefix","skeletonSizeClass","skeletonTextClass","skeletonHeadingClass","skeletonItemClass","classNames"],"mappings":"8JAiBO,SAASA,EACdC,EACgB,CAChB,KAAM,CAAE,KAAAC,EAAM,GAAGC,CAAA,EAAcF,GAAS,CAAA,EAElCG,EAAgBC,EAAAA,mBAAmB,UAAU,EAC7CC,EAAoB,GAAGF,CAAa,KAAKF,CAAI,GAC7CK,EAAoB,GAAGH,CAAa,SACpCI,EAAuB,GAAGJ,CAAa,YACvCK,EAAoB,GAAGL,CAAa,SAM1C,MAAO,CACL,WAAY,CACV,KANeM,EAAWN,EAAe,CAC3C,CAACE,CAAiB,EAAGJ,CAAA,CACtB,EAKG,KAAMK,EACN,QAASC,EACT,KAAMC,CAAA,EAER,MAAON,CAAA,CAEX"}
+{"version":3,"file":"useSkeletonStyleProps.cjs","sources":["../../../src/components/Skeleton/useSkeletonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonBaseProps, type SkeletonProps } from '../../types';\n\nexport interface SkeletonStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    text: string;\n    heading: string;\n    item: string;\n  };\n  /** props to be passed to the element */\n  props: SkeletonProps;\n}\n\nexport function useSkeletonStyleProps<C = void>(props?: Omit<SkeletonBaseProps<C>, 'lines'>): SkeletonStyles {\n  const { size, ...restProps } = props || {};\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonSizeClass = `${skeletonClass}--${size}`;\n  const skeletonTextClass = `${skeletonClass}--text`;\n  const skeletonHeadingClass = `${skeletonClass}--heading`;\n  const skeletonItemClass = `${skeletonClass}__item`;\n\n  const classProps = classNames(skeletonClass, {\n    [skeletonSizeClass]: size,\n  });\n\n  return {\n    classProps: {\n      root: classProps,\n      text: skeletonTextClass,\n      heading: skeletonHeadingClass,\n      item: skeletonItemClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSkeletonStyleProps","props","size","restProps","skeletonClass","useClassNamePrefix","skeletonSizeClass","skeletonTextClass","skeletonHeadingClass","skeletonItemClass","classNames"],"mappings":"8JAgBO,SAASA,EAAgCC,EAA6D,CAC3G,KAAM,CAAE,KAAAC,EAAM,GAAGC,CAAA,EAAcF,GAAS,CAAA,EAElCG,EAAgBC,EAAAA,mBAAmB,UAAU,EAC7CC,EAAoB,GAAGF,CAAa,KAAKF,CAAI,GAC7CK,EAAoB,GAAGH,CAAa,SACpCI,EAAuB,GAAGJ,CAAa,YACvCK,EAAoB,GAAGL,CAAa,SAM1C,MAAO,CACL,WAAY,CACV,KANeM,EAAWN,EAAe,CAC3C,CAACE,CAAiB,EAAGJ,CAAA,CACtB,EAKG,KAAMK,EACN,QAASC,EACT,KAAMC,CAAA,EAER,MAAON,CAAA,CAEX"}

package/dist/components/Skeleton/useSkeletonStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSkeletonStyleProps.js","sources":["../../../src/components/Skeleton/useSkeletonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonProps, type SpiritSkeletonProps } from '../../types';\n\nexport interface SkeletonStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    text: string;\n    heading: string;\n    item: string;\n  };\n  /** props to be passed to the element */\n  props: SkeletonProps;\n}\n\nexport function useSkeletonStyleProps<E extends ElementType = 'div', C = void>(\n  props?: SpiritSkeletonProps<E, C>,\n): SkeletonStyles {\n  const { size, ...restProps } = props || {};\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonSizeClass = `${skeletonClass}--${size}`;\n  const skeletonTextClass = `${skeletonClass}--text`;\n  const skeletonHeadingClass = `${skeletonClass}--heading`;\n  const skeletonItemClass = `${skeletonClass}__item`;\n\n  const classProps = classNames(skeletonClass, {\n    [skeletonSizeClass]: size,\n  });\n\n  return {\n    classProps: {\n      root: classProps,\n      text: skeletonTextClass,\n      heading: skeletonHeadingClass,\n      item: skeletonItemClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSkeletonStyleProps","props","size","restProps","skeletonClass","useClassNamePrefix","skeletonSizeClass","skeletonTextClass","skeletonHeadingClass","skeletonItemClass","classNames"],"mappings":";;AAiBO,SAASA,EACdC,GACgB;AAChB,QAAM,EAAE,MAAAC,GAAM,GAAGC,EAAA,IAAcF,KAAS,CAAA,GAElCG,IAAgBC,EAAmB,UAAU,GAC7CC,IAAoB,GAAGF,CAAa,KAAKF,CAAI,IAC7CK,IAAoB,GAAGH,CAAa,UACpCI,IAAuB,GAAGJ,CAAa,aACvCK,IAAoB,GAAGL,CAAa;AAM1C,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MANeM,EAAWN,GAAe;AAAA,QAC3C,CAACE,CAAiB,GAAGJ;AAAA,MAAA,CACtB;AAAA,MAKG,MAAMK;AAAA,MACN,SAASC;AAAA,MACT,MAAMC;AAAA,IAAA;AAAA,IAER,OAAON;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useSkeletonStyleProps.js","sources":["../../../src/components/Skeleton/useSkeletonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SkeletonBaseProps, type SkeletonProps } from '../../types';\n\nexport interface SkeletonStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    text: string;\n    heading: string;\n    item: string;\n  };\n  /** props to be passed to the element */\n  props: SkeletonProps;\n}\n\nexport function useSkeletonStyleProps<C = void>(props?: Omit<SkeletonBaseProps<C>, 'lines'>): SkeletonStyles {\n  const { size, ...restProps } = props || {};\n\n  const skeletonClass = useClassNamePrefix('Skeleton');\n  const skeletonSizeClass = `${skeletonClass}--${size}`;\n  const skeletonTextClass = `${skeletonClass}--text`;\n  const skeletonHeadingClass = `${skeletonClass}--heading`;\n  const skeletonItemClass = `${skeletonClass}__item`;\n\n  const classProps = classNames(skeletonClass, {\n    [skeletonSizeClass]: size,\n  });\n\n  return {\n    classProps: {\n      root: classProps,\n      text: skeletonTextClass,\n      heading: skeletonHeadingClass,\n      item: skeletonItemClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSkeletonStyleProps","props","size","restProps","skeletonClass","useClassNamePrefix","skeletonSizeClass","skeletonTextClass","skeletonHeadingClass","skeletonItemClass","classNames"],"mappings":";;AAgBO,SAASA,EAAgCC,GAA6D;AAC3G,QAAM,EAAE,MAAAC,GAAM,GAAGC,EAAA,IAAcF,KAAS,CAAA,GAElCG,IAAgBC,EAAmB,UAAU,GAC7CC,IAAoB,GAAGF,CAAa,KAAKF,CAAI,IAC7CK,IAAoB,GAAGH,CAAa,UACpCI,IAAuB,GAAGJ,CAAa,aACvCK,IAAoB,GAAGL,CAAa;AAM1C,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MANeM,EAAWN,GAAe;AAAA,QAC3C,CAACE,CAAiB,GAAGJ;AAAA,MAAA,CACtB;AAAA,MAKG,MAAMK;AAAA,MACN,SAASC;AAAA,MACT,MAAMC;AAAA,IAAA;AAAA,IAER,OAAON;AAAA,EAAA;AAEX;"}

package/dist/components/Skeleton.d.ts

@@ -1,2 +1,2 @@
-export * from './Skeleton/index'
+export * from '../src/components/Skeleton/index'
 export {}

package/dist/components/SkipLink/demo/SkipLinkDefault.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../../Heading/Heading.cjs"),t=require("../../Section/Section.cjs"),n=require("../SkipLink.cjs"),i=require("../../Text/Text.cjs"),a=require("../../../web-react/docs/DocsBox.cjs"),r=()=>e.jsxs(e.Fragment,{children:[e.jsx(n.default,{href:"#skiplink-demo-main-content",children:"Skip to demo main content"}),e.jsxs(i.default,{children:["To show the skip links, you can use the keyboard shortcut ",e.jsx("kbd",{children:"Tab"})," to focus on the links. To select a link, press the key ",e.jsx("kbd",{children:"Enter"}),"."]}),e.jsxs(t.default,{id:"skiplink-demo-main-content",size:"xsmall",hasContainer:!1,children:[e.jsx(s.default,{elementType:"h3",size:"xsmall",emphasis:"semibold",marginBottom:"space-700",children:"This is the main content area for the demonstration purpose."}),e.jsx(a.default,{isMultiline:!0,UNSAFE_className:"py-1400 py-tablet-1600",children:e.jsx(i.default,{children:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam, saepe. A accusamus aliquid distinctio, ducimus earum exercitationem fuga id in iste natus nesciunt officiis pariatur possimus quam recusandae velit."})})]})]});exports.default=r;
+//# sourceMappingURL=SkipLinkDefault.cjs.map

package/dist/components/SkipLink/demo/SkipLinkDefault.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinkDefault.cjs","sources":["../../../../src/components/SkipLink/demo/SkipLinkDefault.tsx"],"sourcesContent":["import React from 'react';\nimport { Heading, Section, SkipLink, Text } from '../../..';\nimport DocsBox from '../../../../docs/DocsBox';\n\nconst SkipLinkDefault = () => (\n  <>\n    <SkipLink href=\"#skiplink-demo-main-content\">Skip to demo main content</SkipLink>\n\n    <Text>\n      To show the skip links, you can use the keyboard shortcut <kbd>Tab</kbd> to focus on the links. To select a link,\n      press the key <kbd>Enter</kbd>.\n    </Text>\n\n    <Section id=\"skiplink-demo-main-content\" size=\"xsmall\" hasContainer={false}>\n      <Heading elementType=\"h3\" size=\"xsmall\" emphasis=\"semibold\" marginBottom=\"space-700\">\n        This is the main content area for the demonstration purpose.\n      </Heading>\n      <DocsBox isMultiline UNSAFE_className=\"py-1400 py-tablet-1600\">\n        <Text>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam, saepe. A accusamus aliquid\n          distinctio, ducimus earum exercitationem fuga id in iste natus nesciunt officiis pariatur possimus quam\n          recusandae velit.\n        </Text>\n      </DocsBox>\n    </Section>\n  </>\n);\n\nexport default SkipLinkDefault;\n"],"names":["SkipLinkDefault","jsxs","Fragment","jsx","SkipLink","Text","Section","Heading","DocsBox"],"mappings":"8UAIMA,EAAkB,IACtBC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAS,KAAK,8BAA8B,SAAA,4BAAyB,SAErEC,EAAAA,QAAA,CAAK,SAAA,CAAA,6DACsDF,EAAAA,IAAC,OAAI,SAAA,KAAA,CAAG,EAAM,2DAC1DA,EAAAA,IAAC,OAAI,SAAA,OAAA,CAAK,EAAM,GAAA,EAChC,SAECG,EAAAA,QAAA,CAAQ,GAAG,6BAA6B,KAAK,SAAS,aAAc,GACnE,SAAA,CAAAH,EAAAA,IAACI,EAAAA,QAAA,CAAQ,YAAY,KAAK,KAAK,SAAS,SAAS,WAAW,aAAa,YAAY,SAAA,8DAAA,CAErF,EACAJ,EAAAA,IAACK,EAAAA,SAAQ,YAAW,GAAC,iBAAiB,yBACpC,SAAAL,EAAAA,IAACE,EAAAA,QAAA,CAAK,SAAA,+NAAA,CAIN,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CACF"}

package/dist/components/SkipLink/demo/SkipLinkDefault.js

@@ -0,0 +1,24 @@
+import { jsxs as e, Fragment as s, jsx as i } from "react/jsx-runtime";
+import n from "../../Heading/Heading.js";
+import o from "../../Section/Section.js";
+import r from "../SkipLink.js";
+import t from "../../Text/Text.js";
+import a from "../../../web-react/docs/DocsBox.js";
+const h = () => /* @__PURE__ */ e(s, { children: [
+  /* @__PURE__ */ i(r, { href: "#skiplink-demo-main-content", children: "Skip to demo main content" }),
+  /* @__PURE__ */ e(t, { children: [
+    "To show the skip links, you can use the keyboard shortcut ",
+    /* @__PURE__ */ i("kbd", { children: "Tab" }),
+    " to focus on the links. To select a link, press the key ",
+    /* @__PURE__ */ i("kbd", { children: "Enter" }),
+    "."
+  ] }),
+  /* @__PURE__ */ e(o, { id: "skiplink-demo-main-content", size: "xsmall", hasContainer: !1, children: [
+    /* @__PURE__ */ i(n, { elementType: "h3", size: "xsmall", emphasis: "semibold", marginBottom: "space-700", children: "This is the main content area for the demonstration purpose." }),
+    /* @__PURE__ */ i(a, { isMultiline: !0, UNSAFE_className: "py-1400 py-tablet-1600", children: /* @__PURE__ */ i(t, { children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam, saepe. A accusamus aliquid distinctio, ducimus earum exercitationem fuga id in iste natus nesciunt officiis pariatur possimus quam recusandae velit." }) })
+  ] })
+] });
+export {
+  h as default
+};
+//# sourceMappingURL=SkipLinkDefault.js.map

package/dist/components/SkipLink/demo/SkipLinkDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinkDefault.js","sources":["../../../../src/components/SkipLink/demo/SkipLinkDefault.tsx"],"sourcesContent":["import React from 'react';\nimport { Heading, Section, SkipLink, Text } from '../../..';\nimport DocsBox from '../../../../docs/DocsBox';\n\nconst SkipLinkDefault = () => (\n  <>\n    <SkipLink href=\"#skiplink-demo-main-content\">Skip to demo main content</SkipLink>\n\n    <Text>\n      To show the skip links, you can use the keyboard shortcut <kbd>Tab</kbd> to focus on the links. To select a link,\n      press the key <kbd>Enter</kbd>.\n    </Text>\n\n    <Section id=\"skiplink-demo-main-content\" size=\"xsmall\" hasContainer={false}>\n      <Heading elementType=\"h3\" size=\"xsmall\" emphasis=\"semibold\" marginBottom=\"space-700\">\n        This is the main content area for the demonstration purpose.\n      </Heading>\n      <DocsBox isMultiline UNSAFE_className=\"py-1400 py-tablet-1600\">\n        <Text>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam, saepe. A accusamus aliquid\n          distinctio, ducimus earum exercitationem fuga id in iste natus nesciunt officiis pariatur possimus quam\n          recusandae velit.\n        </Text>\n      </DocsBox>\n    </Section>\n  </>\n);\n\nexport default SkipLinkDefault;\n"],"names":["SkipLinkDefault","jsxs","Fragment","jsx","SkipLink","Text","Section","Heading","DocsBox"],"mappings":";;;;;;AAIA,MAAMA,IAAkB,MACtB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAS,MAAK,+BAA8B,UAAA,6BAAyB;AAAA,oBAErEC,GAAA,EAAK,UAAA;AAAA,IAAA;AAAA,IACsD,gBAAAF,EAAC,SAAI,UAAA,MAAA,CAAG;AAAA,IAAM;AAAA,IAC1D,gBAAAA,EAAC,SAAI,UAAA,QAAA,CAAK;AAAA,IAAM;AAAA,EAAA,GAChC;AAAA,oBAECG,GAAA,EAAQ,IAAG,8BAA6B,MAAK,UAAS,cAAc,IACnE,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAQ,aAAY,MAAK,MAAK,UAAS,UAAS,YAAW,cAAa,aAAY,UAAA,+DAAA,CAErF;AAAA,IACA,gBAAAJ,EAACK,KAAQ,aAAW,IAAC,kBAAiB,0BACpC,UAAA,gBAAAL,EAACE,GAAA,EAAK,UAAA,gOAAA,CAIN,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAAA,EAAA,CACF;"}

package/dist/components/SkipLink/demo/preview.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("../../../web-react/docs/DocsSection.cjs"),r=require("./SkipLinkDefault.cjs"),c=()=>e.jsx(t.StrictMode,{children:e.jsx(i.default,{title:"Default",stackAlignment:"stretch",children:e.jsx(r.default,{})})});exports.Preview=c;
+//# sourceMappingURL=preview.cjs.map

package/dist/components/SkipLink/demo/preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.cjs","sources":["../../../../src/components/SkipLink/demo/preview.tsx"],"sourcesContent":["'use client';\n\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport SkipLinkDefault from './SkipLinkDefault';\n\nexport const Preview = () => (\n  <StrictMode>\n    <DocsSection title=\"Default\" stackAlignment=\"stretch\">\n      <SkipLinkDefault />\n    </DocsSection>\n  </StrictMode>\n);\n"],"names":["Preview","jsx","StrictMode","DocsSection","SkipLinkDefault"],"mappings":"6OAMaA,EAAU,IACrBC,EAAAA,IAACC,EAAAA,WAAA,CACC,SAAAD,EAAAA,IAACE,EAAAA,QAAA,CAAY,MAAM,UAAU,eAAe,UAC1C,SAAAF,EAAAA,IAACG,UAAA,CAAA,CAAgB,EACnB,CAAA,CACF"}

package/dist/components/SkipLink/demo/preview.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { StrictMode as e } from "react";
+import i from "../../../web-react/docs/DocsSection.js";
+import r from "./SkipLinkDefault.js";
+const s = () => /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(i, { title: "Default", stackAlignment: "stretch", children: /* @__PURE__ */ t(r, {}) }) });
+export {
+  s as Preview
+};
+//# sourceMappingURL=preview.js.map

package/dist/components/SkipLink/demo/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sources":["../../../../src/components/SkipLink/demo/preview.tsx"],"sourcesContent":["'use client';\n\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport SkipLinkDefault from './SkipLinkDefault';\n\nexport const Preview = () => (\n  <StrictMode>\n    <DocsSection title=\"Default\" stackAlignment=\"stretch\">\n      <SkipLinkDefault />\n    </DocsSection>\n  </StrictMode>\n);\n"],"names":["Preview","jsx","StrictMode","DocsSection","SkipLinkDefault"],"mappings":";;;;;AAMO,MAAMA,IAAU,MACrB,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAY,OAAM,WAAU,gBAAe,WAC1C,UAAA,gBAAAF,EAACG,GAAA,CAAA,CAAgB,GACnB,EAAA,CACF;"}

package/dist/components/SkipLink/preview/index.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../demo/preview.cjs");exports.default=e.Preview;
+//# sourceMappingURL=index.cjs.map

package/dist/components/SkipLink/preview/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/SkipLink/preview/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Preview as t } from "../demo/preview.js";
+export {
+  t as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SkipLink/preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/SkipLink/preview.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from '../../src/components/SkipLink/preview/index'
+export default _default
+export {}

package/dist/components/SkipLink.d.ts

@@ -1,2 +1,2 @@
-export * from './SkipLink/index'
+export * from '../src/components/SkipLink/index'
 export {}

package/dist/components/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),I=require("classnames"),E=require("react"),F=require("../../hooks/styleProps.cjs"),$=require("../../hooks/useAriaDescribedBy.cjs"),B=require("../Field/HelperText.cjs"),U=require("../Field/Label.cjs"),L=require("../Field/useAriaIds.cjs"),M=require("../Field/ValidationText.cjs"),C=require("../Field/useValidationTextRole.cjs"),O=require("./constants.cjs"),w=require("./useSliderStyleProps.cjs"),H={...O.SLIDER_DEFAULT_PROPS},W=(P,m)=>{const b={...H,...P},{"aria-describedby":T,hasValidationIcon:h,helperText:q,id:t,isDisabled:l,label:N,max:n,min:i,step:_,validationState:r,validationText:c,value:d,...f}=b,{classProps:e,props:v}=w.useSliderStyleProps({...f,isDisabled:l,validationState:r}),{styleProps:u,props:A}=F.useStyleProps(v),[g,p]=L.default(T),D=$.useAriaDescribedBy(g),R=C.useValidationTextRole({validationState:r,validationText:c}),S="--slider-position",x=a=>`${Math.round(100*(a-i)/(n-i))}%`,j=a=>{const{target:y}=a,{value:V}=y;y.style.setProperty(S,x(Number(V)))};return s.jsxs("div",{...u,...A,className:I(e.root,u.className),children:[s.jsx(U.default,{htmlFor:t,UNSAFE_className:e.label,children:N}),s.jsx("input",{...D,className:e.input,id:t,onInput:j,style:{[S]:`${x(d)}`},type:"range",min:i,max:n,step:_,value:d,disabled:l,ref:m}),s.jsx(B.default,{UNSAFE_className:e.helperText,helperText:q,id:`${t}__helperText`,registerAria:p}),r&&s.jsx(M.default,{UNSAFE_className:e.validationText,...h&&{hasValidationStateIcon:r},id:`${t}__validationText`,registerAria:p,validationText:c,role:R})]})},o=E.forwardRef(W);o.spiritComponent="Slider";o.displayName="Slider";exports.default=o;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),V=require("classnames"),I=require("react"),E=require("../../hooks/styleProps.cjs"),F=require("../../hooks/useAriaIdRefs.cjs"),$=require("../Field/HelperText.cjs"),U=require("../Field/Label.cjs"),B=require("../Field/ValidationText.cjs"),L=require("../Field/useValidationTextRole.cjs"),M=require("./constants.cjs"),C=require("./useSliderStyleProps.cjs"),O={...M.SLIDER_DEFAULT_PROPS},w=(m,y)=>{const b={...O,...m},{"aria-describedby":T,hasValidationIcon:h,helperText:N,id:t,isDisabled:l,label:_,max:n,min:i,step:f,validationState:r,validationText:c,value:d,...q}=b,{classProps:e,props:v}=C.useSliderStyleProps({...q,isDisabled:l,validationState:r}),{styleProps:u,props:R}=E.useStyleProps(v),[g,p]=F.useAriaDescribedBy(T),A=L.useValidationTextRole({validationState:r,validationText:c}),S="--slider-position",x=a=>`${Math.round(100*(a-i)/(n-i))}%`,j=a=>{const{target:P}=a,{value:D}=P;P.style.setProperty(S,x(Number(D)))};return s.jsxs("div",{...u,...R,className:V(e.root,u.className),children:[s.jsx(U.default,{htmlFor:t,UNSAFE_className:e.label,children:_}),s.jsx("input",{...g,className:e.input,id:t,onInput:j,style:{[S]:`${x(d)}`},type:"range",min:i,max:n,step:f,value:d,disabled:l,ref:y}),s.jsx($.default,{UNSAFE_className:e.helperText,helperText:N,id:`${t}__helperText`,registerAria:p}),r&&s.jsx(B.default,{UNSAFE_className:e.validationText,...h&&{hasValidationStateIcon:r},id:`${t}__validationText`,registerAria:p,validationText:c,role:A})]})},o=I.forwardRef(w);o.spiritComponent="Slider";o.displayName="Slider";exports.default=o;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":"wiBAWMA,EAAe,CACnB,GAAGC,EAAAA,oBACL,EAEMC,EAAU,CAACC,EAA0BC,IAAwC,CACjF,MAAMC,EAAoB,CAAE,GAAGL,EAAc,GAAGG,CAAA,EAC1C,CACJ,mBAAoBG,EACpB,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,WAAAC,EACA,MAAAC,EACA,IAAAC,EACA,IAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,MAAAC,EACA,GAAGC,CAAA,EACDb,EAEE,CAAE,WAAAc,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,oBAAoB,CAC/D,GAAGH,EACH,WAAAR,EACA,gBAAAK,CAAA,CACD,EACK,CAAA,WAAEO,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAACK,EAAKC,CAAQ,EAAIC,EAAAA,QAAWrB,CAAe,EAC5CsB,EAAsBC,EAAAA,mBAAmBJ,CAAG,EAC5CK,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAhB,EACA,eAAAC,CAAA,CACD,EAEKgB,EAAc,oBAEdC,EAAqBC,GAAgB,GAAG,KAAK,MAAO,KAAOA,EAAMrB,IAASD,EAAMC,EAAI,CAAC,IAErFsB,EAAeC,GAAuC,CAC1D,KAAM,CAAE,OAAAC,GAAWD,EACb,CAAE,MAAOE,CAAA,EAAeD,EAE9BA,EAAO,MAAM,YAAYL,EAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC,CAC7E,EAEA,OACEC,EAAAA,KAAC,MAAA,CAAK,GAAGjB,EAAa,GAAGC,EAAY,UAAWiB,EAAWrB,EAAW,KAAMG,EAAW,SAAS,EAC9F,SAAA,CAAAmB,MAACC,EAAAA,SAAM,QAASjC,EAAI,iBAAkBU,EAAW,MAC9C,SAAAR,EACH,EACA8B,EAAAA,IAAC,QAAA,CACE,GAAGb,EACJ,UAAWT,EAAW,MACtB,GAAAV,EACA,QAAS0B,EACT,MAAO,CAAE,CAACH,CAAW,EAAG,GAAGC,EAAkBhB,CAAK,CAAC,EAAA,EACnD,KAAK,QACL,IAAAJ,EACA,IAAAD,EACA,KAAAE,EACA,MAAAG,EACA,SAAUP,EACV,IAAAN,CAAA,CAAA,EAEFqC,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBxB,EAAW,WAC7B,WAAAX,EACA,GAAI,GAAGC,CAAE,eACT,aAAciB,CAAA,CAAA,EAEfX,GACC0B,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBzB,EAAW,eAC5B,GAAIZ,GAAqB,CAAE,uBAAwBQ,CAAA,EACpD,GAAI,GAAGN,CAAE,mBACT,aAAciB,EACd,eAAAV,EACA,KAAMc,CAAA,CAAA,CACR,EAEJ,CAEJ,EAEMe,EAASC,EAAAA,WAAgD5C,CAAO,EAKtE2C,EAAO,gBAAkB,SACzBA,EAAO,YAAc"}
+{"version":3,"file":"Slider.cjs","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":"8fAWMA,EAAe,CACnB,GAAGC,EAAAA,oBACL,EAEMC,EAAU,CAACC,EAA0BC,IAAwC,CACjF,MAAMC,EAAoB,CAAE,GAAGL,EAAc,GAAGG,CAAA,EAC1C,CACJ,mBAAoBG,EACpB,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,WAAAC,EACA,MAAAC,EACA,IAAAC,EACA,IAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,MAAAC,EACA,GAAGC,CAAA,EACDb,EAEE,CAAE,WAAAc,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,oBAAoB,CAC/D,GAAGH,EACH,WAAAR,EACA,gBAAAK,CAAA,CACD,EACK,CAAA,WAAEO,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAACK,EAAqBC,CAAQ,EAAIC,EAAAA,mBAAmBrB,CAAe,EACpEsB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAd,EACA,eAAAC,CAAA,CACD,EAEKc,EAAc,oBAEdC,EAAqBC,GAAgB,GAAG,KAAK,MAAO,KAAOA,EAAMnB,IAASD,EAAMC,EAAI,CAAC,IAErFoB,EAAeC,GAAuC,CAC1D,KAAM,CAAE,OAAAC,GAAWD,EACb,CAAE,MAAOE,CAAA,EAAeD,EAE9BA,EAAO,MAAM,YAAYL,EAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC,CAC7E,EAEA,OACEC,EAAAA,KAAC,MAAA,CAAK,GAAGf,EAAa,GAAGC,EAAY,UAAWe,EAAWnB,EAAW,KAAMG,EAAW,SAAS,EAC9F,SAAA,CAAAiB,MAACC,EAAAA,SAAM,QAAS/B,EAAI,iBAAkBU,EAAW,MAC9C,SAAAR,EACH,EACA4B,EAAAA,IAAC,QAAA,CACE,GAAGd,EACJ,UAAWN,EAAW,MACtB,GAAAV,EACA,QAASwB,EACT,MAAO,CAAE,CAACH,CAAW,EAAG,GAAGC,EAAkBd,CAAK,CAAC,EAAA,EACnD,KAAK,QACL,IAAAJ,EACA,IAAAD,EACA,KAAAE,EACA,MAAAG,EACA,SAAUP,EACV,IAAAN,CAAA,CAAA,EAEFmC,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBtB,EAAW,WAC7B,WAAAX,EACA,GAAI,GAAGC,CAAE,eACT,aAAciB,CAAA,CAAA,EAEfX,GACCwB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBvB,EAAW,eAC5B,GAAIZ,GAAqB,CAAE,uBAAwBQ,CAAA,EACpD,GAAI,GAAGN,CAAE,mBACT,aAAciB,EACd,eAAAV,EACA,KAAMY,CAAA,CAAA,CACR,EAEJ,CAEJ,EAEMe,EAASC,EAAAA,WAAgD1C,CAAO,EAKtEyC,EAAO,gBAAkB,SACzBA,EAAO,YAAc"}

package/dist/components/Slider/Slider.js

@@ -1,20 +1,19 @@
 "use client";
-import { jsxs as R, jsx as o } from "react/jsx-runtime";
-import U from "classnames";
-import { forwardRef as $ } from "react";
-import { useStyleProps as B } from "../../hooks/styleProps.js";
-import { useAriaDescribedBy as L } from "../../hooks/useAriaDescribedBy.js";
-import j from "../Field/HelperText.js";
-import C from "../Field/Label.js";
-import w from "../Field/useAriaIds.js";
-import H from "../Field/ValidationText.js";
-import { useValidationTextRole as M } from "../Field/useValidationTextRole.js";
-import { SLIDER_DEFAULT_PROPS as O } from "./constants.js";
-import { useSliderStyleProps as W } from "./useSliderStyleProps.js";
-const k = {
-  ...O
-}, q = (x, P) => {
-  const b = { ...k, ...x }, {
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import R from "classnames";
+import { forwardRef as U } from "react";
+import { useStyleProps as $ } from "../../hooks/styleProps.js";
+import { useAriaDescribedBy as B } from "../../hooks/useAriaIdRefs.js";
+import L from "../Field/HelperText.js";
+import j from "../Field/Label.js";
+import C from "../Field/ValidationText.js";
+import { useValidationTextRole as w } from "../Field/useValidationTextRole.js";
+import { SLIDER_DEFAULT_PROPS as H } from "./constants.js";
+import { useSliderStyleProps as M } from "./useSliderStyleProps.js";
+const O = {
+  ...H
+}, W = (x, P) => {
+  const b = { ...O, ...x }, {
     "aria-describedby": h,
     hasValidationIcon: y,
     helperText: N,
@@ -28,23 +27,23 @@ const k = {
     validationText: n,
     value: p,
     ...v
-  } = b, { classProps: e, props: A } = W({
+  } = b, { classProps: e, props: A } = M({
     ...v,
     isDisabled: a,
     validationState: r
-  }), { styleProps: d, props: D } = B(A), [g, m] = w(h), I = L(g), V = M({
+  }), { styleProps: d, props: D } = $(A), [g, m] = B(h), V = w({
     validationState: r,
     validationText: n
   }), c = "--slider-position", u = (i) => `${Math.round(100 * (i - s) / (l - s))}%`, E = (i) => {
     const { target: f } = i, { value: F } = f;
     f.style.setProperty(c, u(Number(F)));
   };
-  return /* @__PURE__ */ R("div", { ...d, ...D, className: U(e.root, d.className), children: [
-    /* @__PURE__ */ o(C, { htmlFor: t, UNSAFE_className: e.label, children: T }),
+  return /* @__PURE__ */ I("div", { ...d, ...D, className: R(e.root, d.className), children: [
+    /* @__PURE__ */ o(j, { htmlFor: t, UNSAFE_className: e.label, children: T }),
     /* @__PURE__ */ o(
       "input",
       {
-        ...I,
+        ...g,
         className: e.input,
         id: t,
         onInput: E,
@@ -59,7 +58,7 @@ const k = {
       }
     ),
     /* @__PURE__ */ o(
-      j,
+      L,
       {
         UNSAFE_className: e.helperText,
         helperText: N,
@@ -68,7 +67,7 @@ const k = {
       }
     ),
     r && /* @__PURE__ */ o(
-      H,
+      C,
       {
         UNSAFE_className: e.validationText,
         ...y && { hasValidationStateIcon: r },
@@ -79,7 +78,7 @@ const k = {
       }
     )
   ] });
-}, S = $(q);
+}, S = U(W);
 S.spiritComponent = "Slider";
 S.displayName = "Slider";
 export {

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":";;;;;;;;;;;;;AAWA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AACL,GAEMC,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAMC,IAAoB,EAAE,GAAGL,GAAc,GAAGG,EAAA,GAC1C;AAAA,IACJ,oBAAoBG;AAAA,IACpB,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,GAAY,OAAOC,EAAA,IAAkBC,EAAoB;AAAA,IAC/D,GAAGH;AAAA,IACH,YAAAR;AAAA,IACA,iBAAAK;AAAA,EAAA,CACD,GACK,EAAE,YAAAO,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAKC,CAAQ,IAAIC,EAAWrB,CAAe,GAC5CsB,IAAsBC,EAAmBJ,CAAG,GAC5CK,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAhB;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKgB,IAAc,qBAEdC,IAAoB,CAACC,MAAgB,GAAG,KAAK,MAAO,OAAOA,IAAMrB,MAASD,IAAMC,EAAI,CAAC,KAErFsB,IAAc,CAACC,MAAuC;AAC1D,UAAM,EAAE,QAAAC,MAAWD,GACb,EAAE,OAAOE,EAAA,IAAeD;AAE9B,IAAAA,EAAO,MAAM,YAAYL,GAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC;AAAA,EAC7E;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAK,GAAGjB,GAAa,GAAGC,GAAY,WAAWiB,EAAWrB,EAAW,MAAMG,EAAW,SAAS,GAC9F,UAAA;AAAA,IAAA,gBAAAmB,EAACC,KAAM,SAASjC,GAAI,kBAAkBU,EAAW,OAC9C,UAAAR,GACH;AAAA,IACA,gBAAA8B;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGb;AAAA,QACJ,WAAWT,EAAW;AAAA,QACtB,IAAAV;AAAA,QACA,SAAS0B;AAAA,QACT,OAAO,EAAE,CAACH,CAAW,GAAG,GAAGC,EAAkBhB,CAAK,CAAC,GAAA;AAAA,QACnD,MAAK;AAAA,QACL,KAAAJ;AAAA,QACA,KAAAD;AAAA,QACA,MAAAE;AAAA,QACA,OAAAG;AAAA,QACA,UAAUP;AAAA,QACV,KAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAqC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,kBAAkBxB,EAAW;AAAA,QAC7B,YAAAX;AAAA,QACA,IAAI,GAAGC,CAAE;AAAA,QACT,cAAciB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEfX,KACC,gBAAA0B;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAkBzB,EAAW;AAAA,QAC5B,GAAIZ,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,QACpD,IAAI,GAAGN,CAAE;AAAA,QACT,cAAciB;AAAA,QACd,gBAAAV;AAAA,QACA,MAAMc;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ,GAEMe,IAASC,EAAgD5C,CAAO;AAKtE2C,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AACL,GAEMC,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAMC,IAAoB,EAAE,GAAGL,GAAc,GAAGG,EAAA,GAC1C;AAAA,IACJ,oBAAoBG;AAAA,IACpB,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,GAAY,OAAOC,EAAA,IAAkBC,EAAoB;AAAA,IAC/D,GAAGH;AAAA,IACH,YAAAR;AAAA,IACA,iBAAAK;AAAA,EAAA,CACD,GACK,EAAE,YAAAO,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAqBC,CAAQ,IAAIC,EAAmBrB,CAAe,GACpEsB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAd;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKc,IAAc,qBAEdC,IAAoB,CAACC,MAAgB,GAAG,KAAK,MAAO,OAAOA,IAAMnB,MAASD,IAAMC,EAAI,CAAC,KAErFoB,IAAc,CAACC,MAAuC;AAC1D,UAAM,EAAE,QAAAC,MAAWD,GACb,EAAE,OAAOE,EAAA,IAAeD;AAE9B,IAAAA,EAAO,MAAM,YAAYL,GAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC;AAAA,EAC7E;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAK,GAAGf,GAAa,GAAGC,GAAY,WAAWe,EAAWnB,EAAW,MAAMG,EAAW,SAAS,GAC9F,UAAA;AAAA,IAAA,gBAAAiB,EAACC,KAAM,SAAS/B,GAAI,kBAAkBU,EAAW,OAC9C,UAAAR,GACH;AAAA,IACA,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGd;AAAA,QACJ,WAAWN,EAAW;AAAA,QACtB,IAAAV;AAAA,QACA,SAASwB;AAAA,QACT,OAAO,EAAE,CAACH,CAAW,GAAG,GAAGC,EAAkBd,CAAK,CAAC,GAAA;AAAA,QACnD,MAAK;AAAA,QACL,KAAAJ;AAAA,QACA,KAAAD;AAAA,QACA,MAAAE;AAAA,QACA,OAAAG;AAAA,QACA,UAAUP;AAAA,QACV,KAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAmC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,kBAAkBtB,EAAW;AAAA,QAC7B,YAAAX;AAAA,QACA,IAAI,GAAGC,CAAE;AAAA,QACT,cAAciB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEfX,KACC,gBAAAwB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAkBvB,EAAW;AAAA,QAC5B,GAAIZ,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,QACpD,IAAI,GAAGN,CAAE;AAAA,QACT,cAAciB;AAAA,QACd,gBAAAV;AAAA,QACA,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ,GAEMe,IAASC,EAAgD1C,CAAO;AAKtEyC,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}

package/dist/components/Slider/useSliderStyleProps.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("classnames"),$=require("../../hooks/useClassNamePrefix.cjs");function x(t){const{isDisabled:i,isFluid:a,isLabelHidden:o,validationState:l,...n}=t,s=$.useClassNamePrefix("Slider"),r=e(s),d=`${s}--disabled`,c=`${s}--fluid`,u=`${s}--${l}`,p=e(`${s}__label`),C=`${s}__label--hidden`,b=`${s}__input`,_=`${s}__helperText`,S=`${s}__validationText`;return{classProps:{root:e(r,{[d]:i,[c]:a,[u]:l}),label:e(p,{[C]:o}),input:b,helperText:_,validationText:S},props:n}}exports.useSliderStyleProps=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("classnames"),S=require("../../hooks/useClassNamePrefix.cjs");function $(t){const{isDisabled:i,isFluid:a,isLabelHidden:o,validationState:e,...n}=t,s=S.useClassNamePrefix("Slider"),r=`${s}--disabled`,d=`${s}--fluid`,c=`${s}--${e}`,u=`${s}__label`,p=`${s}__label--hidden`,b=`${s}__input`,C=`${s}__helperText`,_=`${s}__validationText`;return{classProps:{root:l(s,{[r]:i,[d]:a,[c]:e}),label:l(u,{[p]:o}),input:b,helperText:C,validationText:_},props:n}}exports.useSliderStyleProps=$;
 //# sourceMappingURL=useSliderStyleProps.cjs.map

package/dist/components/Slider/useSliderStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSliderStyleProps.cjs","sources":["../../../src/components/Slider/useSliderStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritSliderProps } from '../../types';\n\ntype UseSliderStyleProps = Omit<SpiritSliderProps, 'id' | 'value' | 'label'>;\n\nexport interface SliderStyles {\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n  };\n  props: UseSliderStyleProps;\n}\n\nexport function useSliderStyleProps(props: UseSliderStyleProps): SliderStyles {\n  const { isDisabled, isFluid, isLabelHidden, validationState, ...restProps } = props;\n\n  const sliderClass = useClassNamePrefix('Slider');\n  const rootClass = classNames(sliderClass);\n  const isDisabledClass = `${sliderClass}--disabled`;\n  const isFluidClass = `${sliderClass}--fluid`;\n  const validationStateClass = `${sliderClass}--${validationState}`;\n  const labelClass = classNames(`${sliderClass}__label`);\n  const isLabelHiddenClass = `${sliderClass}__label--hidden`;\n  const inputClass = `${sliderClass}__input`;\n  const helperTextClass = `${sliderClass}__helperText`;\n  const validationTextClass = `${sliderClass}__validationText`;\n\n  return {\n    classProps: {\n      root: classNames(rootClass, {\n        [isDisabledClass]: isDisabled,\n        [isFluidClass]: isFluid,\n        [validationStateClass]: validationState,\n      }),\n      label: classNames(labelClass, {\n        [isLabelHiddenClass]: isLabelHidden,\n      }),\n      input: inputClass,\n      helperText: helperTextClass,\n      validationText: validationTextClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSliderStyleProps","props","isDisabled","isFluid","isLabelHidden","validationState","restProps","sliderClass","useClassNamePrefix","rootClass","classNames","isDisabledClass","isFluidClass","validationStateClass","labelClass","isLabelHiddenClass","inputClass","helperTextClass","validationTextClass"],"mappings":"8JAiBO,SAASA,EAAoBC,EAA0C,CAC5E,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,cAAAC,EAAe,gBAAAC,EAAiB,GAAGC,GAAcL,EAExEM,EAAcC,EAAAA,mBAAmB,QAAQ,EACzCC,EAAYC,EAAWH,CAAW,EAClCI,EAAkB,GAAGJ,CAAW,aAChCK,EAAe,GAAGL,CAAW,UAC7BM,EAAuB,GAAGN,CAAW,KAAKF,CAAe,GACzDS,EAAaJ,EAAW,GAAGH,CAAW,SAAS,EAC/CQ,EAAqB,GAAGR,CAAW,kBACnCS,EAAa,GAAGT,CAAW,UAC3BU,EAAkB,GAAGV,CAAW,eAChCW,EAAsB,GAAGX,CAAW,mBAE1C,MAAO,CACL,WAAY,CACV,KAAMG,EAAWD,EAAW,CAC1B,CAACE,CAAe,EAAGT,EACnB,CAACU,CAAY,EAAGT,EAChB,CAACU,CAAoB,EAAGR,CAAA,CACzB,EACD,MAAOK,EAAWI,EAAY,CAC5B,CAACC,CAAkB,EAAGX,CAAA,CACvB,EACD,MAAOY,EACP,WAAYC,EACZ,eAAgBC,CAAA,EAElB,MAAOZ,CAAA,CAEX"}
+{"version":3,"file":"useSliderStyleProps.cjs","sources":["../../../src/components/Slider/useSliderStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritSliderProps } from '../../types';\n\ntype UseSliderStyleProps = Omit<SpiritSliderProps, 'id' | 'value' | 'label'>;\n\nexport interface SliderStyles {\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n  };\n  props: UseSliderStyleProps;\n}\n\nexport function useSliderStyleProps(props: UseSliderStyleProps): SliderStyles {\n  const { isDisabled, isFluid, isLabelHidden, validationState, ...restProps } = props;\n\n  const sliderClass = useClassNamePrefix('Slider');\n  const isDisabledClass = `${sliderClass}--disabled`;\n  const isFluidClass = `${sliderClass}--fluid`;\n  const validationStateClass = `${sliderClass}--${validationState}`;\n  const labelClass = `${sliderClass}__label`;\n  const isLabelHiddenClass = `${sliderClass}__label--hidden`;\n  const inputClass = `${sliderClass}__input`;\n  const helperTextClass = `${sliderClass}__helperText`;\n  const validationTextClass = `${sliderClass}__validationText`;\n\n  return {\n    classProps: {\n      root: classNames(sliderClass, {\n        [isDisabledClass]: isDisabled,\n        [isFluidClass]: isFluid,\n        [validationStateClass]: validationState,\n      }),\n      label: classNames(labelClass, {\n        [isLabelHiddenClass]: isLabelHidden,\n      }),\n      input: inputClass,\n      helperText: helperTextClass,\n      validationText: validationTextClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSliderStyleProps","props","isDisabled","isFluid","isLabelHidden","validationState","restProps","sliderClass","useClassNamePrefix","isDisabledClass","isFluidClass","validationStateClass","labelClass","isLabelHiddenClass","inputClass","helperTextClass","validationTextClass","classNames"],"mappings":"8JAiBO,SAASA,EAAoBC,EAA0C,CAC5E,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,cAAAC,EAAe,gBAAAC,EAAiB,GAAGC,GAAcL,EAExEM,EAAcC,EAAAA,mBAAmB,QAAQ,EACzCC,EAAkB,GAAGF,CAAW,aAChCG,EAAe,GAAGH,CAAW,UAC7BI,EAAuB,GAAGJ,CAAW,KAAKF,CAAe,GACzDO,EAAa,GAAGL,CAAW,UAC3BM,EAAqB,GAAGN,CAAW,kBACnCO,EAAa,GAAGP,CAAW,UAC3BQ,EAAkB,GAAGR,CAAW,eAChCS,EAAsB,GAAGT,CAAW,mBAE1C,MAAO,CACL,WAAY,CACV,KAAMU,EAAWV,EAAa,CAC5B,CAACE,CAAe,EAAGP,EACnB,CAACQ,CAAY,EAAGP,EAChB,CAACQ,CAAoB,EAAGN,CAAA,CACzB,EACD,MAAOY,EAAWL,EAAY,CAC5B,CAACC,CAAkB,EAAGT,CAAA,CACvB,EACD,MAAOU,EACP,WAAYC,EACZ,eAAgBC,CAAA,EAElB,MAAOV,CAAA,CAEX"}

package/dist/components/Slider/useSliderStyleProps.js

@@ -1,25 +1,25 @@
-import l from "classnames";
-import { useClassNamePrefix as x } from "../../hooks/useClassNamePrefix.js";
-function f(e) {
-  const { isDisabled: a, isFluid: i, isLabelHidden: o, validationState: t, ...n } = e, s = x("Slider"), r = l(s), d = `${s}--disabled`, c = `${s}--fluid`, p = `${s}--${t}`, u = l(`${s}__label`), C = `${s}__label--hidden`, _ = `${s}__input`, b = `${s}__helperText`, $ = `${s}__validationText`;
+import e from "classnames";
+import { useClassNamePrefix as $ } from "../../hooks/useClassNamePrefix.js";
+function T(t) {
+  const { isDisabled: i, isFluid: a, isLabelHidden: o, validationState: l, ...n } = t, s = $("Slider"), d = `${s}--disabled`, r = `${s}--fluid`, c = `${s}--${l}`, p = `${s}__label`, u = `${s}__label--hidden`, C = `${s}__input`, _ = `${s}__helperText`, b = `${s}__validationText`;
   return {
     classProps: {
-      root: l(r, {
-        [d]: a,
-        [c]: i,
-        [p]: t
+      root: e(s, {
+        [d]: i,
+        [r]: a,
+        [c]: l
       }),
-      label: l(u, {
-        [C]: o
+      label: e(p, {
+        [u]: o
       }),
-      input: _,
-      helperText: b,
-      validationText: $
+      input: C,
+      helperText: _,
+      validationText: b
     },
     props: n
   };
 }
 export {
-  f as useSliderStyleProps
+  T as useSliderStyleProps
 };
 //# sourceMappingURL=useSliderStyleProps.js.map

package/dist/components/Slider/useSliderStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSliderStyleProps.js","sources":["../../../src/components/Slider/useSliderStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritSliderProps } from '../../types';\n\ntype UseSliderStyleProps = Omit<SpiritSliderProps, 'id' | 'value' | 'label'>;\n\nexport interface SliderStyles {\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n  };\n  props: UseSliderStyleProps;\n}\n\nexport function useSliderStyleProps(props: UseSliderStyleProps): SliderStyles {\n  const { isDisabled, isFluid, isLabelHidden, validationState, ...restProps } = props;\n\n  const sliderClass = useClassNamePrefix('Slider');\n  const rootClass = classNames(sliderClass);\n  const isDisabledClass = `${sliderClass}--disabled`;\n  const isFluidClass = `${sliderClass}--fluid`;\n  const validationStateClass = `${sliderClass}--${validationState}`;\n  const labelClass = classNames(`${sliderClass}__label`);\n  const isLabelHiddenClass = `${sliderClass}__label--hidden`;\n  const inputClass = `${sliderClass}__input`;\n  const helperTextClass = `${sliderClass}__helperText`;\n  const validationTextClass = `${sliderClass}__validationText`;\n\n  return {\n    classProps: {\n      root: classNames(rootClass, {\n        [isDisabledClass]: isDisabled,\n        [isFluidClass]: isFluid,\n        [validationStateClass]: validationState,\n      }),\n      label: classNames(labelClass, {\n        [isLabelHiddenClass]: isLabelHidden,\n      }),\n      input: inputClass,\n      helperText: helperTextClass,\n      validationText: validationTextClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSliderStyleProps","props","isDisabled","isFluid","isLabelHidden","validationState","restProps","sliderClass","useClassNamePrefix","rootClass","classNames","isDisabledClass","isFluidClass","validationStateClass","labelClass","isLabelHiddenClass","inputClass","helperTextClass","validationTextClass"],"mappings":";;AAiBO,SAASA,EAAoBC,GAA0C;AAC5E,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,eAAAC,GAAe,iBAAAC,GAAiB,GAAGC,MAAcL,GAExEM,IAAcC,EAAmB,QAAQ,GACzCC,IAAYC,EAAWH,CAAW,GAClCI,IAAkB,GAAGJ,CAAW,cAChCK,IAAe,GAAGL,CAAW,WAC7BM,IAAuB,GAAGN,CAAW,KAAKF,CAAe,IACzDS,IAAaJ,EAAW,GAAGH,CAAW,SAAS,GAC/CQ,IAAqB,GAAGR,CAAW,mBACnCS,IAAa,GAAGT,CAAW,WAC3BU,IAAkB,GAAGV,CAAW,gBAChCW,IAAsB,GAAGX,CAAW;AAE1C,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAMG,EAAWD,GAAW;AAAA,QAC1B,CAACE,CAAe,GAAGT;AAAA,QACnB,CAACU,CAAY,GAAGT;AAAA,QAChB,CAACU,CAAoB,GAAGR;AAAA,MAAA,CACzB;AAAA,MACD,OAAOK,EAAWI,GAAY;AAAA,QAC5B,CAACC,CAAkB,GAAGX;AAAA,MAAA,CACvB;AAAA,MACD,OAAOY;AAAA,MACP,YAAYC;AAAA,MACZ,gBAAgBC;AAAA,IAAA;AAAA,IAElB,OAAOZ;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useSliderStyleProps.js","sources":["../../../src/components/Slider/useSliderStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritSliderProps } from '../../types';\n\ntype UseSliderStyleProps = Omit<SpiritSliderProps, 'id' | 'value' | 'label'>;\n\nexport interface SliderStyles {\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n  };\n  props: UseSliderStyleProps;\n}\n\nexport function useSliderStyleProps(props: UseSliderStyleProps): SliderStyles {\n  const { isDisabled, isFluid, isLabelHidden, validationState, ...restProps } = props;\n\n  const sliderClass = useClassNamePrefix('Slider');\n  const isDisabledClass = `${sliderClass}--disabled`;\n  const isFluidClass = `${sliderClass}--fluid`;\n  const validationStateClass = `${sliderClass}--${validationState}`;\n  const labelClass = `${sliderClass}__label`;\n  const isLabelHiddenClass = `${sliderClass}__label--hidden`;\n  const inputClass = `${sliderClass}__input`;\n  const helperTextClass = `${sliderClass}__helperText`;\n  const validationTextClass = `${sliderClass}__validationText`;\n\n  return {\n    classProps: {\n      root: classNames(sliderClass, {\n        [isDisabledClass]: isDisabled,\n        [isFluidClass]: isFluid,\n        [validationStateClass]: validationState,\n      }),\n      label: classNames(labelClass, {\n        [isLabelHiddenClass]: isLabelHidden,\n      }),\n      input: inputClass,\n      helperText: helperTextClass,\n      validationText: validationTextClass,\n    },\n    props: restProps,\n  };\n}\n"],"names":["useSliderStyleProps","props","isDisabled","isFluid","isLabelHidden","validationState","restProps","sliderClass","useClassNamePrefix","isDisabledClass","isFluidClass","validationStateClass","labelClass","isLabelHiddenClass","inputClass","helperTextClass","validationTextClass","classNames"],"mappings":";;AAiBO,SAASA,EAAoBC,GAA0C;AAC5E,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,eAAAC,GAAe,iBAAAC,GAAiB,GAAGC,MAAcL,GAExEM,IAAcC,EAAmB,QAAQ,GACzCC,IAAkB,GAAGF,CAAW,cAChCG,IAAe,GAAGH,CAAW,WAC7BI,IAAuB,GAAGJ,CAAW,KAAKF,CAAe,IACzDO,IAAa,GAAGL,CAAW,WAC3BM,IAAqB,GAAGN,CAAW,mBACnCO,IAAa,GAAGP,CAAW,WAC3BQ,IAAkB,GAAGR,CAAW,gBAChCS,IAAsB,GAAGT,CAAW;AAE1C,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAMU,EAAWV,GAAa;AAAA,QAC5B,CAACE,CAAe,GAAGP;AAAA,QACnB,CAACQ,CAAY,GAAGP;AAAA,QAChB,CAACQ,CAAoB,GAAGN;AAAA,MAAA,CACzB;AAAA,MACD,OAAOY,EAAWL,GAAY;AAAA,QAC5B,CAACC,CAAkB,GAAGT;AAAA,MAAA,CACvB;AAAA,MACD,OAAOU;AAAA,MACP,YAAYC;AAAA,MACZ,gBAAgBC;AAAA,IAAA;AAAA,IAElB,OAAOV;AAAA,EAAA;AAEX;"}

package/dist/components/Slider.d.ts

@@ -1,2 +1,2 @@
-export * from './Slider/index'
+export * from '../src/components/Slider/index'
 export {}

package/dist/components/Spinner/demo/SpinnerColors.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Spinner.cjs"),t=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.default,{}),e.jsx(r.default,{color:"primary"}),e.jsx(r.default,{color:"secondary"}),e.jsx(r.default,{color:"tertiary"})]});exports.default=t;
+//# sourceMappingURL=SpinnerColors.cjs.map

package/dist/components/Spinner/demo/SpinnerColors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerColors.cjs","sources":["../../../../src/components/Spinner/demo/SpinnerColors.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerColors = () => (\n  <>\n    <Spinner />\n\n    <Spinner color=\"primary\" />\n\n    <Spinner color=\"secondary\" />\n\n    <Spinner color=\"tertiary\" />\n  </>\n);\n\nexport default SpinnerColors;\n"],"names":["SpinnerColors","jsxs","Fragment","jsx","Spinner"],"mappings":"6KAGMA,EAAgB,IACpBC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,QAAA,EAAQ,EAETD,EAAAA,IAACC,EAAAA,QAAA,CAAQ,MAAM,SAAA,CAAU,EAEzBD,EAAAA,IAACC,EAAAA,QAAA,CAAQ,MAAM,WAAA,CAAY,EAE3BD,EAAAA,IAACC,EAAAA,QAAA,CAAQ,MAAM,UAAA,CAAW,CAAA,CAAA,CAC5B"}

package/dist/components/Spinner/demo/SpinnerColors.js

@@ -0,0 +1,12 @@
+import { jsxs as t, Fragment as e, jsx as r } from "react/jsx-runtime";
+import o from "../Spinner.js";
+const n = () => /* @__PURE__ */ t(e, { children: [
+  /* @__PURE__ */ r(o, {}),
+  /* @__PURE__ */ r(o, { color: "primary" }),
+  /* @__PURE__ */ r(o, { color: "secondary" }),
+  /* @__PURE__ */ r(o, { color: "tertiary" })
+] });
+export {
+  n as default
+};
+//# sourceMappingURL=SpinnerColors.js.map

package/dist/components/Spinner/demo/SpinnerColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerColors.js","sources":["../../../../src/components/Spinner/demo/SpinnerColors.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerColors = () => (\n  <>\n    <Spinner />\n\n    <Spinner color=\"primary\" />\n\n    <Spinner color=\"secondary\" />\n\n    <Spinner color=\"tertiary\" />\n  </>\n);\n\nexport default SpinnerColors;\n"],"names":["SpinnerColors","jsxs","Fragment","jsx","Spinner"],"mappings":";;AAGA,MAAMA,IAAgB,MACpB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ;AAAA,EAET,gBAAAD,EAACC,GAAA,EAAQ,OAAM,UAAA,CAAU;AAAA,EAEzB,gBAAAD,EAACC,GAAA,EAAQ,OAAM,YAAA,CAAY;AAAA,EAE3B,gBAAAD,EAACC,GAAA,EAAQ,OAAM,WAAA,CAAW;AAAA,EAAA,CAC5B;"}

package/dist/components/Spinner/demo/SpinnerDefault.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../Spinner.cjs"),u=()=>e.jsx(t.default,{});exports.default=u;
+//# sourceMappingURL=SpinnerDefault.cjs.map

package/dist/components/Spinner/demo/SpinnerDefault.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDefault.cjs","sources":["../../../../src/components/Spinner/demo/SpinnerDefault.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerDefault = () => <Spinner />;\n\nexport default SpinnerDefault;\n"],"names":["SpinnerDefault","jsx","Spinner"],"mappings":"6KAGMA,EAAiB,IAAMC,MAACC,EAAAA,QAAA,CAAA,CAAQ"}

package/dist/components/Spinner/demo/SpinnerDefault.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../Spinner.js";
+const i = () => /* @__PURE__ */ r(t, {});
+export {
+  i as default
+};
+//# sourceMappingURL=SpinnerDefault.js.map

package/dist/components/Spinner/demo/SpinnerDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDefault.js","sources":["../../../../src/components/Spinner/demo/SpinnerDefault.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerDefault = () => <Spinner />;\n\nexport default SpinnerDefault;\n"],"names":["SpinnerDefault","jsx","Spinner"],"mappings":";;AAGA,MAAMA,IAAiB,MAAM,gBAAAC,EAACC,GAAA,CAAA,CAAQ;"}

package/dist/components/Spinner/demo/SpinnerIconProps.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../Spinner.cjs"),r=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.default,{boxSize:36}),e.jsx(t.default,{title:"Spinner title"})]});exports.default=r;
+//# sourceMappingURL=SpinnerIconProps.cjs.map

package/dist/components/Spinner/demo/SpinnerIconProps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerIconProps.cjs","sources":["../../../../src/components/Spinner/demo/SpinnerIconProps.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerIconProps = () => (\n  <>\n    <Spinner boxSize={36} />\n\n    <Spinner title=\"Spinner title\" />\n  </>\n);\n\nexport default SpinnerIconProps;\n"],"names":["SpinnerIconProps","jsxs","Fragment","jsx","Spinner"],"mappings":"6KAGMA,EAAmB,IACvBC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAQ,QAAS,EAAA,CAAI,EAEtBD,EAAAA,IAACC,EAAAA,QAAA,CAAQ,MAAM,eAAA,CAAgB,CAAA,CAAA,CACjC"}

package/dist/components/Spinner/demo/SpinnerIconProps.js

@@ -0,0 +1,10 @@
+import { jsxs as e, Fragment as i, jsx as r } from "react/jsx-runtime";
+import t from "../Spinner.js";
+const s = () => /* @__PURE__ */ e(i, { children: [
+  /* @__PURE__ */ r(t, { boxSize: 36 }),
+  /* @__PURE__ */ r(t, { title: "Spinner title" })
+] });
+export {
+  s as default
+};
+//# sourceMappingURL=SpinnerIconProps.js.map

package/dist/components/Spinner/demo/SpinnerIconProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerIconProps.js","sources":["../../../../src/components/Spinner/demo/SpinnerIconProps.tsx"],"sourcesContent":["import React from 'react';\nimport Spinner from '../Spinner';\n\nconst SpinnerIconProps = () => (\n  <>\n    <Spinner boxSize={36} />\n\n    <Spinner title=\"Spinner title\" />\n  </>\n);\n\nexport default SpinnerIconProps;\n"],"names":["SpinnerIconProps","jsxs","Fragment","jsx","Spinner"],"mappings":";;AAGA,MAAMA,IAAmB,MACvB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ,SAAS,GAAA,CAAI;AAAA,EAEtB,gBAAAD,EAACC,GAAA,EAAQ,OAAM,gBAAA,CAAgB;AAAA,EAAA,CACjC;"}

package/dist/components/Spinner/demo/preview.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@alma-oss/spirit-icons/icons"),s=require("react"),t=require("../../../web-react/docs/DocsSection.cjs"),i=require("../../../context/IconsContext.cjs"),n=require("./SpinnerColors.cjs"),o=require("./SpinnerDefault.cjs"),c=require("./SpinnerIconProps.cjs"),l=()=>e.jsx(s.StrictMode,{children:e.jsxs(i.IconsProvider,{value:r,children:[e.jsx(t.default,{title:"Default",children:e.jsx(o.default,{})}),e.jsx(t.default,{title:"Colors",children:e.jsx(n.default,{})}),e.jsx(t.default,{title:"Icon Props",children:e.jsx(c.default,{})})]})});exports.Preview=l;
+//# sourceMappingURL=preview.cjs.map

package/dist/components/Spinner/demo/preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.cjs","sources":["../../../../src/components/Spinner/demo/preview.tsx"],"sourcesContent":["'use client';\n\n// @ts-ignore: No declaration file -- @see https://jira.almacareer.tech/browse/DS-561\nimport icons from '@alma-oss/spirit-icons/icons';\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport { IconsProvider } from '../../../context';\nimport SpinnerColors from './SpinnerColors';\nimport SpinnerDefault from './SpinnerDefault';\nimport SpinnerIconProps from './SpinnerIconProps';\n\nexport const Preview = () => (\n  <StrictMode>\n    <IconsProvider value={icons}>\n      <DocsSection title=\"Default\">\n        <SpinnerDefault />\n      </DocsSection>\n      <DocsSection title=\"Colors\">\n        <SpinnerColors />\n      </DocsSection>\n      <DocsSection title=\"Icon Props\">\n        <SpinnerIconProps />\n      </DocsSection>\n    </IconsProvider>\n  </StrictMode>\n);\n"],"names":["Preview","jsx","StrictMode","jsxs","IconsProvider","icons","DocsSection","SpinnerDefault","SpinnerColors","SpinnerIconProps"],"mappings":"0YAWaA,EAAU,IACrBC,EAAAA,IAACC,EAAAA,YACC,SAAAC,OAACC,EAAAA,cAAA,CAAc,MAAOC,EACpB,SAAA,CAAAJ,MAACK,EAAAA,QAAA,CAAY,MAAM,UACjB,SAAAL,MAACM,EAAAA,UAAe,EAClB,QACCD,EAAAA,QAAA,CAAY,MAAM,SACjB,SAAAL,MAACO,EAAAA,UAAc,EACjB,QACCF,EAAAA,QAAA,CAAY,MAAM,aACjB,SAAAL,EAAAA,IAACQ,YAAiB,CAAA,CACpB,CAAA,CAAA,CACF,CAAA,CACF"}

package/dist/components/Spinner/demo/preview.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import t from "@alma-oss/spirit-icons/icons";
+import { StrictMode as e } from "react";
+import o from "../../../web-react/docs/DocsSection.js";
+import { IconsProvider as n } from "../../../context/IconsContext.js";
+import m from "./SpinnerColors.js";
+import c from "./SpinnerDefault.js";
+import l from "./SpinnerIconProps.js";
+const a = () => /* @__PURE__ */ r(e, { children: /* @__PURE__ */ i(n, { value: t, children: [
+  /* @__PURE__ */ r(o, { title: "Default", children: /* @__PURE__ */ r(c, {}) }),
+  /* @__PURE__ */ r(o, { title: "Colors", children: /* @__PURE__ */ r(m, {}) }),
+  /* @__PURE__ */ r(o, { title: "Icon Props", children: /* @__PURE__ */ r(l, {}) })
+] }) });
+export {
+  a as Preview
+};
+//# sourceMappingURL=preview.js.map

package/dist/components/Spinner/demo/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sources":["../../../../src/components/Spinner/demo/preview.tsx"],"sourcesContent":["'use client';\n\n// @ts-ignore: No declaration file -- @see https://jira.almacareer.tech/browse/DS-561\nimport icons from '@alma-oss/spirit-icons/icons';\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport { IconsProvider } from '../../../context';\nimport SpinnerColors from './SpinnerColors';\nimport SpinnerDefault from './SpinnerDefault';\nimport SpinnerIconProps from './SpinnerIconProps';\n\nexport const Preview = () => (\n  <StrictMode>\n    <IconsProvider value={icons}>\n      <DocsSection title=\"Default\">\n        <SpinnerDefault />\n      </DocsSection>\n      <DocsSection title=\"Colors\">\n        <SpinnerColors />\n      </DocsSection>\n      <DocsSection title=\"Icon Props\">\n        <SpinnerIconProps />\n      </DocsSection>\n    </IconsProvider>\n  </StrictMode>\n);\n"],"names":["Preview","jsx","StrictMode","jsxs","IconsProvider","icons","DocsSection","SpinnerDefault","SpinnerColors","SpinnerIconProps"],"mappings":";;;;;;;;;AAWO,MAAMA,IAAU,MACrB,gBAAAC,EAACC,KACC,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAOC,GACpB,UAAA;AAAA,EAAA,gBAAAJ,EAACK,GAAA,EAAY,OAAM,WACjB,UAAA,gBAAAL,EAACM,KAAe,GAClB;AAAA,oBACCD,GAAA,EAAY,OAAM,UACjB,UAAA,gBAAAL,EAACO,KAAc,GACjB;AAAA,oBACCF,GAAA,EAAY,OAAM,cACjB,UAAA,gBAAAL,EAACQ,KAAiB,EAAA,CACpB;AAAA,EAAA,CACF,EAAA,CACF;"}

package/dist/components/Spinner/preview/index.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../demo/preview.cjs");exports.default=e.Preview;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Spinner/preview/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Spinner/preview/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Preview as t } from "../demo/preview.js";
+export {
+  t as default
+};
+//# sourceMappingURL=index.js.map