@cimpress-ui/react 0.0.0

package/dist/commonjs/components/combo-box/combo-box.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const form_field_js_1 = require("../form-field/form-field.js");
+const utils_js_1 = require("../typography/utils.js");
+function ComboBox({ label, description, error, options, placeholder, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const triggerPositioningRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-combo-box-input-wrapper", ref: triggerPositioningRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: props.isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { offset: 2, maxHeight: 315, className: "cim-combo-box-popover", 
+                // Position popover relative to wrapper div instead of input to account for border
+                triggerRef: triggerPositioningRef, "data-experimental-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", items: options, children: renderOptions }) })] }));
+}
+const _ComboBox = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ComboBox), 'ComboBox');
+exports.ComboBox = _ComboBox;
+function ComboBoxInput({ isReadOnly, placeholder, }) {
+    const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), 
+        // Ensure the popover opens when the input is clicked.
+        // By default, React Aria only opens the popover when the input is focused.
+        onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));
+}
+function renderOptions(item) {
+    if ('options' in item) {
+        return ((0, jsx_runtime_1.jsx)(ComboBoxSection, { id: item.id, title: item.label, items: item.options, children: (child) => ((0, jsx_runtime_1.jsx)(ComboBoxItem, { id: child.id, isDisabled: child.isDisabled, children: child.label })) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ComboBoxItem, { id: item.id, isDisabled: item.isDisabled, children: item.label }));
+}
+function ComboBoxItem({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: (0, clsx_1.default)('cim-combo-box-item', (0, utils_js_1.textStyle)({ variant: 'medium' })), children: children }));
+}
+function ComboBoxSection({ title, children, items, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Section, { ...props, className: "cim-combo-box-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-combo-box-header', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
+}
+function ChevronDownIcon(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+}
+//# sourceMappingURL=combo-box.js.map

package/dist/commonjs/components/combo-box/combo-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport { useContext, useRef, type ForwardedRef, type ReactNode, type SVGAttributes } from 'react';\nimport {\n  ComboBoxStateContext,\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Popover as RACPopover,\n  Section as RACSection,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ComboBoxOption {\n  /** The unique id of the item. When integrated with a form, this will be the value of the option. */\n  id: string;\n  /** The content to display as the label of the option. */\n  label: string;\n  /** Whether the option is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface ComboBoxOptionGroup {\n  /** The unique id of the group. */\n  id: string;\n  /** The content to display as the title of the group. */\n  label: string;\n  /** The options available for selection within the group. */\n  options: ComboBoxOption[];\n  isDisabled?: never;\n}\n\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends object>\n  extends Pick<\n      RACComboBoxProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n    >,\n    DOMProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue> {\n  /** The options available for selection. Supports groups with a single level of nesting. */\n  options: Array<ComboBoxOption | ComboBoxOptionGroup>;\n}\n\nfunction ComboBox<T extends object>(\n  { label, description, error, options, placeholder, UNSAFE_className, UNSAFE_style, ...props }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerPositioningRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n    >\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <div className=\"cim-combo-box-input-wrapper\" ref={triggerPositioningRef}>\n        <ComboBoxInput isReadOnly={props.isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <ChevronDownIcon height={12} width={12} aria-hidden=\"true\" />\n        </RACButton>\n      </div>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        offset={2}\n        maxHeight={315}\n        className=\"cim-combo-box-popover\"\n        // Position popover relative to wrapper div instead of input to account for border\n        triggerRef={triggerPositioningRef}\n        data-experimental-cim-style-root\n      >\n        <RACListBox className=\"cim-combo-box-listbox\" items={options}>\n          {renderOptions}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(ComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nfunction renderOptions(item: ComboBoxOption | ComboBoxOptionGroup) {\n  if ('options' in item) {\n    return (\n      <ComboBoxSection id={item.id} title={item.label} items={item.options}>\n        {(child) => (\n          <ComboBoxItem id={child.id} isDisabled={child.isDisabled}>\n            {child.label}\n          </ComboBoxItem>\n        )}\n      </ComboBoxSection>\n    );\n  }\n\n  return (\n    <ComboBoxItem id={item.id} isDisabled={item.isDisabled}>\n      {item.label}\n    </ComboBoxItem>\n  );\n}\n\ninterface ComboBoxItemProps<T extends object> extends Pick<RACListBoxItemProps<T>, 'id' | 'value' | 'isDisabled'> {\n  children: string;\n}\n\nfunction ComboBoxItem<T extends object>({ children, ...props }: ComboBoxItemProps<T>) {\n  return (\n    <RACListBoxItem {...props} className={clsx('cim-combo-box-item', textStyle({ variant: 'medium' }))}>\n      {children}\n    </RACListBoxItem>\n  );\n}\n\ninterface ComboBoxSectionProps<T extends object> {\n  id: string;\n  title: string;\n  children: ReactNode | ((item: T) => ReactNode);\n  items?: Iterable<T>;\n}\n\nfunction ComboBoxSection<T extends object>({ title, children, items, ...props }: ComboBoxSectionProps<T>) {\n  return (\n    <RACSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader className={clsx('cim-combo-box-header', textStyle({ variant: 'small', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACSection>\n  );\n}\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\n"]}

package/dist/commonjs/components/form/form.d.ts

@@ -0,0 +1,7 @@
+import { type FormProps as RACFormProps } from 'react-aria-components';
+import type { DOMProps, LabellableProps } from '../types.js';
+export interface FormProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
+}
+declare const _Form: (props: FormProps & import("react").RefAttributes<HTMLFormElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+export { _Form as Form };
+//# sourceMappingURL=form.d.ts.map

package/dist/commonjs/components/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,SACf,SAAQ,QAAQ,EACd,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,YAAY,EACV,QAAQ,GACR,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,CACd;CAAG;AAUR,QAAA,MAAM,KAAK,mJAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}

package/dist/commonjs/components/form/form.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+function Form({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Form, { ...props, className: (0, clsx_1.default)('cim-form', UNSAFE_className), style: UNSAFE_style, ref: ref, children: children }));
+}
+const _Form = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Form), 'Form');
+exports.Form = _Form;
+//# sourceMappingURL=form.js.map

