@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM;AAQN,MAAM;AAUC,SAAS,0CAAsB,KAAiC;IACrE,IAAI,YAAC,QAAQ,EAAE,GAAG,cAAa,GAAG;IAClC,IAAI,UAAU,CAAA,GAAA,YAAI;IAElB,qBACE,gBAAC,CAAA,GAAA,yCAAM;QAAE,SAAQ;QAAO,SAAS;QAAC,mBAAiB;QAAU,GAAG,YAAY;kBAC1E,cAAA,gBAAC;YAAI,WAAW;sBACd,cAAA,gBAAC;gBACC,WAAW,CAAA,GAAA,yCAAU,EACnB,CAAA,GAAA,yCAAU;0BAGZ,cAAA,gBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,kBAAU;4BACV;gCACE,OAAO;oCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBACD;wBACD,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,yCAAkB;4BAAG;yBAAK;wBAC3B;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,QAAQ;gCACR,OAAO;oCACL,oFAAoF;oCACpF,iEAAiE;oCACjE,mEAAmE;oCACnE,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE;wCAAC,QAAQ;oCAAa;oCACtC,OAAO;wCAAC,IAAI;wCAAS,QAAQ;wCAAe,OAAO;oCAAC;gCACtD;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,MAAM;4BAGR;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAY;4BACZ;gCACE,MAAM;4BAIR;yBACD;qBACF;8BACA;;;;;AAMb;AAqCO,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAOG,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAChD,KAA0B,EAC1B,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAC/C,UAAU,CAAC,aAAa,GAAG,MAAM,QACjC;IAEJ,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QAAE,QAAQ;QAAQ,aAAa;QAAa,cAAc;;0BACrE,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC;gBACC,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;0BACZ;;;;AAIT","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends PopoverDialogProps {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM;AAQN,MAAM;AAUC,SAAS,0CAAsB,KAAiC;IACrE,IAAI,YAAC,QAAQ,EAAE,GAAG,cAAa,GAAG;IAClC,IAAI,UAAU,CAAA,GAAA,YAAI;IAElB,qBACE,gBAAC,CAAA,GAAA,yCAAM;QAAE,SAAQ;QAAO,SAAS;QAAC,mBAAiB;QAAU,GAAG,YAAY;kBAC1E,cAAA,gBAAC;YAAI,WAAW;sBACd,cAAA,gBAAC;gBACC,WAAW,CAAA,GAAA,yCAAU,EACnB,CAAA,GAAA,yCAAU;0BAGZ,cAAA,gBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,kBAAU;4BACV;gCACE,OAAO;oCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBACD;wBACD,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,yCAAkB;4BAAG;yBAAK;wBAC3B;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,QAAQ;gCACR,OAAO;oCACL,oFAAoF;oCACpF,iEAAiE;oCACjE,mEAAmE;oCACnE,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE;wCAAC,QAAQ;oCAAa;oCACtC,OAAO;wCAAC,IAAI;wCAAS,QAAQ;wCAAe,OAAO;oCAAC;gCACtD;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,MAAM;4BAGR;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAY;4BACZ;gCACE,MAAM;4BAIR;yBACD;qBACF;8BACA;;;;;AAMb;AAqCO,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAOG,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAChD,KAA0B,EAC1B,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAC/C,UAAU,CAAC,aAAa,GAAG,MAAM,QACjC;IAEJ,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QAAE,QAAQ;QAAQ,aAAa;QAAa,cAAc;;0BACrE,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC;gBACC,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;0BACZ;;;;AAIT","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}

package/dist/private/CornerTriangle.cjs

