@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/code.css

@@ -1,11 +1,14 @@
 
 
 .dsx-code {
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
-  font-size: var(--dsx-typography-code-font-size, 0.875em);
-  font-weight: var(--dsx-typography-code-font-weight, 400);
-  line-height: var(--dsx-typography-code-line-height, 1.25);
-  letter-spacing: var(--dsx-typography-code-letter-spacing, -0.01em);
+  font-family: var(--dsx-typography-code-font-family);
+  font-size: var(--dsx-typography-code-font-size);
+  font-weight: var(--dsx-typography-code-font-weight);
+  line-height: var(--dsx-typography-code-line-height);
+  letter-spacing: var(--dsx-typography-code-letter-spacing);
+  font-variation-settings: var(--dsx-typography-code-font-variation-settings);
+  text-transform: var(--dsx-typography-code-text-transform);
+  text-decoration: var(--dsx-typography-code-text-decoration);
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-0-5, 2px) var(--dsx-space-1-5, 6px);
   box-sizing: border-box;
@@ -13,7 +16,7 @@
 }
 
 .dsx-code--soft {
-  background-color: var(--dsx-color-surface-raised);
+  background-color: var(--dsx-color-surface-sunken);
   color: var(--dsx-color-on-surface);
   box-shadow: inset 0 0 0 1px var(--dsx-color-outline-variant);
 }

package/dist/components/collapsible/Collapsible.cjs

@@ -73,7 +73,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 }
 
 .dsx-collapsible__content[data-state='closed'] {
-  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);
+  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;
+  overflow: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -81,6 +82,11 @@ const COLLAPSIBLE_MOTION_STYLES = `
   .dsx-collapsible__content[data-state='closed'] {
     animation: none !important;
   }
+  /* No animation runs, so forceMount-kept closed content would render at
+     full height \u2014 hide it outright for reduced-motion users. */
+  .dsx-collapsible__content[data-state='closed'] {
+    display: none;
+  }
 }
 `;
 function useCollapsibleMotionStyles() {

package/dist/components/collapsible/Collapsible.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collapsible/Collapsible.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,2BAAsC;AACtC,wBAAgC;AAEhC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4F;AAgFpF;AA5ER,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,sCAAmB;AAC3F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,sDAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,uDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC/D;AAAA,kDAAC,UAAM,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,4CAAC,oBAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,sDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC9D,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,2BAAsC;AACtC,wBAAgC;AAEhC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4F;AAsFpF;AAlFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+ClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,sCAAmB;AAC3F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,sDAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,uDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC/D;AAAA,kDAAC,UAAM,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,4CAAC,oBAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,sDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC9D,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/collapsible/Collapsible.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.cts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA+DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.cts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.mts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA+DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.mts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA+DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.js

@@ -37,7 +37,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 }
 
 .dsx-collapsible__content[data-state='closed'] {
-  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);
+  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;
+  overflow: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -45,6 +46,11 @@ const COLLAPSIBLE_MOTION_STYLES = `
   .dsx-collapsible__content[data-state='closed'] {
     animation: none !important;
   }
+  /* No animation runs, so forceMount-kept closed content would render at
+     full height \u2014 hide it outright for reduced-motion users. */
+  .dsx-collapsible__content[data-state='closed'] {
+    display: none;
+  }
 }
 `;
 function useCollapsibleMotionStyles() {

package/dist/components/collapsible/Collapsible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collapsible/Collapsible.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,0BAA0B;AACtC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,4BAA4B,qBAAqB,kCAAkC;AAgFpF,cAcA,YAdA;AA5ER,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,mBAAmB;AAC3F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,+BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC/D;AAAA,0BAAC,UAAM,oBAAU,oBAAC,aAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,oBAAC,QAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,8BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC9D,oBAAU,oBAAC,aAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,0BAA0B;AACtC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,4BAA4B,qBAAqB,kCAAkC;AAsFpF,cAcA,YAdA;AAlFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+ClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,mBAAmB;AAC3F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,+BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC/D;AAAA,0BAAC,UAAM,oBAAU,oBAAC,aAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,oBAAC,QAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,8BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC9D,oBAAU,oBAAC,aAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/dist/components/color-picker.css

@@ -8,9 +8,10 @@
   min-width: var(--dsx-size-popover-min-width);
   min-height: var(--dsx-size-xl);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-surface-overlay);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   cursor: var(--dsx-cursor-pointer, pointer);
   text-align: left;

package/dist/components/color-swatch.css

@@ -16,15 +16,26 @@
 
 .dsx-color-swatch:hover {
   transform: scale(1.1);
-  box-shadow: var(--dsx-shadow-sm);
+  box-shadow: var(--dsx-shadow-elevation-1);
 }
 
 .dsx-color-swatch:active {
   transform: scale(0.95);
 }
 
+/* prefers-reduced-motion is non-optional (DESIGN.md): the transition already
+   collapses, but transform: none must also cancel the hover/active scale pop
+   so the swatch does not jump size for motion-sensitive users. */
+@media (prefers-reduced-motion: reduce) {
+  .dsx-color-swatch:hover,
+  .dsx-color-swatch:active {
+    transform: none;
+  }
+}
+
 .dsx-color-swatch[data-checked] {
-  border-color: var(--dsx-color-primary);
+  border-width: var(--dsx-border-width-lg);
+  border-color: var(--dsx-color-on-surface);
   box-shadow: 0 0 0 var(--dsx-border-width-md) var(--dsx-color-primary-alpha);
 }
 
@@ -52,6 +63,7 @@
 }
 
 .dsx-color-swatch__check {
-  color: white;
-  mix-blend-mode: difference;
+  /* Default ink; the component sets an explicit luminance-based color inline
+     (black on light fills, white on dark), so no blend mode is needed. */
+  color: var(--dsx-raw-white);
 }

package/dist/components/colorPicker/ColorPicker.cjs

@@ -245,6 +245,20 @@ const ColorPicker = React.forwardRef((props, forwardedRef) => {
           }
         }
       ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-color-picker__preview", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "dsx-color-picker__preview-swatch",
+            style: getSwatchStyle(draftValue || value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsx-color-picker__preview-copy", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-color-picker__preview-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-color-picker__preview-value", children: draftValue || value || placeholder })
+        ] })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-color-picker__field-row", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "dsx-color-picker__field", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-color-picker__field-label", children: "Hex" }),