package/dist/commonjs/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,uBAAC,4BAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Form as RACForm, type FormProps as RACFormProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, LabellableProps } from '../types.js';\n\nexport interface FormProps\n  extends DOMProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACFormProps,\n      | 'action'\n      | 'validationErrors'\n      | 'encType'\n      | 'method'\n      | 'target'\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'children'\n      | 'onSubmit'\n      | 'onReset'\n      | 'onInvalid'\n    > {}\n\nfunction Form({ children, UNSAFE_className, UNSAFE_style, ...props }: FormProps, ref: ForwardedRef<HTMLFormElement>) {\n  return (\n    <RACForm {...props} className={clsx('cim-form', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      {children}\n    </RACForm>\n  );\n}\n\nconst _Form = withStyleProps(forwardRef(Form), 'Form');\n\nexport { _Form as Form };\n"]}

package/dist/commonjs/components/form-field/form-field.d.ts

@@ -0,0 +1,13 @@
+import type { FieldError } from '../types.js';
+export declare function FormFieldLabel({ children, isRequired, isDisabled, }: {
+    children: string | undefined;
+    isRequired: boolean | undefined;
+    isDisabled?: boolean | undefined;
+}): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare function FormFieldDescription({ children }: {
+    children: string | undefined;
+}): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare function FormFieldError({ children }: {
+    children: FieldError;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form-field.d.ts.map

package/dist/commonjs/components/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,4DAeA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,4DAWlF;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,UAAU,CAAA;CAAE,2CAOpE"}

package/dist/commonjs/components/form-field/form-field.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldLabel = FormFieldLabel;
+exports.FormFieldDescription = FormFieldDescription;
+exports.FormFieldError = FormFieldError;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../icons/index.js");
+const text_js_1 = require("../typography/text.js");
+const utils_js_1 = require("../typography/utils.js");
+function FormFieldLabel({ children, isRequired, isDisabled, }) {
+    return (children && ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: (0, clsx_1.default)('cim-form-field-label', (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'subtle' : 'base' })), children: [children, isRequired && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] })));
+}
+function FormFieldDescription({ children }) {
+    return (children && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, clsx_1.default)('cim-form-field-description', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: children })));
+}
+function FormFieldError({ children }) {
+    return (
+    // RACFieldError must be rendered unconditionally - React Aria can populate it with validation errors even if an explicit error message isn't provided
+    (0, jsx_runtime_1.jsx)(react_aria_components_1.FieldError, { className: (0, clsx_1.default)('cim-form-field-error', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'critical' })), children: (validation) => renderFieldError(children, validation) }));
+}
+function renderFieldError(fieldError, validation) {
+    const errors = typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);
+    if (!errors || !errors.length) {
+        return null;
+    }
+    return typeof errors === 'object' ? (errors.map((error) => (0, jsx_runtime_1.jsx)(ErrorMessage, { message: error }, error))) : ((0, jsx_runtime_1.jsx)(ErrorMessage, { message: errors }));
+}
+function ErrorMessage({ message }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-form-field-error-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-form-field-error-icon-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconAlertTriangle, {}) }), message] }));
+}
+//# sourceMappingURL=form-field.js.map

