@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/ColorSlider.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gBAAC,CAAA,GAAA,yCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gBAAC,CAAA,GAAA,mBAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gBAAC,CAAA,GAAA,kBAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gBAAC,CAAA,GAAA,yCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: controlFont(),\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,aAAC,SAAS,UAAE,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gBAAC,CAAA,GAAA,yCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gBAAC,CAAA,GAAA,mBAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gBAAC,CAAA,GAAA,kBAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gBAAC,CAAA,GAAA,yCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,YAAY,cAAc,QAAQ,MAAM,eAAe,CAAC,KAAK,IAAI,MAAM,eAAe,CAAC;gCAC3F,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,YAAY;gCACzD,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {direction, locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: controlFont(),\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);\n              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}

package/dist/ColorSwatch.cjs

@@ -51,51 +51,51 @@ const $8b1ea085cefae738$export$cae13e90592f246a = /*#__PURE__*/ (0, $7Qhsa$react
             let rules = " ";
             let width = false;
             let height = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "Z") width = true;
                 if (p[1] === "F") height = true;
                 rules += p[0];
             }
             if (props.size === "L") {
-                if (!width) rules += ' Zw11';
+                if (!width) rules += ' Zw12';
             } else if (props.size === "M") {
-                if (!width) rules += ' ZC11';
+                if (!width) rules += ' ZC12';
             } else if (props.size === "S") {
-                if (!width) rules += ' Zo11';
+                if (!width) rules += ' Zo12';
             } else if (props.size === "XS") {
-                if (!width) rules += ' Zu11';
+                if (!width) rules += ' Zu12';
             }
             if (props.size === "L") {
-                if (!height) rules += ' Fv11';
+                if (!height) rules += ' Fv12';
             } else if (props.size === "M") {
-                if (!height) rules += ' Fx11';
+                if (!height) rules += ' Fx12';
             } else if (props.size === "S") {
-                if (!height) rules += ' Fp11';
+                if (!height) rules += ' Fp12';
             } else if (props.size === "XS") {
-                if (!height) rules += ' Ft11';
+                if (!height) rules += ' Ft12';
             }
