@primer/react-brand 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79

package/esm/forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {ToggleSwitch} from '../ToggleSwitch'\nimport type {ToggleSwitchInternalProps} from '../ToggleSwitch/ToggleSwitch'\nimport {Spinner} from '../../Spinner/Spinner'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\nimport toggleSwitchStyles from '../ToggleSwitch/ToggleSwitch.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isCheckboxOrRadio = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n  const toggleSwitchElement = childrenArr.find(child => React.isValidElement(child) && child.type === ToggleSwitch) as\n    | React.ReactElement<ToggleSwitchInternalProps>\n    | undefined\n  const isToggleSwitch = Boolean(toggleSwitchElement)\n  const describedBy =\n    [\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint) && `${uniqueId}-hint`,\n      childrenArr.some(child => React.isValidElement(child) && child.type === FormControlValidation) &&\n        `${uniqueId}-validation`,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isCheckboxOrRadio && styles['FormControl--checkbox'],\n        isToggleSwitch && styles['FormControl--toggle-switch'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isCheckboxOrRadio && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === ToggleSwitch) {\n          const element = child as React.ReactElement<ToggleSwitchInternalProps>\n          const descriptions = [element.props['aria-describedby'], describedBy].filter(Boolean).join(' ')\n          return React.cloneElement(element, {\n            className: clsx(styles['FormControl-control--toggle-switch'], element.props.className),\n            id: uniqueId,\n            toggleSwitchSpinnerInLabel: childrenArr.some(\n              labelChild =>\n                React.isValidElement<React.ComponentProps<typeof FormControlLabel>>(labelChild) &&\n                labelChild.type === FormControlLabel &&\n                !labelChild.props.visuallyHidden,\n            ),\n            'aria-describedby': descriptions ? [...new Set(descriptions.split(/\\s+/))].join(' ') : undefined,\n            'aria-invalid': element.props['aria-invalid'] ?? (validationStatus === 'error' ? true : undefined),\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(\n              isCheckboxOrRadio && styles['FormControl-label--checkbox'],\n              isToggleSwitch && styles['FormControl-label--toggle-switch'],\n              element.props.className,\n            ),\n            htmlFor: uniqueId,\n            children:\n              toggleSwitchElement?.props.loading && !element.props.visuallyHidden\n                ? [\n                    ...React.Children.toArray(element.props.children),\n                    <span\n                      key=\"toggleSwitch-spinner\"\n                      aria-hidden=\"true\"\n                      className={styles['FormControl-toggleSwitch-spinnerSlot']}\n                    >\n                      <Spinner\n                        size=\"small\"\n                        accessibleLabel={null}\n                        className={toggleSwitchStyles['ToggleSwitch-spinner']}\n                        data-testid={ToggleSwitch.testIds.spinner}\n                      />\n                    </span>,\n                  ]\n                : element.props.children,\n            required: isToggleSwitch ? false : required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isCheckboxOrRadio ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6DA,IAAM,KAAQ,EACZ,aACA,cACA,cACA,cACA,OACA,aACA,UAAO,UACP,qBACA,GAAG,QACsC;CACzC,IAAM,IAAW,EAAM,CAAE,GACnB,IAAc,EAAM,SAAS,QAAQ,CAAQ,GAE7C,IAAoB,EAAY,MACpC,MAAS,EAAM,eAAe,CAAK,MAAM,EAAM,SAAS,KAAY,EAAM,SAAS,EACrF,GACM,IAAsB,EAAY,MAAK,MAAS,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAAY,GAG1G,IAAiB,EAAQ,GACzB,IACJ,CACE,EAAY,MAAK,MAAS,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAAe,KAAK,GAAG,EAAS,QACxG,EAAY,MAAK,MAAS,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAAqB,KAC3F,GAAG,EAAS,YAChB,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,kBAAC,WAAD;EACE,IAAI,gBAAgB;EACpB,WAAW,EACT,EAAO,aACP,KAAa,EAAO,2BACpB,KAAqB,EAAO,0BAC5B,KAAkB,EAAO,+BACzB,KAAa,EAAO,wBACpB,CACF;EACA,GAAI;YAEH,EAAM,SAAS,IAAI,IAAU,MAAS;GACrC,IAAI,CAAC,EAAM,eAAe,CAAK,GAAG,OAAO;GAEzC,IAAI,EAAM,SAAS,GAAW;IAC5B,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,SAAS;KACvC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;IACtB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,SAAS;KACvC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;IACtB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAQ;IACzB,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,SAAS;KACvC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;IACtB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,WAAW,EAAO,gCAAgC;KAChF,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD,oBAAoB;IACtB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAO;IACxB,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAqB,EAAO,+BAA+B,EAAQ,MAAM,SAAS;KAClG,IAAI;KACJ,MAAM,EAAQ,MAAM;KACpB,UAAU,EAAQ,MAAM,YAAY;KACpC,oBAAoB;IACtB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAc;IAC/B,IAAM,IAAU,GACV,IAAe,CAAC,EAAQ,MAAM,qBAAqB,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAC9F,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAO,uCAAuC,EAAQ,MAAM,SAAS;KACrF,IAAI;KACJ,4BAA4B,EAAY,MACtC,MACE,EAAM,eAA8D,CAAU,KAC9E,EAAW,SAAS,KACpB,CAAC,EAAW,MAAM,cACtB;KACA,oBAAoB,IAAe,CAAC,GAAG,IAAI,IAAI,EAAa,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;KACvF,gBAAgB,EAAQ,MAAM,oBAAoB,MAAqB,WAAiB,KAAA;IAC1F,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAkB;IACnC,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EACT,KAAqB,EAAO,gCAC5B,KAAkB,EAAO,qCACzB,EAAQ,MAAM,SAChB;KACA,SAAS;KACT,UACE,GAAqB,MAAM,WAAW,CAAC,EAAQ,MAAM,iBACjD,CACE,GAAG,EAAM,SAAS,QAAQ,EAAQ,MAAM,QAAQ,GAChD,kBAAC,QAAD;MAEE,eAAY;MACZ,WAAW,EAAO;gBAElB,kBAAC,GAAD;OACE,MAAK;OACL,iBAAiB;OACjB,WAAW,EAAmB;OAC9B,eAAa,EAAa,QAAQ;MACnC,CAAA;KACG,GAVA,sBAUA,CACR,IACA,EAAQ,MAAM;KACpB,UAAU,MAAyB;KACnC;KACA;KACA,uBAAuB,MAA4B,EAAQ,MAAM;IACnE,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAuB;IACxC,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS;KACjC;KACA,IAAI,GAAG,EAAS;IAClB,CAAC;GACH;GAEA,IAAI,EAAM,SAAS,GAAiB;IAClC,IAAM,IAAU;IAChB,OAAO,EAAM,aAAa,GAAS,EACjC,IAAI,GAAG,EAAS,OAClB,CAAC;GACH;GAEA,OAAO;EACT,CAAC;CACM,CAAA;AAEb,GAWM,KAAoB,EACxB,aACA,cACA,YACA,aACA,2BAAwB,IACxB,UAAO,UACP,qBACA,mBACA,GAAG,QAGD,kBAAC,SAAD;CACW;CACT,WAAW,EACT,EAAO,sBACP,KAAoB,EAAO,sBAAsB,MACjD,EAAO,sBAAsB,MAC7B,KAAkB,EAAO,uCACzB,CACF;CACA,GAAI;WATN,CAWG,EAAM,SAAS,IAAI,IAAU,MACxB,EAAM,eAAqC,CAAK,KAAK,EAAM,SAAS,IAC/D,EAAM,aAAa,GAAO,EAC/B,WAAW,EAAK,EAAO,yBAAyB,EAAM,MAAM,SAAS,EACvE,CAAC,IAEI,CACR,GAEA,KAAY,KACX,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA+B,eAAA;YAAvD,CACG,KAAI,GAED;GAEH;IASL,KAAyB,EAAC,aAAU,qBAAkB,cAAW,GAAG,QAEtE,kBAAC,GAAD;CACE,IAAG;CACH,MAAK;CACL,WAAW,EACT,EAAO,2BACP,KAAoB,EAAO,uCAC3B,KAAoB,EAAO,2BAA2B,MACtD,CACF;CACA,GAAI;WATN;EAWG,MAAqB,WACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,CAAgB,CAAA;EACZ,CAAA;EAEP,MAAqB,aACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,CAAsB,CAAA;EAClB,CAAA;EAEP;CACG;IAMJ,KAAmB,EAAC,cAAW,GAAG,QAC/B,kBAAC,GAAD;CAAM,IAAG;CAAO,MAAK;CAAM,SAAQ;CAAQ,WAAW,EAAK,EAAO,qBAAqB,CAAS;CAAG,GAAI;AAAO,CAAA,GAO1G,IAAc,OAAO,OAAO,GAAM;CAC7C,OAAO;CACP,YAAY;CACZ,MAAM;AACR,CAAC"}