package/dist/commonjs/components/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":";;;;;AAaA,wCAuBC;AAED,oDAWC;AAED,wCAOC;;AA1DD,gDAAwB;AAExB,iEAK+B;AAC/B,mDAAyD;AAEzD,mDAA6C;AAC7C,qDAAmD;AAEnD,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GAKX;IACC,OAAO,CACL,QAAQ,IAAI,CACV,wBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,aAE9G,QAAQ,EACR,UAAU,IAAI,CACb,uBAAC,cAAI,IAAC,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,uCAExB,CACR,IACQ,CACZ,CACF,CAAC;AACJ,CAAC;AAED,SAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAoC;IACjF,OAAO,CACL,QAAQ,IAAI,CACV,uBAAC,4BAAO,IACN,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,IAAA,cAAI,EAAC,4BAA4B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAE7F,QAAQ,GACD,CACX,CACF,CAAC;AACJ,CAAC;AAED,SAAgB,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO;IACL,sJAAsJ;IACtJ,uBAAC,kCAAa,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,YACtG,CAAC,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,GACzC,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,UAAsB,EAAE,UAA+B;IAC/E,MAAM,MAAM,GACV,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,YAAY,IAAa,OAAO,EAAE,KAAK,IAArB,KAAK,CAAoB,CAAC,CACpE,CAAC,CAAC,CAAC,CACF,uBAAC,YAAY,IAAC,OAAO,EAAE,MAAM,GAAI,CAClC,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,OAAO,EAAuB;IACpD,OAAO,CACL,iCAAK,SAAS,EAAC,8BAA8B,aAC3C,gCAAK,SAAS,EAAC,mCAAmC,iCAChD,uBAAC,4BAAiB,KAAG,GACjB,EACL,OAAO,IACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Label as RACLabel,\n  Text as RACText,\n  FieldError as RACFieldError,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconAlertTriangle } from '../../icons/index.js';\nimport type { FieldError } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  return (\n    children && (\n      <RACLabel\n        className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'subtle' : 'base' }))}\n      >\n        {children}\n        {isRequired && (\n          <Text tone=\"critical\" as=\"span\" aria-hidden>\n            *\n          </Text>\n        )}\n      </RACLabel>\n    )\n  );\n}\n\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  return (\n    children && (\n      <RACText\n        slot=\"description\"\n        className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n      >\n        {children}\n      </RACText>\n    )\n  );\n}\n\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    // RACFieldError must be rendered unconditionally - React Aria can populate it with validation errors even if an explicit error message isn't provided\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return typeof errors === 'object' ? (\n    errors.map((error) => <ErrorMessage key={error} message={error} />)\n  ) : (\n    <ErrorMessage message={errors} />\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <div className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconAlertTriangle />\n      </div>\n      {message}\n    </div>\n  );\n}\n"]}

