@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/CheckboxGroup.css

@@ -1,154 +1,154 @@
 @layer _.a {
-  .se1 {
+  .se12 {
     display: grid;
   }
 
-  .z2mU1 {
+  .z2mU12 {
     grid-column-start: 1;
   }
 
-  .yvoofG1 {
+  .yvoofG12 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn1 {
+  .DM8Mfn12 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb1 {
+  .DPlN5qb12 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod1 {
+  .DLwlgod12 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc1 {
+  .E4w1sLc12 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb1 {
+  .EPlN5qb12 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre1 {
+  .Cxaocre12 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c1 {
+  .CbRM95c12 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c1 {
+  .-_6BNtrc-c12 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a1 {
+  .-_6BNtrc-a12 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b1 {
+  .-_6BNtrc-b12 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d1 {
+  .-_6BNtrc-d12 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e1 {
+  .-_6BNtrc-e12 {
     --fs: pow(1.125, 2);
   }
 
-  .vx1 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea1 {
+  .ea12 {
     align-items: baseline;
   }
 
-  .-BhX7R-Fx1 {
+  .-BhX7R-Fx12 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn1 {
+  .-BhX7R-Fn12 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp1 {
+  .-BhX7R-Fp12 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv1 {
+  .-BhX7R-Fv12 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz1 {
+  .-BhX7R-Fz12 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVxyPec1 {
+  .-AJjOLd-UVxyPec12 {
     --field-gap: calc(var(--field-height)  - 1lh);
   }
 
-  .qg1 {
+  .qg12 {
     column-gap: .75rem;
   }
 
-  .__ca1 {
+  .__ca12 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .zXcEWr1 {
+  .zXcEWr12 {
     grid-column-start: input;
   }
 
-  .yXcEWr1 {
+  .yXcEWr12 {
     grid-column-end: input;
   }
 
-  .BXcEWr1 {
+  .BXcEWr12 {
     grid-row-start: input;
   }
 
-  .AXcEWr1 {
+  .AXcEWr12 {
     grid-row-end: input;
   }
 
-  .sd1 {
+  .sd12 {
     display: flex;
   }
 
-  ._ta1 {
+  ._ta12 {
     flex-direction: column;
   }
 
-  ._tc1 {
+  ._tc12 {
     flex-direction: row;
   }
 
-  ._Fd1 {
+  ._Fd12 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .UgOnRt1 {
+  .UgOnRt12 {
     row-gap: var(--field-gap);
   }
 
-  .ql1 {
+  .ql12 {
     column-gap: 1rem;
   }
 
-  ._wb1 {
+  ._wb12 {
     flex-wrap: wrap;
   }
 }
 
 @layer _.b {
-  ._FnuYUweb1:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }

package/dist/CheckboxGroup.css.map

@@ -1 +1 @@
-{"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzBe;EAAA","sources":["229a9af52db930e6","packages/@react-spectrum/s2/src/CheckboxGroup.tsx"],"sourcesContent":["@import \"99c19d559a913dfe\";\n@import \"3a372fd4efad6d81\";\n","/*\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  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: 'calc(var(--field-height) - 1lh)'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          includeNecessityIndicatorInAccessibilityName\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.css.map"}
+{"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzBe;EAAA","sources":["229a9af52db930e6","packages/@react-spectrum/s2/src/CheckboxGroup.tsx"],"sourcesContent":["@import \"99c19d559a913dfe\";\n@import \"3a372fd4efad6d81\";\n","/*\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  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: 'calc(var(--field-height) - 1lh)'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          includeNecessityIndicatorInAccessibilityName\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.css.map"}

package/dist/CheckboxGroup.mjs

@@ -41,57 +41,57 @@ const $4f43ac2b11e2df05$export$4aa08d5625cb8ead = /*#__PURE__*/ (0, $2n9bC$forwa
             let rules = " ";
             let gridColumnStart = false;
             let gridColumnEnd = 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|_6|Z|N|L)[^\s]+/g);
+            let matches = String(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)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "z") gridColumnStart = true;
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se1';
+            rules += ' se12';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU1';
+                if (!gridColumnStart) rules += ' z2mU12';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG1';
+                    if (!gridColumnEnd) rules += ' yvoofG12';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod1';
+            if (props.isInForm) rules += ' DLwlgod12';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb1';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn1';
+                if (props.labelPosition === "side") rules += ' DPlN5qb12';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn12';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb1';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc1';
-            if (props.labelPosition === "side") rules += ' CbRM95c1';
-            else if (props.labelPosition === "top") rules += ' Cxaocre1';
+            if (props.labelPosition === "side") rules += ' EPlN5qb12';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc12';
+            if (props.labelPosition === "side") rules += ' CbRM95c12';
+            else if (props.labelPosition === "top") rules += ' Cxaocre12';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-e12';
+                rules += ' vx12';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-d12';
+                rules += ' vx12';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-b12';
+                rules += ' vx12';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-a12';
+                rules += ' vx12';
             } else {
-                rules += ' -_6BNtrc-c1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-c12';
+                rules += ' vx12';
             }
-            rules += ' ea1';
-            rules += ' _Fd1';
-            rules += ' _FnuYUweb1';
-            if (props.size === "XL") rules += ' -BhX7R-Fz1';
-            else if (props.size === "L") rules += ' -BhX7R-Fv1';
-            else if (props.size === "S") rules += ' -BhX7R-Fp1';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn1';
-            else rules += ' -BhX7R-Fx1';
-            rules += ' -AJjOLd-UVxyPec1';
-            rules += ' qg1';
-            rules += ' __ca1';
+            rules += ' ea12';
+            rules += ' _Fd12';
+            rules += ' _FnuYUweb12';
+            if (props.size === "XL") rules += ' -BhX7R-Fz12';
+            else if (props.size === "L") rules += ' -BhX7R-Fv12';
+            else if (props.size === "S") rules += ' -BhX7R-Fp12';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn12';
+            else rules += ' -BhX7R-Fx12';
+            rules += ' -AJjOLd-UVxyPec12';
+            rules += ' qg12';
+            rules += ' __ca12';
             return rules;
         }({
             size: props.size,
@@ -114,18 +114,18 @@ const $4f43ac2b11e2df05$export$4aa08d5625cb8ead = /*#__PURE__*/ (0, $2n9bC$forwa
                     /*#__PURE__*/ (0, $2n9bC$jsx)("div", {
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zXcEWr1';
-                            rules += ' yXcEWr1';
-                            rules += ' BXcEWr1';
-                            rules += ' AXcEWr1';
-                            rules += ' sd1';
-                            if (props.orientation === "horizontal") rules += ' _tc1';
-                            else if (props.orientation === "vertical") rules += ' _ta1';
-                            rules += ' _Fd1';
-                            rules += ' _FnuYUweb1';
-                            rules += ' UgOnRt1';
-                            rules += ' ql1';
-                            rules += ' _wb1';
+                            rules += ' zXcEWr12';
+                            rules += ' yXcEWr12';
+                            rules += ' BXcEWr12';
+                            rules += ' AXcEWr12';
+                            rules += ' sd12';
+                            if (props.orientation === "horizontal") rules += ' _tc12';
+                            else if (props.orientation === "vertical") rules += ' _ta12';
+                            rules += ' _Fd12';
+                            rules += ' _FnuYUweb12';
+                            rules += ' UgOnRt12';
+                            rules += ' ql12';
+                            rules += ' _wb12';
                             return rules;
                         }({
                             orientation: orientation

package/dist/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAuB,CAAA,GAAA,oBAAY,EAA0E;AAKnH,MAAM,0DAAgB,CAAA,GAAA,iBAAS,EAAE,SAAS,cAAc,KAAyB,EAAE,GAA2B;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,iBACR,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,gBACZ,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,oBAAgB;QACd,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,4CAA4C;wBAC5C,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gBAAC;wBACC,WAAW;;;;;;;;;;;;;;;0BAeR;yCAAC;wBAAW;kCACf,cAAA,gBAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;gCAAM,YAAY;4BAAS;sCACvE,cAAA,gBAAC,CAAA,GAAA,yCAAc,EAAE,QAAQ;gCAAC,OAAO;kDAAC;gCAAY;0CAC3C;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/CheckboxGroup.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  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: 'calc(var(--field-height) - 1lh)'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          includeNecessityIndicatorInAccessibilityName\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAuB,CAAA,GAAA,oBAAY,EAA0E;AAKnH,MAAM,0DAAgB,CAAA,GAAA,iBAAS,EAAE,SAAS,cAAc,KAAyB,EAAE,GAA2B;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,iBACR,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,gBACZ,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,oBAAgB;QACd,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,4CAA4C;wBAC5C,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gBAAC;wBACC,WAAW;;;;;;;;;;;;;;;0BAeR;yCAAC;wBAAW;kCACf,cAAA,gBAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;gCAAM,YAAY;4BAAS;sCACvE,cAAA,gBAAC,CAAA,GAAA,yCAAc,EAAE,QAAQ;gCAAC,OAAO;kDAAC;gCAAY;0CAC3C;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/CheckboxGroup.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  CheckboxGroup as AriaCheckboxGroup,\n  CheckboxGroupProps as AriaCheckboxGroupProps,\n  ContextValue\n} from 'react-aria-components';\nimport {CheckboxContext} from './Checkbox';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the Checkboxes in the CheckboxGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The axis the checkboxes should align with.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation,\n  /**\n   * The Checkboxes contained within the CheckboxGroup.\n   */\n  children: ReactNode,\n  /**\n   * By default, checkboxes are not emphasized (gray).\n   * The emphasized (blue) version provides visual prominence.\n   */\n  isEmphasized?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    children,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator = 'icon',\n    size = 'M',\n    orientation = 'vertical',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isEmphasized,\n    ...groupProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaCheckboxGroup\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        // Double the usual gap because of the internal padding within checkbox that spectrum has.\n        '--field-gap': {\n          type: 'rowGap',\n          value: 'calc(var(--field-height) - 1lh)'\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          includeNecessityIndicatorInAccessibilityName\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <div\n          className={style({\n            gridArea: 'input',\n            display: 'flex',\n            flexDirection: {\n              orientation: {\n                vertical: 'column',\n                horizontal: 'row'\n              }\n            },\n            lineHeight: 'ui',\n            rowGap: '--field-gap',\n            // Spectrum uses a fixed spacing value for horizontal,\n            // but the gap changes depending on t-shirt size in vertical.\n            columnGap: 16,\n            flexWrap: 'wrap'\n          })({orientation})}>\n          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>\n            <CheckboxContext.Provider value={{isEmphasized}}>\n              {children}\n            </CheckboxContext.Provider>\n          </FormContext.Provider>\n        </div>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}\n          showErrorIcon>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaCheckboxGroup>\n  );\n});\n"],"names":[],"version":3,"file":"CheckboxGroup.mjs.map"}

package/dist/Checkmark.cjs

@@ -32,18 +32,18 @@ $parcel$export(module.exports, "default", () => $dba2b18fc5727f9b$export$2e2bcd8
 
 let $dba2b18fc5727f9b$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zi1';
-    else if (props.size === "XS") rules += ' Zi1';
-    else if (props.size === "XXL") rules += ' Zu1';
-    else if (props.size === "XL") rules += ' Zk1';
-    else if (props.size === "L") rules += ' Zj1';
-    else if (props.size === "M") rules += ' Zi1';
-    if (props.size === "S") rules += ' Fj1';
-    else if (props.size === "XS") rules += ' Fj1';
-    else if (props.size === "XXL") rules += ' Ft1';
-    else if (props.size === "XL") rules += ' Fl1';
-    else if (props.size === "L") rules += ' Fk1';
-    else if (props.size === "M") rules += ' Fj1';
+    if (props.size === "S") rules += ' Zi12';
+    else if (props.size === "XS") rules += ' Zi12';
+    else if (props.size === "XXL") rules += ' Zu12';
+    else if (props.size === "XL") rules += ' Zk12';
+    else if (props.size === "L") rules += ' Zj12';
+    else if (props.size === "M") rules += ' Zi12';
+    if (props.size === "S") rules += ' Fj12';
+    else if (props.size === "XS") rules += ' Fj12';
+    else if (props.size === "XXL") rules += ' Ft12';
+    else if (props.size === "XL") rules += ' Fl12';
+    else if (props.size === "L") rules += ' Fk12';
+    else if (props.size === "M") rules += ' Fj12';
     return rules;
 };
 function $dba2b18fc5727f9b$export$2e2bcd8739ae039(props) {

package/dist/Checkmark.css

@@ -1,34 +1,34 @@
 @layer _.a {
-  .Zj1 {
+  .Zj12 {
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk1 {
+  .Zk12 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu1 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zi1 {
+  .Zi12 {
     width: calc(.625rem * var(--s2-scale));
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk1 {
+  .Fk12 {
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl1 {
+  .Fl12 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft1 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fj1 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
     height: calc(.625rem * var(--s2-scale));
   }

package/dist/Checkmark.mjs

@@ -26,18 +26,18 @@ import {jsx as $9G1g0$jsx} from "react/jsx-runtime";
 
 let $81cf3d4588736e7d$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zi1';
-    else if (props.size === "XS") rules += ' Zi1';
-    else if (props.size === "XXL") rules += ' Zu1';
-    else if (props.size === "XL") rules += ' Zk1';
-    else if (props.size === "L") rules += ' Zj1';
-    else if (props.size === "M") rules += ' Zi1';
-    if (props.size === "S") rules += ' Fj1';
-    else if (props.size === "XS") rules += ' Fj1';
-    else if (props.size === "XXL") rules += ' Ft1';
-    else if (props.size === "XL") rules += ' Fl1';
-    else if (props.size === "L") rules += ' Fk1';
-    else if (props.size === "M") rules += ' Fj1';
+    if (props.size === "S") rules += ' Zi12';
+    else if (props.size === "XS") rules += ' Zi12';
+    else if (props.size === "XXL") rules += ' Zu12';
+    else if (props.size === "XL") rules += ' Zk12';
+    else if (props.size === "L") rules += ' Zj12';
+    else if (props.size === "M") rules += ' Zi12';
+    if (props.size === "S") rules += ' Fj12';
+    else if (props.size === "XS") rules += ' Fj12';
+    else if (props.size === "XXL") rules += ' Ft12';
+    else if (props.size === "XL") rules += ' Fl12';
+    else if (props.size === "L") rules += ' Fk12';
+    else if (props.size === "M") rules += ' Fj12';
     return rules;
 };
 function $81cf3d4588736e7d$export$2e2bcd8739ae039(props) {

package/dist/Chevron.cjs

@@ -32,18 +32,18 @@ $parcel$export(module.exports, "default", () => $1df9f1c9262ce5df$export$2e2bcd8
 
 let $1df9f1c9262ce5df$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zi1';
-    else if (props.size === "XS") rules += ' Zg1';
-    else if (props.size === "XXL") rules += ' Zu1';
-    else if (props.size === "XL") rules += ' Zk1';
-    else if (props.size === "L") rules += ' Zj1';
-    else if (props.size === "M") rules += ' Zi1';
-    if (props.size === "S") rules += ' Fj1';
-    else if (props.size === "XS") rules += ' Fg1';
-    else if (props.size === "XXL") rules += ' Ft1';
-    else if (props.size === "XL") rules += ' Fl1';
-    else if (props.size === "L") rules += ' Fk1';
-    else if (props.size === "M") rules += ' Fj1';
+    if (props.size === "S") rules += ' Zi12';
+    else if (props.size === "XS") rules += ' Zg12';
+    else if (props.size === "XXL") rules += ' Zu12';
+    else if (props.size === "XL") rules += ' Zk12';
+    else if (props.size === "L") rules += ' Zj12';
+    else if (props.size === "M") rules += ' Zi12';
+    if (props.size === "S") rules += ' Fj12';
+    else if (props.size === "XS") rules += ' Fg12';
+    else if (props.size === "XXL") rules += ' Ft12';
+    else if (props.size === "XL") rules += ' Fl12';
+    else if (props.size === "L") rules += ' Fk12';
+    else if (props.size === "M") rules += ' Fj12';
     return rules;
 };
 function $1df9f1c9262ce5df$export$2e2bcd8739ae039(props) {

package/dist/Chevron.css

@@ -1,41 +1,41 @@
 @layer _.a {
-  .Zj1 {
+  .Zj12 {
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk1 {
+  .Zk12 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu1 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zg1 {
+  .Zg12 {
     width: calc(.375rem * var(--s2-scale));
   }
 
-  .Zi1 {
+  .Zi12 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk1 {
+  .Fk12 {
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl1 {
+  .Fl12 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft1 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fg1 {
+  .Fg12 {
     height: calc(.375rem * var(--s2-scale));
   }
 
-  .Fj1 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
   }
 }

package/dist/Chevron.mjs

@@ -26,18 +26,18 @@ import {jsx as $flSpw$jsx} from "react/jsx-runtime";
 
 let $4b69f02ec06b9226$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zi1';
-    else if (props.size === "XS") rules += ' Zg1';
-    else if (props.size === "XXL") rules += ' Zu1';
-    else if (props.size === "XL") rules += ' Zk1';
-    else if (props.size === "L") rules += ' Zj1';
-    else if (props.size === "M") rules += ' Zi1';
-    if (props.size === "S") rules += ' Fj1';
-    else if (props.size === "XS") rules += ' Fg1';
-    else if (props.size === "XXL") rules += ' Ft1';
-    else if (props.size === "XL") rules += ' Fl1';
-    else if (props.size === "L") rules += ' Fk1';
-    else if (props.size === "M") rules += ' Fj1';
+    if (props.size === "S") rules += ' Zi12';
+    else if (props.size === "XS") rules += ' Zg12';
+    else if (props.size === "XXL") rules += ' Zu12';
+    else if (props.size === "XL") rules += ' Zk12';
+    else if (props.size === "L") rules += ' Zj12';
+    else if (props.size === "M") rules += ' Zi12';
+    if (props.size === "S") rules += ' Fj12';
+    else if (props.size === "XS") rules += ' Fg12';
+    else if (props.size === "XXL") rules += ' Ft12';
+    else if (props.size === "XL") rules += ' Fl12';
+    else if (props.size === "L") rules += ' Fk12';
+    else if (props.size === "M") rules += ' Fj12';
     return rules;
 };
 function $4b69f02ec06b9226$export$2e2bcd8739ae039(props) {