frey-ui 1.0.11 → 1.0.13

package/dist/cjs/Chip/chip.module.css.cjs

@@ -1,9 +1,10 @@
 'use client';
 'use strict';
+require('./chip.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"chip-outlined":"chip-module_chip-outlined__nsWch","chip-default":"chip-module_chip-default__W71L9","chip-default-clickable":"chip-module_chip-default-clickable__xqeqN","chip-outlined-clickable":"chip-module_chip-outlined-clickable__slYmY","chip-text":"chip-module_chip-text__VIJnW"};
+var styles = {"chip-outlined":"chip-outlined_7f705c77","chip-default":"chip-default_641c6c1e","chip-default-clickable":"chip-default-clickable_79a6d4b4","chip-outlined-clickable":"chip-outlined-clickable_6fe04947","chip-text":"chip-text_569c3392"};
 
 exports.default = styles;
 //# sourceMappingURL=chip.module.css.cjs.map

package/dist/cjs/Dialog/dialog.css

@@ -0,0 +1,144 @@
+.dialog_root_1c624aa8 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100vh;
+  max-height: none;
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+  transition:
+    opacity 0.22s ease,
+    overlay 0.22s ease allow-discrete,
+    display 0.22s ease allow-discrete;
+}
+
+.dialog_root_1c624aa8:focus {
+  outline: none;
+}
+
+.dialog_root_1c624aa8:open,
+.dialog_root_1c624aa8[open] {
+  opacity: 1;
+}
+
+@starting-style {
+  .dialog_root_1c624aa8:open,
+  .dialog_root_1c624aa8[open] {
+    opacity: 0;
+  }
+}
+
+.dialog_root_1c624aa8::backdrop {
+  background-color: transparent;
+  transition:
+    background-color 0.22s ease,
+    overlay 0.22s ease allow-discrete,
+    display 0.22s ease allow-discrete;
+}
+
+.dialog_root_1c624aa8:open::backdrop,
+.dialog_root_1c624aa8[open]::backdrop {
+  background-color: rgb(15 23 42 / 48%);
+}
+
+@starting-style {
+  .dialog_root_1c624aa8:open::backdrop,
+  .dialog_root_1c624aa8[open]::backdrop {
+    background-color: transparent;
+  }
+}
+
+.dialog_content_ee12e897 {
+  position: relative;
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
+  border-radius: var(--frey-radius-lg);
+  border: 1px solid var(--frey-color-border-subtle);
+  background-color: var(--frey-color-surface);
+  color: var(--frey-color-text);
+  box-shadow: 0 20px 40px rgb(0 0 0 / 24%);
+  padding: 1.5rem; /* Increased padding */
+  opacity: 0;
+  transform: translateY(0.75rem) scale(0.98);
+  transition:
+    opacity 0.22s ease,
+    transform 0.22s ease;
+}
+
+.dialog_root_1c624aa8:open .dialog_content_ee12e897,
+.dialog_root_1c624aa8[open] .dialog_content_ee12e897 {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@starting-style {
+  .dialog_root_1c624aa8:open .dialog_content_ee12e897,
+  .dialog_root_1c624aa8[open] .dialog_content_ee12e897 {
+    opacity: 0;
+    transform: translateY(0.75rem) scale(0.98);
+  }
+}
+
+.dialog_header_c2462f2b {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.dialog_title_89da9452 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--frey-color-text-title);
+}
+
+.dialog_close_e5b07e60 {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border: none;
+  background: transparent;
+  color: var(--frey-color-text-muted);
+  border-radius: var(--frey-radius-sm);
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.dialog_close_e5b07e60:hover {
+  background: var(--frey-color-surface-hover);
+  color: var(--frey-color-text);
+}
+
+.dialog_close_e5b07e60:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--frey-focus-ring);
+}
+
+.dialog_close_icon_93132c68 {
+  display: block;
+}
+
+.dialog_description_9f437d42 {
+  margin: 0.5rem 0 0;
+  color: var(--frey-color-text-secondary, #6b7280);
+  font-size: 0.875rem;
+}
+
+.dialog_body_39a5839d {
+  margin-top: 0.875rem;
+}

package/dist/cjs/Dialog/dialog.module.css.cjs

@@ -1,9 +1,10 @@
 'use client';
 'use strict';
+require('./dialog.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"dialog_root":"dialog-module_dialog_root__jMqkW","dialog_content":"dialog-module_dialog_content__0IqkB","dialog_header":"dialog-module_dialog_header__VSRxM","dialog_title":"dialog-module_dialog_title__Mw7jc","dialog_close":"dialog-module_dialog_close__tuhJi","dialog_close_icon":"dialog-module_dialog_close_icon__5hPpw","dialog_description":"dialog-module_dialog_description__fh-8z","dialog_body":"dialog-module_dialog_body__5qjkS"};
+var styles = {"dialog_root":"dialog_root_1c624aa8","dialog_content":"dialog_content_ee12e897","dialog_header":"dialog_header_c2462f2b","dialog_title":"dialog_title_89da9452","dialog_close":"dialog_close_e5b07e60","dialog_close_icon":"dialog_close_icon_93132c68","dialog_description":"dialog_description_9f437d42","dialog_body":"dialog_body_39a5839d"};
 
 exports.default = styles;
 //# sourceMappingURL=dialog.module.css.cjs.map

package/dist/cjs/Dialog/index.cjs

@@ -6,9 +6,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
-var reactDom = require('react-dom');
-var index = require('../Icons/index.cjs');
+var CloseIcon = require('../Icons/CloseIcon.cjs');
 var mergeRefs = require('../utils/mergeRefs.cjs');
+var Portal = require('../utils/Portal.cjs');
 var slot = require('../utils/slot.cjs');
 var dialog_module = require('./dialog.module.css.cjs');
 
@@ -141,15 +141,15 @@ const DialogContent = React.forwardRef(function DialogContent({ closeLabel = 'Cl
     }, [closeOnOverlayClick, onOpenChange]);
     if (typeof document === 'undefined' || !mounted)
         return null;
-    return reactDom.createPortal(jsxRuntime.jsx("dialog", { id: dialogId, ref: mergeRefs.mergeRefs(dialogRef, ref), "aria-labelledby": titleId, "aria-describedby": descriptionId, className: clsx(dialog_module.default.dialog_root, containerClassName), onCancel: (event) => {
-            if (!closeOnEscape) {
-                event.preventDefault();
-            }
-        }, onClose: () => {
-            if (open) {
-                onOpenChange(false);
-            }
-        }, children: jsxRuntime.jsxs("div", { className: clsx(dialog_module.default.dialog_content, className), ...props, children: [!hideCloseButton && (jsxRuntime.jsx("button", { type: 'button', className: dialog_module.default.dialog_close, onClick: () => onOpenChange(false), "aria-label": closeLabel, children: jsxRuntime.jsx(index.CloseIcon, { size: 16, className: dialog_module.default.dialog_close_icon }) })), children] }) }), document.body);
+    return (jsxRuntime.jsx(Portal.default, { children: jsxRuntime.jsx("dialog", { id: dialogId, ref: mergeRefs.mergeRefs(dialogRef, ref), "aria-labelledby": titleId, "aria-describedby": descriptionId, className: clsx(dialog_module.default.dialog_root, containerClassName), onCancel: (event) => {
+                if (!closeOnEscape) {
+                    event.preventDefault();
+                }
+            }, onClose: () => {
+                if (open) {
+                    onOpenChange(false);
+                }
+            }, children: jsxRuntime.jsxs("div", { className: clsx(dialog_module.default.dialog_content, className), ...props, children: [!hideCloseButton && (jsxRuntime.jsx("button", { type: 'button', className: dialog_module.default.dialog_close, onClick: () => onOpenChange(false), "aria-label": closeLabel, children: jsxRuntime.jsx(CloseIcon.CloseIcon, { size: 16, className: dialog_module.default.dialog_close_icon }) })), children] }) }) }));
 });
 DialogContent.displayName = 'Dialog.Content';
 const DialogHeader = React.forwardRef(function DialogHeader({ className, ...props }, ref) {

package/dist/cjs/DropdownMenu/dropdownmenu.css

@@ -0,0 +1,61 @@
+.dropdown_menu_9ae4191b {
+  position: fixed;
+  z-index: 55;
+  min-width: 12rem;
+  margin: 0;
+  padding: 0.25rem;
+  border: 1px solid var(--frey-color-border, #d1d5db);
+  border-radius: 0.625rem;
+  background-color: var(--frey-color-surface, #fff);
+  box-shadow: 0 14px 28px rgb(17 24 39 / 18%);
+  list-style: none;
+  animation: dropdown_in_09bd5d55 0.16s ease;
+}
+
+.dropdown_menu_item_container_9fc6afbd {
+  list-style: none;
+}
+
+.dropdown_menu_item_fbfd11bb {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--frey-color-text-primary, #111827);
+  border-radius: 0.5rem;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  padding: 0.5rem 0.625rem;
+  cursor: pointer;
+  transition: background-color 0.16s ease;
+}
+
+.dropdown_menu_item_fbfd11bb:hover {
+  background: var(--frey-color-surface-subtle, #f3f4f6);
+}
+
+.dropdown_menu_item_fbfd11bb:focus-visible {
+  outline: 2px solid var(--frey-focus-ring, #3b82f6);
+  outline-offset: 1px;
+}
+
+.dropdown_menu_item_fbfd11bb:disabled {
+  color: var(--frey-color-text-muted, #9ca3af);
+  cursor: not-allowed;
+}
+
+.dropdown_menu_item_destructive_453b7c60 {
+  color: var(--frey-color-error, #b91c1c);
+}
+
+@keyframes dropdown_in_09bd5d55 {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/dist/cjs/DropdownMenu/dropdownmenu.module.css.cjs

@@ -1,9 +1,10 @@
 'use client';
 'use strict';
+require('./dropdownmenu.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"dropdown_menu":"dropdownmenu-module_dropdown_menu__AHiFI","dropdown_menu_item_container":"dropdownmenu-module_dropdown_menu_item_container__FI7MR","dropdown_menu_item":"dropdownmenu-module_dropdown_menu_item__ncHAK","dropdown_menu_item_destructive":"dropdownmenu-module_dropdown_menu_item_destructive__-QIlU"};
+var styles = {"dropdown_menu":"dropdown_menu_9ae4191b","dropdown_menu_item_container":"dropdown_menu_item_container_9fc6afbd","dropdown_menu_item":"dropdown_menu_item_fbfd11bb","dropdown_menu_item_destructive":"dropdown_menu_item_destructive_453b7c60"};
 
 exports.default = styles;
 //# sourceMappingURL=dropdownmenu.module.css.cjs.map

package/dist/cjs/DropdownMenu/index.cjs

@@ -4,13 +4,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
-var reactDom = require('react-dom');
+var floatingConfig = require('../hooks/floatingConfig.cjs');
 var useControllableState = require('../hooks/useControllableState.cjs');
-var useDismiss = require('../hooks/useDismiss.cjs');
-var useFloatingPosition = require('../hooks/useFloatingPosition.cjs');
+var useRovingCollection = require('../hooks/useRovingCollection.cjs');
 var mergeRefs = require('../utils/mergeRefs.cjs');
+var Portal = require('../utils/Portal.cjs');
 var slot = require('../utils/slot.cjs');
 var dropdownmenu_module = require('./dropdownmenu.module.css.cjs');
 
@@ -24,120 +25,171 @@ function useDropdownMenuContext() {
 }
 const DropdownMenuRoot = function DropdownMenu({ open, defaultOpen = false, onOpenChange, placement = 'bottom', offset = 8, closeOnEscape = true, closeOnOutsideClick = true, children }) {
     const idPrefix = React.useId();
+    const menuItems = useRovingCollection.useRovingCollection();
     const triggerRef = React.useRef(null);
+    const [referenceElement, setReferenceElement] = React.useState(null);
+    const [floatingElement, setFloatingElement] = React.useState(null);
     const [currentOpen, handleOpenChange] = useControllableState.useControllableState(open, defaultOpen, onOpenChange);
+    const handleFloatingOpenChange = React.useCallback((nextOpen, _event, reason) => {
+        handleOpenChange(nextOpen);
+        if (!nextOpen && reason === 'escape-key') {
+            triggerRef.current?.focus();
+        }
+    }, [handleOpenChange]);
+    const floatingRootContext = react.useFloatingRootContext({
+        open: currentOpen,
+        onOpenChange: handleFloatingOpenChange,
+        elements: {
+            reference: referenceElement,
+            floating: floatingElement
+        }
+    });
+    const { refs, floatingStyles, context: floatingContext } = react.useFloating({
+        rootContext: floatingRootContext,
+        placement: floatingConfig.toFloatingPlacement(placement, 'start'),
+        middleware: floatingConfig.createFloatingMiddleware(offset),
+        strategy: 'fixed',
+        transform: false,
+        whileElementsMounted: react.autoUpdate
+    });
+    const dismiss = react.useDismiss(floatingContext, {
+        enabled: currentOpen,
+        escapeKey: closeOnEscape,
+        outsidePress: closeOnOutsideClick
+    });
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([dismiss]);
+    const setReference = React.useCallback((node) => {
+        refs.setReference(node);
+        setReferenceElement(node);
+    }, [refs]);
+    const setFloating = React.useCallback((node) => {
+        refs.setFloating(node);
+        setFloatingElement(node);
+    }, [refs]);
     const contextValue = React.useMemo(() => ({
         open: currentOpen,
         onOpenChange: handleOpenChange,
-        placement,
-        offset,
         idPrefix,
         triggerRef,
-        closeOnEscape,
-        closeOnOutsideClick
+        setReference,
+        setFloating,
+        floatingStyles,
+        floatingContext,
+        getReferenceProps,
+        getFloatingProps,
+        menuItems
     }), [
         currentOpen,
         handleOpenChange,
-        placement,
-        offset,
         idPrefix,
-        closeOnEscape,
-        closeOnOutsideClick
+        setReference,
+        setFloating,
+        floatingStyles,
+        floatingContext,
+        getReferenceProps,
+        getFloatingProps,
+        menuItems
     ]);
     return (jsxRuntime.jsx(DropdownMenuContext.Provider, { value: contextValue, children: children }));
 };
 DropdownMenuRoot.displayName = 'DropdownMenu';
 const DropdownMenuTrigger = React.forwardRef(function DropdownMenuTrigger({ children, asChild = false, onClick, type, ...triggerProps }, ref) {
-    const { open, onOpenChange, idPrefix, triggerRef } = useDropdownMenuContext();
-    const mergedRef = mergeRefs.mergeRefs(ref, triggerRef);
+    const { open, onOpenChange, idPrefix, triggerRef, setReference, getReferenceProps } = useDropdownMenuContext();
+    const mergedRef = mergeRefs.mergeRefs(ref, triggerRef, setReference);
     const handleClick = (event) => {
         onClick?.(event);
         if (!event.defaultPrevented) {
             onOpenChange(!open);
         }
     };
+    const referenceProps = getReferenceProps({
+        ...triggerProps,
+        onClick: handleClick,
+        'aria-haspopup': 'menu',
+        'aria-expanded': open,
+        'aria-controls': `${idPrefix}-menu`
+    });
     if (asChild) {
         if (!React.isValidElement(children)) {
             throw new Error('DropdownMenu.Trigger with asChild expects a single valid React element child.');
         }
-        return (jsxRuntime.jsx(slot.Slot, { ref: mergedRef, ...triggerProps, onClick: handleClick, "aria-haspopup": 'menu', "aria-expanded": open, "aria-controls": `${idPrefix}-menu`, children: children }));
+        return (jsxRuntime.jsx(slot.Slot, { ref: mergedRef, ...referenceProps, children: children }));
     }
-    return (jsxRuntime.jsx("button", { ref: mergedRef, ...triggerProps, type: type ?? 'button', onClick: handleClick, "aria-haspopup": 'menu', "aria-expanded": open, "aria-controls": `${idPrefix}-menu`, children: children }));
+    return (jsxRuntime.jsx("button", { ref: mergedRef, type: type ?? 'button', ...referenceProps, children: children }));
 });
 DropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';
 const DropdownMenuContent = React.forwardRef(function DropdownMenuContent({ className, style, children, ...props }, ref) {
-    const { open, onOpenChange, placement, offset, idPrefix, triggerRef, closeOnEscape, closeOnOutsideClick } = useDropdownMenuContext();
+    const { open, idPrefix, setFloating, floatingStyles, floatingContext, getFloatingProps, menuItems } = useDropdownMenuContext();
     const menuRef = React.useRef(null);
-    const position = useFloatingPosition.useFloatingPosition(triggerRef, menuRef, {
-        open,
-        placement,
-        offset,
-        align: 'start'
-    });
-    useDismiss.useDismiss({
-        open,
-        onClose: () => onOpenChange(false),
-        triggerRef,
-        contentRef: menuRef,
-        closeOnEscape,
-        closeOnOutsideClick,
-        returnFocusOnClose: true
-    });
     React.useEffect(() => {
-        if (!open || !menuRef.current)
+        if (!open)
             return;
-        // Auto-focus first enabled item
-        const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([disabled])');
-        if (firstItem) {
-            firstItem.focus();
-        }
-    }, [open]);
+        menuItems.focusFirst();
+    }, [open, menuItems]);
     const handleKeyDown = (event) => {
-        if (!menuRef.current)
-            return;
-        const items = Array.from(menuRef.current.querySelectorAll('[role="menuitem"]:not([disabled])'));
-        if (items.length === 0)
-            return;
-        const currentIndex = items.indexOf(document.activeElement);
+        const targetElement = event.target instanceof HTMLElement ? event.target : null;
+        const currentItemId = menuItems.findItemIdByElement(targetElement);
         if (event.key === 'ArrowDown') {
             event.preventDefault();
-            const nextIndex = (currentIndex + 1) % items.length;
-            items[nextIndex]?.focus();
+            if (currentItemId) {
+                menuItems.focusNext(currentItemId);
+            }
+            else {
+                menuItems.focusFirst();
+            }
         }
         if (event.key === 'ArrowUp') {
             event.preventDefault();
-            const prevIndex = (currentIndex - 1 + items.length) % items.length;
-            items[prevIndex]?.focus();
+            if (currentItemId) {
+                menuItems.focusPrevious(currentItemId);
+            }
+            else {
+                menuItems.focusLast();
+            }
         }
         if (event.key === 'Home') {
             event.preventDefault();
-            items[0]?.focus();
+            menuItems.focusFirst();
         }
         if (event.key === 'End') {
             event.preventDefault();
-            items.at(-1)?.focus();
+            menuItems.focusLast();
         }
     };
-    if (!open || typeof document === 'undefined')
+    const floatingProps = getFloatingProps({
+        ...props,
+        onKeyDown: handleKeyDown
+    });
+    if (!open)
         return null;
-    return reactDom.createPortal(jsxRuntime.jsx("menu", { id: `${idPrefix}-menu`, ref: mergeRefs.mergeRefs(menuRef, ref), className: clsx(dropdownmenu_module.default.dropdown_menu, className), onKeyDown: handleKeyDown, style: {
-            top: position.top,
-            left: position.left,
-            ...style
-        }, ...props, children: children }), document.body);
+    return (jsxRuntime.jsx(Portal.default, { children: jsxRuntime.jsx(react.FloatingFocusManager, { context: floatingContext, modal: true, returnFocus: true, outsideElementsInert: false, initialFocus: 0, children: jsxRuntime.jsx("div", { id: `${idPrefix}-menu`, role: 'menu', "aria-orientation": 'vertical', ref: mergeRefs.mergeRefs(menuRef, ref, setFloating), className: clsx(dropdownmenu_module.default.dropdown_menu, className), style: {
+                    ...floatingStyles,
+                    ...style
+                }, ...floatingProps, children: children }) }) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenu.Content';
 const DropdownMenuItem = React.forwardRef(function DropdownMenuItem({ disabled, destructive, onSelect, className, children, ...props }, ref) {
-    const { onOpenChange, triggerRef } = useDropdownMenuContext();
-    const handleClick = (e) => {
+    const { onOpenChange, triggerRef, menuItems } = useDropdownMenuContext();
+    const itemRef = React.useRef(null);
+    const itemId = React.useId();
+    const mergedRef = mergeRefs.mergeRefs(ref, itemRef);
+    React.useEffect(() => {
+        menuItems.registerItem(itemId, itemRef.current, {
+            disabled: Boolean(disabled)
+        });
+        return () => {
+            menuItems.unregisterItem(itemId);
+        };
+    }, [menuItems, itemId, disabled]);
+    const handleClick = (event) => {
         if (disabled)
             return;
         onSelect?.();
-        props.onClick?.(e);
+        props.onClick?.(event);
         onOpenChange(false);
         triggerRef.current?.focus();
     };
-    return (jsxRuntime.jsx("li", { className: dropdownmenu_module.default.dropdown_menu_item_container, role: 'presentation', children: jsxRuntime.jsx("button", { ref: ref, type: 'button', role: 'menuitem', disabled: disabled, onClick: handleClick, className: clsx(dropdownmenu_module.default.dropdown_menu_item, className, {
+    return (jsxRuntime.jsx("div", { className: dropdownmenu_module.default.dropdown_menu_item_container, children: jsxRuntime.jsx("button", { ref: mergedRef, type: 'button', role: 'menuitem', disabled: disabled, onClick: handleClick, className: clsx(dropdownmenu_module.default.dropdown_menu_item, className, {
                 [dropdownmenu_module.default.dropdown_menu_item_destructive]: destructive
             }), ...props, children: children }) }));
 });

package/dist/cjs/Field/field.css

@@ -0,0 +1,51 @@
+.field_container_5a07ab58 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.field_label_23f6b992 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--frey-color-text-primary);
+  user-select: none;
+}
+
+label.field_label_23f6b992 {
+  cursor: pointer;
+}
+
+.field_label_disabled_a828e119 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.required_indicator_b438591b {
+  color: var(--frey-color-error, #dc2626);
+  margin-left: 0.125rem;
+}
+
+.helper_text_c551e6bf {
+  font-size: 0.75rem;
+  color: var(--frey-color-text-secondary, #6b7280);
+  margin: 0;
+}
+
+.error_text_0c43fbd7 {
+  font-size: 0.75rem;
+  color: var(--frey-color-error, #dc2626);
+  margin: 0;
+}
+
+.visually_hidden_d33af3d7 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/cjs/Field/field.module.css.cjs

@@ -1,9 +1,10 @@
 'use client';
 'use strict';
+require('./field.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"field_container":"field-module_field_container__mYSRK","field_label":"field-module_field_label__HK1Z5","field_label_disabled":"field-module_field_label_disabled__SkdeT","required_indicator":"field-module_required_indicator__9eYh0","helper_text":"field-module_helper_text__1K3VS","error_text":"field-module_error_text__vwYPc","visually_hidden":"field-module_visually_hidden__ofbl2"};
+var styles = {"field_container":"field_container_5a07ab58","field_label":"field_label_23f6b992","field_label_disabled":"field_label_disabled_a828e119","required_indicator":"required_indicator_b438591b","helper_text":"helper_text_c551e6bf","error_text":"error_text_0c43fbd7","visually_hidden":"visually_hidden_d33af3d7"};
 
 exports.default = styles;
 //# sourceMappingURL=field.module.css.cjs.map

package/dist/cjs/Flex/index.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Box/index.cjs');
+
+const Flex = React.forwardRef(function Flex({ as, inline = false, direction, align, justify, wrap, style, ...restProps }, ref) {
+    const resolvedStyle = {
+        flexDirection: direction,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap,
+        ...style
+    };
+    return (jsxRuntime.jsx(index.default, { as: as, ref: ref, display: inline ? 'inline-flex' : 'flex', style: resolvedStyle, ...restProps }));
+});
+Flex.displayName = 'Flex';
+
+exports.default = Flex;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/Grid/index.cjs

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Box/index.cjs');
+
+function resolveTrackTemplate(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return `repeat(${value}, minmax(0, 1fr))`;
+    }
+    return value;
+}
+const Grid = React.forwardRef(function Grid({ as, columns, rows, autoFlow, alignItems, justifyItems, style, ...restProps }, ref) {
+    const resolvedStyle = {
+        gridTemplateColumns: resolveTrackTemplate(columns),
+        gridTemplateRows: resolveTrackTemplate(rows),
+        gridAutoFlow: autoFlow,
+        alignItems,
+        justifyItems,
+        ...style
+    };
+    return (jsxRuntime.jsx(index.default, { as: as, ref: ref, display: 'grid', style: resolvedStyle, ...restProps }));
+});
+Grid.displayName = 'Grid';
+
+exports.default = Grid;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/Icons/CheckIcon.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var IconSvg = require('./IconSvg.cjs');
+
+function CheckIcon({ size = 'md', strokeWidth = 'regular', title, className, style }) {
+    return (jsxRuntime.jsx(IconSvg.IconSvg, { size: size, strokeWidth: strokeWidth, title: title, className: className, style: style, children: jsxRuntime.jsx("path", { d: 'M5 13L10 18L19 8' }) }));
+}
+
+exports.CheckIcon = CheckIcon;
+//# sourceMappingURL=CheckIcon.cjs.map