package/dist/commonjs/components/menu/menu.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type MenuItemProps as RACMenuItemProps } from 'react-aria-components';
+import type { DOMProps, Key, LabellableProps } from '../types.js';
+export interface MenuProps extends DOMProps, LabellableProps {
+    /** The contents of the menu. */
+    children?: ReactNode;
+    /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
+    onAction?: (key: Key) => void;
+}
+declare const _Menu: (props: MenuProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+export { _Menu as Menu };
+export interface MenuSectionProps {
+    /** The ID of the section. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the section title. */
+    title: string;
+    /** The contents of the section. */
+    children: ReactNode;
+}
+export declare function MenuSection({ title, children, ...props }: MenuSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSection {
+    var displayName: string;
+}
+export interface MenuItemProps extends Pick<RACMenuItemProps, 'isDisabled' | 'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy' | 'routerOptions' | 'onAction'> {
+    /** The ID of the item. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the label. */
+    label: string;
+}
+export declare function MenuItem({ label, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuItem {
+    var displayName: string;
+}
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSeparator {
+    var displayName: string;
+}
+//# sourceMappingURL=menu.d.ts.map

package/dist/commonjs/components/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAoD,MAAM,OAAO,CAAC;AACzF,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAMvC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAKlE,MAAM,WAAW,SAAU,SAAQ,QAAQ,EAAE,eAAe;IAC1D,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AA6BD,QAAA,MAAM,KAAK,qIAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAS1E;yBATe,WAAW;;;AAa3B,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,gBAAgB,EACd,YAAY,GACZ,MAAM,GACN,UAAU,GACV,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,UAAU,CACb;IACD,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQ1D;yBARe,QAAQ;;;AAYxB,wBAAgB,aAAa,4CAE5B;yBAFe,aAAa"}

package/dist/commonjs/components/menu/menu.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+exports.MenuSection = MenuSection;
+exports.MenuItem = MenuItem;
+exports.MenuSeparator = MenuSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const utils_js_1 = require("../typography/utils.js");
+function Menu({ label, children, onAction, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Menu requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('cim-menu-button', UNSAFE_className), style: UNSAFE_style, children: [label, (0, jsx_runtime_1.jsx)(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": true })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-menu-popover", offset: 2, maxHeight: 315, "data-experimental-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: "cim-menu", onAction: onAction, children: children }) })] }));
+}
+const _Menu = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Menu), 'Menu');
+exports.Menu = _Menu;
+function MenuSection({ title, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Section, { ...props, className: "cim-menu-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-menu-section-header', (0, utils_js_1.textStyle)({ variant: 'small-semibold', tone: 'subtle' })), children: title }), children] }));
+}
+MenuSection.displayName = 'MenuSection';
+function MenuItem({ label, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { ...props, className: "cim-menu-item", textValue: label, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, clsx_1.default)('cim-menu-item-label', (0, utils_js_1.textStyle)({ variant: 'body' })), children: label }) }));
+}
+MenuItem.displayName = 'MenuItem';
+function MenuSeparator() {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.Separator, { className: "cim-menu-separator" });
+}
+MenuSeparator.displayName = 'MenuSeparator';
+function ChevronDownIcon(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+}
+//# sourceMappingURL=menu.js.map

package/dist/commonjs/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":";;;;;;AAoEA,kCASC;AAwBD,4BAQC;AAID,sCAEC;;AAnHD,gDAAwB;AACxB,iCAAyF;AACzF,iEAW+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAE3D,qDAAmD;AAWnD,SAAS,IAAI,CACX,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAClF,GAAoC;IAEpC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,6EAA6E,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,mCAAc,eACb,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACtG,KAAK,EACN,uBAAC,eAAe,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,wBAAgB,IAC5C,EACZ,uBAAC,+BAAU,IAAC,SAAS,EAAC,kBAAkB,EAAC,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,sDAChE,uBAAC,4BAAO,IAAC,SAAS,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,YAC7C,QAAQ,GACD,GACC,IACE,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI;AAWtB,SAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IACzE,OAAO,CACL,wBAAC,+BAAU,OAAK,KAAK,EAAE,SAAS,EAAC,kBAAkB,aACjD,uBAAC,8BAAS,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,yBAAyB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC5G,KAAK,GACI,EACX,QAAQ,IACE,CACd,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAsBxC,SAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB;IACzD,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,SAAS,EAAC,eAAe,EAAC,SAAS,EAAE,KAAK,YAChE,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,YACzF,KAAK,GACE,GACE,CACf,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,SAAgB,aAAa;IAC3B,OAAO,uBAAC,iCAAY,IAAC,SAAS,EAAC,oBAAoB,GAAG,CAAC;AACzD,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,SAAS,eAAe,CAAC,KAAmC;IAC1D,OAAO,CACL,gCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,wBAAe,KAAK,YACjG,iCAAM,CAAC,EAAC,4OAA4O,GAAG,GACnP,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type ReactNode, type SVGAttributes, type ForwardedRef, useEffect } from 'react';\nimport {\n  Button as RACButton,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuTrigger as RACMenuTrigger,\n  Section as RACSection,\n  Popover as RACPopover,\n  Separator as RACSeparator,\n  Text as RACText,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, Key, LabellableProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n// TODO: document that when creating the items dynamically, all items must have `key` and `id` defined\n\nexport interface MenuProps extends DOMProps, LabellableProps {\n  /** The contents of the menu. */\n  children?: ReactNode;\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\nfunction Menu(\n  { label, children, onAction, UNSAFE_className, UNSAFE_style, ...props }: MenuProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Menu requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACMenuTrigger>\n      <RACButton {...props} ref={ref} className={clsx('cim-menu-button', UNSAFE_className)} style={UNSAFE_style}>\n        {label}\n        <ChevronDownIcon height={12} width={12} aria-hidden />\n      </RACButton>\n      <RACPopover className=\"cim-menu-popover\" offset={2} maxHeight={315} data-experimental-cim-style-root>\n        <RACMenu className=\"cim-menu\" onAction={onAction}>\n          {children}\n        </RACMenu>\n      </RACPopover>\n    </RACMenuTrigger>\n  );\n}\n\nconst _Menu = withStyleProps(forwardRef(Menu), 'Menu');\n\nexport { _Menu as Menu };\n\nexport interface MenuSectionProps {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n  /** The contents of the section. */\n  children: ReactNode;\n}\n\nexport function MenuSection({ title, children, ...props }: MenuSectionProps) {\n  return (\n    <RACSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      {children}\n    </RACSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends Pick<\n    RACMenuItemProps,\n    | 'isDisabled'\n    | 'href'\n    | 'hrefLang'\n    | 'target'\n    | 'rel'\n    | 'download'\n    | 'ping'\n    | 'referrerPolicy'\n    | 'routerOptions'\n    | 'onAction'\n  > {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  label: string;\n}\n\nexport function MenuItem({ label, ...props }: MenuItemProps) {\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={label}>\n      <RACText slot=\"label\" className={clsx('cim-menu-item-label', textStyle({ variant: 'body' }))}>\n        {label}\n      </RACText>\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\nexport function MenuSeparator() {\n  return <RACSeparator className=\"cim-menu-separator\" />;\n}\n\nMenuSeparator.displayName = 'MenuSeparator';\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\n"]}

package/dist/commonjs/components/radio/radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';
+import { type StackProps } from '../spacing/stack/stack.js';
+import type { DOMProps, FieldProps, WithRequired } from '../types.js';
+export interface RadioGroupProps extends DOMProps, WithRequired<FieldProps<string | null>, 'label'>, Pick<RACRadioGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'>, Pick<StackProps, 'inline'> {
+    /** Radio buttons belonging to the group. */
+    children: ReactNode;
+}
+declare const _RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+export { _RadioGroup as RadioGroup };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/commonjs/components/radio/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAA+B,KAAK,eAAe,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhH,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,eACf,SAAQ,QAAQ,EACd,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,EAChD,IAAI,CACF,kBAAkB,EAClB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G,EACD,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AA2BD,QAAA,MAAM,WAAW,wIAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/commonjs/components/radio/radio-group.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const form_field_js_1 = require("../form-field/form-field.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+function RadioGroup({ label, description, error: errorMessage, inline = false, children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.RadioGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-radio-group', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: getGapFromInline(inline), inline: inline, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
+}
+const _RadioGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(RadioGroup), 'RadioGroup');
+exports.RadioGroup = _RadioGroup;
+// Make sure that radio buttons are spaced by 16px when stacked inline, and 4px otherwise.
+function getGapFromInline(inline) {
+    if (typeof inline === 'object') {
+        const gap = { xs: inline.xs ? 16 : 4 };
+        Object.entries(inline).reduce((acc, curr) => {
+            gap[curr[0]] = curr[1] ? 16 : 4;
+            return acc;
+        }, gap);
+        return gap;
+    }
+    return inline ? 16 : 4;
+}
+//# sourceMappingURL=radio-group.js.map