package/dist/components/colorPicker/ColorPicker.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colorPicker/ColorPicker.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\nimport { HexAlphaColorPicker } from 'react-colorful'\nimport { Pipette } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { colorPickerPropDefs } from './colorPicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst DEFAULT_PRESET_COLORS = [\n  '#E0A82E',\n  '#E8BF6A',\n  '#8E9BB0',\n  '#CD7F32',\n  '#4CAF82',\n  '#EF4444',\n  '#8B641F',\n  '#D8D2C5',\n  '#332A1C',\n  '#3F3423',\n  '#0B0804',\n  '#F0EDE8',\n] as const\n\nconst HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction normalizeHexColor(value: string) {\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return null\n  }\n\n  const hexBody = trimmedValue.replace(/^#/, '')\n  const expandedHex =\n    hexBody.length === 3\n      ? hexBody\n          .split('')\n          .map((character) => `${character}${character}`)\n          .join('')\n      : hexBody\n\n  return `#${expandedHex.toUpperCase()}`\n}\n\nfunction sanitizeHexInput(value: string) {\n  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, '')\n  const hasHash = uppercaseValue.startsWith('#')\n  const hexBody = uppercaseValue.replace(/#/g, '')\n\n  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8)\n}\n\nfunction toNormalizedColor(value?: string) {\n  if (!value) {\n    return undefined\n  }\n\n  return normalizeHexColor(value) ?? undefined\n}\n\nfunction getSwatchStyle(color?: string) {\n  return {\n    ['--dsx-color-picker-swatch' as const]: color ?? 'transparent',\n  } as React.CSSProperties\n}\n\ntype ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  presetColors?: readonly string[]\n  placeholder?: string\n  label?: string\n}\n\ntype ColorPickerProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'defaultValue' | 'onChange' | 'value'\n> &\n  ColorPickerOwnProps\n\nfunction useControllableColorState({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n}: Pick<ColorPickerProps, 'value' | 'defaultValue' | 'onValueChange'>) {\n  const isControlled = valueProp !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue))\n  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      const normalizedValue = normalizeHexColor(nextValue)\n\n      if (!normalizedValue) {\n        return false\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(normalizedValue)\n      }\n\n      onValueChange?.(normalizedValue)\n      return true\n    },\n    [isControlled, onValueChange],\n  )\n\n  return [value, setValue] as const\n}\n\nconst ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    presetColors = DEFAULT_PRESET_COLORS,\n    placeholder = 'Select color',\n    label = 'Color',\n    disabled = false,\n    size = 'md',\n    type = 'button',\n    children,\n    ...triggerProps\n  } = extractProps(props, colorPickerPropDefs)\n  const [open, setOpen] = React.useState(false)\n  const [supportsEyedropper] = React.useState(() => typeof window !== 'undefined' && 'EyeDropper' in window)\n  const [value, setValue] = useControllableColorState({\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n  })\n  const [draftValue, setDraftValue] = React.useState(value ?? '')\n  const TriggerComp = asChild ? Slot : 'button'\n\n  const normalizedPresetColors = React.useMemo(() => {\n    const uniqueColors = new Set<string>()\n\n    for (const presetColor of presetColors) {\n      const normalizedColor = normalizeHexColor(presetColor)\n\n      if (normalizedColor) {\n        uniqueColors.add(normalizedColor)\n      }\n    }\n\n    return [...uniqueColors]\n  }, [presetColors])\n\n  React.useEffect(() => {\n    if (!open) {\n      setDraftValue(value ?? '')\n    }\n  }, [open, value])\n\n  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null\n\n  const commitDraftValue = React.useCallback(() => {\n    const normalizedValue = normalizeHexColor(draftValue)\n\n    if (!normalizedValue) {\n      setDraftValue(value ?? '')\n      return false\n    }\n\n    const didUpdate = setValue(normalizedValue)\n\n    if (didUpdate) {\n      setDraftValue(normalizedValue)\n    }\n\n    return didUpdate\n  }, [draftValue, setValue, value])\n\n  const handlePresetSelect = React.useCallback(\n    (nextColor: string) => {\n      setValue(nextColor)\n      setDraftValue(nextColor)\n      setOpen(false)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(sanitizeHexInput(event.target.value))\n  }, [])\n\n  const handleInputBlur = React.useCallback(() => {\n    commitDraftValue()\n  }, [commitDraftValue])\n\n  const handleEyedropper = React.useCallback(async () => {\n    if (!supportsEyedropper) return\n    try {\n      // @ts-expect-error \u2014 EyeDropper not yet in TS lib\n      const dropper = new window.EyeDropper()\n      const result = await dropper.open()\n      const normalized = normalizeHexColor(result.sRGBHex)\n      if (normalized) {\n        setDraftValue(normalized)\n        setValue(normalized)\n      }\n    } catch {\n      // user cancelled\n    }\n  }, [supportsEyedropper, setValue])\n\n  const handleInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') {\n        return\n      }\n\n      event.preventDefault()\n\n      if (commitDraftValue()) {\n        setOpen(false)\n      }\n    },\n    [commitDraftValue],\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          type={asChild ? undefined : type}\n          disabled={disabled}\n          className={classNames('dsx-color-picker__trigger', className)}\n          data-has-value={value ? 'true' : 'false'}\n          data-size={size}\n        >\n          <span\n            className=\"dsx-color-picker__trigger-swatch\"\n            aria-hidden=\"true\"\n            data-empty={value ? undefined : 'true'}\n            style={getSwatchStyle(value)}\n          />\n          {asChild ? (\n            <Slottable>{children}</Slottable>\n          ) : (\n            <>\n              <span className=\"dsx-color-picker__trigger-copy\">\n                <span className=\"dsx-color-picker__trigger-label\">{label}</span>\n                <span className=\"dsx-color-picker__trigger-value\">{value ?? placeholder}</span>\n              </span>\n              <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-color-picker__trigger-icon\" />\n            </>\n          )}\n        </TriggerComp>\n      </Popover.Trigger>\n\n      <Popover.Content className=\"dsx-color-picker__content\" align=\"start\" showArrow={false}>\n        <div className=\"dsx-color-picker__picker\">\n          <HexAlphaColorPicker\n            color={draftValue || '#000000FF'}\n            onChange={(hex) => {\n              const normalized = normalizeHexColor(hex)\n              if (normalized) {\n                setDraftValue(normalized)\n                setValue(normalized)\n              }\n            }}\n          />\n        </div>\n\n        <div className=\"dsx-color-picker__field-row\">\n          <label className=\"dsx-color-picker__field\">\n            <span className=\"dsx-color-picker__field-label\">Hex</span>\n            <Input\n              aria-label=\"Hex color\"\n              autoComplete=\"off\"\n              density=\"md\"\n              invalid={inputInvalid}\n              inputMode=\"text\"\n              maxLength={9}\n              placeholder=\"#E0A82EFF\"\n              spellCheck={false}\n              value={draftValue}\n              onBlur={handleInputBlur}\n              onChange={handleInputChange}\n              onKeyDown={handleInputKeyDown}\n            />\n          </label>\n          {supportsEyedropper && (\n            <button\n              type=\"button\"\n              className=\"dsx-color-picker__eyedropper\"\n              aria-label=\"Pick color from screen\"\n              onClick={handleEyedropper}\n            >\n              <Pipette size={14} />\n            </button>\n          )}\n        </div>\n\n        <div className=\"dsx-color-picker__swatches\" aria-label=\"Preset colors\" role=\"list\">\n          {normalizedPresetColors.map((presetColor) => {\n            const isSelected = value === presetColor\n\n            return (\n              <button\n                key={presetColor}\n                type=\"button\"\n                className=\"dsx-color-picker__swatch\"\n                onClick={() => handlePresetSelect(presetColor)}\n                title={presetColor}\n                aria-label={`Select ${presetColor}`}\n                aria-pressed={isSelected}\n                data-selected={isSelected ? 'true' : undefined}\n                style={getSwatchStyle(presetColor)}\n              >\n                {isSelected ? (\n                  <span className=\"dsx-color-picker__swatch-indicator\" aria-hidden=\"true\">\n                    <Icon name=\"check\" size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n})\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\nimport { HexAlphaColorPicker } from 'react-colorful'\nimport { Pipette } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { colorPickerPropDefs } from './colorPicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst DEFAULT_PRESET_COLORS = [\n  '#E0A82E',\n  '#E8BF6A',\n  '#8E9BB0',\n  '#CD7F32',\n  '#4CAF82',\n  '#EF4444',\n  '#8B641F',\n  '#D8D2C5',\n  '#332A1C',\n  '#3F3423',\n  '#0B0804',\n  '#F0EDE8',\n] as const\n\nconst HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction normalizeHexColor(value: string) {\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return null\n  }\n\n  const hexBody = trimmedValue.replace(/^#/, '')\n  const expandedHex =\n    hexBody.length === 3\n      ? hexBody\n          .split('')\n          .map((character) => `${character}${character}`)\n          .join('')\n      : hexBody\n\n  return `#${expandedHex.toUpperCase()}`\n}\n\nfunction sanitizeHexInput(value: string) {\n  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, '')\n  const hasHash = uppercaseValue.startsWith('#')\n  const hexBody = uppercaseValue.replace(/#/g, '')\n\n  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8)\n}\n\nfunction toNormalizedColor(value?: string) {\n  if (!value) {\n    return undefined\n  }\n\n  return normalizeHexColor(value) ?? undefined\n}\n\nfunction getSwatchStyle(color?: string) {\n  return {\n    ['--dsx-color-picker-swatch' as const]: color ?? 'transparent',\n  } as React.CSSProperties\n}\n\ntype ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  presetColors?: readonly string[]\n  placeholder?: string\n  label?: string\n}\n\ntype ColorPickerProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'defaultValue' | 'onChange' | 'value'\n> &\n  ColorPickerOwnProps\n\nfunction useControllableColorState({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n}: Pick<ColorPickerProps, 'value' | 'defaultValue' | 'onValueChange'>) {\n  const isControlled = valueProp !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue))\n  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      const normalizedValue = normalizeHexColor(nextValue)\n\n      if (!normalizedValue) {\n        return false\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(normalizedValue)\n      }\n\n      onValueChange?.(normalizedValue)\n      return true\n    },\n    [isControlled, onValueChange],\n  )\n\n  return [value, setValue] as const\n}\n\nconst ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    presetColors = DEFAULT_PRESET_COLORS,\n    placeholder = 'Select color',\n    label = 'Color',\n    disabled = false,\n    size = 'md',\n    type = 'button',\n    children,\n    ...triggerProps\n  } = extractProps(props, colorPickerPropDefs)\n  const [open, setOpen] = React.useState(false)\n  const [supportsEyedropper] = React.useState(() => typeof window !== 'undefined' && 'EyeDropper' in window)\n  const [value, setValue] = useControllableColorState({\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n  })\n  const [draftValue, setDraftValue] = React.useState(value ?? '')\n  const TriggerComp = asChild ? Slot : 'button'\n\n  const normalizedPresetColors = React.useMemo(() => {\n    const uniqueColors = new Set<string>()\n\n    for (const presetColor of presetColors) {\n      const normalizedColor = normalizeHexColor(presetColor)\n\n      if (normalizedColor) {\n        uniqueColors.add(normalizedColor)\n      }\n    }\n\n    return [...uniqueColors]\n  }, [presetColors])\n\n  React.useEffect(() => {\n    if (!open) {\n      setDraftValue(value ?? '')\n    }\n  }, [open, value])\n\n  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null\n\n  const commitDraftValue = React.useCallback(() => {\n    const normalizedValue = normalizeHexColor(draftValue)\n\n    if (!normalizedValue) {\n      setDraftValue(value ?? '')\n      return false\n    }\n\n    const didUpdate = setValue(normalizedValue)\n\n    if (didUpdate) {\n      setDraftValue(normalizedValue)\n    }\n\n    return didUpdate\n  }, [draftValue, setValue, value])\n\n  const handlePresetSelect = React.useCallback(\n    (nextColor: string) => {\n      setValue(nextColor)\n      setDraftValue(nextColor)\n      setOpen(false)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(sanitizeHexInput(event.target.value))\n  }, [])\n\n  const handleInputBlur = React.useCallback(() => {\n    commitDraftValue()\n  }, [commitDraftValue])\n\n  const handleEyedropper = React.useCallback(async () => {\n    if (!supportsEyedropper) return\n    try {\n      // @ts-expect-error \u2014 EyeDropper not yet in TS lib\n      const dropper = new window.EyeDropper()\n      const result = await dropper.open()\n      const normalized = normalizeHexColor(result.sRGBHex)\n      if (normalized) {\n        setDraftValue(normalized)\n        setValue(normalized)\n      }\n    } catch {\n      // user cancelled\n    }\n  }, [supportsEyedropper, setValue])\n\n  const handleInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') {\n        return\n      }\n\n      event.preventDefault()\n\n      if (commitDraftValue()) {\n        setOpen(false)\n      }\n    },\n    [commitDraftValue],\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          type={asChild ? undefined : type}\n          disabled={disabled}\n          className={classNames('dsx-color-picker__trigger', className)}\n          data-has-value={value ? 'true' : 'false'}\n          data-size={size}\n        >\n          <span\n            className=\"dsx-color-picker__trigger-swatch\"\n            aria-hidden=\"true\"\n            data-empty={value ? undefined : 'true'}\n            style={getSwatchStyle(value)}\n          />\n          {asChild ? (\n            <Slottable>{children}</Slottable>\n          ) : (\n            <>\n              <span className=\"dsx-color-picker__trigger-copy\">\n                <span className=\"dsx-color-picker__trigger-label\">{label}</span>\n                <span className=\"dsx-color-picker__trigger-value\">{value ?? placeholder}</span>\n              </span>\n              <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-color-picker__trigger-icon\" />\n            </>\n          )}\n        </TriggerComp>\n      </Popover.Trigger>\n\n      <Popover.Content className=\"dsx-color-picker__content\" align=\"start\" showArrow={false}>\n        <div className=\"dsx-color-picker__picker\">\n          <HexAlphaColorPicker\n            color={draftValue || '#000000FF'}\n            onChange={(hex) => {\n              const normalized = normalizeHexColor(hex)\n              if (normalized) {\n                setDraftValue(normalized)\n                setValue(normalized)\n              }\n            }}\n          />\n        </div>\n\n        <div className=\"dsx-color-picker__preview\">\n          <span\n            aria-hidden=\"true\"\n            className=\"dsx-color-picker__preview-swatch\"\n            style={getSwatchStyle(draftValue || value)}\n          />\n          <span className=\"dsx-color-picker__preview-copy\">\n            <span className=\"dsx-color-picker__preview-label\">{label}</span>\n            <span className=\"dsx-color-picker__preview-value\">\n              {draftValue || value || placeholder}\n            </span>\n          </span>\n        </div>\n\n        <div className=\"dsx-color-picker__field-row\">\n          <label className=\"dsx-color-picker__field\">\n            <span className=\"dsx-color-picker__field-label\">Hex</span>\n            <Input\n              aria-label=\"Hex color\"\n              autoComplete=\"off\"\n              density=\"md\"\n              invalid={inputInvalid}\n              inputMode=\"text\"\n              maxLength={9}\n              placeholder=\"#E0A82EFF\"\n              spellCheck={false}\n              value={draftValue}\n              onBlur={handleInputBlur}\n              onChange={handleInputChange}\n              onKeyDown={handleInputKeyDown}\n            />\n          </label>\n          {supportsEyedropper && (\n            <button\n              type=\"button\"\n              className=\"dsx-color-picker__eyedropper\"\n              aria-label=\"Pick color from screen\"\n              onClick={handleEyedropper}\n            >\n              <Pipette size={14} />\n            </button>\n          )}\n        </div>\n\n        <div className=\"dsx-color-picker__swatches\" aria-label=\"Preset colors\" role=\"list\">\n          {normalizedPresetColors.map((presetColor) => {\n            const isSelected = value === presetColor\n\n            return (\n              <button\n                key={presetColor}\n                type=\"button\"\n                className=\"dsx-color-picker__swatch\"\n                onClick={() => handlePresetSelect(presetColor)}\n                title={presetColor}\n                aria-label={`Select ${presetColor}`}\n                aria-pressed={isSelected}\n                data-selected={isSelected ? 'true' : undefined}\n                style={getSwatchStyle(presetColor)}\n              >\n                {isSelected ? (\n                  <span className=\"dsx-color-picker__swatch-indicator\" aria-hidden=\"true\">\n                    <Icon name=\"check\" size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n})\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/colorPicker/ColorPicker.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.cts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorPicker.d.cts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CA8Qd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.mts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorPicker.d.mts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CA8Qd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CA8Qd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.js