package/esm/forms/FormControl/FormControl.module-NDvIk_Aq.css

@@ -0,0 +1 @@
+.Primer_Brand__FormControl-module__FormControl___xyCI6{font-family:var(--brand-body-fontFamily);gap:var(--base-size-8);flex-direction:column;display:inline-flex}.Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY{width:100%}.Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig{grid-template-columns:auto 1fr;display:grid}.Primer_Brand__FormControl-module__FormControl--toggle-switch___HomKh{grid-column-gap:var(--brand-ToggleSwitch-label-gap);-moz-column-gap:var(--brand-ToggleSwitch-label-gap);column-gap:var(--brand-ToggleSwitch-label-gap);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT{grid-area:1/1;align-self:start}.Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka{cursor:pointer;word-wrap:anywhere;grid-area:1/2;min-width:0}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g.Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka{font-size:var(--brand-ToggleSwitch-label-fontSize);line-height:max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight))}.Primer_Brand__FormControl-module__FormControl-toggleSwitch-spinnerSlot___WwrPk{width:var(--brand-ToggleSwitch-loading-size);height:var(--brand-ToggleSwitch-loading-size);vertical-align:middle;pointer-events:none;justify-content:center;align-items:center;margin-inline-start:var(--brand-ToggleSwitch-loading-gap);display:inline-flex}.Primer_Brand__FormControl-module__FormControl--border___JkgNP{border:1px solid var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-12)}.Primer_Brand__FormControl-module__FormControl-label____oJE0{color:var(--brand-color-text-default);font-weight:var(--base-text-weight-medium);font-family:var(--brand-body-fontFamily)}.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g{letter-spacing:var(--brand-text-letterSpacing-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__FormControl-module__FormControl-label--large___o1TMW{letter-spacing:var(--brand-text-letterSpacing-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300)}.Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK{cursor:pointer;font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-24);width:100%;position:relative;top:1px}.Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt{margin:2px 0 0}.Primer_Brand__FormControl-module__FormControl-hint___DmKlt{grid-column:1/3;display:block}.Primer_Brand__FormControl-module__FormControl-validation___GOPld{gap:var(--base-size-4);grid-column:1/3;align-items:center;display:flex}.Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY{color:var(--brand-color-success-fg)}.Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh{color:var(--brand-control-color-validation-error)}.Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN,.Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD{display:flex}.Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ{animation:.17s cubic-bezier(.44,.74,.36,1) Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP}@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

package/esm/forms/FormControl/FormControl.module.js

@@ -1,12 +1,16 @@
-import './FormControl.module-CSNT689n.css';//#region src/forms/FormControl/FormControl.module.css
+import './FormControl.module-NDvIk_Aq.css';//#region src/forms/FormControl/FormControl.module.css
 var e = "Primer_Brand__FormControl-module__FormControl___xyCI6", t = "Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP", n = {
 	FormControl: e,
 	"FormControl--fullWidth": "Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY",
 	"FormControl--checkbox": "Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig",
+	"FormControl--toggle-switch": "Primer_Brand__FormControl-module__FormControl--toggle-switch___HomKh",
+	"FormControl-control--toggle-switch": "Primer_Brand__FormControl-module__FormControl-control--toggle-switch___pwbrT",
+	"FormControl-label--toggle-switch": "Primer_Brand__FormControl-module__FormControl-label--toggle-switch____nCka",
+	"FormControl-label--medium": "Primer_Brand__FormControl-module__FormControl-label--medium___bj84g",
+	"FormControl-toggleSwitch-spinnerSlot": "Primer_Brand__FormControl-module__FormControl-toggleSwitch-spinnerSlot___WwrPk",
 	"FormControl--border": "Primer_Brand__FormControl-module__FormControl--border___JkgNP",
 	"FormControl-label": "Primer_Brand__FormControl-module__FormControl-label____oJE0",
 	"FormControl-label--visually-hidden": "Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo",
-	"FormControl-label--medium": "Primer_Brand__FormControl-module__FormControl-label--medium___bj84g",
 	"FormControl-label--large": "Primer_Brand__FormControl-module__FormControl-label--large___o1TMW",
 	"FormControl-label--checkbox": "Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK",
 	"FormControl-control--radio": "Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt",
@@ -17,8 +21,7 @@ var e = "Primer_Brand__FormControl-module__FormControl___xyCI6", t = "Primer_Bra
 	"FormControl-validation-success-icon": "Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN",
 	"FormControl-validation-error-icon": "Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD",
 	"FormControl-validation--animate-in": "Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ",
-	FormControlValidationFadeIn: t,
-	"FormControl-validation-checkbox": "Primer_Brand__FormControl-module__FormControl-validation-checkbox___o5dVo"
+	FormControlValidationFadeIn: t
 };
 //#endregion
 export { e as FormControl, t as FormControlValidationFadeIn, n as default };

package/esm/forms/FormControl/FormControl.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.module.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.module.css"],"sourcesContent":[".FormControl {\n  display: inline-flex;\n  font-family: var(--brand-body-fontFamily);\n  flex-direction: column;\n  gap: var(--base-size-8);\n}\n\n.FormControl--fullWidth {\n  width: 100%;\n}\n\n.FormControl--checkbox {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n.FormControl--border {\n  border: 1px solid var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-12);\n}\n\n.FormControl-label {\n  color: var(--brand-color-text-default);\n  font-weight: var(--base-text-weight-medium);\n  font-family: var(--brand-body-fontFamily);\n}\n\n.FormControl-label--visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.FormControl-label--medium {\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FormControl-label--large {\n  letter-spacing: var(--brand-text-letterSpacing-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n}\n\n.FormControl-label--checkbox {\n  cursor: pointer;\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-24);\n  width: 100%;\n  position: relative;\n  top: 1px;\n}\n\n.FormControl-control--radio {\n  margin: 2px 0 0;\n}\n\n.FormControl-hint {\n  grid-column: 1 / 3;\n  display: block;\n}\n\n/*Validation*/\n.FormControl-validation {\n  display: flex;\n  gap: var(--base-size-4);\n  align-items: center;\n}\n\n.FormControl-validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.FormControl-validation--error {\n  color: var(--brand-color-danger-fg);\n}\n\n.FormControl-validation-success-icon {\n  display: flex;\n}\n\n.FormControl-validation-error-icon {\n  display: flex;\n}\n\n.FormControl-validation--animate-in {\n  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);\n}\n\n@keyframes FormControlValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.FormControl-validation-checkbox {\n  grid-column: 1 / 3;\n}\n"],"mappings":""}
+{"version":3,"file":"FormControl.module.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.module.css"],"sourcesContent":[".FormControl {\n  display: inline-flex;\n  font-family: var(--brand-body-fontFamily);\n  flex-direction: column;\n  gap: var(--base-size-8);\n}\n\n.FormControl--fullWidth {\n  width: 100%;\n}\n\n.FormControl--checkbox {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n.FormControl--toggle-switch {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  column-gap: var(--brand-ToggleSwitch-label-gap);\n  align-items: center;\n}\n\n.FormControl-control--toggle-switch {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n}\n\n.FormControl-label--toggle-switch {\n  grid-column: 2;\n  grid-row: 1;\n  min-width: 0;\n  cursor: pointer;\n  overflow-wrap: anywhere;\n}\n\n.FormControl-label--medium.FormControl-label--toggle-switch {\n  font-size: var(--brand-ToggleSwitch-label-fontSize);\n  line-height: max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight));\n}\n\n.FormControl-toggleSwitch-spinnerSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  margin-inline-start: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n.FormControl--border {\n  border: 1px solid var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-12);\n}\n\n.FormControl-label {\n  color: var(--brand-color-text-default);\n  font-weight: var(--base-text-weight-medium);\n  font-family: var(--brand-body-fontFamily);\n}\n\n.FormControl-label--visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.FormControl-label--medium {\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FormControl-label--large {\n  letter-spacing: var(--brand-text-letterSpacing-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n}\n\n.FormControl-label--checkbox {\n  cursor: pointer;\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-24);\n  width: 100%;\n  position: relative;\n  top: 1px;\n}\n\n.FormControl-control--radio {\n  margin: 2px 0 0;\n}\n\n.FormControl-hint {\n  grid-column: 1 / 3;\n  display: block;\n}\n\n/*Validation*/\n.FormControl-validation {\n  grid-column: 1 / 3;\n  display: flex;\n  gap: var(--base-size-4);\n  align-items: center;\n}\n\n.FormControl-validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.FormControl-validation--error {\n  color: var(--brand-control-color-validation-error);\n}\n\n.FormControl-validation-success-icon {\n  display: flex;\n}\n\n.FormControl-validation-error-icon {\n  display: flex;\n}\n\n.FormControl-validation--animate-in {\n  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);\n}\n\n@keyframes FormControlValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n"],"mappings":""}

