@brycks/core-front 0.2.8 → 0.2.10

package/dist/components/feedback/Modal/Modal.js

@@ -1,15 +1,15 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as B, useRef as y, useEffect as w, useCallback as q, useMemo as E, memo as F } from "react";
-import { createPortal as P } from "react-dom";
-import { cx as $ } from "../../../utils/styles.js";
-const G = {
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as q, useRef as s, useEffect as i, useCallback as F, useMemo as S, memo as P } from "react";
+import { createPortal as $ } from "react-dom";
+import { cx as G } from "../../../utils/styles.js";
+const J = {
   sm: "400px",
   md: "500px",
   lg: "640px",
   xl: "800px",
   full: "calc(100vw - 48px)"
-}, J = F(function() {
-  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t(
+}, Q = P(function() {
+  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
     "path",
     {
       d: "M4 4L12 12M12 4L4 12",
@@ -18,50 +18,56 @@ const G = {
       strokeLinecap: "round"
     }
   ) });
-}), Q = B(function({
-  isOpen: r,
-  onClose: n,
+}), U = q(function({
+  isOpen: t,
+  onClose: o,
   size: a = "md",
   title: l,
-  description: d,
-  closeOnOverlayClick: f = !0,
-  closeOnEscape: b = !0,
-  showCloseButton: v = !0,
-  className: C,
-  style: k,
-  testId: M,
-  children: L,
-  ...I
+  description: u,
+  closeOnOverlayClick: v = !0,
+  closeOnEscape: k = !0,
+  showCloseButton: g = !0,
+  className: M,
+  style: h,
+  testId: L,
+  children: I,
+  ...T
 }, c) {
-  const g = y(null), i = y(null), s = y(!1);
-  w(() => {
-    r && !s.current ? (i.current = document.activeElement, s.current = !0) : !r && s.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), i.current?.focus(), i.current = null, s.current = !1);
-  }, [r]), w(() => {
-    if (!r) return;
-    const e = g.current;
+  const m = s(null), y = s(null), d = s(!1);
+  i(() => {
+    t && !d.current ? (y.current = document.activeElement, d.current = !0) : !t && d.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), y.current?.focus(), y.current = null, d.current = !1);
+  }, [t]);
+  const x = s(o);
+  i(() => {
+    x.current = o;
+  }, [o]), i(() => {
+    if (!t) return;
+    const e = m.current;
     e && e.focus();
-    const h = (o) => {
-      if (o.key === "Escape" && b) {
-        n();
+  }, [t]), i(() => {
+    if (!t) return;
+    const e = m.current, p = (n) => {
+      if (n.key === "Escape" && k) {
+        x.current();
         return;
       }
-      if (o.key === "Tab" && e) {
-        const u = e.querySelectorAll(
+      if (n.key === "Tab" && e) {
+        const f = e.querySelectorAll(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ), p = u[0], x = u[u.length - 1];
-        o.shiftKey && document.activeElement === p ? (o.preventDefault(), x?.focus()) : !o.shiftKey && document.activeElement === x && (o.preventDefault(), p?.focus());
+        ), w = f[0], E = f[f.length - 1];
+        n.shiftKey && document.activeElement === w ? (n.preventDefault(), E?.focus()) : !n.shiftKey && document.activeElement === E && (n.preventDefault(), w?.focus());
       }
     };
-    return document.addEventListener("keydown", h), document.body.style.overflow = "hidden", () => {
-      document.removeEventListener("keydown", h), document.body.style.overflow = "";
+    return document.addEventListener("keydown", p), document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", p), document.body.style.overflow = "";
     };
-  }, [r, b, n]);
-  const T = q(
+  }, [t, k]);
+  const N = F(
     (e) => {
-      e.target === e.currentTarget && f && n();
+      e.target === e.currentTarget && v && o();
     },
-    [f, n]
-  ), N = E(() => ({
+    [v, o]
+  ), R = S(() => ({
     position: "fixed",
     inset: 0,
     zIndex: "var(--brycks-z-modal)",
@@ -72,10 +78,10 @@ const G = {
     backgroundColor: "var(--brycks-background-overlay)",
     backdropFilter: "blur(4px)",
     animation: "brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"
-  }), []), j = E(() => ({
+  }), []), j = S(() => ({
     position: "relative",
     width: "100%",
-    maxWidth: G[a],
+    maxWidth: J[a],
     maxHeight: a === "full" ? "calc(100vh - 48px)" : "85vh",
     backgroundColor: "var(--brycks-background-elevated)",
     borderRadius: "var(--brycks-radius-xl)",
@@ -85,30 +91,30 @@ const G = {
     overflow: "hidden",
     animation: "brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",
     outline: "none",
-    ...k
-  }), [a, k]);
-  if (!r) return null;
+    ...h
+  }), [a, h]);
+  if (!t) return null;
   const D = {
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "space-between",
     padding: "20px 24px",
     borderBottom: "1px solid var(--brycks-border-muted)"
-  }, R = {
+  }, W = {
     display: "flex",
     flexDirection: "column",
     gap: 4
-  }, W = {
+  }, H = {
     fontSize: 18,
     fontWeight: 600,
     color: "var(--brycks-foreground-default)",
     margin: 0,
     lineHeight: 1.3
-  }, H = {
+  }, K = {
     fontSize: 14,
     color: "var(--brycks-foreground-muted)",
     margin: 0
-  }, K = {
+  }, z = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -119,44 +125,44 @@ const G = {
     transition: "all var(--brycks-duration-fast) var(--brycks-ease-out)",
     marginLeft: 12,
     flexShrink: 0
-  }, z = {
+  }, A = {
     flex: 1,
     overflow: "auto",
     padding: 24
-  }, A = /* @__PURE__ */ t(
+  }, B = /* @__PURE__ */ r(
     "div",
     {
       className: "brycks-modal-overlay",
-      style: N,
-      onClick: T,
-      children: /* @__PURE__ */ m(
+      style: R,
+      onClick: N,
+      children: /* @__PURE__ */ b(
         "div",
         {
           ref: (e) => {
-            g.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+            m.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
           },
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": l ? "brycks-modal-title" : void 0,
-          "aria-describedby": d ? "brycks-modal-description" : void 0,
-          className: $("brycks-modal", `brycks-modal--${a}`, C),
+          "aria-describedby": u ? "brycks-modal-description" : void 0,
+          className: G("brycks-modal", `brycks-modal--${a}`, M),
           style: j,
           tabIndex: -1,
-          "data-testid": M,
-          ...I,
+          "data-testid": L,
+          ...T,
           children: [
-            (l || v) && /* @__PURE__ */ m("div", { className: "brycks-modal-header", style: D, children: [
-              /* @__PURE__ */ m("div", { style: R, children: [
-                l && /* @__PURE__ */ t("h2", { id: "brycks-modal-title", style: W, children: l }),
-                d && /* @__PURE__ */ t("p", { id: "brycks-modal-description", style: H, children: d })
+            (l || g) && /* @__PURE__ */ b("div", { className: "brycks-modal-header", style: D, children: [
+              /* @__PURE__ */ b("div", { style: W, children: [
+                l && /* @__PURE__ */ r("h2", { id: "brycks-modal-title", style: H, children: l }),
+                u && /* @__PURE__ */ r("p", { id: "brycks-modal-description", style: K, children: u })
               ] }),
-              v && /* @__PURE__ */ t(
+              g && /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   className: "brycks-modal-close",
-                  style: K,
-                  onClick: n,
+                  style: z,
+                  onClick: o,
                   "aria-label": "Close modal",
                   onMouseEnter: (e) => {
                     e.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", e.currentTarget.style.color = "var(--brycks-foreground-default)";
@@ -164,20 +170,20 @@ const G = {
                   onMouseLeave: (e) => {
                     e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "var(--brycks-foreground-muted)";
                   },
-                  children: /* @__PURE__ */ t(J, {})
+                  children: /* @__PURE__ */ r(Q, {})
                 }
               )
             ] }),
-            /* @__PURE__ */ t("div", { className: "brycks-modal-content", style: z, children: L })
+            /* @__PURE__ */ r("div", { className: "brycks-modal-content", style: A, children: I })
           ]
         }
       )
     }
   );
-  return P(A, document.body);
+  return $(B, document.body);
 });
-Q.displayName = "Modal";
+U.displayName = "Modal";
 export {
-  Q as Modal
+  U as Modal
 };
 //# sourceMappingURL=Modal.js.map

package/dist/components/feedback/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Focus trap and keyboard handling\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onClose()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape, onClose])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: 24,\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: '20px 24px',\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: 4,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 18,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 32,\r\n    height: 32,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: 12,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: 24,\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","modalStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","closeButtonStyle","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: 24,\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: '20px 24px',\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: 4,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 18,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 32,\r\n    height: 32,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: 12,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: 24,\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","modalStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","closeButtonStyle","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

package/dist/components/form/FormLabel/FormLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),h=require("../../../utils/styles.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),e=require("../../../design-system/tokens/typography.cjs"),k={sm:{fontSize:e.fontSizes.xs},md:{fontSize:e.fontSizes.sm},lg:{fontSize:e.fontSizes.md}},n=p.forwardRef(function({children:a,size:s="md",required:i,disabled:t,description:l,className:c,style:f,testId:m,...y},b){const d=k[s],u={display:"block",fontFamily:e.textStyles.label.fontFamily,fontSize:d.fontSize,fontWeight:e.fontWeights.medium,lineHeight:e.textStyles.label.lineHeight,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",cursor:t?"not-allowed":"pointer",marginBottom:o.spacing[1],...f},g={color:"var(--brycks-error-default)",marginLeft:o.spacing[.5]},S={display:"block",fontSize:e.fontSizes.xs,fontWeight:e.fontWeights.regular,color:"var(--brycks-foreground-muted)",marginTop:o.spacing[.5]};return r.jsxs("label",{ref:b,className:h.cx("brycks-form-label",`brycks-form-label--${s}`,t&&"brycks-form-label--disabled",c),style:u,"data-testid":m,...y,children:[r.jsxs("span",{className:"brycks-form-label__text",children:[a,i&&r.jsx("span",{className:"brycks-form-label__required",style:g,"aria-hidden":"true",children:"*"})]}),l&&r.jsx("span",{className:"brycks-form-label__description",style:S,children:l})]})});n.displayName="FormLabel";exports.FormLabel=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),S=require("../../../utils/styles.cjs"),t=require("../../../design-system/tokens/spacing.cjs"),r=require("../../../design-system/tokens/typography.cjs"),h={sm:{fontSize:"var(--brycks-fs-ui-xs)"},md:{fontSize:"var(--brycks-fs-ui-sm)"},lg:{fontSize:"var(--brycks-fs-ui-md)"}},a=p.forwardRef(function({children:i,size:o="md",required:n,disabled:s,description:l,className:c,style:f,testId:y,...m},b){const u=h[o],d={display:"block",fontFamily:r.textStyles.label.fontFamily,fontSize:u.fontSize,fontWeight:r.fontWeights.medium,lineHeight:r.textStyles.label.lineHeight,color:s?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",cursor:s?"not-allowed":"pointer",marginBottom:t.spacing[1],...f},g={color:"var(--brycks-error-default)",marginLeft:t.spacing[.5]},k={display:"block",fontSize:"var(--brycks-fs-ui-xs)",fontWeight:r.fontWeights.regular,color:"var(--brycks-foreground-muted)",marginTop:t.spacing[.5]};return e.jsxs("label",{ref:b,className:S.cx("brycks-form-label",`brycks-form-label--${o}`,s&&"brycks-form-label--disabled",c),style:d,"data-testid":y,...m,children:[e.jsxs("span",{className:"brycks-form-label__text",children:[i,n&&e.jsx("span",{className:"brycks-form-label__required",style:g,"aria-hidden":"true",children:"*"})]}),l&&e.jsx("span",{className:"brycks-form-label__description",style:k,children:l})]})});a.displayName="FormLabel";exports.FormLabel=a;
 //# sourceMappingURL=FormLabel.cjs.map

package/dist/components/form/FormLabel/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontSizes, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<FormLabelSize, { fontSize: number }> = {\n  sm: { fontSize: fontSizes.xs },\n  md: { fontSize: fontSizes.sm },\n  lg: { fontSize: fontSizes.md },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: fontSizes.xs,\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","fontSizes","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"gSAgCMA,EAA0D,CAC9D,GAAI,CAAE,SAAUC,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,CAC5B,EAEaC,EAAYC,EAAAA,WAA6C,SACpE,CACE,SAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASd,EAAWK,CAAI,EAExBU,EAAa,CACjB,QAAS,QACT,WAAYC,EAAAA,WAAW,MAAM,WAC7B,SAAUF,EAAO,SACjB,WAAYG,EAAAA,YAAY,OACxB,WAAYD,EAAAA,WAAW,MAAM,WAC7B,MAAOT,EAAW,iCAAmC,mCACrD,OAAQA,EAAW,cAAgB,UACnC,aAAcW,EAAAA,QAAQ,CAAC,EACvB,GAAGR,CAAA,EAGCS,EAAgB,CACpB,MAAO,8BACP,WAAYD,EAAAA,QAAQ,EAAG,CAAA,EAGnBE,EAAmB,CACvB,QAAS,QACT,SAAUnB,EAAAA,UAAU,GACpB,WAAYgB,EAAAA,YAAY,QACxB,MAAO,iCACP,UAAWC,EAAAA,QAAQ,EAAG,CAAA,EAGxB,OACEG,EAAAA,KAAC,QAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,sBAAsBjB,CAAI,GAC1BE,GAAY,8BACZE,CAAA,EAEF,MAAOM,EACP,cAAaJ,EACZ,GAAGC,EAEJ,SAAA,CAAAS,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAjB,EACAE,SACE,OAAA,CAAK,UAAU,8BAA8B,MAAOa,EAAe,cAAY,OAAO,SAAA,GAAA,CAEvF,CAAA,EAEJ,EACCX,GACCe,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAiC,MAAOH,EACrD,SAAAZ,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDN,EAAU,YAAc"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"gSAqCMA,EAA0D,CAC9D,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,CAClB,EAEaC,EAAYC,EAAAA,WAA6C,SACpE,CACE,SAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASb,EAAWI,CAAI,EAExBU,EAAa,CACjB,QAAS,QACT,WAAYC,EAAAA,WAAW,MAAM,WAC7B,SAAUF,EAAO,SACjB,WAAYG,EAAAA,YAAY,OACxB,WAAYD,EAAAA,WAAW,MAAM,WAC7B,MAAOT,EAAW,iCAAmC,mCACrD,OAAQA,EAAW,cAAgB,UACnC,aAAcW,EAAAA,QAAQ,CAAC,EACvB,GAAGR,CAAA,EAGCS,EAAgB,CACpB,MAAO,8BACP,WAAYD,EAAAA,QAAQ,EAAG,CAAA,EAGnBE,EAAmB,CACvB,QAAS,QACT,SAAU,yBACV,WAAYH,EAAAA,YAAY,QACxB,MAAO,iCACP,UAAWC,EAAAA,QAAQ,EAAG,CAAA,EAGxB,OACEG,EAAAA,KAAC,QAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,sBAAsBjB,CAAI,GAC1BE,GAAY,8BACZE,CAAA,EAEF,MAAOM,EACP,cAAaJ,EACZ,GAAGC,EAEJ,SAAA,CAAAS,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAjB,EACAE,SACE,OAAA,CAAK,UAAU,8BAA8B,MAAOa,EAAe,cAAY,OAAO,SAAA,GAAA,CAEvF,CAAA,EAEJ,EACCX,GACCe,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAiC,MAAOH,EACrD,SAAAZ,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDN,EAAU,YAAc"}

package/dist/components/form/FormLabel/FormLabel.js

@@ -1,68 +1,68 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { cx as x } from "../../../utils/styles.js";
-import { spacing as o } from "../../../design-system/tokens/spacing.js";
-import { textStyles as i, fontWeights as n, fontSizes as e } from "../../../design-system/tokens/typography.js";
-const z = {
-  sm: { fontSize: e.xs },
-  md: { fontSize: e.sm },
-  lg: { fontSize: e.md }
-}, _ = h(function({
-  children: m,
-  size: t = "md",
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { cx as h } from "../../../utils/styles.js";
+import { spacing as e } from "../../../design-system/tokens/spacing.js";
+import { textStyles as a, fontWeights as i } from "../../../design-system/tokens/typography.js";
+const v = {
+  sm: { fontSize: "var(--brycks-fs-ui-xs)" },
+  md: { fontSize: "var(--brycks-fs-ui-sm)" },
+  lg: { fontSize: "var(--brycks-fs-ui-md)" }
+}, x = S(function({
+  children: n,
+  size: o = "md",
   required: c,
   disabled: r,
   description: l,
-  className: f,
-  style: d,
+  className: m,
+  style: f,
   testId: b,
   ...y
-}, p) {
-  const g = z[t], u = {
+}, d) {
+  const u = v[o], k = {
     display: "block",
-    fontFamily: i.label.fontFamily,
-    fontSize: g.fontSize,
-    fontWeight: n.medium,
-    lineHeight: i.label.lineHeight,
+    fontFamily: a.label.fontFamily,
+    fontSize: u.fontSize,
+    fontWeight: i.medium,
+    lineHeight: a.label.lineHeight,
     color: r ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
     cursor: r ? "not-allowed" : "pointer",
-    marginBottom: o[1],
-    ...d
-  }, k = {
+    marginBottom: e[1],
+    ...f
+  }, p = {
     color: "var(--brycks-error-default)",
-    marginLeft: o[0.5]
-  }, S = {
+    marginLeft: e[0.5]
+  }, g = {
     display: "block",
-    fontSize: e.xs,
-    fontWeight: n.regular,
+    fontSize: "var(--brycks-fs-ui-xs)",
+    fontWeight: i.regular,
     color: "var(--brycks-foreground-muted)",
-    marginTop: o[0.5]
+    marginTop: e[0.5]
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ t(
     "label",
     {
-      ref: p,
-      className: x(
+      ref: d,
+      className: h(
         "brycks-form-label",
-        `brycks-form-label--${t}`,
+        `brycks-form-label--${o}`,
         r && "brycks-form-label--disabled",
-        f
+        m
       ),
-      style: u,
+      style: k,
       "data-testid": b,
       ...y,
       children: [
-        /* @__PURE__ */ s("span", { className: "brycks-form-label__text", children: [
-          m,
-          c && /* @__PURE__ */ a("span", { className: "brycks-form-label__required", style: k, "aria-hidden": "true", children: "*" })
+        /* @__PURE__ */ t("span", { className: "brycks-form-label__text", children: [
+          n,
+          c && /* @__PURE__ */ s("span", { className: "brycks-form-label__required", style: p, "aria-hidden": "true", children: "*" })
         ] }),
-        l && /* @__PURE__ */ a("span", { className: "brycks-form-label__description", style: S, children: l })
+        l && /* @__PURE__ */ s("span", { className: "brycks-form-label__description", style: g, children: l })
       ]
     }
   );
 });
-_.displayName = "FormLabel";
+x.displayName = "FormLabel";
 export {
-  _ as FormLabel
+  x as FormLabel
 };
 //# sourceMappingURL=FormLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontSizes, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<FormLabelSize, { fontSize: number }> = {\n  sm: { fontSize: fontSizes.xs },\n  md: { fontSize: fontSizes.sm },\n  lg: { fontSize: fontSizes.md },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: fontSizes.xs,\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","fontSizes","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;AAgCA,MAAMA,IAA0D;AAAA,EAC9D,IAAI,EAAE,UAAUC,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAC5B,GAEaC,IAAYC,EAA6C,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASd,EAAWK,CAAI,GAExBU,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,YAAYC,EAAW,MAAM;AAAA,IAC7B,UAAUF,EAAO;AAAA,IACjB,YAAYG,EAAY;AAAA,IACxB,YAAYD,EAAW,MAAM;AAAA,IAC7B,OAAOT,IAAW,mCAAmC;AAAA,IACrD,QAAQA,IAAW,gBAAgB;AAAA,IACnC,cAAcW,EAAQ,CAAC;AAAA,IACvB,GAAGR;AAAA,EAAA,GAGCS,IAAgB;AAAA,IACpB,OAAO;AAAA,IACP,YAAYD,EAAQ,GAAG;AAAA,EAAA,GAGnBE,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,UAAUnB,EAAU;AAAA,IACpB,YAAYgB,EAAY;AAAA,IACxB,OAAO;AAAA,IACP,WAAWC,EAAQ,GAAG;AAAA,EAAA;AAGxB,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,sBAAsBjB,CAAI;AAAA,QAC1BE,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,UAAAjB;AAAA,UACAE,uBACE,QAAA,EAAK,WAAU,+BAA8B,OAAOa,GAAe,eAAY,QAAO,UAAA,IAAA,CAEvF;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCAAiC,OAAOH,GACrD,UAAAZ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAU,cAAc;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;AAqCA,MAAMA,IAA0D;AAAA,EAC9D,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAClB,GAEaC,IAAYC,EAA6C,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASb,EAAWI,CAAI,GAExBU,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,YAAYC,EAAW,MAAM;AAAA,IAC7B,UAAUF,EAAO;AAAA,IACjB,YAAYG,EAAY;AAAA,IACxB,YAAYD,EAAW,MAAM;AAAA,IAC7B,OAAOT,IAAW,mCAAmC;AAAA,IACrD,QAAQA,IAAW,gBAAgB;AAAA,IACnC,cAAcW,EAAQ,CAAC;AAAA,IACvB,GAAGR;AAAA,EAAA,GAGCS,IAAgB;AAAA,IACpB,OAAO;AAAA,IACP,YAAYD,EAAQ,GAAG;AAAA,EAAA,GAGnBE,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAYH,EAAY;AAAA,IACxB,OAAO;AAAA,IACP,WAAWC,EAAQ,GAAG;AAAA,EAAA;AAGxB,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,sBAAsBjB,CAAI;AAAA,QAC1BE,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,UAAAjB;AAAA,UACAE,uBACE,QAAA,EAAK,WAAU,+BAA8B,OAAOa,GAAe,eAAY,QAAO,UAAA,IAAA,CAEvF;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCAAiC,OAAOH,GACrD,UAAAZ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAU,cAAc;"}

package/dist/components/form/Input/Input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),u=require("../../../design-system/primitives/typography.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:u.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:u.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:u.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?d.focusRing.error:d.focusRing.default:d.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/typography.cjs"),u=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
 //# sourceMappingURL=Input.cjs.map

package/dist/components/form/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsxs as F, jsx as d } from "react/jsx-runtime";
 import { forwardRef as N, useState as O } from "react";
 import { cx as $ } from "../../../utils/styles.js";
-import { focusRing as i } from "../../../design-system/primitives/focus.js";
-import { componentPaddingX as c, componentHeights as p, componentGap as m } from "../../../design-system/primitives/sizing.js";
-import { componentFontSize as u } from "../../../design-system/primitives/typography.js";
+import { componentFontSize as i } from "../../../design-system/primitives/typography.js";
+import { focusRing as c } from "../../../design-system/primitives/focus.js";
+import { componentPaddingX as p, componentHeights as u, componentGap as m } from "../../../design-system/primitives/sizing.js";
 import { transition as y } from "../../../design-system/primitives/transitions.js";
 import { stateOpacity as B } from "../../../design-system/primitives/opacity.js";
 const L = {
   sm: {
-    height: p.sm,
-    fontSize: u.sm,
-    paddingX: c.sm,
+    height: u.sm,
+    fontSize: i.sm,
+    paddingX: p.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: p.md,
-    fontSize: u.md,
-    paddingX: c.md,
+    height: u.md,
+    fontSize: i.md,
+    paddingX: p.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: p.lg,
-    fontSize: u.lg,
-    paddingX: c.lg,
+    height: u.lg,
+    fontSize: i.lg,
+    paddingX: p.lg,
     radius: "var(--brycks-radius-lg)"
   }
 }, G = N(function({
@@ -54,7 +54,7 @@ const L = {
         Object.assign(e, {
           backgroundColor: "var(--brycks-background-app)",
           border: `1px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
-          boxShadow: a ? t ? i.error : i.default : i.none
+          boxShadow: a ? t ? c.error : c.default : c.none
         });
         break;
       case "filled":