package/dist/commonjs/components/radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/radio-group.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAAgH;AAChH,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAmG;AACnG,wDAAmE;AAgBnE,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,uBAAC,gBAAK,IAAC,GAAG,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,YACjD,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC5C,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU;AAElC,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,MAA2B;IACnD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3D,MAAM,CAAC,OAAO,CAAC,MAAM,CAA6B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACvE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAChC,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { RadioGroup as RACRadioGroup, type RadioGroupProps as RACRadioGroupProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport { Stack, type StackProps } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { DOMProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    WithRequired<FieldProps<string | null>, 'label'>,\n    Pick<\n      RACRadioGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    >,\n    Pick<StackProps, 'inline'> {\n  /** Radio buttons belonging to the group. */\n  children: ReactNode;\n}\n\nfunction RadioGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    inline = false,\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: RadioGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACRadioGroup {...props} ref={ref} className={clsx('cim-radio-group', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromInline(inline)} inline={inline}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACRadioGroup>\n  );\n}\n\nconst _RadioGroup = withStyleProps(forwardRef(RadioGroup), 'RadioGroup');\n\nexport { _RadioGroup as RadioGroup };\n\n// Make sure that radio buttons are spaced by 16px when stacked inline, and 4px otherwise.\nfunction getGapFromInline(inline: Responsive<boolean>): Responsive<Spacing> {\n  if (typeof inline === 'object') {\n    const gap: Responsive<Spacing> = { xs: inline.xs ? 16 : 4 };\n\n    (Object.entries(inline) as [Breakpoint, boolean][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] ? 16 : 4;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return inline ? 16 : 4;\n}\n"]}

package/dist/commonjs/components/radio/radio.d.ts

@@ -0,0 +1,9 @@
+import { type RadioProps as RACRadioProps } from 'react-aria-components';
+import type { DOMProps, LabellableProps } from '../types.js';
+export interface RadioProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled'> {
+    /** The label rendered next to the radio. */
+    children?: string;
+}
+declare const _Radio: (props: RadioProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+export { _Radio as Radio };
+//# sourceMappingURL=radio.d.ts.map

package/dist/commonjs/components/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,UACf,SAAQ,QAAQ,EACd,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8BD,QAAA,MAAM,MAAM,qJAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/commonjs/components/radio/radio.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const text_js_1 = require("../typography/text.js");
+function Radio({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!children && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');
+        }
+    }, [children, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Radio, { ...props, className: (0, clsx_1.default)('cim-radio', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-radio-toggle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-radio-toggle", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-radio-toggle-inner" }) }) }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", children: children }))] }));
+}
+const _Radio = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Radio), 'Radio');
+exports.Radio = _Radio;
+//# sourceMappingURL=radio.js.map

