@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.4db5fc89

package/esm/forms/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n  /**\n   * Apply inactive visual appearance to the Radio\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the Radio must be checked\n   */\n  required?: boolean\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which Radio inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n  {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Radio-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-checked={checked ? 'true' : 'false'}\n        checked={checked}\n        className={clsx(styles['Radio-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"radio\"\n        value={value}\n        {...rest}\n      />\n      <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n        <span className={styles['Radio-dot']} />\n      </span>\n    </span>\n  )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":";;;;;;AA8DA,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n  /**\n   * Apply inactive visual appearance to the Radio\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the Radio must be checked\n   */\n  required?: boolean\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which Radio inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n  {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Radio-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-checked={checked ? 'true' : 'false'}\n        checked={checked}\n        className={clsx(styles['Radio-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"radio\"\n        value={value}\n        {...rest}\n      />\n      <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n        <span className={styles['Radio-dot']} />\n      </span>\n    </span>\n  )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":";;;;;;;AA+DA,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}

package/esm/forms/Select/Select.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type SelectProps = {
     /**
      * Applies full width styling.

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAEvE,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}

package/esm/forms/Select/Select.js

@@ -1,4 +1,5 @@
 import 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 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/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Placeholder text to display when no value is selected\n   */\n  placeholder?: string\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n  BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n  {\n    children,\n    className,\n    disabled,\n    fullWidth = false,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    ...rest\n  }: SelectProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Select-wrapper'],\n        styles[`Select-wrapper--${size}`],\n        fullWidth && styles['Select-wrapper--fullWidth'],\n        validationStatus && styles[`Select--${validationStatus}`],\n        disabled && styles[`Select-wrapper--disabled`],\n      )}\n    >\n      <select\n        aria-invalid={validationStatus === 'error'}\n        className={clsx(\n          styles.Select,\n          styles[`Select--${size}`],\n          'Select',\n          fullWidth && styles['Select--fullWidth'],\n          className,\n        )}\n        disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={disabled}>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n    </span>\n  )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n  value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n  return (\n    <option value={value} {...rest}>\n      {children}\n    </option>\n  )\n}\n\nexport type OptGroupProps = {\n  /**\n   * Specifies that an option-group should be disabled\n   */\n  disabled?: string\n  /**\n   * Specifies a label for an option-group\n   */\n  label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n  return (\n    <optgroup label={label} {...rest}>\n      {children}\n    </optgroup>\n  )\n}\n\n/**\n * Select\n */\nexport const Select = Object.assign(SelectRoot, {\n  Option,\n  OptGroup,\n})\n"],"mappings":";;;;AA+EA,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Placeholder text to display when no value is selected\n   */\n  placeholder?: string\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n  BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n  {\n    children,\n    className,\n    disabled,\n    fullWidth = false,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    ...rest\n  }: SelectProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Select-wrapper'],\n        styles[`Select-wrapper--${size}`],\n        fullWidth && styles['Select-wrapper--fullWidth'],\n        validationStatus && styles[`Select--${validationStatus}`],\n        disabled && styles[`Select-wrapper--disabled`],\n      )}\n    >\n      <select\n        aria-invalid={validationStatus === 'error'}\n        className={clsx(\n          styles.Select,\n          styles[`Select--${size}`],\n          'Select',\n          fullWidth && styles['Select--fullWidth'],\n          className,\n        )}\n        disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={disabled}>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n    </span>\n  )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n  value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n  return (\n    <option value={value} {...rest}>\n      {children}\n    </option>\n  )\n}\n\nexport type OptGroupProps = {\n  /**\n   * Specifies that an option-group should be disabled\n   */\n  disabled?: string\n  /**\n   * Specifies a label for an option-group\n   */\n  label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n  return (\n    <optgroup label={label} {...rest}>\n      {children}\n    </optgroup>\n  )\n}\n\n/**\n * Select\n */\nexport const Select = Object.assign(SelectRoot, {\n  Option,\n  OptGroup,\n})\n"],"mappings":";;;;;AAgFA,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}

package/esm/forms/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 import type { Icon } from '@primer/octicons-react';
 type VisualType = React.ReactElement | React.ReactNode | Icon;
 export type TextInputProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvE,OAAO,2GAA2G,CAAA;AAElH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}

package/esm/forms/TextInput/TextInput.js

