@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.6b1c0843

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":"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"}
+{"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

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