package/dist/commonjs/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAqD;AACrD,iEAA4F;AAC5F,yDAAkD;AAClD,mEAA2D;AAE3D,mDAA6C;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,6BAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,gCAAK,SAAS,EAAC,0BAA0B,YACvC,gCAAK,SAAS,EAAC,kBAAkB,YAC/B,gCAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvC,uBAAK","sourcesContent":["import clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends DOMProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled'> {\n  /** The label rendered next to the radio. */\n  children?: string;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

package/dist/commonjs/components/select/select.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { type SelectProps as RACSelectProps } from 'react-aria-components';
+import type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';
+export interface SelectOption {
+    /** The unique id of the item. When integrated with a form, this will be the value of the option. */
+    id: string;
+    /** The content to display as the label of the option. */
+    label: string;
+    /** Whether the option is disabled. */
+    isDisabled?: boolean;
+}
+export interface SelectOptionGroup {
+    /** The unique id of the group. */
+    id: string;
+    /** The content to display as the title of the group. */
+    label: string;
+    /** The options available for selection within the group. */
+    options: SelectOption[];
+    isDisabled?: never;
+}
+export type SelectOptionType = SelectOption | SelectOptionGroup;
+export interface SelectProps extends Pick<RACSelectProps<SelectOptionType>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'selectedKey' | 'defaultSelectedKey' | 'placeholder' | 'autoComplete' | 'autoFocus' | 'onSelectionChange'>, DOMProps, FieldWithPlaceholderProps<Key> {
+    /** The options available for selection. Supports groups with a single level of nesting. */
+    options: SelectOptionType[];
+}
+declare const _Select: (props: SelectProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+export { _Select as Select };
+//# sourceMappingURL=select.d.ts.map

package/dist/commonjs/components/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAWL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG5E,MAAM,WAAW,YAAY;IAC3B,oGAAoG;IACpG,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WACf,SAAQ,IAAI,CACR,cAAc,CAAC,gBAAgB,CAAC,EAC9B,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,CACtB,EACD,QAAQ,EACR,yBAAyB,CAAC,GAAG,CAAC;IAChC,2FAA2F;IAC3F,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,oIAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}