@@ -28,14 +28,14 @@ $parcel$export(module.exports, "default", () => $411768293e842abb$export$2e2bcd8
 
 let $411768293e842abb$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' ZydxGIe131';
-    else if (props.size === "XL") rules += ' ZsWXEHc131';
-    else if (props.size === "L") rules += ' Zg131';
-    else if (props.size === "M") rules += ' ZydxGIe131';
-    if (props.size === "S") rules += ' Ff131';
-    else if (props.size === "XL") rules += ' FsWXEHc131';
-    else if (props.size === "L") rules += ' Fg131';
-    else if (props.size === "M") rules += ' Ff131';
+    if (props.size === "S") rules += ' ZydxGIe15';
+    else if (props.size === "XL") rules += ' ZsWXEHc15';
+    else if (props.size === "L") rules += ' Zg15';
+    else if (props.size === "M") rules += ' ZydxGIe15';
+    if (props.size === "S") rules += ' Ff15';
+    else if (props.size === "XL") rules += ' FsWXEHc15';
+    else if (props.size === "L") rules += ' Fg15';
+    else if (props.size === "M") rules += ' Ff15';
     return rules;
 };
 function $411768293e842abb$export$2e2bcd8739ae039(props) {

package/dist/private/CornerTriangle.css

@@ -1,25 +1,25 @@
 @layer _.a {
-  .Zg131 {
+  .Zg15 {
     width: calc(.375rem * var(--s2-scale));
   }
 
-  .ZsWXEHc131 {
+  .ZsWXEHc15 {
     width: calc(.4375rem * var(--s2-scale));
   }
 
-  .ZydxGIe131 {
+  .ZydxGIe15 {
     width: calc(.3125rem * var(--s2-scale));
   }
 
-  .Fg131 {
+  .Fg15 {
     height: calc(.375rem * var(--s2-scale));
   }
 
-  .FsWXEHc131 {
+  .FsWXEHc15 {
     height: calc(.4375rem * var(--s2-scale));
   }
 
-  .Ff131 {
+  .Ff15 {
     height: calc(.3125rem * var(--s2-scale));
   }
 }

package/dist/private/CornerTriangle.mjs

@@ -22,14 +22,14 @@ import {jsx as $c6CgI$jsx} from "react/jsx-runtime";
 
 let $dc67c4e34e45a62a$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' ZydxGIe131';
-    else if (props.size === "XL") rules += ' ZsWXEHc131';
-    else if (props.size === "L") rules += ' Zg131';
-    else if (props.size === "M") rules += ' ZydxGIe131';
-    if (props.size === "S") rules += ' Ff131';
-    else if (props.size === "XL") rules += ' FsWXEHc131';
-    else if (props.size === "L") rules += ' Fg131';
-    else if (props.size === "M") rules += ' Ff131';
+    if (props.size === "S") rules += ' ZydxGIe15';
+    else if (props.size === "XL") rules += ' ZsWXEHc15';
+    else if (props.size === "L") rules += ' Zg15';
+    else if (props.size === "M") rules += ' ZydxGIe15';
+    if (props.size === "S") rules += ' Ff15';
+    else if (props.size === "XL") rules += ' FsWXEHc15';
+    else if (props.size === "L") rules += ' Fg15';
+    else if (props.size === "M") rules += ' Ff15';
     return rules;
 };
 function $dc67c4e34e45a62a$export$2e2bcd8739ae039(props) {

package/dist/private/Cross.cjs

@@ -34,20 +34,20 @@ $parcel$export(module.exports, "default", () => $89dd175101ffc43a$export$2e2bcd8
 
 let $89dd175101ffc43a$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh131';
-    else if (props.size === "XXXXL") rules += ' Zu131';
-    else if (props.size === "XXXL") rules += ' Zk131';
-    else if (props.size === "XXL") rules += ' Zj131';
-    else if (props.size === "XL") rules += ' Zj131';
-    else if (props.size === "L") rules += ' Zi131';
-    else if (props.size === "M") rules += ' Zh131';
-    if (props.size === "S") rules += ' Fi131';
-    else if (props.size === "XXXXL") rules += ' Ft131';
-    else if (props.size === "XXXL") rules += ' Fl131';
-    else if (props.size === "XXL") rules += ' Fk131';
-    else if (props.size === "XL") rules += ' Fk131';
-    else if (props.size === "L") rules += ' Fj131';
-    else if (props.size === "M") rules += ' Fi131';
+    if (props.size === "S") rules += ' Zh15';
+    else if (props.size === "XXXXL") rules += ' Zu15';
+    else if (props.size === "XXXL") rules += ' Zk15';
+    else if (props.size === "XXL") rules += ' Zj15';
+    else if (props.size === "XL") rules += ' Zj15';
+    else if (props.size === "L") rules += ' Zi15';
+    else if (props.size === "M") rules += ' Zh15';
+    if (props.size === "S") rules += ' Fi15';
+    else if (props.size === "XXXXL") rules += ' Ft15';
+    else if (props.size === "XXXL") rules += ' Fl15';
+    else if (props.size === "XXL") rules += ' Fk15';
+    else if (props.size === "XL") rules += ' Fk15';
+    else if (props.size === "L") rules += ' Fj15';
+    else if (props.size === "M") rules += ' Fi15';
     return rules;
 };
 function $89dd175101ffc43a$export$2e2bcd8739ae039(props) {

package/dist/private/Cross.css

@@ -1,43 +1,43 @@
 @layer _.a {
-  .Zi131 {
+  .Zi15 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj131 {
+  .Zj15 {
     width: calc(.75rem * var(--s2-scale));
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk131 {
+  .Zk15 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu131 {
+  .Zu15 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zh131 {
+  .Zh15 {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj131 {
+  .Fj15 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk131 {
+  .Fk15 {
     height: calc(.75rem * var(--s2-scale));
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl131 {
+  .Fl15 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft131 {
+  .Ft15 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fi131 {
+  .Fi15 {
     height: calc(.5rem * var(--s2-scale));
   }
 }

package/dist/private/Cross.mjs

@@ -28,20 +28,20 @@ import {jsx as $1piiz$jsx} from "react/jsx-runtime";
 
 let $bd983341bd35d639$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh131';
-    else if (props.size === "XXXXL") rules += ' Zu131';
-    else if (props.size === "XXXL") rules += ' Zk131';
-    else if (props.size === "XXL") rules += ' Zj131';
-    else if (props.size === "XL") rules += ' Zj131';
-    else if (props.size === "L") rules += ' Zi131';
-    else if (props.size === "M") rules += ' Zh131';
-    if (props.size === "S") rules += ' Fi131';
-    else if (props.size === "XXXXL") rules += ' Ft131';
-    else if (props.size === "XXXL") rules += ' Fl131';
-    else if (props.size === "XXL") rules += ' Fk131';
-    else if (props.size === "XL") rules += ' Fk131';
-    else if (props.size === "L") rules += ' Fj131';
-    else if (props.size === "M") rules += ' Fi131';
+    if (props.size === "S") rules += ' Zh15';
+    else if (props.size === "XXXXL") rules += ' Zu15';
+    else if (props.size === "XXXL") rules += ' Zk15';
+    else if (props.size === "XXL") rules += ' Zj15';
+    else if (props.size === "XL") rules += ' Zj15';
+    else if (props.size === "L") rules += ' Zi15';
+    else if (props.size === "M") rules += ' Zh15';
+    if (props.size === "S") rules += ' Fi15';
+    else if (props.size === "XXXXL") rules += ' Ft15';
+    else if (props.size === "XXXL") rules += ' Fl15';
+    else if (props.size === "XXL") rules += ' Fk15';
+    else if (props.size === "XL") rules += ' Fk15';
+    else if (props.size === "L") rules += ' Fj15';
+    else if (props.size === "M") rules += ' Fi15';
     return rules;
 };
 function $bd983341bd35d639$export$2e2bcd8739ae039(props) {

package/dist/private/CustomDialog.cjs

@@ -44,39 +44,39 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td131';
+    if (props.padding === "none") rules += ' Td15';
     else if (props.padding === "default") {
-        rules += ' Th131';
-        rules += ' Tnk131';
+        rules += ' Th15';
+        rules += ' Tnk15';
     }
-    if (props.padding === "none") rules += ' Qd131';
+    if (props.padding === "none") rules += ' Qd15';
     else if (props.padding === "default") {
-        rules += ' Qh131';
-        rules += ' Qnk131';
+        rules += ' Qh15';
+        rules += ' Qnk15';
     }
-    if (props.padding === "none") rules += ' Sd131';
+    if (props.padding === "none") rules += ' Sd15';
     else if (props.padding === "default") {
-        rules += ' Sh131';
-        rules += ' Snk131';
+        rules += ' Sh15';
+        rules += ' Snk15';
     }
-    if (props.padding === "none") rules += ' Rd131';
+    if (props.padding === "none") rules += ' Rd15';
     else if (props.padding === "default") {
-        rules += ' Rh131';
-        rules += ' Rnk131';
+        rules += ' Rh15';
+        rules += ' Rnk15';
     }
-    rules += ' _oa131';
-    rules += ' _Le131';
-    rules += ' oi131';
-    rules += ' ni131';
-    rules += ' ki131';
-    rules += ' ji131';
-    rules += ' _Na131';
-    rules += ' Pa131';
-    if (!position) rules += ' _Pc131';
-    if (!width) rules += ' Za131';
-    if (!height) rules += ' Fb131';
-    if (!maxWidth) rules += ' L40ub4c131';
-    if (!maxHeight) rules += ' K40ub4c131';
+    rules += ' _oa15';
+    rules += ' _Le15';
+    rules += ' oi15';
+    rules += ' ni15';
+    rules += ' ki15';
+    rules += ' ji15';
+    rules += ' _Na15';
+    rules += ' Pa15';
+    if (!position) rules += ' _Pc15';
+    if (!width) rules += ' Za15';
+    if (!height) rules += ' Fb15';
+    if (!maxWidth) rules += ' L40ub4c15';
+    if (!maxHeight) rules += ' K40ub4c15';
     return rules;
 };
 const $a05aa0b0345f1846$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $f8dpT$react.forwardRef)(function CustomDialog(props, ref) {

package/dist/private/CustomDialog.css

@@ -1,85 +1,85 @@
 @layer _.a {
-  .Th131 {
+  .Th15 {
     padding-top: 24px;
   }
 
-  .Td131 {
+  .Td15 {
     padding-top: 0;
   }
 
-  .Qh131 {
+  .Qh15 {
     padding-bottom: 24px;
   }
 
-  .Qd131 {
+  .Qd15 {
     padding-bottom: 0;
   }
 
-  .Sh131 {
+  .Sh15 {
     padding-inline-start: 24px;
   }
 
-  .Sd131 {
+  .Sd15 {
     padding-inline-start: 0;
   }
 
-  .Rh131 {
+  .Rh15 {
     padding-inline-end: 24px;
   }
 
-  .Rd131 {
+  .Rd15 {
     padding-inline-end: 0;
   }
 
-  ._oa131 {
+  ._oa15 {
     box-sizing: border-box;
   }
 
-  ._Le131 {
+  ._Le15 {
     outline-style: none;
   }
 
-  .oi131 {
+  .oi15 {
     border-start-start-radius: inherit;
   }
 
-  .ni131 {
+  .ni15 {
     border-start-end-radius: inherit;
   }
 
-  .ki131 {
+  .ki15 {
     border-end-start-radius: inherit;
   }
 
-  .ji131 {
+  .ji15 {
     border-end-end-radius: inherit;
   }
 
-  ._Na131 {
+  ._Na15 {
     overflow-x: auto;
   }
 
-  .Pa131 {
+  .Pa15 {
     overflow-y: auto;
   }
 
-  ._Pc131 {
+  ._Pc15 {
     position: relative;
   }
 
-  .Za131 {
+  .Za15 {
     width: 100%;
   }
 
-  .Fb131 {
+  .Fb15 {
     height: 100%;
   }
 
-  .L40ub4c131 {
+  .L40ub4c15 {
     max-width: inherit;
   }
 
-  .K40ub4c131 {
+  .K40ub4c15 {
     max-height: inherit;
   }
 }
@@ -88,19 +88,19 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .Tnk131 {
+    .Tnk15 {
       padding-top: 32px;
     }
 
-    .Qnk131 {
+    .Qnk15 {
       padding-bottom: 32px;
     }
 
-    .Snk131 {
+    .Snk15 {
       padding-inline-start: 32px;
     }
 
-    .Rnk131 {
+    .Rnk15 {
       padding-inline-end: 32px;
     }
   }

package/dist/private/CustomDialog.mjs

@@ -38,39 +38,39 @@ const $6e8e8fdd66697ef1$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td131';
+    if (props.padding === "none") rules += ' Td15';
     else if (props.padding === "default") {
-        rules += ' Th131';
-        rules += ' Tnk131';
+        rules += ' Th15';
+        rules += ' Tnk15';
     }
-    if (props.padding === "none") rules += ' Qd131';
+    if (props.padding === "none") rules += ' Qd15';
     else if (props.padding === "default") {
-        rules += ' Qh131';
-        rules += ' Qnk131';
+        rules += ' Qh15';
+        rules += ' Qnk15';
     }
-    if (props.padding === "none") rules += ' Sd131';
+    if (props.padding === "none") rules += ' Sd15';
     else if (props.padding === "default") {
-        rules += ' Sh131';
-        rules += ' Snk131';
+        rules += ' Sh15';
+        rules += ' Snk15';
     }
-    if (props.padding === "none") rules += ' Rd131';
+    if (props.padding === "none") rules += ' Rd15';
     else if (props.padding === "default") {
-        rules += ' Rh131';
-        rules += ' Rnk131';
+        rules += ' Rh15';
+        rules += ' Rnk15';
     }
-    rules += ' _oa131';
-    rules += ' _Le131';
-    rules += ' oi131';
-    rules += ' ni131';
-    rules += ' ki131';
-    rules += ' ji131';
-    rules += ' _Na131';
-    rules += ' Pa131';
-    if (!position) rules += ' _Pc131';
-    if (!width) rules += ' Za131';
-    if (!height) rules += ' Fb131';
-    if (!maxWidth) rules += ' L40ub4c131';
-    if (!maxHeight) rules += ' K40ub4c131';
+    rules += ' _oa15';
+    rules += ' _Le15';
+    rules += ' oi15';
+    rules += ' ni15';
+    rules += ' ki15';
+    rules += ' ji15';
+    rules += ' _Na15';
+    rules += ' Pa15';
+    if (!position) rules += ' _Pc15';
+    if (!width) rules += ' Za15';
+    if (!height) rules += ' Fb15';
+    if (!maxWidth) rules += ' L40ub4c15';
+    if (!maxHeight) rules += ' K40ub4c15';
     return rules;
 };
 const $6e8e8fdd66697ef1$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $4wOFe$forwardRef)(function CustomDialog(props, ref) {

package/dist/private/Dash.cjs

@@ -30,16 +30,16 @@ $parcel$export(module.exports, "default", () => $84c37b7bd5c1374e$export$2e2bcd8
 
 let $84c37b7bd5c1374e$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh131';
-    else if (props.size === "XS") rules += ' Zh131';
-    else if (props.size === "XL") rules += ' Zj131';
-    else if (props.size === "L") rules += ' Zj131';
-    else if (props.size === "M") rules += ' Zi131';
-    if (props.size === "S") rules += ' Fi131';
-    else if (props.size === "XS") rules += ' Fi131';
-    else if (props.size === "XL") rules += ' Fk131';
-    else if (props.size === "L") rules += ' Fk131';
-    else if (props.size === "M") rules += ' Fj131';
+    if (props.size === "S") rules += ' Zh15';
+    else if (props.size === "XS") rules += ' Zh15';
+    else if (props.size === "XL") rules += ' Zj15';
+    else if (props.size === "L") rules += ' Zj15';
+    else if (props.size === "M") rules += ' Zi15';
+    if (props.size === "S") rules += ' Fi15';
+    else if (props.size === "XS") rules += ' Fi15';
+    else if (props.size === "XL") rules += ' Fk15';
+    else if (props.size === "L") rules += ' Fk15';
+    else if (props.size === "M") rules += ' Fj15';
     return rules;
 };
 function $84c37b7bd5c1374e$export$2e2bcd8739ae039(props) {

package/dist/private/Dash.css

@@ -1,28 +1,28 @@
 @layer _.a {
-  .Zi131 {
+  .Zi15 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj131 {
+  .Zj15 {
     width: calc(.75rem * var(--s2-scale));
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zh131 {
+  .Zh15 {
     width: calc(.5rem * var(--s2-scale));
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj131 {
+  .Fj15 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk131 {
+  .Fk15 {
     height: calc(.75rem * var(--s2-scale));
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fi131 {
+  .Fi15 {
     height: calc(.5rem * var(--s2-scale));
     height: calc(.5rem * var(--s2-scale));
   }

package/dist/private/Dash.mjs

@@ -24,16 +24,16 @@ import {jsx as $cAamo$jsx} from "react/jsx-runtime";
 
 let $f17037051ff08dc2$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh131';
-    else if (props.size === "XS") rules += ' Zh131';
-    else if (props.size === "XL") rules += ' Zj131';
-    else if (props.size === "L") rules += ' Zj131';
-    else if (props.size === "M") rules += ' Zi131';
-    if (props.size === "S") rules += ' Fi131';
-    else if (props.size === "XS") rules += ' Fi131';
-    else if (props.size === "XL") rules += ' Fk131';
-    else if (props.size === "L") rules += ' Fk131';
-    else if (props.size === "M") rules += ' Fj131';
+    if (props.size === "S") rules += ' Zh15';
+    else if (props.size === "XS") rules += ' Zh15';
+    else if (props.size === "XL") rules += ' Zj15';
+    else if (props.size === "L") rules += ' Zj15';
+    else if (props.size === "M") rules += ' Zi15';
+    if (props.size === "S") rules += ' Fi15';
+    else if (props.size === "XS") rules += ' Fi15';
+    else if (props.size === "XL") rules += ' Fk15';
+    else if (props.size === "L") rules += ' Fk15';
+    else if (props.size === "M") rules += ' Fj15';
     return rules;
 };
 function $f17037051ff08dc2$export$2e2bcd8739ae039(props) {