@@ -1,6 +1,7 @@
 import 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 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/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":";;;;;;AA6NA,IAAa,IAAY,GA/JvB,EACE,cACA,aACA,eAAY,IACZ,eAAY,IACZ,gBACA,eAAe,GACf,cACA,gBACA,UAAO,UACP,iBACA,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAW,GAAO,EAElB,IAAkB,KAAe,CAAC,GAClC,IAAoB,KAAiB,CAAC,GACtC,IAAmB,KAAgB,CAAC,GACpC,IAAqB,KAAkB,CAAC,GAExC,IAAgB,GAAG,EAAS,gBAC5B,IAAkB,GAAG,EAAS,kBAC9B,IAAmB,GAAG,EAAS,mBAC/B,IAAiB,GAAG,EAAS,iBAE7B,IAAc,QAQX;EANL;GAAC,WAAW;GAAiB,IAAI;GAAc;EAC/C;GAAC,WAAW;GAAmB,IAAI;GAAgB;EACnD;GAAC,WAAW;GAAoB,IAAI;GAAiB;EACrD;GAAC,WAAW;GAAkB,IAAI;GAAe;EAG5C,CACJ,QAAQ,EAAC,mBAAe,EAAU,CAClC,KAAK,EAAC,YAAQ,EAAG,CACjB,KAAK,IAAI,EACX;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,sBACP,EAAO,sBAAsB,MAC7B,KAAa,EAAO,iCACpB,KAAa,EAAO,iCACpB,KAAY,EAAO,gCACnB,KAAa,EAAO,iCACpB,KAAoB,EAAO,sBAAsB,KAClD;YATH;GAWG,KACC,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,2BACP,EAAO,2BAA2B,MAClC,KAAY,EAAO,qCACnB,KAAoB,EAAO,2BAA2B,KACvD;cAED,kBAAC,GAAD;KACE,MAAM,MAAS,UAAU,QAAQ;KACjC,IAAG;KACH,WAAW,EAAK,EAAO,iCAAiC,EAAO,iCAAiC,KAAQ;KACxG,IAAI;eAEH;KACI,CAAA;IACF,CAAA;GAER,KACC,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,6BAA6B,EAAO,6BAA6B,KAAQ;cACnG,KACD,EAAM,eAAmF,EAAc,GACnG,EAAM,aAAa,GAAe;KAChC,WAAW,EACT,EAAO,kCACP,EAAO,kCAAkC,KAC1C;KACD,OAAO,MAAS,UAAU,KAAK;KAC/B,QAAQ,MAAS,UAAU,KAAK;KAChC,IAAI;KACL,CAAC,GACF;IACC,CAAA;GAET,kBAAC,SAAD;IACE,MAAK;IACA;IACL,WAAW,EACT,EAAO,WACP,aACA,EAAO,cAAc,MACrB,KAAa,EAAO,yBACpB,KAAiB,EAAO,kCAAkC,MAC1D,KAAkB,EAAO,mCAAmC,MAC5D,KAAoB,EAAO,cAAc,MACzC,KAAe,CAAC,KAAiB,EAAO,gCACxC,KAAgB,CAAC,KAAkB,EAAO,iCAC1C,EACD;IACY;IACH;IACV,gBAAc,MAAqB;IACnC,oBAAkB,KAAe,KAAA;IACjC,GAAI;IACJ,CAAA;GACD,KACC,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,8BAA8B,EAAO,8BAA8B,KAAQ;cACrG,KACD,EAAM,eAAmF,EAAe,GACpG,EAAM,aAAa,GAAgB;KACjC,WAAW,EACT,EAAO,mCACP,EAAO,mCAAmC,KAC3C;KACD,OAAO,MAAS,UAAU,KAAK;KAC/B,QAAQ,MAAS,UAAU,KAAK;KAChC,IAAI;KACL,CAAC,GACF;IACC,CAAA;GAER,KACC,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,4BACP,EAAO,4BAA4B,MACnC,KAAY,EAAO,sCACnB,KAAoB,EAAO,4BAA4B,KACxD;cAED,kBAAC,GAAD;KACE,MAAM,MAAS,UAAU,QAAQ;KACjC,IAAG;KACH,WAAW,EAAK,EAAO,kCAAkC,EAAO,kCAAkC,KAAQ;KAC1G,IAAI;eAEH;KACI,CAAA;IACF,CAAA;GAEJ;;EAI2C;AAEtD,EAAU,cAAc"}
+{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}

package/esm/forms/Textarea/Textarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export declare const DEFAULT_TEXTAREA_ROWS = 7;
 export declare const DEFAULT_TEXTAREA_COLS = 30;
 export declare const DEFAULT_TEXTAREA_RESIZE = "both";

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAEvE,OAAO,2GAA2G,CAAA;AAGlH,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}

package/esm/forms/Textarea/Textarea.js

@@ -1,4 +1,5 @@
 import 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 t from "./Textarea.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/esm/forms/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport styles from './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;AAQA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}

package/esm/forms/index.d.ts

@@ -1,7 +1,3 @@
-/**
- * Shared form (control) design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export * from './Checkbox';
 export * from './Textarea';
 export * from './TextInput';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2GAA2G,CAAA;AAElH,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"}

package/esm/hooks/useFocusTrap.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-export interface FocusTrapHookSettings {
+export interface FocusTrapHookSettings<ContainerElement extends HTMLElement = HTMLElement, InitialFocusElement extends HTMLElement = HTMLElement> {
     /**
-     * Ref that will be used for the trapping container. If not provided, one will
+     * Ref object that will be used for the trapping container. If not provided, one will
      * be created by this hook and returned.
      */
-    containerRef: React.RefObject<HTMLElement | null>;
+    containerRef?: React.RefObject<ContainerElement | null>;
     /**
-     * Ref for the element that should receive focus when the focus trap is first enabled.
+     * Ref object for the element that should receive focus when the focus trap is first enabled.
      * If not provided, one will be created by this hook and returned. Its use is optional.
      */