package/dist/commonjs/components/select/select.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const form_field_js_1 = require("../form-field/form-field.js");
+const utils_js_1 = require("../typography/utils.js");
+function Select({ label, description, error, options, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'medium', tone: values.isPlaceholder ? 'muted' : 'base' })) }), (0, jsx_runtime_1.jsx)(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { offset: 2, maxHeight: 315, className: "cim-select-popover", "data-experimental-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-select-listbox", items: options, children: renderOptions }) })] }));
+}
+const _Select = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Select), 'Select');
+exports.Select = _Select;
+function renderOptions(item) {
+    if ('options' in item) {
+        return ((0, jsx_runtime_1.jsx)(SelectSection, { id: item.id, title: item.label, items: item.options, children: (child) => ((0, jsx_runtime_1.jsx)(SelectItem, { id: child.id, isDisabled: child.isDisabled, children: child.label })) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(SelectItem, { id: item.id, isDisabled: item.isDisabled, children: item.label }));
+}
+function SelectItem({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: (0, clsx_1.default)('cim-select-item', (0, utils_js_1.textStyle)({ variant: 'medium' })), children: children }));
+}
+function SelectSection({ title, children, items, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Section, { ...props, className: "cim-select-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-select-header', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
+}
+function ChevronDownIcon(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+}
+//# sourceMappingURL=select.js.map

package/dist/commonjs/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAY+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAmG;AAEnG,qDAAmD;AA2CnD,SAAS,MAAM,CACb,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAe,EAC7F,GAAiC;IAEjC,OAAO,CACL,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,wBAAC,8BAAS,IAAC,SAAS,EAAC,mBAAmB,aACtC,uBAAC,mCAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CACpB,IAAA,cAAI,EACF,MAAM,CAAC,gBAAgB,EACvB,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAChF,GAEH,EACF,uBAAC,eAAe,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,iBAAc,MAAM,GAAG,IACnD,EACZ,uBAAC,8BAAc,cAAE,KAAK,GAAkB,EACxC,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,EAC1D,uBAAC,+BAAU,IAAC,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,sDACnE,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,OAAO,YACtD,aAAa,GACH,GACF,IACH,CACb,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM;AAE1B,SAAS,aAAa,CAAC,IAAsB;IAC3C,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;QACtB,OAAO,CACL,uBAAC,aAAa,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,YAC/D,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,uBAAC,UAAU,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACnD,KAAK,CAAC,KAAK,GACD,CACd,GACa,CACjB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,YACjD,IAAI,CAAC,KAAK,GACA,CACd,CAAC;AACJ,CAAC;AAMD,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IACzD,OAAO,CACL,uBAAC,mCAAc,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC5F,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC;AASD,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAsB;IAC7E,OAAO,CACL,wBAAC,+BAAU,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aACnD,uBAAC,8BAAS,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC7F,KAAK,GACI,EACZ,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IAC5C,CACd,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,KAAmC;IAC1D,OAAO,CACL,gCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,wBAAe,KAAK,YACjG,iCAAM,CAAC,EAAC,4OAA4O,GAAG,GACnP,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, SVGAttributes, ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Popover as RACPopover,\n  Section as RACSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectOption {\n  /** The unique id of the item. When integrated with a form, this will be the value of the option. */\n  id: string;\n  /** The content to display as the label of the option. */\n  label: string;\n  /** Whether the option is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n  /** The unique id of the group. */\n  id: string;\n  /** The content to display as the title of the group. */\n  label: string;\n  /** The options available for selection within the group. */\n  options: SelectOption[];\n  isDisabled?: never;\n}\n\nexport type SelectOptionType = SelectOption | SelectOptionGroup;\n\nexport interface SelectProps\n  extends Pick<\n      RACSelectProps<SelectOptionType>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'placeholder'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n    >,\n    DOMProps,\n    FieldWithPlaceholderProps<Key> {\n  /** The options available for selection. Supports groups with a single level of nesting. */\n  options: SelectOptionType[];\n}\n\nfunction Select(\n  { label, description, error, options, UNSAFE_className, UNSAFE_style, ...props }: SelectProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) =>\n            clsx(\n              values.defaultClassName,\n              textStyle({ variant: 'medium', tone: values.isPlaceholder ? 'muted' : 'base' }),\n            )\n          }\n        />\n        <ChevronDownIcon height={12} width={12} aria-hidden=\"true\" />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover offset={2} maxHeight={315} className=\"cim-select-popover\" data-experimental-cim-style-root>\n        <RACListBox className=\"cim-select-listbox\" items={options}>\n          {renderOptions}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nfunction renderOptions(item: SelectOptionType) {\n  if ('options' in item) {\n    return (\n      <SelectSection id={item.id} title={item.label} items={item.options}>\n        {(child) => (\n          <SelectItem id={child.id} isDisabled={child.isDisabled}>\n            {child.label}\n          </SelectItem>\n        )}\n      </SelectSection>\n    );\n  }\n\n  return (\n    <SelectItem id={item.id} isDisabled={item.isDisabled}>\n      {item.label}\n    </SelectItem>\n  );\n}\n\ninterface SelectItemProps extends Pick<RACListBoxItemProps<SelectOption>, 'id' | 'value' | 'isDisabled'> {\n  children: string;\n}\n\nfunction SelectItem({ children, ...props }: SelectItemProps) {\n  return (\n    <RACListBoxItem {...props} className={clsx('cim-select-item', textStyle({ variant: 'medium' }))}>\n      {children}\n    </RACListBoxItem>\n  );\n}\n\ninterface SelectSectionProps {\n  id: string;\n  title: string;\n  children: ReactNode | ((item: SelectOption) => ReactNode);\n  items?: Iterable<SelectOption>;\n}\n\nfunction SelectSection({ title, children, items, ...props }: SelectSectionProps) {\n  return (\n    <RACSection {...props} className=\"cim-select-section\">\n      <RACHeader className={clsx('cim-select-header', textStyle({ variant: 'small', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACSection>\n  );\n}\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\n"]}

