@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Field.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {\n  control,\n  controlFont,\n  fieldInput,\n  fieldLabel,\n  StyleProps,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {FieldError, FieldErrorProps} from 'react-aria-components/FieldError';\nimport {ForwardedRef, forwardRef, ReactNode, useContext} from 'react';\nimport {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Group, GroupProps} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {\n  InputContext,\n  Input as RACInput,\n  InputProps as RACInputProps\n} from 'react-aria-components/Input';\nimport intlMessages from '../intl/*.json';\nimport {Label, LabelProps} from 'react-aria-components/Label';\nimport {mergeStyles} from '../style/runtime';\nimport {Provider} from 'react-aria-components/slots';\n// @ts-ignore\nimport {StyleString} from '../style/types';\nimport {Text} from 'react-aria-components/Text';\nimport {useDOMRef} from './useDOMRef';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\ninterface FieldLabelProps\n  extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  size?: 'S' | 'M' | 'L' | 'XL';\n  necessityIndicator?: NecessityIndicator;\n  labelAlign?: Alignment;\n  labelPosition?: 'top' | 'side';\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  staticColor?: 'white' | 'black' | 'auto';\n  contextualHelp?: ReactNode;\n  isQuiet?: boolean;\n  children?: ReactNode;\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(\n  props: FieldLabelProps,\n  ref: DOMRef<HTMLLabelElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={\n          UNSAFE_className +\n          mergeStyles(\n            style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}),\n            props.styles\n          )\n        }>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' && (\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={\n                  includeNecessityIndicatorInAccessibilityName\n                    ? stringFormatter.format('label.(required)')\n                    : undefined\n                }\n                aria-hidden={!includeNecessityIndicatorInAccessibilityName}\n              />\n            )}\n            {necessityIndicator === 'label' && (\n              /* The necessity label is hidden to screen readers if the field is required because\n               * aria-required is set on the field in that case. That will already be announced,\n               * so no need to duplicate it here. If optional, we do want it to be announced here.\n               */\n              <span\n                aria-hidden={\n                  !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n                }>\n                {isRequired\n                  ? stringFormatter.format('label.(required)')\n                  : stringFormatter.format('label.(optional)')}\n              </span>\n            )}\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id\n                  ? `${labelProps.id} ${contextualHelpId}`\n                  : undefined,\n                size: size === 'L' || size === 'XL' ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps\n  extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL';\n  children: ReactNode;\n  styles?: StyleString;\n  shouldTurnOffFocusRing?: boolean;\n  prefix?: ReactNode;\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...control({shape: 'default'}),\n  ...fieldInput(),\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: baseColor('negative'),\n      forcedColors: 'Mark'\n    },\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Field'\n  },\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(\n  props: FieldGroupProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let {children, prefix, shouldTurnOffFocusRing, ...otherProps} = props;\n  let ctx = useContext(InputContext);\n  let prefixId = useId();\n  let newAriaLabelledby = ctx?.['aria-labelledby'];\n  if (prefix) {\n    newAriaLabelledby = newAriaLabelledby ? `${newAriaLabelledby} ${prefixId}` : prefixId;\n  }\n  return (\n    <Group\n      ref={ref}\n      {...otherProps}\n      onPointerDown={e => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (\n          e.pointerType === 'mouse' &&\n          !(getEventTarget(e) as Element).closest('button,input,textarea,[role=\"button\"]')\n        ) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      onTouchEnd={e => {\n        let target = getEventTarget(e) as HTMLElement;\n        if (!target.isContentEditable && !target.closest('button,input,textarea,[role=\"button\"]')) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        ' ' +\n        centerBaselineBefore +\n        mergeStyles(\n          fieldGroupStyles({\n            ...renderProps,\n            isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n            isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n            size: props.size || 'M'\n          }),\n          props.styles\n        )\n      }>\n      {props.prefix ? (\n        <Provider\n          values={[\n            [\n              IconContext,\n              {\n                styles: style({\n                  size: fontRelative(20),\n                  '--iconPrimary': {type: 'fill', value: 'currentColor'}\n                })\n              }\n            ]\n          ]}>\n          <CenterBaseline\n            id={prefixId}\n            styles={style({\n              color: 'gray-600',\n              flexShrink: 0,\n              marginEnd: 'text-to-visual'\n            })}>\n            {props.prefix}\n          </CenterBaseline>\n        </Provider>\n      ) : null}\n      <InputContext.Consumer>\n        {ctx => (\n          <InputContext.Provider value={{...ctx, 'aria-labelledby': newAriaLabelledby}}>\n            {children}\n          </InputContext.Provider>\n        )}\n      </InputContext.Consumer>\n    </Group>\n  );\n});\n\nexport interface InputProps\n  extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        mergeStyles(\n          style({\n            padding: 0,\n            backgroundColor: 'transparent',\n            color: {\n              default: 'inherit',\n              '::placeholder': {\n                default: 'gray-600',\n                forcedColors: 'GrayText'\n              }\n            },\n            fontFamily: 'inherit',\n            fontSize: 'inherit',\n            fontWeight: 'inherit',\n            flexGrow: 1,\n            flexShrink: 1,\n            minWidth: 0,\n            width: 'full',\n            outlineStyle: 'none',\n            borderStyle: 'none',\n            truncate: true\n          }),\n          styles\n        )\n      }\n    />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  isDisabled?: boolean;\n  isInvalid?: boolean; // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode;\n  showErrorIcon?: boolean;\n  styles?: StyleString;\n}\n\nexport const helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: controlFont(),\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(\n  props: HelpTextProps & {\n    descriptionRef?: DOMRef<HTMLDivElement>;\n    errorRef?: DOMRef<HTMLDivElement>;\n  }\n): ReactNode {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={mergeStyles(\n          helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  if (!props.isInvalid) {\n    return null;\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps =>\n        mergeStyles(\n          helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (\n        <>\n          {props.showErrorIcon && (\n            <CenterBaseline>\n              <AlertIcon\n                // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG\n                styles={style({\n                  size: {\n                    size: {\n                      XS: 14,\n                      S: 16,\n                      M: 20,\n                      L: 22,\n                      XL: 26\n                    }\n                  }\n                })({size: props.size || 'M'})}\n              />\n            </CenterBaseline>\n          )}\n          <span>{children || validationErrors.join(' ')}</span>\n        </>\n      ))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          {\n            render: centerBaseline({\n              slot: 'icon',\n              styles: style({\n                order: 0,\n                flexShrink: 0,\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: {\n                    default: 'negative',\n                    forcedColors: 'Mark'\n                  }\n                }\n              })\n            }),\n            styles: style({\n              size: fontRelative(20),\n              marginStart: 'text-to-visual',\n              marginEnd: fontRelative(-2),\n              flexShrink: 0\n            })\n          }\n        ]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;AAoDM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAsB,EACtB,GAA6B;IAE7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,cACF,UAAU,cACV,UAAU,QACV,OAAO,yBACP,qBAAqB,sDACrB,+CAA+C,mBAC/C,UAAU,iBACV,aAAa,eACb,WAAW,kBACX,cAAc,WACd,OAAO,gBACP,YAAY,oBACZ,mBAAmB,IACnB,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,mBAAmB,CAAA,GAAA,YAAI;IAC3B,IAAI,uBAAuB,CAAA,GAAA,YAAI;IAC/B,IAAI,kBAAkB,CAAC,WAAW,EAAE,EAClC,WAAW,EAAE,GAAG;IAGlB,IAAI,CAAC,MAAM,QAAQ,EACjB,OAAO;IAGT,qBACE,iBAAC;QACC,WAAW;;;;;;;;;;;;;UAoBR;wBAAC;2BAAY;qBAAe;QAAO;;0BACtC,iBAAC,CAAA,GAAA,YAAI;gBACF,GAAG,UAAU;gBACd,KAAK;gBACL,OAAO;gBACP,WACE,mBACA,CAAA,GAAA,yCAAU,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAoB;mCAAC;gCAAe;0BAAY;oBAAM,eAAe,CAAC,CAAC;gBAAW,IAClF,MAAM,MAAM;;oBAGf,MAAM,QAAQ;oBACb,CAAA,cAAc,uBAAuB,OAAM,mBAC3C,iBAAC;wBAAK,SAAS;;4BAAiC;4BAE7C,uBAAuB,wBACtB,gBAAC,CAAA,GAAA,wCAAW;gCACV,MAAM,SAAS,MAAM,MAAM;gCAC3B,SAAS;gCAMT,cACE,+CACI,gBAAgB,MAAM,CAAC,sBACvB;gCAEN,eAAa,CAAC;;4BAGjB,uBAAuB,WACtB;;;eAGC,iBACD,gBAAC;gCACC,eACE,CAAC,+CAA+C,aAAa;0CAE9D,aACG,gBAAgB,MAAM,CAAC,sBACvB,gBAAgB,MAAM,CAAC;;;;;;YAMpC,gCACC,iBAAC;gBAAK,SAAS;;oBAAiC;kCAE9C,gBAAC,CAAA,GAAA,yCAAa;wBACZ,MAAM;kCAIN,cAAA,gBAAC,CAAA,GAAA,yCAAoB,EAAE,QAAQ;4BAC7B,OAAO;gCACL,IAAI;gCACJ,mBAAmB,YAAY,KAC3B,GAAG,WAAW,EAAE,CAAC,CAAC,EAAE,kBAAkB,GACtC;gCACJ,MAAM,SAAS,OAAO,SAAS,OAAO,MAAM;4BAC9C;sCACC;;;;;;;AAOf;AAWA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CC,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAsB,EACtB,GAAiC;IAEjC,IAAI,YAAC,QAAQ,UAAE,MAAM,0BAAE,sBAAsB,EAAE,GAAG,YAAW,GAAG;IAChE,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mBAAW;IAChC,IAAI,WAAW,CAAA,GAAA,YAAI;IACnB,IAAI,oBAAoB,KAAK,CAAC,kBAAkB;IAChD,IAAI,QACF,oBAAoB,oBAAoB,GAAG,kBAAkB,CAAC,EAAE,UAAU,GAAG;IAE/E,qBACE,iBAAC,CAAA,GAAA,YAAI;QACH,KAAK;QACJ,GAAG,UAAU;QACd,eAAe,CAAA;YACb,iGAAiG;YACjG,IACE,EAAE,WAAW,KAAK,WAClB,CAAC,AAAC,CAAA,GAAA,qBAAa,EAAE,GAAe,OAAO,CAAC,0CACxC;gBACA,EAAE,cAAc;gBACf,EAAE,aAAa,CAAC,aAAa,CAAC,oBAAoC;YACrE;QACF;QACA,YAAY,CAAA;YACV,IAAI,SAAS,CAAA,GAAA,qBAAa,EAAE;YAC5B,IAAI,CAAC,OAAO,iBAAiB,IAAI,CAAC,OAAO,OAAO,CAAC,0CAA0C;gBACzF,EAAE,cAAc;gBACf,EAAE,aAAa,CAAC,aAAa,CAAC,oBAAoC;YACrE;QACF;QACA,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cACT,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,MACA,CAAA,GAAA,yCAAmB,IACnB,CAAA,GAAA,yCAAU,EACR,uCAAiB;gBACf,GAAG,WAAW;gBACd,eAAe,yBAAyB,QAAQ,YAAY,aAAa;gBACzE,gBAAgB,yBAAyB,QAAQ,YAAY,cAAc;gBAC3E,MAAM,MAAM,IAAI,IAAI;YACtB,IACA,MAAM,MAAM;;YAGf,MAAM,MAAM,iBACX,gBAAC,CAAA,GAAA,eAAO;gBACN,QAAQ;oBACN;wBACE,CAAA,GAAA,yCAAU;wBACV;4BACE,MAAM;wBAIR;qBACD;iBACF;0BACD,cAAA,gBAAC,CAAA,GAAA,yCAAa;oBACZ,IAAI;oBACJ,MAAM;8BAKL,MAAM,MAAM;;iBAGf;0BACJ,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;0BACnB,CAAA,oBACC,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;wBAAC,OAAO;4BAAC,GAAG,GAAG;4BAAE,mBAAmB;wBAAiB;kCACxE;;;;;AAMb;AAKO,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MACvC,KAAiB,EACjB,GAAmC;IAEnC,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACnE,qBACE,gBAAC,CAAA,GAAA,YAAO;QACL,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WACE,mBACA,CAAA,GAAA,yCAAU,mLAsBR;;AAKV;AAWO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BN,SAAS,0CACd,MAGC;IAED,IAAI,oBAAoB,CAAA,GAAA,yCAAQ,EAAE,OAAM,cAAc,IAAI;IAC1D,IAAI,cAAc,CAAA,GAAA,yCAAQ,EAAE,OAAM,QAAQ,IAAI;IAE9C,IAAI,CAAC,OAAM,SAAS,IAAI,OAAM,WAAW,EACvC,qBACE,gBAAC,CAAA,GAAA,WAAG;QACF,MAAK;QACL,KAAK;QACL,WAAW,CAAA,GAAA,yCAAU,EACnB,0CAAe;YAAC,MAAM,OAAM,IAAI,IAAI;YAAK,YAAY,OAAM,UAAU;QAAA,IACrE,OAAM,MAAM;kBAEb,OAAM,WAAW;;IAKxB,IAAI,CAAC,OAAM,SAAS,EAClB,OAAO;IAGT,qBACE,gBAAC,CAAA,GAAA,iBAAS;QACP,GAAG,MAAK;QACT,KAAK;QACL,WAAW,CAAA,cACT,CAAA,GAAA,yCAAU,EACR,0CAAe;gBAAC,GAAG,WAAW;gBAAE,MAAM,OAAM,IAAI,IAAI;gBAAK,YAAY,OAAM,UAAU;YAAA,IACrF,OAAM,MAAM;kBAGf,CAAA,GAAA,yBAAiB,EAAE,OAAM,QAAQ,EAAE,CAAC,UAAU,oBAAC,gBAAgB,EAAC,iBAC/D;;oBACG,OAAM,aAAa,kBAClB,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;4BACP,2EAA2E;4BAC3E,QAAQ;;;;;;;;;;;;;8BAUL;gCAAC,MAAM,OAAM,IAAI,IAAI;4BAAG;;;kCAIjC,gBAAC;kCAAM,YAAY,iBAAiB,IAAI,CAAC;;;;;AAKnD;AAEO,SAAS,0CAAe,KAA6B;IAC1D,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBACE,CAAA,GAAA,yCAAU;gBACV;oBACE,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBACrB,MAAM;wBACN,MAAM;oBAWR;oBACA,MAAM;gBAMR;aACD;SACF;kBACA,CAAC,MAAM,UAAU,kBAAI,gBAAC,CAAA,GAAA,wCAAQ;;AAGrC","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {\n  control,\n  controlFont,\n  fieldInput,\n  fieldLabel,\n  StyleProps,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {FieldError, FieldErrorProps} from 'react-aria-components/FieldError';\nimport {ForwardedRef, forwardRef, ReactNode, useContext} from 'react';\nimport {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Group, GroupProps} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {\n  InputContext,\n  Input as RACInput,\n  InputProps as RACInputProps\n} from 'react-aria-components/Input';\nimport intlMessages from '../intl/*.json';\nimport {Label, LabelProps} from 'react-aria-components/Label';\nimport {mergeStyles} from '../style/runtime';\nimport {Provider} from 'react-aria-components/slots';\nimport {StyleString} from '../style/types';\nimport {Text} from 'react-aria-components/Text';\nimport {useDOMRef} from './useDOMRef';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\ninterface FieldLabelProps\n  extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  size?: 'S' | 'M' | 'L' | 'XL';\n  necessityIndicator?: NecessityIndicator;\n  labelAlign?: Alignment;\n  labelPosition?: 'top' | 'side';\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  staticColor?: 'white' | 'black' | 'auto';\n  contextualHelp?: ReactNode;\n  isQuiet?: boolean;\n  children?: ReactNode;\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(\n  props: FieldLabelProps,\n  ref: DOMRef<HTMLLabelElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={\n          UNSAFE_className +\n          mergeStyles(\n            style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}),\n            props.styles\n          )\n        }>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' && (\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={\n                  includeNecessityIndicatorInAccessibilityName\n                    ? stringFormatter.format('label.(required)')\n                    : undefined\n                }\n                aria-hidden={!includeNecessityIndicatorInAccessibilityName}\n              />\n            )}\n            {necessityIndicator === 'label' && (\n              /* The necessity label is hidden to screen readers if the field is required because\n               * aria-required is set on the field in that case. That will already be announced,\n               * so no need to duplicate it here. If optional, we do want it to be announced here.\n               */\n              <span\n                aria-hidden={\n                  !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n                }>\n                {isRequired\n                  ? stringFormatter.format('label.(required)')\n                  : stringFormatter.format('label.(optional)')}\n              </span>\n            )}\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id\n                  ? `${labelProps.id} ${contextualHelpId}`\n                  : undefined,\n                size: size === 'L' || size === 'XL' ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps\n  extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL';\n  children: ReactNode;\n  styles?: StyleString;\n  shouldTurnOffFocusRing?: boolean;\n  prefix?: ReactNode;\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...control({shape: 'default'}),\n  ...fieldInput(),\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: baseColor('negative'),\n      forcedColors: 'Mark'\n    },\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Field'\n  },\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(\n  props: FieldGroupProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let {children, prefix, shouldTurnOffFocusRing, ...otherProps} = props;\n  let ctx = useContext(InputContext);\n  let prefixId = useId();\n  let newAriaLabelledby = ctx?.['aria-labelledby'];\n  if (prefix) {\n    newAriaLabelledby = newAriaLabelledby ? `${newAriaLabelledby} ${prefixId}` : prefixId;\n  }\n  return (\n    <Group\n      ref={ref}\n      {...otherProps}\n      onPointerDown={e => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (\n          e.pointerType === 'mouse' &&\n          !(getEventTarget(e) as Element).closest('button,input,textarea,[role=\"button\"]')\n        ) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      onTouchEnd={e => {\n        let target = getEventTarget(e) as HTMLElement;\n        if (!target.isContentEditable && !target.closest('button,input,textarea,[role=\"button\"]')) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        ' ' +\n        centerBaselineBefore +\n        mergeStyles(\n          fieldGroupStyles({\n            ...renderProps,\n            isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n            isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n            size: props.size || 'M'\n          }),\n          props.styles\n        )\n      }>\n      {props.prefix ? (\n        <Provider\n          values={[\n            [\n              IconContext,\n              {\n                styles: style({\n                  size: fontRelative(20),\n                  '--iconPrimary': {type: 'fill', value: 'currentColor'}\n                })\n              }\n            ]\n          ]}>\n          <CenterBaseline\n            id={prefixId}\n            styles={style({\n              color: 'gray-600',\n              flexShrink: 0,\n              marginEnd: 'text-to-visual'\n            })}>\n            {props.prefix}\n          </CenterBaseline>\n        </Provider>\n      ) : null}\n      <InputContext.Consumer>\n        {ctx => (\n          <InputContext.Provider value={{...ctx, 'aria-labelledby': newAriaLabelledby}}>\n            {children}\n          </InputContext.Provider>\n        )}\n      </InputContext.Consumer>\n    </Group>\n  );\n});\n\nexport interface InputProps\n  extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        mergeStyles(\n          style({\n            padding: 0,\n            backgroundColor: 'transparent',\n            color: {\n              default: 'inherit',\n              '::placeholder': {\n                default: 'gray-600',\n                forcedColors: 'GrayText'\n              }\n            },\n            fontFamily: 'inherit',\n            fontSize: 'inherit',\n            fontWeight: 'inherit',\n            flexGrow: 1,\n            flexShrink: 1,\n            minWidth: 0,\n            width: 'full',\n            outlineStyle: 'none',\n            borderStyle: 'none',\n            truncate: true\n          }),\n          styles\n        )\n      }\n    />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  isDisabled?: boolean;\n  isInvalid?: boolean; // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode;\n  showErrorIcon?: boolean;\n  styles?: StyleString;\n}\n\nexport const helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: controlFont(),\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(\n  props: HelpTextProps & {\n    descriptionRef?: DOMRef<HTMLDivElement>;\n    errorRef?: DOMRef<HTMLDivElement>;\n  }\n): ReactNode {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={mergeStyles(\n          helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  if (!props.isInvalid) {\n    return null;\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps =>\n        mergeStyles(\n          helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (\n        <>\n          {props.showErrorIcon && (\n            <CenterBaseline>\n              <AlertIcon\n                // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG\n                styles={style({\n                  size: {\n                    size: {\n                      XS: 14,\n                      S: 16,\n                      M: 20,\n                      L: 22,\n                      XL: 26\n                    }\n                  }\n                })({size: props.size || 'M'})}\n              />\n            </CenterBaseline>\n          )}\n          <span>{children || validationErrors.join(' ')}</span>\n        </>\n      ))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          {\n            render: centerBaseline({\n              slot: 'icon',\n              styles: style({\n                order: 0,\n                flexShrink: 0,\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: {\n                    default: 'negative',\n                    forcedColors: 'Mark'\n                  }\n                }\n              })\n            }),\n            styles: style({\n              size: fontRelative(20),\n              marginStart: 'text-to-visual',\n              marginEnd: fontRelative(-2),\n              flexShrink: 0\n            })\n          }\n        ]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}

package/dist/private/Form.cjs

@@ -60,15 +60,15 @@ const $bfa4962d90c8af48$export$a7fed597f4b8afd8 = /*#__PURE__*/ (0, $hYK64$react
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
             rules += (String(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 += ' se131';
-            if (props.labelPosition === "side") rules += ' Dfzkwne131';
-            else if (props.labelPosition === "top") rules += ' DS1aTJb131';
-            if (props.size === "XL") rules += ' Un131';
-            else if (props.size === "L") rules += ' Up131';
-            else if (props.size === "M") rules += ' Uj131';
-            else if (props.size === "S") rules += ' Ui131';
-            else if (props.size === "XS") rules += ' Ul131';
-            rules += ' qf131';
+            rules += ' se151';
+            if (props.labelPosition === "side") rules += ' Dfzkwne151';
+            else if (props.labelPosition === "top") rules += ' DS1aTJb151';
+            if (props.size === "XL") rules += ' Un151';
+            else if (props.size === "L") rules += ' Up151';
+            else if (props.size === "M") rules += ' Uj151';
+            else if (props.size === "S") rules += ' Ui151';
+            else if (props.size === "XS") rules += ' Ul151';
+            rules += ' qf151';
             return rules;
         }({
             labelPosition: labelPosition,

package/dist/private/Form.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .se131 {
+  .se151 {
     display: grid;
   }
 
-  .DS1aTJb131 {
+  .DS1aTJb151 {
     grid-template-columns: [field] 1fr;
   }
 
-  .Dfzkwne131 {
+  .Dfzkwne151 {
     grid-template-columns: [label] auto[field] 1fr;
   }
 
-  .Ul131 {
+  .Ul151 {
     row-gap: 1rem;
   }
 
-  .Ui131 {
+  .Ui151 {
     row-gap: 1.25rem;
   }
 
-  .Uj131 {
+  .Uj151 {
     row-gap: 1.5rem;
   }
 
-  .Up131 {
+  .Up151 {
     row-gap: 2rem;
   }
 
-  .Un131 {
+  .Un151 {
     row-gap: 2.5rem;
   }
 
-  .qf131 {
+  .qf151 {
     column-gap: .714286em;
   }
 }

package/dist/private/Form.mjs

@@ -52,15 +52,15 @@ const $9b916426527cebe7$export$a7fed597f4b8afd8 = /*#__PURE__*/ (0, $i5kLT$forwa
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
             rules += (String(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 += ' se131';
-            if (props.labelPosition === "side") rules += ' Dfzkwne131';
-            else if (props.labelPosition === "top") rules += ' DS1aTJb131';
-            if (props.size === "XL") rules += ' Un131';
-            else if (props.size === "L") rules += ' Up131';
-            else if (props.size === "M") rules += ' Uj131';
-            else if (props.size === "S") rules += ' Ui131';
-            else if (props.size === "XS") rules += ' Ul131';
-            rules += ' qf131';
+            rules += ' se151';
+            if (props.labelPosition === "side") rules += ' Dfzkwne151';
+            else if (props.labelPosition === "top") rules += ' DS1aTJb151';
+            if (props.size === "XL") rules += ' Un151';
+            else if (props.size === "L") rules += ' Up151';
+            else if (props.size === "M") rules += ' Uj151';
+            else if (props.size === "S") rules += ' Ui151';
+            else if (props.size === "XS") rules += ' Ul151';
+            rules += ' qf151';
             return rules;
         }({
             labelPosition: labelPosition,

package/dist/private/FullscreenDialog.cjs

@@ -34,11 +34,11 @@ $parcel$export(module.exports, "FullscreenDialog", () => $59876d274d9473a9$expor
 
 
 
-const $59876d274d9473a9$var$heading = " zPCJngb131 yPCJngb131 BPCJngb131 APCJngb131 _ub131 Jy131 Gy131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-g131 vx131 xd131 _xa131 xX0cczbc131 _xX0cczba131 xfd131 _xfa131 xfX0cczbc131 _xfX0cczba131 _Fd131 _FnuYUweb131 po131";
-const $59876d274d9473a9$var$header = " z6Akec131 y6Akec131 B6Akec131 A6Akec131 InM131 HnM131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-d131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131";
-const $59876d274d9473a9$var$content = " zk52g2d131 yk52g2d131 Bk52g2d131 Ak52g2d131 _ub131 Pa131 PJVVdVe131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-d131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131";
-const $59876d274d9473a9$var$buttonGroup = " z4AkfTc131 y4AkfTc131 B4AkfTc131 A4AkfTc131 IM131 La131";
-const $59876d274d9473a9$export$6af31f836f9aa6f2 = " se131 CQpyMed131 Cns3y4td131 DM8Mfn131 Dn4w1sLc131 EfcKqZ131 EnFfvwed131 Th131 Tnk131 Qh131 Qnk131 Sh131 Snk131 Rh131 Rnk131 ql131 qnj131 K40ub4c131 Fb131 _oa131 _Le131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 oi131 ni131 ki131 ji131 _Na131 Pa131";
+const $59876d274d9473a9$var$heading = " zPCJngb151 yPCJngb151 BPCJngb151 APCJngb151 _ub151 Jy151 Gy151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-g151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 xfd151 _xfa151 xfX0cczbc151 _xfX0cczba151 _Fd151 _FnuYUweb151 po151";
+const $59876d274d9473a9$var$header = " z6Akec151 y6Akec151 B6Akec151 A6Akec151 InM151 HnM151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-d151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151";
+const $59876d274d9473a9$var$content = " zk52g2d151 yk52g2d151 Bk52g2d151 Ak52g2d151 _ub151 Pa151 PJVVdVe151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-d151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151";
+const $59876d274d9473a9$var$buttonGroup = " z4AkfTc151 y4AkfTc151 B4AkfTc151 A4AkfTc151 IM151 La151";
+const $59876d274d9473a9$export$6af31f836f9aa6f2 = " se151 CQpyMed151 Cns3y4td151 DM8Mfn151 Dn4w1sLc151 EfcKqZ151 EnFfvwed151 Th151 Tnk151 Qh151 Qnk151 Sh151 Snk151 Rh151 Rnk151 ql151 qnj151 K40ub4c151 Fb151 _oa151 _Le151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 oi151 ni151 ki151 ji151 _Na151 Pa151";
 const $59876d274d9473a9$export$7082b7e805d2626f = /*#__PURE__*/ (0, $Yi1VH$react.forwardRef)(function FullscreenDialog(props, ref) {
     let { variant: variant = 'fullscreen', isKeyboardDismissDisabled: isKeyboardDismissDisabled } = props;
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);

package/dist/private/FullscreenDialog.css

@@ -1,133 +1,133 @@
 @layer _.a {
-  .zPCJngb131 {
+  .zPCJngb151 {
     grid-column-start: heading;
   }
 
-  .yPCJngb131 {
+  .yPCJngb151 {
     grid-column-end: heading;
   }
 
-  .BPCJngb131 {
+  .BPCJngb151 {
     grid-row-start: heading;
   }
 
-  .APCJngb131 {
+  .APCJngb151 {
     grid-row-end: heading;
   }
 
-  .Jy131 {
+  .Jy151 {
     margin-top: 0;
   }
 
-  .Gy131 {
+  .Gy151 {
     margin-bottom: 0;
   }
 
-  .-_6BNtrc-g131 {
+  .-_6BNtrc-g151 {
     --fs: pow(1.125, 4);
   }
 
-  .xd131 {
+  .xd151 {
     font-weight: 700;
   }
 
-  ._Fd131 {
+  ._Fd151 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .po131 {
+  .po151 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .z6Akec131 {
+  .z6Akec151 {
     grid-column-start: header;
   }
 
-  .y6Akec131 {
+  .y6Akec151 {
     grid-column-end: header;
   }
 
-  .B6Akec131 {
+  .B6Akec151 {
     grid-row-start: header;
   }
 
-  .A6Akec131 {
+  .A6Akec151 {
     grid-row-end: header;
   }
 
-  .zk52g2d131 {
+  .zk52g2d151 {
     grid-column-start: content;
   }
 
-  .yk52g2d131 {
+  .yk52g2d151 {
     grid-column-end: content;
   }
 
-  .Bk52g2d131 {
+  .Bk52g2d151 {
     grid-row-start: content;
   }
 
-  .Ak52g2d131 {
+  .Ak52g2d151 {
     grid-row-end: content;
   }
 
-  ._ub131 {
+  ._ub151 {
     flex-grow: 1;
   }
 
-  .-_6BNtrc-d131 {
+  .-_6BNtrc-d151 {
     --fs: pow(1.125, 1);
   }
 
-  .vx131 {
+  .vx151 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb131 {
+  .xb151 {
     font-weight: 400;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  ._Fb131 {
+  ._Fb151 {
     line-height: 1.5;
   }
 
-  .pt131 {
+  .pt151 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .z4AkfTc131 {
+  .z4AkfTc151 {
     grid-column-start: buttons;
   }
 
-  .y4AkfTc131 {
+  .y4AkfTc151 {
     grid-column-end: buttons;
   }
 
-  .B4AkfTc131 {
+  .B4AkfTc151 {
     grid-row-start: buttons;
   }
 
-  .A4AkfTc131 {
+  .A4AkfTc151 {
     grid-row-end: buttons;
   }
 
-  .IM131 {
+  .IM151 {
     margin-inline-start: auto;
   }
 
-  .La131 {
+  .La151 {
     max-width: 100%;
   }
 
-  .se131 {
+  .se151 {
     display: grid;
   }
 
-  .CQpyMed131 {
+  .CQpyMed151 {
     grid-template-areas: "heading"
                          "header"
                          "."
@@ -136,200 +136,200 @@
                          "buttons";
   }
 
-  .DM8Mfn131 {
+  .DM8Mfn151 {
     grid-template-columns: 1fr;
   }
 
-  .EfcKqZ131 {
+  .EfcKqZ151 {
     grid-template-rows: auto auto calc(1.5rem * var(--s2-scale)) 1fr calc(1.5rem * var(--s2-scale)) auto;
   }
 
-  .Th131 {
+  .Th151 {
     padding-top: 24px;
   }
 
-  .Qh131 {
+  .Qh151 {
     padding-bottom: 24px;
   }
 
-  .Sh131 {
+  .Sh151 {
     padding-inline-start: 24px;
   }
 
-  .Rh131 {
+  .Rh151 {
     padding-inline-end: 24px;
   }
 
-  .ql131 {
+  .ql151 {
     column-gap: 1rem;
   }
 
-  .K40ub4c131 {
+  .K40ub4c151 {
     max-height: inherit;
   }
 
-  .Fb131 {
+  .Fb151 {
     height: 100%;
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  ._Le131 {
+  ._Le151 {
     outline-style: none;
   }
 
-  .uk131 {
+  .uk151 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .oi131 {
+  .oi151 {
     border-start-start-radius: inherit;
   }
 
-  .ni131 {
+  .ni151 {
     border-start-end-radius: inherit;
   }
 
-  .ki131 {
+  .ki151 {
     border-end-start-radius: inherit;
   }
 
-  .ji131 {
+  .ji151 {
     border-end-end-radius: inherit;
   }
 
-  ._Na131 {
+  ._Na151 {
     overflow-x: auto;
   }
 
-  .Pa131 {
+  .Pa151 {
     overflow-y: auto;
   }
 }
 
 @layer _.b {
-  .xX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  ._FnuYUwec131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb151:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.c {
-  .xfd131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfd151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfa131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ud3Euai131:lang(he) {
+  .ud3Euai151:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .xfX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbc151:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 500;
   }
 
-  ._xfX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba151:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea131:lang(ja) {
+  .uea151:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb131:lang(ko) {
+  .ugb151:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd151:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje151:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl131:lang(zh-HK) {
+  .u2NhKxcl151:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic151:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .InM131 {
+    .InM151 {
       margin-inline-start: auto;
     }
 
-    .HnM131 {
+    .HnM151 {
       margin-inline-end: auto;
     }
 
-    .Cns3y4td131 {
+    .Cns3y4td151 {
       grid-template-areas: "heading header buttons"
                            ". . ."
                            "content content content";
     }
 
-    .Dn4w1sLc131 {
+    .Dn4w1sLc151 {
       grid-template-columns: auto 1fr auto;
     }
 
-    .EnFfvwed131 {
+    .EnFfvwed151 {
       grid-template-rows: auto calc(2rem * var(--s2-scale)) 1fr;
     }
 
-    .Tnk131 {
+    .Tnk151 {
       padding-top: 32px;
     }
 
-    .Qnk131 {
+    .Qnk151 {
       padding-bottom: 32px;
     }
 
-    .Snk131 {
+    .Snk151 {
       padding-inline-start: 32px;
     }
 
-    .Rnk131 {
+    .Rnk151 {
       padding-inline-end: 32px;
     }
 
-    .qnj131 {
+    .qnj151 {
       column-gap: 1.5rem;
     }
   }
@@ -337,7 +337,7 @@
 
 @layer _.b.JVVdV {
   @container (height < 25rem) {
-    .PJVVdVe131 {
+    .PJVVdVe151 {
       overflow-y: visible;
     }
   }