-    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<InitialFocusElement | null>;
     /**
      * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.
      */
@@ -24,8 +24,8 @@ export interface FocusTrapHookSettings {
  * that should trap focus.
  * @param settings {FocusTrapHookSettings}
  */
-export declare function useFocusTrap(settings?: FocusTrapHookSettings, dependencies?: React.DependencyList): {
-    containerRef: React.RefObject<HTMLElement | null> | undefined;
-    initialFocusRef: React.RefObject<HTMLElement | null> | undefined;
+export declare function useFocusTrap<ContainerElement extends HTMLElement = HTMLElement, InitialFocusElement extends HTMLElement = HTMLElement>(settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<ContainerElement | null>;
+    initialFocusRef: React.RefObject<InitialFocusElement | null>;
 };
 //# sourceMappingURL=useFocusTrap.d.ts.map

package/esm/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAEjD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAChC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAA;IAC7D,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAA;CACjE,CAyCA"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,qBAAqB,CACpC,gBAAgB,SAAS,WAAW,GAAG,WAAW,EAClD,mBAAmB,SAAS,WAAW,GAAG,WAAW;IAErD;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAEvD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;IAE7D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,gBAAgB,SAAS,WAAW,GAAG,WAAW,EAClD,mBAAmB,SAAS,WAAW,GAAG,WAAW,EAErD,QAAQ,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,EACvE,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IACtD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAC7D,CAsCA"}

package/esm/hooks/useFocusTrap.js

@@ -1,28 +1,28 @@
-import e from "react";
-import { focusTrap as t } from "@primer/behaviors";
+import { useProvidedRefOrCreate as e } from "./useRef.js";
+import t from "react";
+import { focusTrap as n } from "@primer/behaviors";
 //#region src/hooks/useFocusTrap.ts
-function n(n, r = []) {
-	let i = n?.containerRef, a = n?.initialFocusRef, o = n?.disabled, s = e.useRef(null), c = e.useRef(null);
-	!c.current && !n?.disabled && (c.current = document.activeElement);
-	function l() {
-		s.current?.abort(), n?.restoreFocusOnCleanUp && c.current instanceof HTMLElement && (c.current.focus(), c.current = null);
+function r(r, i = []) {
+	let a = e(r?.containerRef), o = e(r?.initialFocusRef), s = r?.disabled, c = t.useRef(null), l = t.useRef(null);
+	function u() {
+		c.current?.abort(), r?.restoreFocusOnCleanUp && l.current instanceof HTMLElement && l.current.focus(), l.current = null;
 	}
-	return e.useEffect(() => {
-		if (i?.current instanceof HTMLElement) if (o) l();
-		else return s.current = t(i.current, a?.current ?? void 0) ?? null, () => {
-			l();
+	return t.useEffect(() => {
+		if (a.current instanceof HTMLElement) if (s) u();
+		else return l.current ||= document.activeElement, c.current = n(a.current, o.current ?? void 0) ?? null, () => {
+			u();
 		};
 	}, [
-		i,
 		a,
 		o,
-		...r
+		s,
+		...i
 	]), {
-		containerRef: i,
-		initialFocusRef: a
+		containerRef: a,
+		initialFocusRef: o
 	};
 }
 //#endregion
-export { n as useFocusTrap };
+export { r as useFocusTrap };
 
 //# sourceMappingURL=useFocusTrap.js.map

package/esm/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\n\nexport interface FocusTrapHookSettings {\n  /**\n   * Ref that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef: React.RefObject<HTMLElement | null>\n\n  /**\n   * Ref for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<HTMLElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap(\n  settings?: FocusTrapHookSettings,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<HTMLElement | null> | undefined\n  initialFocusRef: React.RefObject<HTMLElement | null> | undefined\n} {\n  const containerRef = settings?.containerRef\n  const initialFocusRef = settings?.initialFocusRef\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // If we are enabling a focus trap and haven't already stored the previously focused element\n  // go ahead an do that so we can restore later when the trap is disabled.\n  if (!previousFocusedElement.current && !settings?.disabled) {\n    previousFocusedElement.current = document.activeElement\n  }\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n      previousFocusedElement.current = null\n    }\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef?.current instanceof HTMLElement) {\n        if (!disabled) {\n          abortController.current = focusTrap(containerRef.current, initialFocusRef?.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;AAgCA,SAAgB,EACd,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,GAAU,cACzB,IAAkB,GAAU,iBAC5B,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;AAIjE,CAAI,CAAC,EAAuB,WAAW,CAAC,GAAU,aAChD,EAAuB,UAAU,SAAS;CAK5C,SAAS,IAAc;AAErB,EADA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,gBAC/E,EAAuB,QAAQ,OAAO,EACtC,EAAuB,UAAU;;AAqBrC,QAjBA,EAAM,gBACE;AACJ,MAAI,GAAc,mBAAmB,YACnC,KAAK,EAMH,IAAa;MAJb,QADA,EAAgB,UAAU,EAAU,EAAa,SAAS,GAAiB,WAAW,KAAA,EAAU,IAAI,YACvF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\nimport {useProvidedRefOrCreate} from './useRef'\n\nexport interface FocusTrapHookSettings<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Ref object that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef?: React.RefObject<ContainerElement | null>\n\n  /**\n   * Ref object for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<InitialFocusElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n>(\n  settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<ContainerElement | null>\n  initialFocusRef: React.RefObject<InitialFocusElement | null>\n} {\n  const containerRef = useProvidedRefOrCreate<ContainerElement | null>(settings?.containerRef)\n  const initialFocusRef = useProvidedRefOrCreate<InitialFocusElement | null>(settings?.initialFocusRef)\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n    }\n    previousFocusedElement.current = null\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef.current instanceof HTMLElement) {\n        if (!disabled) {\n          if (!previousFocusedElement.current) {\n            previousFocusedElement.current = document.activeElement\n          }\n          abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAId,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,EAAgD,GAAU,aAAa,EACtF,IAAkB,EAAmD,GAAU,gBAAgB,EAC/F,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;CAIjE,SAAS,IAAc;AAKrB,EAJA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,eAC/E,EAAuB,QAAQ,OAAO,EAExC,EAAuB,UAAU;;AAuBnC,QApBA,EAAM,gBACE;AACJ,MAAI,EAAa,mBAAmB,YAClC,KAAK,EASH,IAAa;MAJb,QAJA,AACE,EAAuB,YAAU,SAAS,eAE5C,EAAgB,UAAU,EAAU,EAAa,SAAS,EAAgB,WAAW,KAAA,EAAU,IAAI,YACtF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}

package/esm/index.d.ts

@@ -56,5 +56,6 @@ export * from './SectionIntroStacked';
 export * from './Tabs';
 export * from './TextCursorAnimation';
 export * from './Tiles';
+export * from './hooks/useFocusTrap';
 export * from './hooks/useWindowSize';
 //# sourceMappingURL=index.d.ts.map

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,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,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,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,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,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,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,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,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,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"}

package/esm/index.esm.js

@@ -10,70 +10,71 @@ import { Text as S, TextFontVariants as C, TextSizes as w, TextTags as T, TextVa
 import { EyebrowText as M, EyebrowTextVariants as N } from "./EyebrowText/EyebrowText.js";
 import { TextCursorAnimation as P, testIds as F } from "./TextCursorAnimation/TextCursorAnimation.js";
 import { Heading as I, HeadingFontVariants as L, HeadingLetterSpacing as R, HeadingSizes as z, HeadingStretch as B, HeadingTags as V, HeadingWeights as H, classMap as U, defaultHeadingFont as W, defaultHeadingTag as G } from "./Heading/Heading.js";
-import { Image as K, ImageBorderRadiusOptions as q } from "./Image/Image.js";
-import { Button as J, ButtonSizes as Y, ButtonVariants as X, _Button as Z, defaultButtonSize as Q, defaultButtonVariant as $ } from "./Button/Button.js";
-import { Hero as ee } from "./Hero/Hero.js";
-import { ColorModesEnum as te, ThemeContext as ne, ThemeProvider as re } from "./ThemeProvider/ThemeProvider.js";
-import { useTheme as ie } from "./ThemeProvider/useTheme.js";
-import { ButtonGroup as ae } from "./ButtonGroup/ButtonGroup.js";
-import { RiverAccordion as oe, RiverAccordionVariants as se } from "./river/RiverAccordion/RiverAccordion.js";
-import { Link as ce, LinkArrowDirections as le, LinkSizes as ue, LinkVariants as de } from "./Link/Link.js";
-import { Label as fe, LabelColors as pe, LabelSizes as me, defaultLabelColor as he, defaultLabelSize as ge } from "./Label/Label.js";
-import { River as _e, defaultRiverAlign as ve, defaultRiverImageTextRatio as ye, defaultRiverVariant as be } from "./river/River/River.js";
-import { RiverBreakout as xe, RiverBreakoutVariants as Se } from "./river/RiverBreakout/RiverBreakout.js";
-import { Icon as Ce, defaultIconColor as we, defaultIconSize as Te, iconColors as Ee, iconSizeMap as De, iconSizes as Oe, namedIconSizes as ke, numericIconSizes as Ae } from "./Icon/Icon.js";
-import { BreakpointSize as je, useWindowSize as Me } from "./hooks/useWindowSize.js";
-import { RiverBreakoutTabs as Ne } from "./river/RiverBreakoutTabs/RiverBreakoutTabs.js";
-import { RiverStoryScroll as Pe } from "./river/RiverStoryScroll/RiverStoryScroll.js";
-import { Pagination as Fe } from "./Pagination/Pagination.js";
-import { MediaPlaylist as Ie } from "./MediaPlaylist/MediaPlaylist.js";
-import { SubdomainNavBar as Le } from "./SubdomainNavBar/SubdomainNavBar.js";
-import { InlineLink as Re } from "./InlineLink/InlineLink.js";
-import { Token as ze, TokenVariants as Be, defaultTokenVariant as Ve } from "./Token/Token.js";
-import { Accordion as He, AccordionContent as Ue, AccordionHeading as We, AccordionRoot as Ge, AccordionToggleColors as Ke } from "./Accordion/Accordion.js";
-import { FAQ as qe } from "./FAQ/FAQ.js";
-import { FAQGroup as Je } from "./FAQ/FAQGroup.js";
-import { Checkbox as Ye } from "./forms/Checkbox/Checkbox.js";
-import { DEFAULT_TEXTAREA_COLS as Xe, DEFAULT_TEXTAREA_RESIZE as Ze, DEFAULT_TEXTAREA_ROWS as Qe, Textarea as $e } from "./forms/Textarea/Textarea.js";
-import { TextInput as et } from "./forms/TextInput/TextInput.js";
-import { Select as tt } from "./forms/Select/Select.js";
-import { Radio as nt } from "./forms/Radio/Radio.js";
-import { FormControl as rt } from "./forms/FormControl/FormControl.js";
-import { CheckboxGroup as it } from "./forms/CheckboxGroup/CheckboxGroup.js";
-import { RadioGroup as at } from "./forms/RadioGroup/RadioGroup.js";
-import { Avatar as ot, AvatarShapes as st, AvatarSizes as ct } from "./Avatar/Avatar.js";
-import { Testimonial as lt, TestimonialQuoteMarkColors as ut, TestimonialVariants as dt, defaultQuoteMarkColor as ft, defaultTestimonialVariant as pt } from "./Testimonial/Testimonial.js";
-import { ComparisonTable as mt, _ComparisonTable as ht } from "./ComparisonTable/ComparisonTable.js";
-import { AnchorNav as gt } from "./AnchorNav/AnchorNav.js";
-import { CTABanner as _t, CTABannerBackgroundColors as vt } from "./CTABanner/CTABanner.js";
-import { UnorderedList as yt } from "./list/UnorderedList/UnorderedList.js";
-import { OrderedList as bt } from "./list/OrderedList/OrderedList.js";
-import { CTAForm as xt } from "./CTAForm/CTAForm.js";
-import { MinimalFooter as St } from "./MinimalFooter/MinimalFooter.js";
-import { Pillar as Ct, defaultPillarIconColor as wt, defaultPillarIconSize as Tt } from "./Pillar/Pillar.js";
-import { Card as Et, CardBackgroundColors as Dt, CardCTAVariants as Ot, CardIconColors as kt, CardLabelVariants as At, CardTokenPositions as jt, CardVariants as Mt, defaultCardCTAVariant as Nt, defaultCardIconColor as Pt, defaultCardLabelVariant as Ft } from "./Card/Card.js";
-import { CardSkewEffect as It } from "./Card/CardSkewEffect.js";
-import { SectionIntro as Lt } from "./SectionIntro/SectionIntro.js";
-import { ActionMenu as Rt, ActionMenuButtonModes as zt, ActionMenuProvider as Bt, ActionMenuSizes as Vt, actionMenuOverlaySides as Ht, useActionMenuContext as Ut } from "./ActionMenu/ActionMenu.js";
-import { Prose as Wt } from "./Prose/Prose.js";
-import { useVideo as Gt } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Kt } from "./VideoPlayer/VideoPlayer.js";
-import { LogoSuite as qt } from "./LogoSuite/LogoSuite.js";
-import { Timeline as Jt } from "./Timeline/Timeline.js";
-import { Bento as Yt } from "./Bento/Bento.js";
-import { EyebrowBanner as Xt, EyebrowBannerIconColors as Zt, EyebrowBannerLabelColors as Qt, defaultEyebrowBannerIconColor as $t } from "./EyebrowBanner/EyebrowBanner.js";
-import { Tooltip as en, TooltipContext as tn } from "./Tooltip/Tooltip.js";
-import { PricingOptions as nn } from "./PricingOptions/PricingOptions.js";
-import { SubNav as rn, SubNavSubMenuVariants as an, useSubNavContext as on } from "./SubNav/SubNav.js";
-import { NavList as sn } from "./NavList/NavList.js";
-import { IDE as cn, IDEDefaultIconMap as ln, IDEFileExtensions as un } from "./IDE/IDE.js";
-import { BreadcrumbVariants as dn, Breadcrumbs as fn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as pn, SectionBackgroundColors as mn, SectionPaddingVariants as hn } from "./Section/Section.js";
-import { Statistic as gn, StatisticSizes as _n, StatisticSpacingValues as vn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as yn, BreakoutBannerBackgroundColors as bn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as xn, FootnotesItemTags as Sn, FootnotesTags as Cn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as wn, FrostedGlassVFXIntensity as Tn, defaultFrostedGlassVFXIntensity as En } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as Dn, SectionIntroStackedVariants as On } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as kn } from "./Tabs/Tabs.js";
-import { Tiles as An } from "./Tiles/Tiles.js";
-export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, dn as BreadcrumbVariants, fn as Breadcrumbs, yn as BreakoutBanner, bn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, xn as Footnotes, Sn as FootnotesItemTags, Cn as FootnotesTags, rt as FormControl, wn as FrostedGlassVFX, Tn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, cn as IDE, ln as IDEDefaultIconMap, un as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, sn as NavList, bt as OrderedList, Fe as Pagination, Ct as Pillar, nn as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, pn as Section, mn as SectionBackgroundColors, Lt as SectionIntro, Dn as SectionIntroStacked, On as SectionIntroStackedVariants, hn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, gn as Statistic, _n as StatisticSizes, vn as StatisticSpacingValues, rn as SubNav, an as SubNavSubMenuVariants, Le as SubdomainNavBar, kn as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, An as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, en as Tooltip, tn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, En as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, on as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };
+import { Button as K, ButtonSizes as q, ButtonVariants as J, _Button as Y, defaultButtonSize as X, defaultButtonVariant as Z } from "./Button/Button.js";
+import { ColorModesEnum as Q, ThemeContext as $, ThemeProvider as ee } from "./ThemeProvider/ThemeProvider.js";
+import { useTheme as te } from "./ThemeProvider/useTheme.js";
+import { ActionMenu as ne, ActionMenuButtonModes as re, ActionMenuProvider as ie, ActionMenuSizes as ae, actionMenuOverlaySides as oe, useActionMenuContext as se } from "./ActionMenu/ActionMenu.js";
+import { ButtonGroup as ce } from "./ButtonGroup/ButtonGroup.js";
+import { Image as le, ImageBorderRadiusOptions as ue } from "./Image/Image.js";
+import { Hero as de } from "./Hero/Hero.js";
+import { RiverAccordion as fe, RiverAccordionVariants as pe } from "./river/RiverAccordion/RiverAccordion.js";
+import { Link as me, LinkArrowDirections as he, LinkSizes as ge, LinkVariants as _e } from "./Link/Link.js";
+import { Label as ve, LabelColors as ye, LabelSizes as be, defaultLabelColor as xe, defaultLabelSize as Se } from "./Label/Label.js";
+import { River as Ce, RiverVisualPaddingOptions as we, RiverVisualPositionOptions as Te, defaultRiverAlign as Ee, defaultRiverImageTextRatio as De, defaultRiverVariant as Oe } from "./river/River/River.js";
+import { RiverBreakout as ke, RiverBreakoutVariants as Ae } from "./river/RiverBreakout/RiverBreakout.js";
+import { Icon as je, defaultIconColor as Me, defaultIconSize as Ne, iconColors as Pe, iconSizeMap as Fe, iconSizes as Ie, namedIconSizes as Le, numericIconSizes as Re } from "./Icon/Icon.js";
+import { BreakpointSize as ze, useWindowSize as Be } from "./hooks/useWindowSize.js";
+import { RiverBreakoutTabs as Ve } from "./river/RiverBreakoutTabs/RiverBreakoutTabs.js";
+import { RiverStoryScroll as He } from "./river/RiverStoryScroll/RiverStoryScroll.js";
+import { Pagination as Ue } from "./Pagination/Pagination.js";
+import { MediaPlaylist as We } from "./MediaPlaylist/MediaPlaylist.js";
+import { useFocusTrap as Ge } from "./hooks/useFocusTrap.js";
+import { SubdomainNavBar as Ke } from "./SubdomainNavBar/SubdomainNavBar.js";
+import { InlineLink as qe } from "./InlineLink/InlineLink.js";
+import { Token as Je, TokenVariants as Ye, defaultTokenVariant as Xe } from "./Token/Token.js";
+import { Accordion as Ze, AccordionContent as Qe, AccordionHeading as $e, AccordionRoot as et, AccordionToggleColors as tt } from "./Accordion/Accordion.js";
+import { FAQ as nt } from "./FAQ/FAQ.js";
+import { FAQGroup as rt } from "./FAQ/FAQGroup.js";
+import { Checkbox as it } from "./forms/Checkbox/Checkbox.js";
+import { DEFAULT_TEXTAREA_COLS as at, DEFAULT_TEXTAREA_RESIZE as ot, DEFAULT_TEXTAREA_ROWS as st, Textarea as ct } from "./forms/Textarea/Textarea.js";
+import { TextInput as lt } from "./forms/TextInput/TextInput.js";
+import { Select as ut } from "./forms/Select/Select.js";
+import { Radio as dt } from "./forms/Radio/Radio.js";
+import { FormControl as ft } from "./forms/FormControl/FormControl.js";
+import { CheckboxGroup as pt } from "./forms/CheckboxGroup/CheckboxGroup.js";
+import { RadioGroup as mt } from "./forms/RadioGroup/RadioGroup.js";
+import { Avatar as ht, AvatarShapes as gt, AvatarSizes as _t } from "./Avatar/Avatar.js";
+import { Testimonial as vt, TestimonialQuoteMarkColors as yt, TestimonialVariants as bt, defaultQuoteMarkColor as xt, defaultTestimonialVariant as St } from "./Testimonial/Testimonial.js";
+import { ComparisonTable as Ct, _ComparisonTable as wt } from "./ComparisonTable/ComparisonTable.js";
+import { AnchorNav as Tt } from "./AnchorNav/AnchorNav.js";
+import { CTABanner as Et, CTABannerBackgroundColors as Dt } from "./CTABanner/CTABanner.js";
+import { UnorderedList as Ot } from "./list/UnorderedList/UnorderedList.js";
+import { OrderedList as kt } from "./list/OrderedList/OrderedList.js";
+import { CTAForm as At } from "./CTAForm/CTAForm.js";
+import { MinimalFooter as jt } from "./MinimalFooter/MinimalFooter.js";
+import { Pillar as Mt, defaultPillarIconColor as Nt, defaultPillarIconSize as Pt } from "./Pillar/Pillar.js";
+import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardLabelVariants as zt, CardTokenPositions as Bt, CardVariants as Vt, defaultCardCTAVariant as Ht, defaultCardIconColor as Ut, defaultCardLabelVariant as Wt } from "./Card/Card.js";
+import { CardSkewEffect as Gt } from "./Card/CardSkewEffect.js";
+import { SectionIntro as Kt } from "./SectionIntro/SectionIntro.js";
+import { Prose as qt } from "./Prose/Prose.js";
+import { useVideo as Jt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Yt } from "./VideoPlayer/VideoPlayer.js";
+import { LogoSuite as Xt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as Zt } from "./Timeline/Timeline.js";
+import { Bento as Qt } from "./Bento/Bento.js";
+import { EyebrowBanner as $t, EyebrowBannerIconColors as en, EyebrowBannerLabelColors as tn, defaultEyebrowBannerIconColor as nn } from "./EyebrowBanner/EyebrowBanner.js";
+import { Tooltip as rn, TooltipContext as an } from "./Tooltip/Tooltip.js";
+import { PricingOptions as on } from "./PricingOptions/PricingOptions.js";
+import { SubNav as sn, SubNavSubMenuVariants as cn, useSubNavContext as ln } from "./SubNav/SubNav.js";
+import { NavList as un } from "./NavList/NavList.js";
+import { IDE as dn, IDEDefaultIconMap as fn, IDEFileExtensions as pn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as mn, Breadcrumbs as hn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as gn, SectionBackgroundColors as _n, SectionPaddingVariants as vn } from "./Section/Section.js";
+import { Statistic as yn, StatisticSizes as bn, StatisticSpacingValues as xn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as Sn, BreakoutBannerBackgroundColors as Cn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as wn, FootnotesItemTags as Tn, FootnotesTags as En } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as Dn, FrostedGlassVFXIntensity as On, defaultFrostedGlassVFXIntensity as kn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as An, SectionIntroStackedVariants as jn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Mn } from "./Tabs/Tabs.js";
+import { Tiles as Nn } from "./Tiles/Tiles.js";
+export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, Qt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, mn as BreadcrumbVariants, hn as Breadcrumbs, Sn as BreakoutBanner, Cn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardLabelVariants, Gt as CardSkewEffect, Bt as CardTokenPositions, Vt as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, $t as EyebrowBanner, en as EyebrowBannerIconColors, tn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, wn as Footnotes, Tn as FootnotesItemTags, En as FootnotesTags, ft as FormControl, Dn as FrostedGlassVFX, On as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, dn as IDE, fn as IDEDefaultIconMap, pn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Xt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, un as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, on as PricingOptions, qt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, gn as Section, _n as SectionBackgroundColors, Kt as SectionIntro, An as SectionIntroStacked, jn as SectionIntroStackedVariants, vn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, yn as Statistic, bn as StatisticSizes, xn as StatisticSpacingValues, sn as SubNav, cn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Mn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Nn as Tiles, Zt as Timeline, Je as Token, Ye as TokenVariants, rn as Tooltip, an as TooltipContext, Ot as UnorderedList, Yt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ht as defaultCardCTAVariant, Ut as defaultCardIconColor, Wt as defaultCardLabelVariant, nn as defaultEyebrowBannerIconColor, O as defaultFontVariant, kn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, ln as useSubNavContext, te as useTheme, Jt as useVideo, Be as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-2);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-1);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-4);--brand-control-color-focus:var(--base-color-scale-blue-6);--brand-control-checkbox-bg-default:var(--base-color-scale-white-0);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-6);--brand-control-checkbox-bg-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-bg-indeterminate-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:var(--base-color-scale-white-0);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-4);--brand-control-checkbox-border-checked:var(--base-color-scale-green-6);--brand-control-checkbox-border-checked-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-border-indeterminate-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-1);--brand-control-radio-bg-default:var(--base-color-scale-white-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-white-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--brand-control-color-border-default);--brand-control-radio-border-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-checked:var(--brand-control-color-border-default);--brand-control-radio-border-checked-hover:var(--brand-control-color-border-default);--brand-control-radio-border-disabled:var(--base-color-scale-gray-4);--brand-control-radio-dot-default:var(--base-color-scale-black-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-6);--brand-control-radio-dot-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)}[data-color-mode=dark]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-5);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-8);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-5);--brand-control-color-focus:var(--base-color-scale-blue-2);--brand-control-checkbox-bg-default:var(--base-color-scale-gray-7);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-5);--brand-control-checkbox-bg-checked-hover:#309a4d;--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-5);--brand-control-checkbox-bg-indeterminate-hover:#309a4d;--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-5), #000 20%);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-5);--brand-control-checkbox-border-checked:#077726;--brand-control-checkbox-border-checked-hover:#0000001f;--brand-control-checkbox-border-indeterminate:#077726;--brand-control-checkbox-border-indeterminate-hover:#0000001f;--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-5);--brand-control-radio-bg-default:var(--base-color-scale-black-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-black-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--base-color-scale-gray-4);--brand-control-radio-border-hover:var(--base-color-scale-gray-5);--brand-control-radio-border-checked:var(--base-color-scale-gray-4);--brand-control-radio-border-checked-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-disabled:var(--base-color-scale-gray-5);--brand-control-radio-dot-default:var(--base-color-scale-white-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-5);--brand-control-radio-dot-checked-hover:#309a4d}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css

@@ -0,0 +1 @@
+:root{--brand-RiverBreakout-variant-gridline-spacing-contentGap:var(--base-size-16);--brand-RiverBreakout-variant-gridline-spacing-outerInline:var(--base-size-20);--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd:var(--base-size-40);--brand-RiverBreakout-variant-gridline-spacing-outerBlock:var(--base-size-36);--brand-RiverBreakout-spacing-inner:var(--base-size-40);--brand-RiverAccordion-variant-gridline-spacing-contentGap:var(--base-size-32);--brand-RiverAccordion-variant-gridline-spacing-outerInline:var(--base-size-20);--brand-RiverAccordion-variant-gridline-spacing-outerBlock:var(--base-size-40);--brand-River-variant-gridline-spacing-outerInline:var(--base-size-20);--brand-River-variant-gridline-spacing-outerBlock:var(--base-size-40);--brand-River-variant-gridline-visual-padding:var(--base-size-32);--brand-River-spacing-outerBlock:var(--base-size-36);--brand-River-spacing-innerY:var(--base-size-24);--brand-River-spacing-inner:var(--base-size-40)}@media (width>=768px){:root{--brand-RiverBreakout-variant-gridline-spacing-contentGap:var(--base-size-20);--brand-RiverBreakout-variant-gridline-spacing-outerInline:var(--base-size-36);--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd:var(--base-size-48);--brand-RiverBreakout-variant-gridline-spacing-outerBlock:var(--base-size-40);--brand-RiverBreakout-spacing-inner:var(--base-size-48);--brand-RiverAccordion-variant-gridline-spacing-outerInline:var(--base-size-36);--brand-RiverAccordion-variant-gridline-spacing-outerBlock:var(--base-size-36);--brand-River-spacing-innerY:var(--base-size-24)}}@media (width>=1012px){:root{--brand-River-variant-gridline-visual-padding:var(--base-size-64)}}@media (width>=1280px){:root{--brand-RiverBreakout-variant-gridline-spacing-contentGap:var(--base-size-24);--brand-RiverBreakout-variant-gridline-spacing-outerInline:var(--base-size-64);--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd:var(--base-size-80);--brand-RiverBreakout-variant-gridline-spacing-outerBlock:var(--base-size-64);--brand-RiverBreakout-spacing-inner:var(--base-size-64);--brand-RiverAccordion-variant-gridline-spacing-contentGap:var(--base-size-64);--brand-RiverAccordion-variant-gridline-spacing-outerInline:var(--base-size-64);--brand-RiverAccordion-variant-gridline-spacing-outerBlock:var(--base-size-64);--brand-River-variant-gridline-spacing-outerInline:var(--base-size-64);--brand-River-variant-gridline-spacing-outerBlock:var(--base-size-64);--brand-River-spacing-outerBlock:var(--base-size-48);--brand-River-spacing-innerY:var(--base-size-32);--brand-River-spacing-inner:var(--base-size-24)}}

package/esm/river/River/River.d.ts

@@ -71,9 +71,11 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const RiverVisualBackgroundColors: readonly ["default", "subtle"];
-export type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number];
-export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export declare const RiverVisualPositionOptions: readonly ["default", "center", "block-end", "block-end-inline-start", "block-end-inline-end"];
+export type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number];
+export declare const RiverVisualPaddingOptions: readonly ["default", "none", "all"];
+export type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number];
+export type RiverVisualBaseProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
      * This can be disabled by setting this prop to `false`.
@@ -89,17 +91,23 @@ export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttribu
      * Can optionally be disabled.
      */
     rounded?: boolean;
+}>;
+export type RiverVisualProps = RiverVisualBaseProps & {
     /**
-     * Applies a background color with padding around the media.
+     * Positions media within the visual region in the gridline variant.
      */
-    imageBackgroundColor?: RiverVisualBackgroundColor;
-}>;
-export declare const Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    position?: RiverVisualPosition;
+    /**
+     * Controls media padding within the visual region in the gridline variant.
+     */
+    padding?: RiverVisualPadding;
+};
+export declare const RiverVisualBase: React.ForwardRefExoticComponent<Omit<RiverVisualBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * Alternating text and image pairs.
  */
 export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=River.d.ts.map