package/esm/forms/Radio/Radio.js

@@ -1,7 +1,7 @@
 import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-DKA7xAYz.css';/* empty css                                                                                                        */
 import r from "./Radio.module.js";
 import { forwardRef as i, useCallback as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/esm/forms/Select/Select.js

@@ -1,5 +1,5 @@
 import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-DKA7xAYz.css';/* empty css                                                                                                        */
 import t from "./Select.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/esm/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-DKA7xAYz.css';/* empty css                                                                                                        */
 import r from "./TextInput.module.js";
 import i, { forwardRef as a, useMemo as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/Textarea/Textarea.js

@@ -1,5 +1,5 @@
 import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-DKA7xAYz.css';/* empty css                                                                                                        */
 import t from "./Textarea.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/esm/forms/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,34 @@
+import React, { type ButtonHTMLAttributes } from 'react';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css';
+type ToggleSwitchSize = 'small' | 'medium';
+type ToggleSwitchSpinnerPosition = 'start' | 'end';
+type ToggleSwitchButtonPropKeysToOmit = 'aria-busy' | 'aria-checked' | 'aria-disabled' | 'children' | 'onChange' | 'role' | 'type';
+export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {
+    'data-testid'?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    loading?: boolean;
+    size?: ToggleSwitchSize;
+    loadingLabel?: string;
+    loadingLabelDelay?: number;
+    spinnerPosition?: ToggleSwitchSpinnerPosition;
+};
+export type ToggleSwitchInternalProps = ToggleSwitchProps & {
+    toggleSwitchSpinnerInLabel?: boolean;
+};
+type ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Use ToggleSwitch for settings that take effect immediately.
+ * @see https://primer.style/brand/forms/ToggleSwitch
+ */
+export declare const ToggleSwitch: ToggleSwitchComponent & {
+    testIds: {
+        root: string;
+        spinner: string;
+        loadingAnnouncement: string;
+    };
+};
+export {};
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/esm/forms/ToggleSwitch/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkC,KAAK,oBAAoB,EAAyB,MAAM,OAAO,CAAA;AAK/G,OAAO,oGAAoG,CAAA;AAC3G,OAAO,iHAAiH,CAAA;AAGxH,KAAK,gBAAgB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC1C,KAAK,2BAA2B,GAAG,OAAO,GAAG,KAAK,CAAA;AAElD,KAAK,gCAAgC,GACjC,WAAW,GACX,cAAc,GACd,eAAe,GACf,UAAU,GACV,UAAU,GACV,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,gCAAgC,CAAC,GAAG;IAChH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,2BAA2B,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAqHxH;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;CAAiC,CAAA"}

package/esm/forms/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,81 @@
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { Spinner as n } from "../../Spinner/Spinner.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes-Byi9AmE8.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/base-CWVI8qLT.css';/* empty css                                                                                                 */
+/* empty css                                                                                                              */
+import r from "./ToggleSwitch.module.js";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/forms/ToggleSwitch/ToggleSwitch.tsx
+var l = {
+	root: "ToggleSwitch",
+	spinner: "ToggleSwitch-spinner",
+	loadingAnnouncement: "ToggleSwitch-loading-announcement"
+}, u = i(function({ checked: i, defaultChecked: u = !1, onChange: d, onClick: f, disabled: p = !1, loading: m = !1, size: h = "medium", loadingLabel: g = "Loading", loadingLabelDelay: _ = 2e3, spinnerPosition: v = "end", toggleSwitchSpinnerInLabel: y = !1, id: b, className: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-invalid": T, "data-testid": E, ...D }, O) {
+	let k = t(b), A = `${k}-loading`, [j, M] = o(u), [N, P] = o(!1), F = i ?? j;
+	a(() => {
+		if (P(!1), !m) return;
+		let e = setTimeout(() => P(!0), Math.max(0, _));
+		return () => clearTimeout(e);
+	}, [m, _]);
+	let I = [w, m && N && g && A].filter(Boolean).join(" ") || void 0, L = (e) => {
+		if (p) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		if (f?.(e), e.defaultPrevented) return;
+		let t = !F;
+		i === void 0 && M(t), d?.(t);
+	}, R = !y && m ? /* @__PURE__ */ s("span", {
+		className: r["ToggleSwitch-spinnerSlot"],
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ s(n, {
+			size: "small",
+			accessibleLabel: null,
+			className: r["ToggleSwitch-spinner"],
+			"data-testid": l.spinner
+		})
+	}) : null;
+	return /* @__PURE__ */ c("div", {
+		className: e(r.ToggleSwitch, r[`ToggleSwitch--${h}`], x),
+		"data-testid": E || l.root,
+		children: [
+			v === "start" && R,
+			/* @__PURE__ */ s("button", {
+				...D,
+				id: k,
+				ref: O,
+				type: "button",
+				role: "switch",
+				"aria-checked": F,
+				"aria-disabled": p || void 0,
+				"aria-busy": m || void 0,
+				"aria-label": S,
+				"aria-labelledby": C,
+				"aria-describedby": I,
+				"aria-invalid": T,
+				className: e(r["ToggleSwitch-button"], p && r["ToggleSwitch-button--unavailable"]),
+				onClick: L,
+				children: /* @__PURE__ */ s("span", {
+					className: r["ToggleSwitch-track"],
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ s("span", { className: e(r["ToggleSwitch-thumb"], F && r["ToggleSwitch-thumb--checked"], p && r["ToggleSwitch-thumb--disabled"]) })
+				})
+			}),
+			v === "end" && R,
+			/* @__PURE__ */ s("span", {
+				id: A,
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "visually-hidden",
+				"data-testid": l.loadingAnnouncement,
+				children: m && N ? g : null
+			})
+		]
+	});
+}), d = Object.assign(u, { testIds: l });
+//#endregion
+export { d as ToggleSwitch };
+
+//# sourceMappingURL=ToggleSwitch.js.map

package/esm/forms/ToggleSwitch/ToggleSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import React, {forwardRef, useEffect, useState, type ButtonHTMLAttributes, type MouseEventHandler} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {Spinner} from '../../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css'\nimport styles from './ToggleSwitch.module.css'\n\ntype ToggleSwitchSize = 'small' | 'medium'\ntype ToggleSwitchSpinnerPosition = 'start' | 'end'\n\ntype ToggleSwitchButtonPropKeysToOmit =\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-disabled'\n  | 'children'\n  | 'onChange'\n  | 'role'\n  | 'type'\n\nexport type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {\n  'data-testid'?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  loading?: boolean\n  size?: ToggleSwitchSize\n  loadingLabel?: string\n  loadingLabelDelay?: number\n  spinnerPosition?: ToggleSwitchSpinnerPosition\n}\n\nexport type ToggleSwitchInternalProps = ToggleSwitchProps & {\n  toggleSwitchSpinnerInLabel?: boolean\n}\n\nconst testIds = {\n  root: 'ToggleSwitch',\n  spinner: 'ToggleSwitch-spinner',\n  loadingAnnouncement: 'ToggleSwitch-loading-announcement',\n}\n\ntype ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>\n\nconst Root: ToggleSwitchComponent = forwardRef<HTMLButtonElement, ToggleSwitchInternalProps>(function ToggleSwitch(\n  {\n    checked,\n    defaultChecked = false,\n    onChange,\n    onClick,\n    disabled = false,\n    loading = false,\n    size = 'medium',\n    loadingLabel = 'Loading',\n    loadingLabelDelay = 2000,\n    spinnerPosition = 'end',\n    toggleSwitchSpinnerInLabel = false,\n    id,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'data-testid': testId,\n    ...rest\n  },\n  ref,\n) {\n  const uniqueId = useId(id)\n  const loadingId = `${uniqueId}-loading`\n  const [internalChecked, setInternalChecked] = useState(defaultChecked)\n  const [announceLoading, setAnnounceLoading] = useState(false)\n  const isChecked = checked ?? internalChecked\n\n  useEffect(() => {\n    setAnnounceLoading(false)\n    if (!loading) return\n\n    const timeout = setTimeout(() => setAnnounceLoading(true), Math.max(0, loadingLabelDelay))\n    return () => clearTimeout(timeout)\n  }, [loading, loadingLabelDelay])\n\n  const describedBy =\n    [ariaDescribedBy, loading && announceLoading && loadingLabel && loadingId].filter(Boolean).join(' ') || undefined\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const nextChecked = !isChecked\n    if (checked === undefined) setInternalChecked(nextChecked)\n    onChange?.(nextChecked)\n  }\n\n  const spinnerElement =\n    !toggleSwitchSpinnerInLabel && loading ? (\n      <span className={styles['ToggleSwitch-spinnerSlot']} aria-hidden=\"true\">\n        <Spinner\n          size=\"small\"\n          accessibleLabel={null}\n          className={styles['ToggleSwitch-spinner']}\n          data-testid={testIds.spinner}\n        />\n      </span>\n    ) : null\n\n  return (\n    <div\n      className={clsx(styles.ToggleSwitch, styles[`ToggleSwitch--${size}`], className)}\n      data-testid={testId || testIds.root}\n    >\n      {spinnerPosition === 'start' && spinnerElement}\n      <button\n        {...rest}\n        id={uniqueId}\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={clsx(styles['ToggleSwitch-button'], disabled && styles['ToggleSwitch-button--unavailable'])}\n        onClick={handleClick}\n      >\n        <span className={styles['ToggleSwitch-track']} aria-hidden=\"true\">\n          <span\n            className={clsx(\n              styles['ToggleSwitch-thumb'],\n              isChecked && styles['ToggleSwitch-thumb--checked'],\n              disabled && styles['ToggleSwitch-thumb--disabled'],\n            )}\n          />\n        </span>\n      </button>\n      {spinnerPosition === 'end' && spinnerElement}\n      <span\n        id={loadingId}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"visually-hidden\"\n        data-testid={testIds.loadingAnnouncement}\n      >\n        {loading && announceLoading ? loadingLabel : null}\n      </span>\n    </div>\n  )\n})\n\n/**\n * Use ToggleSwitch for settings that take effect immediately.\n * @see https://primer.style/brand/forms/ToggleSwitch\n */\nexport const ToggleSwitch = Object.assign(Root, {testIds})\n"],"mappings":";;;;;;;;;AAqCA,IAAM,IAAU;CACd,MAAM;CACN,SAAS;CACT,qBAAqB;AACvB,GAIM,IAA8B,EAAyD,SAC3F,EACE,YACA,oBAAiB,IACjB,aACA,YACA,cAAW,IACX,aAAU,IACV,UAAO,UACP,kBAAe,WACf,uBAAoB,KACpB,qBAAkB,OAClB,gCAA6B,IAC7B,OACA,cACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,IAAW,EAAM,CAAE,GACnB,IAAY,GAAG,EAAS,WACxB,CAAC,GAAiB,KAAsB,EAAS,CAAc,GAC/D,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,IAAY,KAAW;CAE7B,QAAgB;EAEd,IADA,EAAmB,EAAK,GACpB,CAAC,GAAS;EAEd,IAAM,IAAU,iBAAiB,EAAmB,EAAI,GAAG,KAAK,IAAI,GAAG,CAAiB,CAAC;EACzF,aAAa,aAAa,CAAO;CACnC,GAAG,CAAC,GAAS,CAAiB,CAAC;CAE/B,IAAM,IACJ,CAAC,GAAiB,KAAW,KAAmB,KAAgB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GAEpG,KAAoD,MAAS;EACjE,IAAI,GAAU;GAEZ,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;GACtB;EACF;EAGA,IADA,IAAU,CAAK,GACX,EAAM,kBAAkB;EAE5B,IAAM,IAAc,CAAC;EAErB,AADI,MAAY,KAAA,KAAW,EAAmB,CAAW,GACzD,IAAW,CAAW;CACxB,GAEM,IACJ,CAAC,KAA8B,IAC7B,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA6B,eAAY;YAC/D,kBAAC,GAAD;GACE,MAAK;GACL,iBAAiB;GACjB,WAAW,EAAO;GAClB,eAAa,EAAQ;EACtB,CAAA;CACG,CAAA,IACJ;CAEN,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,iBAAiB,MAAS,CAAS;EAC/E,eAAa,KAAU,EAAQ;YAFjC;GAIG,MAAoB,WAAW;GAChC,kBAAC,UAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,KAAY,KAAA;IAC3B,aAAW,KAAW,KAAA;IACtB,cAAY;IACZ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc;IACd,WAAW,EAAK,EAAO,wBAAwB,KAAY,EAAO,mCAAmC;IACrG,SAAS;cAET,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuB,eAAY;eACzD,kBAAC,QAAD,EACE,WAAW,EACT,EAAO,uBACP,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACrB,EACD,CAAA;IACG,CAAA;GACA,CAAA;GACP,MAAoB,SAAS;GAC9B,kBAAC,QAAD;IACE,IAAI;IACJ,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;IACV,eAAa,EAAQ;cAEpB,KAAW,IAAkB,IAAe;GACzC,CAAA;EACH;;AAET,CAAC,GAMY,IAAe,OAAO,OAAO,GAAM,EAAC,WAAO,CAAC"}

package/esm/forms/ToggleSwitch/ToggleSwitch.module-C_gXnHNW.css

@@ -0,0 +1 @@
+.Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE{align-items:center;gap:var(--brand-ToggleSwitch-loading-gap);vertical-align:middle;flex-shrink:0;display:inline-flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ{min-height:var(--brand-ToggleSwitch-target-minHeight);cursor:pointer;appearance:none;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible{outline:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline:var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);outline-offset:var(--brand-ToggleSwitch-focus-offset)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR{cursor:not-allowed}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{box-sizing:border-box;border:var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);border-radius:var(--brand-ToggleSwitch-track-borderRadius);background:var(--brand-ToggleSwitch-track-bgColor);display:block;position:relative}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{box-sizing:border-box;border:var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);border-radius:var(--brand-ToggleSwitch-thumb-borderRadius);background:var(--brand-ToggleSwitch-thumb-off-bgColor-rest);transition:inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-rest)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{background:var(--brand-ToggleSwitch-thumb-off-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:var(--brand-ToggleSwitch-thumb-disabled-bgColor)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-medium);height:var(--brand-ToggleSwitch-track-height-medium)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-small);height:var(--brand-ToggleSwitch-track-height-small)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-medium);height:var(--brand-ToggleSwitch-thumb-size-medium);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-small);height:var(--brand-ToggleSwitch-thumb-size-small);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-medium))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-small))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinnerSlot___kHm79{flex:0 0 var(--brand-ToggleSwitch-loading-size);width:var(--brand-ToggleSwitch-loading-size);height:var(--brand-ToggleSwitch-loading-size);pointer-events:none;justify-content:center;align-items:center;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:var(--brand-ToggleSwitch-loading-fgColor);animation-duration:var(--brand-ToggleSwitch-loading-duration)}@media (prefers-reduced-motion:reduce){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{transition:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{animation:none}}@media (forced-colors:active){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{background:canvas;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{forced-color-adjust:none;background:buttontext;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:graytext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline-color:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:canvastext}}

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js

@@ -0,0 +1,18 @@
+import './ToggleSwitch.module-C_gXnHNW.css';//#region src/forms/ToggleSwitch/ToggleSwitch.module.css
+var e = "Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE", t = {
+	ToggleSwitch: e,
+	"ToggleSwitch-button": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ",
+	"ToggleSwitch-track": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK",
+	"ToggleSwitch-button--unavailable": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR",
+	"ToggleSwitch-thumb": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM",
+	"ToggleSwitch-thumb--checked": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd",
+	"ToggleSwitch-thumb--disabled": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX",
+	"ToggleSwitch--medium": "Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC",
+	"ToggleSwitch--small": "Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp",
+	"ToggleSwitch-spinnerSlot": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinnerSlot___kHm79",
+	"ToggleSwitch-spinner": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX"
+};
+//#endregion
+export { e as ToggleSwitch, t as default };
+
+//# sourceMappingURL=ToggleSwitch.module.js.map

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.module.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.module.css"],"sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n}\n\n.ToggleSwitch-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--brand-ToggleSwitch-target-minHeight);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ToggleSwitch-button:focus-visible {\n  outline: none;\n}\n\n.ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);\n  outline-offset: var(--brand-ToggleSwitch-focus-offset);\n}\n\n.ToggleSwitch-button--unavailable {\n  cursor: not-allowed;\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);\n  border-radius: var(--brand-ToggleSwitch-track-borderRadius);\n  background: var(--brand-ToggleSwitch-track-bgColor);\n}\n\n.ToggleSwitch-thumb {\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);\n  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);\n  transform: translateY(-50%);\n  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);\n}\n\n.ToggleSwitch-thumb--disabled {\n  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-medium);\n  height: var(--brand-ToggleSwitch-track-height-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-small);\n  height: var(--brand-ToggleSwitch-track-height-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-medium);\n  height: var(--brand-ToggleSwitch-thumb-size-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-small);\n  height: var(--brand-ToggleSwitch-thumb-size-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-medium)\n  );\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-small)\n  );\n}\n\n.ToggleSwitch-spinnerSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--brand-ToggleSwitch-loading-size);\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  pointer-events: none;\n}\n\n.ToggleSwitch-spinner {\n  color: var(--brand-ToggleSwitch-loading-fgColor);\n  animation-duration: var(--brand-ToggleSwitch-loading-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ToggleSwitch-thumb {\n    transition: none;\n  }\n\n  .ToggleSwitch-spinner {\n    animation: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .ToggleSwitch-track {\n    border-color: ButtonText;\n    background: Canvas;\n  }\n\n  .ToggleSwitch-thumb,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: ButtonText;\n  }\n\n  .ToggleSwitch-thumb--checked,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n    background: Highlight;\n  }\n\n  .ToggleSwitch-thumb--disabled {\n    background: GrayText;\n  }\n\n  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n    outline-color: Highlight;\n  }\n\n  .ToggleSwitch-spinner {\n    color: CanvasText;\n  }\n}\n"],"mappings":""}

package/esm/forms/ToggleSwitch/index.d.ts

@@ -0,0 +1,3 @@
+export { ToggleSwitch } from './ToggleSwitch';
+export type { ToggleSwitchProps } from './ToggleSwitch';
+//# sourceMappingURL=index.d.ts.map

package/esm/forms/ToggleSwitch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/ToggleSwitch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAA;AAC3C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA"}

package/esm/forms/index.d.ts

@@ -7,4 +7,5 @@ export * from './FormControl';
 export * from './form-types';
 export * from './CheckboxGroup';
 export * from './RadioGroup';
+export * from './ToggleSwitch';
 //# sourceMappingURL=index.d.ts.map

package/esm/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA"}

package/esm/index.d.ts

@@ -5,6 +5,7 @@ export * from './Heading';
 export * from './ThemeProvider';
 export * from './Button';
 export * from './IconButton';
+export * from './Spinner';
 export * from './ButtonGroup';
 export * from './river';
 export * from './MediaPlaylist';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}