package/dist/commonjs/components/spacing/box/box.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { DOMProps } from '../../types.js';
+export interface BoxProps extends DOMProps {
+    children: ReactNode;
+}
+declare const _Box: (props: BoxProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => ReactNode;
+export { _Box as Box };
+//# sourceMappingURL=box.d.ts.map

package/dist/commonjs/components/spacing/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,QAAA,MAAM,IAAI,oIAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/commonjs/components/spacing/box/box.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../../forward-ref.js");
+const with_style_props_js_1 = require("../../../with-style-props.js");
+function Box({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, role: "presentation", children: children }));
+}
+const _Box = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Box), 'Box');
+exports.Box = _Box;
+//# sourceMappingURL=box.js.map

package/dist/commonjs/components/spacing/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":";;;;AACA,4DAAqD;AACrD,sEAA8D;AAO9D,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAAE,GAAiC;IAC9G,OAAO,CACL,mCAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,cAAc,YAC5F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,IAAI,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEnC,mBAAG","sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { DOMProps } from '../../types.js';\n\nexport interface BoxProps extends DOMProps {\n  children: ReactNode;\n}\n\nfunction Box({ children, UNSAFE_className, UNSAFE_style, ...props }: BoxProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} role=\"presentation\">\n      {children}\n    </div>\n  );\n}\n\nconst _Box = withStyleProps(forwardRef(Box), 'Box');\n\nexport { _Box as Box };\n"]}

package/dist/commonjs/components/spacing/stack/stack.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { DOMProps } from '../../types.js';
+import { type Responsive, type Spacing } from '../types.js';
+export interface StackProps extends DOMProps {
+    children: ReactNode;
+    inline?: Responsive<boolean>;
+    gap: Responsive<Spacing>;
+}
+declare const _Stack: (props: StackProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => ReactNode;
+export { _Stack as Stack };
+//# sourceMappingURL=stack.d.ts.map

package/dist/commonjs/components/spacing/stack/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAA0B,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC1B;AA0BD,QAAA,MAAM,MAAM,sIAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/commonjs/components/spacing/stack/stack.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const forward_ref_js_1 = require("../../../forward-ref.js");
+const with_style_props_js_1 = require("../../../with-style-props.js");
+const types_js_1 = require("../types.js");
+function Stack({ children, inline: responsiveInline, gap: responsiveGap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const gap = (0, types_js_1.getResponsiveVariables)('stack-gap', 'space', responsiveGap, 0);
+    const inline = (0, types_js_1.getResponsiveVariables)('stack-fd', 'stack-fd-inline', responsiveInline, false);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-stack', UNSAFE_className), style: {
+            ...UNSAFE_style,
+            ...gap,
+            ...inline,
+        }, role: "presentation", children: children }));
+}
+const _Stack = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Stack), 'Stack');
+exports.Stack = _Stack;
+//# sourceMappingURL=stack.js.map

package/dist/commonjs/components/spacing/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,4DAAqD;AACrD,sEAA8D;AAE9D,0CAAoF;AAQpF,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAChH,GAAiC;IAEjC,MAAM,GAAG,GAAG,IAAA,iCAAsB,EAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,IAAA,iCAAsB,EAAC,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAE9F,OAAO,CACL,mCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE;YACL,GAAG,YAAY;YACf,GAAG,GAAG;YACN,GAAG,MAAM;SACV,EACD,IAAI,EAAC,cAAc,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvC,uBAAK","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { DOMProps } from '../../types.js';\nimport { getResponsiveVariables, type Responsive, type Spacing } from '../types.js';\n\nexport interface StackProps extends DOMProps {\n  children: ReactNode;\n  inline?: Responsive<boolean>;\n  gap: Responsive<Spacing>;\n}\n\nfunction Stack(\n  { children, inline: responsiveInline, gap: responsiveGap, UNSAFE_className, UNSAFE_style, ...props }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);\n  const inline = getResponsiveVariables('stack-fd', 'stack-fd-inline', responsiveInline, false);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-stack', UNSAFE_className)}\n      style={{\n        ...UNSAFE_style,\n        ...gap,\n        ...inline,\n      }}\n      role=\"presentation\"\n    >\n      {children}\n    </div>\n  );\n}\n\nconst _Stack = withStyleProps(forwardRef(Stack), 'Stack');\n\nexport { _Stack as Stack };\n"]}