@primer/react-brand 0.3.0 → 0.4.0-rc.420e2e9

package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts

@@ -1,11 +1,23 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {
   "brand": {
     "color": {
+      "success": {
+        "fg": string,
+        "emphasis": string,
+        "muted": string,
+        "subtle": string
+      },
+      "error": {
+        "fg": string,
+        "emphasis": string,
+        "muted": string,
+        "subtle": string
+      },
       "accent": {
         "fg": string,
         "emphasis": string,

package/lib/design-tokens/ts/tokens/functional/colors/global.js

@@ -1,11 +1,23 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {
   "brand": {
     "color": {
+      "success": {
+        "fg": "var(--base-color-scale-green-5)",
+        "emphasis": "var(--base-color-scale-green-4)",
+        "muted": "hsl(var(--base-color-scale-green-3-hsl) / 60%)",
+        "subtle": "var(--base-color-scale-green-0)"
+      },
+      "error": {
+        "fg": "var(--base-color-scale-red-5)",
+        "emphasis": "var(--base-color-scale-red-5)",
+        "muted": "hsl(var(--base-color-scale-red-3-hsl) / 60%)",
+        "subtle": "var(--base-color-scale-red-0)"
+      },
       "accent": {
         "fg": "var(--base-color-scale-pink-5)",
         "emphasis": "var(--base-color-scale-pink-5)",

package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
+ */
+
+declare const tokens: {
+  "brand": {
+    "control": {
+      "medium": {
+        "size": string,
+        "padding": string,
+        "fontWeight": string,
+        "fontSize": string
+      },
+      "large": {
+        "size": string,
+        "padding": string,
+        "fontWeight": string,
+        "fontSize": string
+      },
+      "border": {
+        "radius": string
+      },
+      "animation": {
+        "duration": string,
+        "easing": string
+      }
+    }
+  }
+}
+ export default tokens;

package/lib/design-tokens/ts/tokens/functional/components/control/base.js

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
+ */
+
+module.exports = {
+  "brand": {
+    "control": {
+      "medium": {
+        "size": "2.5rem",
+        "padding": "0.625rem",
+        "fontWeight": "var(--brand-text-weight-200)",
+        "fontSize": "var(--brand-text-size-200)"
+      },
+      "large": {
+        "size": "var(--base-size-48)",
+        "padding": "var(--base-size-12)",
+        "fontWeight": "var(--brand-text-weight-300)",
+        "fontSize": "var(--brand-text-size-300)"
+      },
+      "border": {
+        "radius": "var(--brand-borderRadius-medium)"
+      },
+      "animation": {
+        "duration": "80ms",
+        "easing": "cubic-bezier(0.33, 1, 0.68, 1)"
+      }
+    }
+  }
+}

package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/components/faq/base.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/components/hero/base.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/components/river/base.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/size/border.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/size/size.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {
@@ -32,7 +32,6 @@ declare const tokens: {
         "gap": string
       },
       "medium": {
-        "size": string,
         "lineBoxHeight": string,
         "paddingBlock": string,
         "paddingInline": {
@@ -43,7 +42,6 @@ declare const tokens: {
         "gap": string
       },
       "large": {
-        "size": string,
         "lineBoxHeight": string,
         "paddingBlock": string,
         "paddingInline": {

package/lib/design-tokens/ts/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {
@@ -32,9 +32,8 @@ module.exports = {
         "gap": "0.25rem"
       },
       "medium": {
-        "size": "2rem",
         "lineBoxHeight": "1.25rem",
-        "paddingBlock": "calc((2rem - 1.25rem) / 2)",
+        "paddingBlock": "calc((2.5rem - 1.25rem) / 2)",
         "paddingInline": {
           "condensed": "0.5rem",
           "normal": "0.75rem",
@@ -43,9 +42,8 @@ module.exports = {
         "gap": "0.5rem"
       },
       "large": {
-        "size": "2.5rem",
         "lineBoxHeight": "1.25rem",
-        "paddingBlock": "calc((2.5rem - 1.25rem) / 2)",
+        "paddingBlock": "calc((var(--base-size-48) - 1.25rem) / 2)",
         "paddingInline": {
           "normal": "0.75rem",
           "spacious": "1rem"

package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 declare const tokens: {

package/lib/design-tokens/ts/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 module.exports = {

package/lib/forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,57 @@
+import React, { InputHTMLAttributes } from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormValidationStatus } from '../form-types';
+export declare type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.
+     */
+    validationStatus?: FormValidationStatus;
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which checkbox inputs are selected
+     */
+    value?: string;
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> & BaseProps<HTMLInputElement>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Pick<{
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement> | undefined;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean | undefined;
+    /**
+     * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.
+     */
+    validationStatus?: FormValidationStatus | undefined;
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which checkbox inputs are selected
+     */
+    value?: string | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & BaseProps<HTMLInputElement>, "value" | "children" | "className" | "id" | "form" | "slot" | "style" | "title" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "size" | "type" | "step" | "alt" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "src" | "indeterminate" | "required" | "validationStatus" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "min" | "name" | "readOnly" | "width"> & React.RefAttributes<unknown>>;

package/lib/forms/Checkbox/forms.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/forms/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/lib/forms/FormControl/FormControl.d.ts

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormValidationStatus, FormInputSizes } from '../';
+export declare type FormControlProps = BaseProps<HTMLElement> & {
+    /**
+     * Namespaced children include: `FormControl.Label`, `FormControl.Hint`, `FormControl.Validation`, `TextInput`, `Select`, `Checkbox`.
+     */
+    children?: React.ReactElement[];
+    /**
+     * Apply a decorative border to the form control.
+     */
+    hasBorder?: boolean;
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean;
+    /**
+     * A unique identifier for the form control.
+     * This is used to associate the form control with its associated label.
+     * If an id is not provided, a unique id will be generated.
+     */
+    id?: string;
+    /**
+     * Applies required styling to the label and input.
+     */
+    required?: boolean;
+    /**
+     * Alternative sizes for inputs and labels.
+     */
+    size?: FormInputSizes;
+    /**
+     * Provides contextual validation feedback to all children, showing relevant messaging where applicable.
+     */
+    validationStatus?: FormValidationStatus;
+};
+declare type FormControlLabelProps = {
+    htmlFor?: string;
+    required?: boolean;
+    showRequiredIndicator?: boolean;
+    size?: FormInputSizes;
+    validationStatus?: FormValidationStatus;
+    visuallyHidden?: boolean;
+} & BaseProps<HTMLLabelElement>;
+declare type FormControlValidationProps = {
+    children: string;
+    validationStatus?: FormValidationStatus;
+} & BaseProps<HTMLSpanElement>;
+/**
+ * FormControl
+ * {@link https://primer.style/brand/components/FormControl/ See usage examples}.
+ */
+export declare const FormControl: (({ children, className, hasBorder, fullWidth, id, required, size, validationStatus, ...rest }: FormControlProps) => JSX.Element) & {
+    Label: ({ children, className, htmlFor, required, showRequiredIndicator, size, validationStatus, visuallyHidden, ...rest }: PropsWithChildren<FormControlLabelProps>) => JSX.Element;
+    Validation: ({ children, validationStatus }: FormControlValidationProps) => JSX.Element;
+    Hint: ({ children, className, ...rest }: PropsWithChildren<BaseProps<HTMLSpanElement>>) => JSX.Element;
+};
+export {};

package/lib/forms/FormControl/forms.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/forms/FormControl/index.d.ts

@@ -0,0 +1 @@
+export * from './FormControl';

package/lib/forms/Select/Select.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormInputSizes, FormValidationStatus } from '../form-types';
+export declare type SelectProps = {
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean;
+    /**
+     * Applies a required attribute to the input
+     */
+    required?: boolean;
+    /**
+     * Applies alternative sizing to the input
+     */
+    size?: FormInputSizes;
+    /**
+     *
+     */
+    validationStatus?: FormValidationStatus;
+} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> & BaseProps<HTMLSelectElement>;
+export declare type OptionProps = {
+    value: string;
+} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>;
+export declare type OptGroupProps = {
+    /**
+     * Specifies that an option-group should be disabled
+     */
+    disabled?: string;
+    /**
+     * Specifies a label for an option-group
+     */
+    label: string;
+} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>;
+/**
+ * Select
+ */
+export declare const Select: React.ForwardRefExoticComponent<Pick<{
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Applies a required attribute to the input
+     */
+    required?: boolean | undefined;
+    /**
+     * Applies alternative sizing to the input
+     */
+    size?: FormInputSizes | undefined;
+    /**
+     *
+     */
+    validationStatus?: FormValidationStatus | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size"> & BaseProps<HTMLSelectElement>, "value" | "children" | "className" | "id" | "form" | "slot" | "style" | "title" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "size" | "type" | "step" | "alt" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "src" | "required" | "validationStatus" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "min" | "name" | "readOnly" | "width" | "fullWidth"> & React.RefAttributes<unknown>> & {
+    Option: ({ children, value, ...rest }: OptionProps) => JSX.Element;
+    OptGroup: ({ children, label, ...rest }: OptGroupProps) => JSX.Element;
+};

package/lib/forms/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';