@@ -212,6 +212,20 @@ const ColorPicker = React.forwardRef((props, forwardedRef) => {
           }
         }
       ) }),
+      /* @__PURE__ */ jsxs("div", { className: "dsx-color-picker__preview", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "dsx-color-picker__preview-swatch",
+            style: getSwatchStyle(draftValue || value)
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "dsx-color-picker__preview-copy", children: [
+          /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__preview-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__preview-value", children: draftValue || value || placeholder })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "dsx-color-picker__field-row", children: [
         /* @__PURE__ */ jsxs("label", { className: "dsx-color-picker__field", children: [
           /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__field-label", children: "Hex" }),

package/dist/components/colorPicker/ColorPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colorPicker/ColorPicker.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\nimport { HexAlphaColorPicker } from 'react-colorful'\nimport { Pipette } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { colorPickerPropDefs } from './colorPicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst DEFAULT_PRESET_COLORS = [\n  '#E0A82E',\n  '#E8BF6A',\n  '#8E9BB0',\n  '#CD7F32',\n  '#4CAF82',\n  '#EF4444',\n  '#8B641F',\n  '#D8D2C5',\n  '#332A1C',\n  '#3F3423',\n  '#0B0804',\n  '#F0EDE8',\n] as const\n\nconst HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction normalizeHexColor(value: string) {\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return null\n  }\n\n  const hexBody = trimmedValue.replace(/^#/, '')\n  const expandedHex =\n    hexBody.length === 3\n      ? hexBody\n          .split('')\n          .map((character) => `${character}${character}`)\n          .join('')\n      : hexBody\n\n  return `#${expandedHex.toUpperCase()}`\n}\n\nfunction sanitizeHexInput(value: string) {\n  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, '')\n  const hasHash = uppercaseValue.startsWith('#')\n  const hexBody = uppercaseValue.replace(/#/g, '')\n\n  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8)\n}\n\nfunction toNormalizedColor(value?: string) {\n  if (!value) {\n    return undefined\n  }\n\n  return normalizeHexColor(value) ?? undefined\n}\n\nfunction getSwatchStyle(color?: string) {\n  return {\n    ['--dsx-color-picker-swatch' as const]: color ?? 'transparent',\n  } as React.CSSProperties\n}\n\ntype ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  presetColors?: readonly string[]\n  placeholder?: string\n  label?: string\n}\n\ntype ColorPickerProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'defaultValue' | 'onChange' | 'value'\n> &\n  ColorPickerOwnProps\n\nfunction useControllableColorState({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n}: Pick<ColorPickerProps, 'value' | 'defaultValue' | 'onValueChange'>) {\n  const isControlled = valueProp !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue))\n  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      const normalizedValue = normalizeHexColor(nextValue)\n\n      if (!normalizedValue) {\n        return false\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(normalizedValue)\n      }\n\n      onValueChange?.(normalizedValue)\n      return true\n    },\n    [isControlled, onValueChange],\n  )\n\n  return [value, setValue] as const\n}\n\nconst ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    presetColors = DEFAULT_PRESET_COLORS,\n    placeholder = 'Select color',\n    label = 'Color',\n    disabled = false,\n    size = 'md',\n    type = 'button',\n    children,\n    ...triggerProps\n  } = extractProps(props, colorPickerPropDefs)\n  const [open, setOpen] = React.useState(false)\n  const [supportsEyedropper] = React.useState(() => typeof window !== 'undefined' && 'EyeDropper' in window)\n  const [value, setValue] = useControllableColorState({\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n  })\n  const [draftValue, setDraftValue] = React.useState(value ?? '')\n  const TriggerComp = asChild ? Slot : 'button'\n\n  const normalizedPresetColors = React.useMemo(() => {\n    const uniqueColors = new Set<string>()\n\n    for (const presetColor of presetColors) {\n      const normalizedColor = normalizeHexColor(presetColor)\n\n      if (normalizedColor) {\n        uniqueColors.add(normalizedColor)\n      }\n    }\n\n    return [...uniqueColors]\n  }, [presetColors])\n\n  React.useEffect(() => {\n    if (!open) {\n      setDraftValue(value ?? '')\n    }\n  }, [open, value])\n\n  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null\n\n  const commitDraftValue = React.useCallback(() => {\n    const normalizedValue = normalizeHexColor(draftValue)\n\n    if (!normalizedValue) {\n      setDraftValue(value ?? '')\n      return false\n    }\n\n    const didUpdate = setValue(normalizedValue)\n\n    if (didUpdate) {\n      setDraftValue(normalizedValue)\n    }\n\n    return didUpdate\n  }, [draftValue, setValue, value])\n\n  const handlePresetSelect = React.useCallback(\n    (nextColor: string) => {\n      setValue(nextColor)\n      setDraftValue(nextColor)\n      setOpen(false)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(sanitizeHexInput(event.target.value))\n  }, [])\n\n  const handleInputBlur = React.useCallback(() => {\n    commitDraftValue()\n  }, [commitDraftValue])\n\n  const handleEyedropper = React.useCallback(async () => {\n    if (!supportsEyedropper) return\n    try {\n      // @ts-expect-error \u2014 EyeDropper not yet in TS lib\n      const dropper = new window.EyeDropper()\n      const result = await dropper.open()\n      const normalized = normalizeHexColor(result.sRGBHex)\n      if (normalized) {\n        setDraftValue(normalized)\n        setValue(normalized)\n      }\n    } catch {\n      // user cancelled\n    }\n  }, [supportsEyedropper, setValue])\n\n  const handleInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') {\n        return\n      }\n\n      event.preventDefault()\n\n      if (commitDraftValue()) {\n        setOpen(false)\n      }\n    },\n    [commitDraftValue],\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          type={asChild ? undefined : type}\n          disabled={disabled}\n          className={classNames('dsx-color-picker__trigger', className)}\n          data-has-value={value ? 'true' : 'false'}\n          data-size={size}\n        >\n          <span\n            className=\"dsx-color-picker__trigger-swatch\"\n            aria-hidden=\"true\"\n            data-empty={value ? undefined : 'true'}\n            style={getSwatchStyle(value)}\n          />\n          {asChild ? (\n            <Slottable>{children}</Slottable>\n          ) : (\n            <>\n              <span className=\"dsx-color-picker__trigger-copy\">\n                <span className=\"dsx-color-picker__trigger-label\">{label}</span>\n                <span className=\"dsx-color-picker__trigger-value\">{value ?? placeholder}</span>\n              </span>\n              <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-color-picker__trigger-icon\" />\n            </>\n          )}\n        </TriggerComp>\n      </Popover.Trigger>\n\n      <Popover.Content className=\"dsx-color-picker__content\" align=\"start\" showArrow={false}>\n        <div className=\"dsx-color-picker__picker\">\n          <HexAlphaColorPicker\n            color={draftValue || '#000000FF'}\n            onChange={(hex) => {\n              const normalized = normalizeHexColor(hex)\n              if (normalized) {\n                setDraftValue(normalized)\n                setValue(normalized)\n              }\n            }}\n          />\n        </div>\n\n        <div className=\"dsx-color-picker__field-row\">\n          <label className=\"dsx-color-picker__field\">\n            <span className=\"dsx-color-picker__field-label\">Hex</span>\n            <Input\n              aria-label=\"Hex color\"\n              autoComplete=\"off\"\n              density=\"md\"\n              invalid={inputInvalid}\n              inputMode=\"text\"\n              maxLength={9}\n              placeholder=\"#E0A82EFF\"\n              spellCheck={false}\n              value={draftValue}\n              onBlur={handleInputBlur}\n              onChange={handleInputChange}\n              onKeyDown={handleInputKeyDown}\n            />\n          </label>\n          {supportsEyedropper && (\n            <button\n              type=\"button\"\n              className=\"dsx-color-picker__eyedropper\"\n              aria-label=\"Pick color from screen\"\n              onClick={handleEyedropper}\n            >\n              <Pipette size={14} />\n            </button>\n          )}\n        </div>\n\n        <div className=\"dsx-color-picker__swatches\" aria-label=\"Preset colors\" role=\"list\">\n          {normalizedPresetColors.map((presetColor) => {\n            const isSelected = value === presetColor\n\n            return (\n              <button\n                key={presetColor}\n                type=\"button\"\n                className=\"dsx-color-picker__swatch\"\n                onClick={() => handlePresetSelect(presetColor)}\n                title={presetColor}\n                aria-label={`Select ${presetColor}`}\n                aria-pressed={isSelected}\n                data-selected={isSelected ? 'true' : undefined}\n                style={getSwatchStyle(presetColor)}\n              >\n                {isSelected ? (\n                  <span className=\"dsx-color-picker__swatch-indicator\" aria-hidden=\"true\">\n                    <Icon name=\"check\" size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n})\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\nimport { HexAlphaColorPicker } from 'react-colorful'\nimport { Pipette } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { colorPickerPropDefs } from './colorPicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst DEFAULT_PRESET_COLORS = [\n  '#E0A82E',\n  '#E8BF6A',\n  '#8E9BB0',\n  '#CD7F32',\n  '#4CAF82',\n  '#EF4444',\n  '#8B641F',\n  '#D8D2C5',\n  '#332A1C',\n  '#3F3423',\n  '#0B0804',\n  '#F0EDE8',\n] as const\n\nconst HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction normalizeHexColor(value: string) {\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return null\n  }\n\n  const hexBody = trimmedValue.replace(/^#/, '')\n  const expandedHex =\n    hexBody.length === 3\n      ? hexBody\n          .split('')\n          .map((character) => `${character}${character}`)\n          .join('')\n      : hexBody\n\n  return `#${expandedHex.toUpperCase()}`\n}\n\nfunction sanitizeHexInput(value: string) {\n  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, '')\n  const hasHash = uppercaseValue.startsWith('#')\n  const hexBody = uppercaseValue.replace(/#/g, '')\n\n  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8)\n}\n\nfunction toNormalizedColor(value?: string) {\n  if (!value) {\n    return undefined\n  }\n\n  return normalizeHexColor(value) ?? undefined\n}\n\nfunction getSwatchStyle(color?: string) {\n  return {\n    ['--dsx-color-picker-swatch' as const]: color ?? 'transparent',\n  } as React.CSSProperties\n}\n\ntype ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  presetColors?: readonly string[]\n  placeholder?: string\n  label?: string\n}\n\ntype ColorPickerProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'defaultValue' | 'onChange' | 'value'\n> &\n  ColorPickerOwnProps\n\nfunction useControllableColorState({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n}: Pick<ColorPickerProps, 'value' | 'defaultValue' | 'onValueChange'>) {\n  const isControlled = valueProp !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue))\n  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      const normalizedValue = normalizeHexColor(nextValue)\n\n      if (!normalizedValue) {\n        return false\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(normalizedValue)\n      }\n\n      onValueChange?.(normalizedValue)\n      return true\n    },\n    [isControlled, onValueChange],\n  )\n\n  return [value, setValue] as const\n}\n\nconst ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    presetColors = DEFAULT_PRESET_COLORS,\n    placeholder = 'Select color',\n    label = 'Color',\n    disabled = false,\n    size = 'md',\n    type = 'button',\n    children,\n    ...triggerProps\n  } = extractProps(props, colorPickerPropDefs)\n  const [open, setOpen] = React.useState(false)\n  const [supportsEyedropper] = React.useState(() => typeof window !== 'undefined' && 'EyeDropper' in window)\n  const [value, setValue] = useControllableColorState({\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n  })\n  const [draftValue, setDraftValue] = React.useState(value ?? '')\n  const TriggerComp = asChild ? Slot : 'button'\n\n  const normalizedPresetColors = React.useMemo(() => {\n    const uniqueColors = new Set<string>()\n\n    for (const presetColor of presetColors) {\n      const normalizedColor = normalizeHexColor(presetColor)\n\n      if (normalizedColor) {\n        uniqueColors.add(normalizedColor)\n      }\n    }\n\n    return [...uniqueColors]\n  }, [presetColors])\n\n  React.useEffect(() => {\n    if (!open) {\n      setDraftValue(value ?? '')\n    }\n  }, [open, value])\n\n  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null\n\n  const commitDraftValue = React.useCallback(() => {\n    const normalizedValue = normalizeHexColor(draftValue)\n\n    if (!normalizedValue) {\n      setDraftValue(value ?? '')\n      return false\n    }\n\n    const didUpdate = setValue(normalizedValue)\n\n    if (didUpdate) {\n      setDraftValue(normalizedValue)\n    }\n\n    return didUpdate\n  }, [draftValue, setValue, value])\n\n  const handlePresetSelect = React.useCallback(\n    (nextColor: string) => {\n      setValue(nextColor)\n      setDraftValue(nextColor)\n      setOpen(false)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(sanitizeHexInput(event.target.value))\n  }, [])\n\n  const handleInputBlur = React.useCallback(() => {\n    commitDraftValue()\n  }, [commitDraftValue])\n\n  const handleEyedropper = React.useCallback(async () => {\n    if (!supportsEyedropper) return\n    try {\n      // @ts-expect-error \u2014 EyeDropper not yet in TS lib\n      const dropper = new window.EyeDropper()\n      const result = await dropper.open()\n      const normalized = normalizeHexColor(result.sRGBHex)\n      if (normalized) {\n        setDraftValue(normalized)\n        setValue(normalized)\n      }\n    } catch {\n      // user cancelled\n    }\n  }, [supportsEyedropper, setValue])\n\n  const handleInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') {\n        return\n      }\n\n      event.preventDefault()\n\n      if (commitDraftValue()) {\n        setOpen(false)\n      }\n    },\n    [commitDraftValue],\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          type={asChild ? undefined : type}\n          disabled={disabled}\n          className={classNames('dsx-color-picker__trigger', className)}\n          data-has-value={value ? 'true' : 'false'}\n          data-size={size}\n        >\n          <span\n            className=\"dsx-color-picker__trigger-swatch\"\n            aria-hidden=\"true\"\n            data-empty={value ? undefined : 'true'}\n            style={getSwatchStyle(value)}\n          />\n          {asChild ? (\n            <Slottable>{children}</Slottable>\n          ) : (\n            <>\n              <span className=\"dsx-color-picker__trigger-copy\">\n                <span className=\"dsx-color-picker__trigger-label\">{label}</span>\n                <span className=\"dsx-color-picker__trigger-value\">{value ?? placeholder}</span>\n              </span>\n              <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-color-picker__trigger-icon\" />\n            </>\n          )}\n        </TriggerComp>\n      </Popover.Trigger>\n\n      <Popover.Content className=\"dsx-color-picker__content\" align=\"start\" showArrow={false}>\n        <div className=\"dsx-color-picker__picker\">\n          <HexAlphaColorPicker\n            color={draftValue || '#000000FF'}\n            onChange={(hex) => {\n              const normalized = normalizeHexColor(hex)\n              if (normalized) {\n                setDraftValue(normalized)\n                setValue(normalized)\n              }\n            }}\n          />\n        </div>\n\n        <div className=\"dsx-color-picker__preview\">\n          <span\n            aria-hidden=\"true\"\n            className=\"dsx-color-picker__preview-swatch\"\n            style={getSwatchStyle(draftValue || value)}\n          />\n          <span className=\"dsx-color-picker__preview-copy\">\n            <span className=\"dsx-color-picker__preview-label\">{label}</span>\n            <span className=\"dsx-color-picker__preview-value\">\n              {draftValue || value || placeholder}\n            </span>\n          </span>\n        </div>\n\n        <div className=\"dsx-color-picker__field-row\">\n          <label className=\"dsx-color-picker__field\">\n            <span className=\"dsx-color-picker__field-label\">Hex</span>\n            <Input\n              aria-label=\"Hex color\"\n              autoComplete=\"off\"\n              density=\"md\"\n              invalid={inputInvalid}\n              inputMode=\"text\"\n              maxLength={9}\n              placeholder=\"#E0A82EFF\"\n              spellCheck={false}\n              value={draftValue}\n              onBlur={handleInputBlur}\n              onChange={handleInputChange}\n              onKeyDown={handleInputKeyDown}\n            />\n          </label>\n          {supportsEyedropper && (\n            <button\n              type=\"button\"\n              className=\"dsx-color-picker__eyedropper\"\n              aria-label=\"Pick color from screen\"\n              onClick={handleEyedropper}\n            >\n              <Pipette size={14} />\n            </button>\n          )}\n        </div>\n\n        <div className=\"dsx-color-picker__swatches\" aria-label=\"Preset colors\" role=\"list\">\n          {normalizedPresetColors.map((presetColor) => {\n            const isSelected = value === presetColor\n\n            return (\n              <button\n                key={presetColor}\n                type=\"button\"\n                className=\"dsx-color-picker__swatch\"\n                onClick={() => handlePresetSelect(presetColor)}\n                title={presetColor}\n                aria-label={`Select ${presetColor}`}\n                aria-pressed={isSelected}\n                data-selected={isSelected ? 'true' : undefined}\n                style={getSwatchStyle(presetColor)}\n              >\n                {isSelected ? (\n                  <span className=\"dsx-color-picker__swatch-indicator\" aria-hidden=\"true\">\n                    <Icon name=\"check\" size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n})\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/colorSwatch/ColorSwatch.cjs

@@ -38,6 +38,17 @@ var import_lucide_react = require("lucide-react");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_colorSwatch = require("./colorSwatch.props");
 var import_jsx_runtime = require("react/jsx-runtime");
+function isLightColor(color) {
+  const match = /^#([0-9a-f]{3,8})$/i.exec(color.trim());
+  if (!match) return false;
+  let hex = match[1];
+  if (hex.length === 3 || hex.length === 4) hex = [...hex].map((c) => c + c).join("");
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  const linear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b) > 0.5;
+}
 const ColorSwatch = React.forwardRef(
   ({ color, checked = false, onClick, children, ...props }, forwardedRef) => {
     const size = props.size ?? "md";
@@ -66,7 +77,15 @@ const ColorSwatch = React.forwardRef(
         "aria-pressed": checked,
         ...!asChild ? { type: "button" } : {},
         children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "dsx-color-swatch__check", size: 12, strokeWidth: 3 }),
+          checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.Check,
+            {
+              className: "dsx-color-swatch__check",
+              size: 12,
+              strokeWidth: 3,
+              style: { color: isLightColor(color) ? "var(--dsx-raw-black)" : "var(--dsx-raw-white)" }
+            }
+          ),
           children
         ] })
       }

package/dist/components/colorSwatch/ColorSwatch.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colorSwatch/ColorSwatch.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Check } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { colorSwatchPropDefs } from './colorSwatch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ColorSwatchOwnProps = GetPropDefTypes<typeof colorSwatchPropDefs>\n\ntype ColorSwatchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & ColorSwatchOwnProps & {\n  color: string\n  checked?: boolean\n  onClick?: (color: string) => void\n}\n\nconst ColorSwatch = React.forwardRef<HTMLButtonElement, ColorSwatchProps>(\n  ({ color, checked = false, onClick, children, ...props }, forwardedRef) => {\n    const size = (props as { size?: string }).size ?? 'md'\n    const { asChild, className, ...swatchProps } = extractProps(props, colorSwatchPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    const handleClick = React.useCallback(\n      (_e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(color)\n      },\n      [color, onClick],\n    )\n\n    return (\n      <Comp\n        {...swatchProps}\n        ref={forwardedRef}\n        className={classNames('dsx-color-swatch', className)}\n        data-checked={checked || undefined}\n        data-size={size}\n        style={{\n          backgroundColor: color,\n          ...swatchProps.style,\n        }}\n        onClick={handleClick}\n        aria-label={`Color swatch: ${color}${checked ? ', selected' : ''}`}\n        aria-pressed={checked}\n        {...(!asChild ? { type: 'button' } : {})}\n      >\n        {asChild ? children : (\n          <>\n            {checked && <Check className=\"dsx-color-swatch__check\" size={12} strokeWidth={3} />}\n            {children}\n          </>\n        )}\n      </Comp>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\nexport type { ColorSwatchProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,0BAAsB;AAEtB,0BAA6B;AAC7B,yBAAoC;AA0C1B;AA9BV,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,OAAO,UAAU,OAAO,SAAS,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACzE,UAAM,OAAQ,MAA4B,QAAQ;AAClD,UAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,sCAAmB;AACtF,UAAM,OAAO,UAAU,yBAAO;AAE9B,UAAM,cAAc,MAAM;AAAA,MACxB,CAAC,OAA4C;AAC3C,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,CAAC,OAAO,OAAO;AAAA,IACjB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,oBAAoB,SAAS;AAAA,QACnD,gBAAc,WAAW;AAAA,QACzB,aAAW;AAAA,QACX,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,GAAG,YAAY;AAAA,QACjB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,iBAAiB,KAAK,GAAG,UAAU,eAAe,EAAE;AAAA,QAChE,gBAAc;AAAA,QACb,GAAI,CAAC,UAAU,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,QAErC,oBAAU,WACT,4EACG;AAAA,qBAAW,4CAAC,6BAAM,WAAU,2BAA0B,MAAM,IAAI,aAAa,GAAG;AAAA,UAChF;AAAA,WACH;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Check } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { colorSwatchPropDefs } from './colorSwatch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ColorSwatchOwnProps = GetPropDefTypes<typeof colorSwatchPropDefs>\n\ntype ColorSwatchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & ColorSwatchOwnProps & {\n  color: string\n  checked?: boolean\n  onClick?: (color: string) => void\n}\n\n// Relative luminance of a #rgb/#rrggbb/#rrggbbaa fill, Mantine/HeroUI convention:\n// the selected check is white on dark fills, black on light fills. Unparseable\n// values fall back to dark (white check), matching the previous all-white look.\nfunction isLightColor(color: string): boolean {\n  const match = /^#([0-9a-f]{3,8})$/i.exec(color.trim())\n  if (!match) return false\n  let hex = match[1]\n  if (hex.length === 3 || hex.length === 4) hex = [...hex].map((c) => c + c).join('')\n  const r = parseInt(hex.slice(0, 2), 16) / 255\n  const g = parseInt(hex.slice(2, 4), 16) / 255\n  const b = parseInt(hex.slice(4, 6), 16) / 255\n  const linear = (c: number) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4))\n  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b) > 0.5\n}\n\nconst ColorSwatch = React.forwardRef<HTMLButtonElement, ColorSwatchProps>(\n  ({ color, checked = false, onClick, children, ...props }, forwardedRef) => {\n    const size = (props as { size?: string }).size ?? 'md'\n    const { asChild, className, ...swatchProps } = extractProps(props, colorSwatchPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    const handleClick = React.useCallback(\n      (_e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(color)\n      },\n      [color, onClick],\n    )\n\n    return (\n      <Comp\n        {...swatchProps}\n        ref={forwardedRef}\n        className={classNames('dsx-color-swatch', className)}\n        data-checked={checked || undefined}\n        data-size={size}\n        style={{\n          backgroundColor: color,\n          ...swatchProps.style,\n        }}\n        onClick={handleClick}\n        aria-label={`Color swatch: ${color}${checked ? ', selected' : ''}`}\n        aria-pressed={checked}\n        {...(!asChild ? { type: 'button' } : {})}\n      >\n        {asChild ? children : (\n          <>\n            {checked && (\n              <Check\n                className=\"dsx-color-swatch__check\"\n                size={12}\n                strokeWidth={3}\n                style={{ color: isLightColor(color) ? 'var(--dsx-raw-black)' : 'var(--dsx-raw-white)' }}\n              />\n            )}\n            {children}\n          </>\n        )}\n      </Comp>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\nexport type { ColorSwatchProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,0BAAsB;AAEtB,0BAA6B;AAC7B,yBAAoC;AAyD1B;AA1CV,SAAS,aAAa,OAAwB;AAC5C,QAAM,QAAQ,sBAAsB,KAAK,MAAM,KAAK,CAAC;AACrD,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,MAAM,MAAM,CAAC;AACjB,MAAI,IAAI,WAAW,KAAK,IAAI,WAAW,EAAG,OAAM,CAAC,GAAG,GAAG,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,KAAK,EAAE;AAClF,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,QAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,QAAM,SAAS,CAAC,MAAe,KAAK,UAAU,IAAI,QAAQ,KAAK,KAAK,IAAI,SAAS,OAAO,GAAG;AAC3F,SAAO,SAAS,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC,IAAI;AACxE;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,OAAO,UAAU,OAAO,SAAS,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACzE,UAAM,OAAQ,MAA4B,QAAQ;AAClD,UAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,sCAAmB;AACtF,UAAM,OAAO,UAAU,yBAAO;AAE9B,UAAM,cAAc,MAAM;AAAA,MACxB,CAAC,OAA4C;AAC3C,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,CAAC,OAAO,OAAO;AAAA,IACjB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,oBAAoB,SAAS;AAAA,QACnD,gBAAc,WAAW;AAAA,QACzB,aAAW;AAAA,QACX,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,GAAG,YAAY;AAAA,QACjB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,iBAAiB,KAAK,GAAG,UAAU,eAAe,EAAE;AAAA,QAChE,gBAAc;AAAA,QACb,GAAI,CAAC,UAAU,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,QAErC,oBAAU,WACT,4EACG;AAAA,qBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAM;AAAA,cACN,aAAa;AAAA,cACb,OAAO,EAAE,OAAO,aAAa,KAAK,IAAI,yBAAyB,uBAAuB;AAAA;AAAA,UACxF;AAAA,UAED;AAAA,WACH;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/colorSwatch/ColorSwatch.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.d.cts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;;;;;;;WALR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CAyClC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorSwatch.d.cts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAiBD,QAAA,MAAM,WAAW;;;;;;;;;;;;WApBR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CA+DlC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorSwatch/ColorSwatch.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.d.mts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;;;;;;;WALR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CAyClC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorSwatch.d.mts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAiBD,QAAA,MAAM,WAAW;;;;;;;;;;;;WApBR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CA+DlC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorSwatch/ColorSwatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;;;;;;;WALR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CAyClC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAiBD,QAAA,MAAM,WAAW;;;;;;;;;;;;WApBR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CA+DlC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}