-            if (props.rounding === "full") rules += ' og11';
-            else if (props.rounding === "none") rules += ' od11';
-            else if (props.rounding === "default") rules += ' oa11';
-            if (props.rounding === "full") rules += ' ng11';
-            else if (props.rounding === "none") rules += ' nd11';
-            else if (props.rounding === "default") rules += ' na11';
-            if (props.rounding === "full") rules += ' kg11';
-            else if (props.rounding === "none") rules += ' kd11';
-            else if (props.rounding === "default") rules += ' ka11';
-            if (props.rounding === "full") rules += ' jg11';
-            else if (props.rounding === "none") rules += ' jd11';
-            else if (props.rounding === "default") rules += ' ja11';
-            rules += ' iz11';
-            rules += ' _kb11';
-            rules += ' hb11';
-            rules += ' mb11';
-            rules += ' lb11';
-            rules += ' _jf11';
-            rules += ' _oa11';
-            rules += ' _yb11';
-            rules += ' -_8LZfRc-pq11';
+            if (props.rounding === "full") rules += ' og12';
+            else if (props.rounding === "none") rules += ' od12';
+            else if (props.rounding === "default") rules += ' oa12';
+            if (props.rounding === "full") rules += ' ng12';
+            else if (props.rounding === "none") rules += ' nd12';
+            else if (props.rounding === "default") rules += ' na12';
+            if (props.rounding === "full") rules += ' kg12';
+            else if (props.rounding === "none") rules += ' kd12';
+            else if (props.rounding === "default") rules += ' ka12';
+            if (props.rounding === "full") rules += ' jg12';
+            else if (props.rounding === "none") rules += ' jd12';
+            else if (props.rounding === "default") rules += ' ja12';
+            rules += ' iz12';
+            rules += ' _kb12';
+            rules += ' hb12';
+            rules += ' mb12';
+            rules += ' lb12';
+            rules += ' _jf12';
+            rules += ' _oa12';
+            rules += ' _yb12';
+            rules += ' -_8LZfRc-pq12';
             return rules;
         }({
             size: size,

package/dist/ColorSwatch.css

@@ -1,117 +1,117 @@
 @layer _.a {
-  .Zu11 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zo11 {
+  .Zo12 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .ZC11 {
+  .ZC12 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Zw11 {
+  .Zw12 {
     width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Ft11 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fp11 {
+  .Fp12 {
     height: calc(1.5rem * var(--s2-scale));
   }
 
-  .Fx11 {
+  .Fx12 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .Fv11 {
+  .Fv12 {
     height: calc(2.5rem * var(--s2-scale));
   }
 
-  .oa11 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .od11 {
+  .od12 {
     border-start-start-radius: 0;
   }
 
-  .og11 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .na11 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .nd11 {
+  .nd12 {
     border-start-end-radius: 0;
   }
 
-  .ng11 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .ka11 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .kd11 {
+  .kd12 {
     border-end-start-radius: 0;
   }
 
-  .kg11 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .ja11 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 
-  .jd11 {
+  .jd12 {
     border-end-end-radius: 0;
   }
 
-  .jg11 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  .iz11 {
+  .iz12 {
     border-color: var(--lightningcss-light, #0000006b) var(--lightningcss-dark, #ffffff6b);
   }
 
-  ._kb11 {
+  ._kb12 {
     border-top-width: 1px;
   }
 
-  .hb11 {
+  .hb12 {
     border-bottom-width: 1px;
   }
 
-  .mb11 {
+  .mb12 {
     border-inline-start-width: 1px;
   }
 
-  .lb11 {
+  .lb12 {
     border-inline-end-width: 1px;
   }
 
-  ._jf11 {
+  ._jf12 {
     border-style: solid;
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  ._yb11 {
+  ._yb12 {
     forced-color-adjust: none;
   }
 
-  .-_8LZfRc-pq11 {
+  .-_8LZfRc-pq12 {
     --slash-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #fc432e);
   }
 }

package/dist/ColorSwatch.mjs

@@ -43,51 +43,51 @@ const $cd9e1720baab3945$export$cae13e90592f246a = /*#__PURE__*/ (0, $b2Wh1$forwa
             let rules = " ";
             let width = false;
             let height = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "Z") width = true;
                 if (p[1] === "F") height = true;
                 rules += p[0];
             }
             if (props.size === "L") {
-                if (!width) rules += ' Zw11';
+                if (!width) rules += ' Zw12';
             } else if (props.size === "M") {
-                if (!width) rules += ' ZC11';
+                if (!width) rules += ' ZC12';
             } else if (props.size === "S") {
-                if (!width) rules += ' Zo11';
+                if (!width) rules += ' Zo12';
             } else if (props.size === "XS") {
-                if (!width) rules += ' Zu11';
+                if (!width) rules += ' Zu12';
             }
             if (props.size === "L") {
-                if (!height) rules += ' Fv11';
+                if (!height) rules += ' Fv12';
             } else if (props.size === "M") {
-                if (!height) rules += ' Fx11';
+                if (!height) rules += ' Fx12';
             } else if (props.size === "S") {
-                if (!height) rules += ' Fp11';
+                if (!height) rules += ' Fp12';
             } else if (props.size === "XS") {
-                if (!height) rules += ' Ft11';
+                if (!height) rules += ' Ft12';
             }
-            if (props.rounding === "full") rules += ' og11';
-            else if (props.rounding === "none") rules += ' od11';
-            else if (props.rounding === "default") rules += ' oa11';
-            if (props.rounding === "full") rules += ' ng11';
-            else if (props.rounding === "none") rules += ' nd11';
-            else if (props.rounding === "default") rules += ' na11';
-            if (props.rounding === "full") rules += ' kg11';
-            else if (props.rounding === "none") rules += ' kd11';
-            else if (props.rounding === "default") rules += ' ka11';
-            if (props.rounding === "full") rules += ' jg11';
-            else if (props.rounding === "none") rules += ' jd11';
-            else if (props.rounding === "default") rules += ' ja11';
-            rules += ' iz11';
-            rules += ' _kb11';
-            rules += ' hb11';
-            rules += ' mb11';
-            rules += ' lb11';
-            rules += ' _jf11';
-            rules += ' _oa11';
-            rules += ' _yb11';
-            rules += ' -_8LZfRc-pq11';
+            if (props.rounding === "full") rules += ' og12';
+            else if (props.rounding === "none") rules += ' od12';
+            else if (props.rounding === "default") rules += ' oa12';
+            if (props.rounding === "full") rules += ' ng12';
+            else if (props.rounding === "none") rules += ' nd12';
+            else if (props.rounding === "default") rules += ' na12';
+            if (props.rounding === "full") rules += ' kg12';
+            else if (props.rounding === "none") rules += ' kd12';
+            else if (props.rounding === "default") rules += ' ka12';
+            if (props.rounding === "full") rules += ' jg12';
+            else if (props.rounding === "none") rules += ' jd12';
+            else if (props.rounding === "default") rules += ' ja12';
+            rules += ' iz12';
+            rules += ' _kb12';
+            rules += ' hb12';
+            rules += ' mb12';
+            rules += ' lb12';
+            rules += ' _jf12';
+            rules += ' _oa12';
+            rules += ' _yb12';
+            rules += ' -_8LZfRc-pq12';
             return rules;
         }({
             size: size,

package/dist/ColorSwatchPicker.cjs

@@ -39,15 +39,15 @@ const $a267e3efa7024819$export$b46792416e3d8515 = /*#__PURE__*/ (0, $7eldL$react
         ref: domRef,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
-            rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g) || []).join('');
-            rules += ' sd11';
-            rules += ' _wb11';
-            if (props.density === "spacious") rules += ' UWJpoB11';
-            else if (props.density === "regular") rules += ' Ub11';
-            else if (props.density === "compact") rules += ' Ua11';
-            if (props.density === "spacious") rules += ' qWJpoB11';
-            else if (props.density === "regular") rules += ' qb11';
-            else if (props.density === "compact") rules += ' qa11';
+            rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g) || []).join('');
+            rules += ' sd12';
+            rules += ' _wb12';
+            if (props.density === "spacious") rules += ' UWJpoB12';
+            else if (props.density === "regular") rules += ' Ub12';
+            else if (props.density === "compact") rules += ' Ua12';
+            if (props.density === "spacious") rules += ' qWJpoB12';
+            else if (props.density === "regular") rules += ' qb12';
+            else if (props.density === "compact") rules += ' qa12';
             return rules;
         }({
             density: density
@@ -67,24 +67,24 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
         color: color,
         className: (renderProps)=>(function anonymous(props) {
                 let rules = " ";
-                if (props.isFocusVisible) rules += ' _Lf11';
-                else rules += ' _Le11';
-                rules += ' Oh11';
-                rules += ' _Mc11';
-                rules += ' _Kd11';
-                rules += ' _Pc11';
-                if (props.rounding === "full") rules += ' og11';
-                else if (props.rounding === "default") rules += ' oa11';
-                else if (props.rounding === "none") rules += ' od11';
-                if (props.rounding === "full") rules += ' ng11';
-                else if (props.rounding === "default") rules += ' na11';
-                else if (props.rounding === "none") rules += ' nd11';
-                if (props.rounding === "full") rules += ' kg11';
-                else if (props.rounding === "default") rules += ' ka11';
-                else if (props.rounding === "none") rules += ' kd11';
-                if (props.rounding === "full") rules += ' jg11';
-                else if (props.rounding === "default") rules += ' ja11';
-                else if (props.rounding === "none") rules += ' jd11';
+                if (props.isFocusVisible) rules += ' _Lf12';
+                else rules += ' _Le12';
+                rules += ' Oh12';
+                rules += ' _Mc12';
+                rules += ' _Kd12';
+                rules += ' _Pc12';
+                if (props.rounding === "full") rules += ' og12';
+                else if (props.rounding === "default") rules += ' oa12';
+                else if (props.rounding === "none") rules += ' od12';
+                if (props.rounding === "full") rules += ' ng12';
+                else if (props.rounding === "default") rules += ' na12';
+                else if (props.rounding === "none") rules += ' nd12';
+                if (props.rounding === "full") rules += ' kg12';
+                else if (props.rounding === "default") rules += ' ka12';
+                else if (props.rounding === "none") rules += ' kd12';
+                if (props.rounding === "full") rules += ' jg12';
+                else if (props.rounding === "default") rules += ' ja12';
+                else if (props.rounding === "none") rules += ' jd12';
                 return rules;
             })({
                 ...renderProps,
@@ -95,7 +95,7 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $7eldL$reactjsxruntime.jsx)("div", {
                         "aria-hidden": true,
-                        className: " _Pa11 _Ob11 Wr11 _lr11 _Ar11 _zr11 _oa11 in11 _jf11 _kc11 hc11 mc11 lc11 Og11 _Lf11 _Mc11 _Kc11 _yb11 oi11 ni11 ki11 ji11"
+                        className: " _Pa12 _Ob12 Wr12 _lr12 _Ar12 _zr12 _oa12 in12 _jf12 _kc12 hc12 mc12 lc12 Og12 _Lf12 _Mc12 _Kc12 _yb12 oi12 ni12 ki12 ji12"
                     })
                 ]
             })

package/dist/ColorSwatchPicker.css

@@ -1,185 +1,185 @@
 @layer _.a {
-  .sd11 {
+  .sd12 {
     display: flex;
   }
 
-  ._wb11 {
+  ._wb12 {
     flex-wrap: wrap;
   }
 
-  .Ua11 {
+  .Ua12 {
     row-gap: .125rem;
   }
 
-  .Ub11 {
+  .Ub12 {
     row-gap: .25rem;
   }
 
-  .UWJpoB11 {
+  .UWJpoB12 {
     row-gap: .375rem;
   }
 
-  .qa11 {
+  .qa12 {
     column-gap: .125rem;
   }
 
-  .qb11 {
+  .qb12 {
     column-gap: .25rem;
   }
 
-  .qWJpoB11 {
+  .qWJpoB12 {
     column-gap: .375rem;
   }
 
-  ._Le11 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .Oh11 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Kd11 {
+  ._Kd12 {
     outline-offset: 2px;
   }
 
-  ._Pc11 {
+  ._Pc12 {
     position: relative;
   }
 
-  .od11 {
+  .od12 {
     border-start-start-radius: 0;
   }
 
-  .oa11 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .og11 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .nd11 {
+  .nd12 {
     border-start-end-radius: 0;
   }
 
-  .na11 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .ng11 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .kd11 {
+  .kd12 {
     border-end-start-radius: 0;
   }
 
-  .ka11 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .kg11 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .jd11 {
+  .jd12 {
     border-end-end-radius: 0;
   }
 
-  .ja11 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 
-  .jg11 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  ._Pa11 {
+  ._Pa12 {
     position: absolute;
   }
 
-  ._Ob11 {
+  ._Ob12 {
     pointer-events: none;
   }
 
-  .Wr11 {
+  .Wr12 {
     top: 0;
   }
 
-  ._lr11 {
+  ._lr12 {
     bottom: 0;
   }
 
-  ._Ar11 {
+  ._Ar12 {
     inset-inline-start: 0;
   }
 
-  ._zr11 {
+  ._zr12 {
     inset-inline-end: 0;
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  .in11 {
+  .in12 {
     border-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._jf11 {
+  ._jf12 {
     border-style: solid;
   }
 
-  ._kc11 {
+  ._kc12 {
     border-top-width: 2px;
   }
 
-  .hc11 {
+  .hc12 {
     border-bottom-width: 2px;
   }
 
-  .mc11 {
+  .mc12 {
     border-inline-start-width: 2px;
   }
 
-  .lc11 {
+  .lc12 {
     border-inline-end-width: 2px;
   }
 
-  .Og11 {
+  .Og12 {
     outline-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  ._Lf11 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  ._Mc11 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kc11 {
+  ._Kc12 {
     outline-offset: -4px;
   }
 
-  ._yb11 {
+  ._yb12 {
     forced-color-adjust: none;
   }
 
-  .oi11 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni11 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki11 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji11 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 }