npm - @primer/react-brand - Versions diffs - 0.72.0-rc.c1f51647 → 0.72.0-rc.f8b72452 - Mend

@primer/react-brand 0.72.0-rc.c1f51647 → 0.72.0-rc.f8b72452

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/docs/components/River/react.md CHANGED Viewed

@@ -63,7 +63,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
 ### GridLine variant
-The `gridline` variant adds lateral padding to the River component, making it suitable for use within bordered grid layouts.
+The `gridline` variant adds lateral padding to the River component and applies a full-bleed visual background by default, making it suitable for use within bordered grid layouts.
 ```jsx
 <Stack style={{width: '100%'}}>
@@ -77,45 +77,13 @@ The `gridline` variant adds lateral padding to the River component, making it su
       <Link href="#">Call to action</Link>
     </River.Content>
   </River>
-  <River variant="gridline" align="end">
+  <River variant="gridline">
     <River.Visual>
       <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
     </River.Visual>
     <River.Content>
       <Heading>GridLine variant</Heading>
-      <Text>The variant works with all alignment options.</Text>
-      <Link href="#">Call to action</Link>
-    </River.Content>
-  </River>
-</Stack>
-```
-### Visual with background
-Use the `imageBackgroundColor` prop on `River.Visual` to create a full-bleed container with a background color and the image/video centered inside with padding. This is intended for use with the `gridline` variant.
-```jsx
-<Stack style={{width: '100%'}}>
-  <River variant="gridline">
-    <River.Visual imageBackgroundColor="subtle">
-      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
-    </River.Visual>
-    <River.Content>
-      <Heading>Visual with background</Heading>
-      <Text>
-        The imageBackgroundColor prop creates a full-bleed container with a subtle background, centering the media with
-        padding around it.
-      </Text>
-      <Link href="#">Call to action</Link>
-    </River.Content>
-  </River>
-  <River variant="gridline" align="end">
-    <River.Visual imageBackgroundColor="subtle">
-      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
-    </River.Visual>
-    <River.Content>
-      <Heading>Visual with background (end)</Heading>
-      <Text>The imageBackgroundColor prop works with all alignment options.</Text>
+      <Text>Keep adjacent gridline Rivers aligned in the same direction.</Text>
       <Link href="#">Call to action</Link>
     </River.Content>
   </River>
@@ -258,16 +226,15 @@ Use the `imageBackgroundColor` prop on `River.Visual` to create a full-bleed con
 ### River.Visual and RiverBreakout.Visual `Required`
-| Name                   | Type                    | Default | Description                                                                                                                                                                               |
-| :--------------------- | :---------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fillMedia`            | `boolean`               |   true  | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.                                             |
-| `children`             | `ReactElement`          |         | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                                                                  |
-| `imageBackgroundColor` | `'default'`, `'subtle'` |         | Applies a background color with padding around the media. Use `'subtle'` to create a full-bleed container with the image/video centered inside. Intended for use with `gridline` variant. |
-| `hasShadow`            | `boolean`               | `false` | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                                                                        |
-| `className`            | `string`                |         | Sets a custom class on the root element                                                                                                                                                   |
-| `id`                   | `string`                |         | Sets a custom id                                                                                                                                                                          |
-| `ref`                  | `React.RefObject`       |         | Forward a Ref to the underlying DOM node                                                                                                                                                  |
-| `rounded`              | `boolean`               |  `true` | Toggle visually rounded corners. Enabled by default.                                                                                                                                      |
+| Name        | Type              | Default | Description                                                                                                                                   |
+| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fillMedia` | `boolean`         |   true  | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements. |
+| `children`  | `ReactElement`    |         | Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)                                                      |
+| `hasShadow` | `boolean`         | `false` | Shadow applied to the `children`. Set be `false` when the child node has a transparent background.                                            |
+| `className` | `string`          |         | Sets a custom class on the root element                                                                                                       |
+| `id`        | `string`          |         | Sets a custom id                                                                                                                              |
+| `ref`       | `React.RefObject` |         | Forward a Ref to the underlying DOM node                                                                                                      |
+| `rounded`   | `boolean`         |  `true` | Toggle visually rounded corners. Enabled by default.                                                                                          |
 ### River.Content and RiverBreakout.Content `Required`

package/docs/components/RiverBreakoutTabs/index.md CHANGED Viewed

@@ -163,9 +163,8 @@ import {RiverBreakoutTabs} from '@primer/react-brand'
 ### RiverBreakoutTabs.Visual `Required`
-| Name                   | Type                    | Default | Description                       |
-| :--------------------- | :---------------------- | :-----: | :-------------------------------- |
-| `children`             | `React.ReactElement`    |         | Item visual media                 |
-| `imageBackgroundColor` | `'default' \| 'subtle'` |         | Optional background around visual |
+| Name       | Type                 | Default | Description       |
+| :--------- | :------------------- | :-----: | :---------------- |
+| `children` | `React.ReactElement` |         | Item visual media |
 `RiverBreakoutTabs.Visual` extends `River.Visual` and supports all `River.Visual` props.

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.0-rc.c1f51647)
+# Primer Brand docs (v0.72.0-rc.f8b72452)
-These docs are bundled with `@primer/react-brand@0.72.0-rc.c1f51647` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.f8b72452` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/forms/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type CheckboxProps = {
     /**
      * Apply indeterminate visual appearance to the checkbox

package/esm/forms/Checkbox/Checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;~~AAMvD~~,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}
1	+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvD,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}

package/esm/forms/Checkbox/Checkbox.js CHANGED Viewed

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

package/esm/forms/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n /*\n Apply indeterminate visual appearance to the checkbox\n /\n indeterminate?: boolean\n /\n Apply inactive visual appearance to the checkbox\n /\n disabled?: boolean\n /\n Indicates whether the checkbox must be checked\n /\n required?: boolean\n /\n Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n /\n validationStatus?: FormValidationStatus\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which checkbox inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n {\n checked,\n className,\n indeterminate,\n disabled,\n id,\n onChange,\n required,\n validationStatus,\n value,\n ...rest\n }: CheckboxProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false\n }\n }, [indeterminate, checked, inputRef])\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['Checkbox-wrapper']}>\n <input\n id={uniqueId}\n aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n aria-required={required ? 'true' : 'false'}\n aria-checked={indeterminate ? 'mixed' : checked}\n checked={indeterminate ? false : checked}\n className={clsx(styles['Checkbox-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"checkbox\"\n value={value}\n {...rest}\n />\n <span\n className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n onClick={onClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n {indeterminate ? (\n <svg\n className={clsx(styles['Checkbox-checkmark'])}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n >\n <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n </svg>\n ) : (\n <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n <path\n className={clsx(styles['Checkbox-checkmark-path'])}\n fill=\"none\"\n stroke=\"#000\"\n strokeWidth=\"13\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M12.1 52.1l24.4 24.4 53-53\"\n />\n </svg>\n )}\n </span>\n </span>\n )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":"~~;;;;;;;AAwHA~~,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,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,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}
1	+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n /*\n Apply indeterminate visual appearance to the checkbox\n /\n indeterminate?: boolean\n /\n Apply inactive visual appearance to the checkbox\n /\n disabled?: boolean\n /\n Indicates whether the checkbox must be checked\n /\n required?: boolean\n /\n Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n /\n validationStatus?: FormValidationStatus\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which checkbox inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n {\n checked,\n className,\n indeterminate,\n disabled,\n id,\n onChange,\n required,\n validationStatus,\n value,\n ...rest\n }: CheckboxProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false\n }\n }, [indeterminate, checked, inputRef])\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['Checkbox-wrapper']}>\n <input\n id={uniqueId}\n aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n aria-required={required ? 'true' : 'false'}\n aria-checked={indeterminate ? 'mixed' : checked}\n checked={indeterminate ? false : checked}\n className={clsx(styles['Checkbox-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"checkbox\"\n value={value}\n {...rest}\n />\n <span\n className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n onClick={onClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n {indeterminate ? (\n <svg\n className={clsx(styles['Checkbox-checkmark'])}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n >\n <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n </svg>\n ) : (\n <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n <path\n className={clsx(styles['Checkbox-checkmark-path'])}\n fill=\"none\"\n stroke=\"#000\"\n strokeWidth=\"13\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M12.1 52.1l24.4 24.4 53-53\"\n />\n </svg>\n )}\n </span>\n </span>\n )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;;AAyHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,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,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}

package/esm/forms/FormControl/FormControl.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus, FormInputSizes } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type FormControlProps = BaseProps<HTMLElement> & {
     /**
      * Apply a decorative border to the form control.

package/esm/forms/FormControl/FormControl.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;~~AAW7D~~,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
1	+ {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAS7D,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js CHANGED Viewed

@@ -2,6 +2,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 { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import { Checkbox as a } from "../Checkbox/Checkbox.js";
 import { Textarea as o } from "../Textarea/Textarea.js";
 import { TextInput as s } from "../TextInput/TextInput.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n /*\n Apply a decorative border to the form control.\n /\n hasBorder?: boolean\n /\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n A unique identifier for the form control.\n * This is used to associate the form control with its associated label.\n * If an id is not provided, a unique id will be generated.\n /\n id?: string\n /\n Applies required styling to the label and input.\n /\n required?: boolean\n /\n Alternative sizes for inputs and labels.\n /\n size?: FormInputSizes\n /\n Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n /\n validationStatus?: FormValidationStatus\n}\n\n/\n The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n /\n\nconst Root = ({\n children,\n className,\n hasBorder,\n fullWidth,\n id,\n required,\n size = 'medium',\n validationStatus,\n ...rest\n}: PropsWithChildren<FormControlProps>) => {\n const uniqueId = useId(id)\n const childrenArr = React.Children.toArray(children)\n\n const isInlineControl = childrenArr.some(\n child => React.isValidElement(child) && (child.type === Checkbox \|\| child.type === Radio),\n )\n\n const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n const containsValidation = childrenArr.some(\n child => React.isValidElement(child) && child.type === FormControlValidation,\n )\n\n return (\n <section\n id={`FormControl--${uniqueId}`}\n className={clsx(\n styles.FormControl,\n fullWidth && styles[`FormControl--fullWidth`],\n isInlineControl && styles['FormControl--checkbox'],\n hasBorder && styles['FormControl--border'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child\n\n const describedBy =\n [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n if (child.type === TextInput) {\n const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Textarea) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Select) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Checkbox) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n return React.cloneElement(element, {\n className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Radio) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n id: uniqueId,\n name: element.props.name,\n required: element.props.required \|\| required,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === FormControlLabel) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n htmlFor: uniqueId,\n children: element.props.children,\n required,\n validationStatus,\n size,\n showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n })\n }\n\n if (child.type === FormControlValidation) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n validationStatus,\n id: `${uniqueId}-validation`,\n })\n }\n\n if (child.type === FormControlHint) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n return React.cloneElement(element, {\n id: `${uniqueId}-hint`,\n })\n }\n\n return child\n })}\n </section>\n )\n}\n\ntype FormControlLabelProps = {\n htmlFor?: string\n required?: boolean\n showRequiredIndicator?: boolean\n size?: FormInputSizes\n validationStatus?: FormValidationStatus\n visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n children,\n className,\n htmlFor,\n required,\n showRequiredIndicator = true,\n size = 'medium',\n validationStatus,\n visuallyHidden,\n ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n return (\n <label\n htmlFor={htmlFor}\n className={clsx(\n styles['FormControl-label'],\n validationStatus && styles[`FormControl-label--${validationStatus}`],\n styles[`FormControl-label--${size}`],\n visuallyHidden && styles['FormControl-label--visually-hidden'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n return React.cloneElement(child, {\n className: clsx(styles['FormControl--visible'], child.props.className),\n })\n }\n return child\n })}\n\n {required && showRequiredIndicator && (\n <span className={styles['FormControl-label-required']} aria-hidden>\n {' '}\n \n </span>\n )}\n </label>\n )\n}\n\ntype FormControlValidationProps = {\n children: string\n validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n return (\n <Text\n as=\"span\"\n size=\"100\"\n className={clsx(\n styles['FormControl-validation'],\n validationStatus && styles['FormControl-validation--animate-in'],\n validationStatus && styles[`FormControl-validation--${validationStatus}`],\n className,\n )}\n {...props}\n >\n {validationStatus === 'error' && (\n <span className={styles['FormControl-validation-error-icon']}>\n <AlertFillIcon />\n </span>\n )}\n {validationStatus === 'success' && (\n <span className={styles['FormControl-validation-success-icon']}>\n <CheckCircleFillIcon />\n </span>\n )}\n {children}\n </Text>\n )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/*\n FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n Label: FormControlLabel,\n Validation: FormControlValidation,\n Hint: FormControlHint,\n})\n"],"mappings":";;;;;;;;;;;;;AAwDA,IAAM,KAAQ,EACZ,aACA,cACA,cACA,cACA,OACA,aACA,UAAO,UACP,qBACA,GAAG,QACsC;CACzC,IAAM,IAAW,EAAM,EAAG,EACpB,IAAc,EAAM,SAAS,QAAQ,EAAS,EAE9C,IAAkB,EAAY,MAClC,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,KAAY,EAAM,SAAS,GACpF,EAEK,IAAe,EAAY,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAgB,EACvG,IAAqB,EAAY,MACrC,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EACxD;AAED,QACE,kBAAC,WAAD;EACE,IAAI,gBAAgB;EACpB,WAAW,EACT,EAAO,aACP,KAAa,EAAO,2BACpB,KAAmB,EAAO,0BAC1B,KAAa,EAAO,wBACpB,EACD;EACD,GAAI;YAEH,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,OAAI,CAAC,EAAM,eAAe,EAAM,CAAE,QAAO;GAEzC,IAAM,IACJ,CAAC,KAAgB,GAAG,EAAS,QAAQ,KAAsB,GAAG,EAAS,aAAa,CACjF,OAAO,QAAQ,CACf,KAAK,IAAI,IAAI,KAAA;AAElB,OAAI,EAAM,SAAS,GAAW;IAC5B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAQ;IACzB,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,WAAW,EAAO,iCAAiC;KACjF,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAO;IACxB,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,+BAA+B,EAAQ,MAAM,UAAU;KACjG,IAAI;KACJ,MAAM,EAAQ,MAAM;KACpB,UAAU,EAAQ,MAAM,YAAY;KACpC,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAkB;IACnC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,gCAAgC,EAAQ,MAAM,UAAU;KAClG,SAAS;KACT,UAAU,EAAQ,MAAM;KACxB;KACA;KACA;KACA,uBAAuB,IAAkB,KAAQ,EAAQ,MAAM;KAChE,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAuB;IACxC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,oCAAoC,EAAQ,MAAM,UAAU;KACtG;KACA,IAAI,GAAG,EAAS;KACjB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAiB;IAClC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS,EACjC,IAAI,GAAG,EAAS,QACjB,CAAC;;AAGJ,UAAO;IACP;EACM,CAAA;GAaR,KAAoB,EACxB,aACA,cACA,YACA,aACA,2BAAwB,IACxB,UAAO,UACP,qBACA,mBACA,GAAG,QAGD,kBAAC,SAAD;CACW;CACT,WAAW,EACT,EAAO,sBACP,KAAoB,EAAO,sBAAsB,MACjD,EAAO,sBAAsB,MAC7B,KAAkB,EAAO,uCACzB,EACD;CACD,GAAI;WATN,CAWG,EAAM,SAAS,IAAI,IAAU,MACxB,EAAM,eAAqC,EAAM,IAAI,EAAM,SAAS,IAC/D,EAAM,aAAa,GAAO,EAC/B,WAAW,EAAK,EAAO,yBAAyB,EAAM,MAAM,UAAU,EACvE,CAAC,GAEG,EACP,EAED,KAAY,KACX,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA+B,eAAA;YAAvD,CACG,KAAI,IAEA;IAEH;IASN,KAAyB,EAAC,aAAU,qBAAkB,cAAW,GAAG,QAEtE,kBAAC,GAAD;CACE,IAAG;CACH,MAAK;CACL,WAAW,EACT,EAAO,2BACP,KAAoB,EAAO,uCAC3B,KAAoB,EAAO,2BAA2B,MACtD,EACD;CACD,GAAI;WATN;EAWG,MAAqB,WACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,EAAiB,CAAA;GACZ,CAAA;EAER,MAAqB,aACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA;EAER;EACI;IAML,KAAmB,EAAC,cAAW,GAAG,QAC/B,kBAAC,GAAD;CAAM,IAAG;CAAO,MAAK;CAAM,SAAQ;CAAQ,WAAW,EAAK,EAAO,qBAAqB,EAAU;CAAE,GAAI;CAAQ,CAAA,EAO3G,IAAc,OAAO,OAAO,GAAM;CAC7C,OAAO;CACP,YAAY;CACZ,MAAM;CACP,CAAC"}
1	+ {"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n /*\n Apply a decorative border to the form control.\n /\n hasBorder?: boolean\n /\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n A unique identifier for the form control.\n * This is used to associate the form control with its associated label.\n * If an id is not provided, a unique id will be generated.\n /\n id?: string\n /\n Applies required styling to the label and input.\n /\n required?: boolean\n /\n Alternative sizes for inputs and labels.\n /\n size?: FormInputSizes\n /\n Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n /\n validationStatus?: FormValidationStatus\n}\n\n/\n The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n /\n\nconst Root = ({\n children,\n className,\n hasBorder,\n fullWidth,\n id,\n required,\n size = 'medium',\n validationStatus,\n ...rest\n}: PropsWithChildren<FormControlProps>) => {\n const uniqueId = useId(id)\n const childrenArr = React.Children.toArray(children)\n\n const isInlineControl = childrenArr.some(\n child => React.isValidElement(child) && (child.type === Checkbox \|\| child.type === Radio),\n )\n\n const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n const containsValidation = childrenArr.some(\n child => React.isValidElement(child) && child.type === FormControlValidation,\n )\n\n return (\n <section\n id={`FormControl--${uniqueId}`}\n className={clsx(\n styles.FormControl,\n fullWidth && styles[`FormControl--fullWidth`],\n isInlineControl && styles['FormControl--checkbox'],\n hasBorder && styles['FormControl--border'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child\n\n const describedBy =\n [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n if (child.type === TextInput) {\n const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Textarea) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Select) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Checkbox) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n return React.cloneElement(element, {\n className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Radio) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n id: uniqueId,\n name: element.props.name,\n required: element.props.required \|\| required,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === FormControlLabel) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n htmlFor: uniqueId,\n children: element.props.children,\n required,\n validationStatus,\n size,\n showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n })\n }\n\n if (child.type === FormControlValidation) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n validationStatus,\n id: `${uniqueId}-validation`,\n })\n }\n\n if (child.type === FormControlHint) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n return React.cloneElement(element, {\n id: `${uniqueId}-hint`,\n })\n }\n\n return child\n })}\n </section>\n )\n}\n\ntype FormControlLabelProps = {\n htmlFor?: string\n required?: boolean\n showRequiredIndicator?: boolean\n size?: FormInputSizes\n validationStatus?: FormValidationStatus\n visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n children,\n className,\n htmlFor,\n required,\n showRequiredIndicator = true,\n size = 'medium',\n validationStatus,\n visuallyHidden,\n ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n return (\n <label\n htmlFor={htmlFor}\n className={clsx(\n styles['FormControl-label'],\n validationStatus && styles[`FormControl-label--${validationStatus}`],\n styles[`FormControl-label--${size}`],\n visuallyHidden && styles['FormControl-label--visually-hidden'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n return React.cloneElement(child, {\n className: clsx(styles['FormControl--visible'], child.props.className),\n })\n }\n return child\n })}\n\n {required && showRequiredIndicator && (\n <span className={styles['FormControl-label-required']} aria-hidden>\n {' '}\n \n </span>\n )}\n </label>\n )\n}\n\ntype FormControlValidationProps = {\n children: string\n validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n return (\n <Text\n as=\"span\"\n size=\"100\"\n className={clsx(\n styles['FormControl-validation'],\n validationStatus && styles['FormControl-validation--animate-in'],\n validationStatus && styles[`FormControl-validation--${validationStatus}`],\n className,\n )}\n {...props}\n >\n {validationStatus === 'error' && (\n <span className={styles['FormControl-validation-error-icon']}>\n <AlertFillIcon />\n </span>\n )}\n {validationStatus === 'success' && (\n <span className={styles['FormControl-validation-success-icon']}>\n <CheckCircleFillIcon />\n </span>\n )}\n {children}\n </Text>\n )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/*\n FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n Label: FormControlLabel,\n Validation: FormControlValidation,\n Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/Radio/Radio.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type RadioProps = {
     /**
      * Apply inactive visual appearance to the Radio

package/esm/forms/Radio/Radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;~~AAItD~~,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}
1	+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}

package/esm/forms/Radio/Radio.js CHANGED Viewed

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

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

	@@ -1 +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"}
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 '@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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 '@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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~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"}
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 '@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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 '@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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/hooks/useFocusTrap.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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