@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/layout/Section/Section.js

@@ -0,0 +1,85 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { cx as j } from "../../../utils/styles.js";
+const r = {
+  none: 0,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48
+}, D = N(function({
+  title: t,
+  description: n,
+  titleLevel: c = "h2",
+  spacing: s = "md",
+  divider: i = !1,
+  actions: o,
+  className: a,
+  style: d,
+  children: y,
+  testId: f,
+  ...m
+}, p) {
+  const g = c, x = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16,
+    paddingTop: i ? r[s] : 0,
+    marginTop: r[s],
+    borderTop: i ? "1px solid var(--brycks-border-muted)" : void 0,
+    ...d
+  }, h = {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 16
+  }, S = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  }, u = {
+    fontSize: 18,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-default)",
+    margin: 0,
+    lineHeight: 1.3
+  }, b = {
+    fontSize: 14,
+    color: "var(--brycks-foreground-muted)",
+    margin: 0,
+    lineHeight: 1.5
+  }, k = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 0
+  }, v = {
+    display: "flex",
+    flexDirection: "column"
+  }, T = t || n || o;
+  return /* @__PURE__ */ l(
+    "section",
+    {
+      ref: p,
+      className: j("brycks-section", a),
+      style: x,
+      "data-testid": f,
+      ...m,
+      children: [
+        T && /* @__PURE__ */ l("div", { className: "brycks-section-header", style: h, children: [
+          /* @__PURE__ */ l("div", { style: S, children: [
+            t && /* @__PURE__ */ e(g, { style: u, children: t }),
+            n && /* @__PURE__ */ e("p", { style: b, children: n })
+          ] }),
+          o && /* @__PURE__ */ e("div", { style: k, children: o })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "brycks-section-content", style: v, children: y })
+      ]
+    }
+  );
+});
+D.displayName = "Section";
+export {
+  D as Section
+};
+//# sourceMappingURL=Section.js.map

package/dist/components/layout/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["/**\n * Section Component\n *\n * A semantic section wrapper with optional title, description, and dividers.\n * Useful for organizing content into logical groups.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** Section title */\n  title?: ReactNode\n  /** Section description */\n  description?: ReactNode\n  /** Title level for accessibility */\n  titleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  /** Spacing between sections */\n  spacing?: SectionSpacing\n  /** Whether to show a divider above the section */\n  divider?: boolean\n  /** Actions to display in the header (right side) */\n  actions?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst spacingMap: Record<SectionSpacing, number> = {\n  none: 0,\n  sm: 16,\n  md: 24,\n  lg: 32,\n  xl: 48,\n}\n\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    title,\n    description,\n    titleLevel = 'h2',\n    spacing = 'md',\n    divider = false,\n    actions,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const TitleTag = titleLevel\n\n  const sectionStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 16,\n    paddingTop: divider ? spacingMap[spacing] : 0,\n    marginTop: spacingMap[spacing],\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    gap: 16,\n  }\n\n  const titleContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 18,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    margin: 0,\n    lineHeight: 1.3,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: 14,\n    color: 'var(--brycks-foreground-muted)',\n    margin: 0,\n    lineHeight: 1.5,\n  }\n\n  const actionsStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    flexShrink: 0,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n  }\n\n  const hasHeader = title || description || actions\n\n  return (\n    <section\n      ref={ref}\n      className={cx('brycks-section', className)}\n      style={sectionStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"brycks-section-header\" style={headerStyle}>\n          <div style={titleContainerStyle}>\n            {title && (\n              <TitleTag style={titleStyle}>{title}</TitleTag>\n            )}\n            {description && (\n              <p style={descriptionStyle}>{description}</p>\n            )}\n          </div>\n          {actions && <div style={actionsStyle}>{actions}</div>}\n        </div>\n      )}\n      <div className=\"brycks-section-content\" style={contentStyle}>\n        {children}\n      </div>\n    </section>\n  )\n})\n\nSection.displayName = 'Section'\n"],"names":["spacingMap","Section","forwardRef","title","description","titleLevel","spacing","divider","actions","className","style","children","testId","props","ref","TitleTag","sectionStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","actionsStyle","contentStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AA+BA,MAAMA,IAA6C;AAAA,EACjD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAUC,EAAsC,SAC3D;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWV,GAEXW,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,YAAYT,IAAUP,EAAWM,CAAO,IAAI;AAAA,IAC5C,WAAWN,EAAWM,CAAO;AAAA,IAC7B,WAAWC,IAAU,yCAAyC;AAAA,IAC9D,GAAGG;AAAA,EAAA,GAGCO,IAA6B;AAAA,IACjC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,EAAA,GAGDC,IAAqC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,GAGDC,IAA4B;AAAA,IAChC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA,GAGRC,IAAkC;AAAA,IACtC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA,GAGRC,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,YAAY;AAAA,EAAA,GAGRC,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,EAAA,GAGXC,IAAYpB,KAASC,KAAeI;AAE1C,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAV;AAAA,MACA,WAAWW,EAAG,kBAAkBhB,CAAS;AAAA,MACzC,OAAOO;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAU,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAwB,OAAOP,GAC5C,UAAA;AAAA,UAAA,gBAAAO,EAAC,OAAA,EAAI,OAAON,GACT,UAAA;AAAA,YAAAf,KACC,gBAAAuB,EAACX,GAAA,EAAS,OAAOI,GAAa,UAAAhB,GAAM;AAAA,YAErCC,KACC,gBAAAsB,EAAC,KAAA,EAAE,OAAON,GAAmB,UAAAhB,EAAA,CAAY;AAAA,UAAA,GAE7C;AAAA,UACCI,KAAW,gBAAAkB,EAAC,OAAA,EAAI,OAAOL,GAAe,UAAAb,EAAA,CAAQ;AAAA,QAAA,GACjD;AAAA,0BAED,OAAA,EAAI,WAAU,0BAAyB,OAAOc,GAC5C,UAAAX,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDV,EAAQ,cAAc;"}

package/dist/components/layout/Semantic/Semantic.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),n=require("../../../utils/styles.cjs"),o=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("header",{ref:s,className:n.cx("brycks-header",a),"data-testid":t,...r,children:e})});o.displayName="Header";const l=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("nav",{ref:s,className:n.cx("brycks-nav",a),"data-testid":t,...r,children:e})});l.displayName="Nav";const f=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("aside",{ref:s,className:n.cx("brycks-aside",a),"data-testid":t,...r,children:e})});f.displayName="Aside";const u=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("main",{ref:s,className:n.cx("brycks-main",a),"data-testid":t,role:"main",...r,children:e})});u.displayName="Main";const m=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("footer",{ref:s,className:n.cx("brycks-footer",a),"data-testid":t,...r,children:e})});m.displayName="Footer";const N=c.forwardRef(function({children:e,className:a,testId:t,...r},s){return i.jsx("article",{ref:s,className:n.cx("brycks-article",a),"data-testid":t,...r,children:e})});N.displayName="Article";exports.Article=N;exports.Aside=f;exports.Footer=m;exports.Header=o;exports.Main=u;exports.Nav=l;
+//# sourceMappingURL=Semantic.cjs.map

package/dist/components/layout/Semantic/Semantic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Semantic.cjs","sources":["../../../../src/components/layout/Semantic/Semantic.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, type CSSProperties } from 'react'\nimport { cx } from '../../../utils/styles'\n\n// Common props for semantic elements\ninterface SemanticProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  className?: string\n  style?: CSSProperties\n  testId?: string\n}\n\n// Header Component\nexport interface HeaderProps extends SemanticProps {\n  role?: 'banner' | 'none'\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  function Header({ children, className, testId, ...props }, ref) {\n    return (\n      <header\n        ref={ref}\n        className={cx('brycks-header', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </header>\n    )\n  }\n)\n\nHeader.displayName = 'Header'\n\n// Nav Component\nexport interface NavProps extends SemanticProps {\n  'aria-label'?: string\n}\n\nexport const Nav = forwardRef<HTMLElement, NavProps>(\n  function Nav({ children, className, testId, ...props }, ref) {\n    return (\n      <nav\n        ref={ref}\n        className={cx('brycks-nav', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </nav>\n    )\n  }\n)\n\nNav.displayName = 'Nav'\n\n// Aside Component\nexport interface AsideProps extends SemanticProps {\n  'aria-label'?: string\n}\n\nexport const Aside = forwardRef<HTMLElement, AsideProps>(\n  function Aside({ children, className, testId, ...props }, ref) {\n    return (\n      <aside\n        ref={ref}\n        className={cx('brycks-aside', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </aside>\n    )\n  }\n)\n\nAside.displayName = 'Aside'\n\n// Main Component\nexport interface MainProps extends SemanticProps {\n  id?: string\n}\n\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main({ children, className, testId, ...props }, ref) {\n    return (\n      <main\n        ref={ref}\n        className={cx('brycks-main', className)}\n        data-testid={testId}\n        role=\"main\"\n        {...props}\n      >\n        {children}\n      </main>\n    )\n  }\n)\n\nMain.displayName = 'Main'\n\n// Footer Component\nexport interface FooterProps extends SemanticProps {\n  role?: 'contentinfo' | 'none'\n}\n\nexport const Footer = forwardRef<HTMLElement, FooterProps>(\n  function Footer({ children, className, testId, ...props }, ref) {\n    return (\n      <footer\n        ref={ref}\n        className={cx('brycks-footer', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </footer>\n    )\n  }\n)\n\nFooter.displayName = 'Footer'\n\n// Article Component\nexport type ArticleProps = SemanticProps\n\nexport const Article = forwardRef<HTMLElement, ArticleProps>(\n  function Article({ children, className, testId, ...props }, ref) {\n    return (\n      <article\n        ref={ref}\n        className={cx('brycks-article', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </article>\n    )\n  }\n)\n\nArticle.displayName = 'Article'\n"],"names":["Header","forwardRef","children","className","testId","props","ref","jsx","cx","Nav","Aside","Main","Footer","Article"],"mappings":"+KAgBaA,EAASC,EAAAA,WACpB,SAAgB,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC9D,OACEC,EAAAA,IAAC,SAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,gBAAiBL,CAAS,EACxC,cAAaC,EACZ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAF,EAAO,YAAc,SAOd,MAAMS,EAAMR,EAAAA,WACjB,SAAa,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC3D,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,aAAcL,CAAS,EACrC,cAAaC,EACZ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAO,EAAI,YAAc,MAOX,MAAMC,EAAQT,EAAAA,WACnB,SAAe,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC7D,OACEC,EAAAA,IAAC,QAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,eAAgBL,CAAS,EACvC,cAAaC,EACZ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAQ,EAAM,YAAc,QAOb,MAAMC,EAAOV,EAAAA,WAClB,SAAc,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC5D,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,cAAeL,CAAS,EACtC,cAAaC,EACb,KAAK,OACJ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAS,EAAK,YAAc,OAOZ,MAAMC,EAASX,EAAAA,WACpB,SAAgB,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC9D,OACEC,EAAAA,IAAC,SAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,gBAAiBL,CAAS,EACxC,cAAaC,EACZ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAU,EAAO,YAAc,SAKd,MAAMC,EAAUZ,EAAAA,WACrB,SAAiB,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAASC,EAAK,CAC/D,OACEC,EAAAA,IAAC,UAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,iBAAkBL,CAAS,EACzC,cAAaC,EACZ,GAAGC,EAEH,SAAAH,CAAA,CAAA,CAGP,CACF,EAEAW,EAAQ,YAAc"}

package/dist/components/layout/Semantic/Semantic.js

@@ -0,0 +1,103 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cx as o } from "../../../utils/styles.js";
+const d = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "header",
+      {
+        ref: s,
+        className: o("brycks-header", e),
+        "data-testid": t,
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+d.displayName = "Header";
+const m = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "nav",
+      {
+        ref: s,
+        className: o("brycks-nav", e),
+        "data-testid": t,
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+m.displayName = "Nav";
+const l = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "aside",
+      {
+        ref: s,
+        className: o("brycks-aside", e),
+        "data-testid": t,
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+l.displayName = "Aside";
+const N = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "main",
+      {
+        ref: s,
+        className: o("brycks-main", e),
+        "data-testid": t,
+        role: "main",
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+N.displayName = "Main";
+const f = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "footer",
+      {
+        ref: s,
+        className: o("brycks-footer", e),
+        "data-testid": t,
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+f.displayName = "Footer";
+const u = n(
+  function({ children: a, className: e, testId: t, ...r }, s) {
+    return /* @__PURE__ */ i(
+      "article",
+      {
+        ref: s,
+        className: o("brycks-article", e),
+        "data-testid": t,
+        ...r,
+        children: a
+      }
+    );
+  }
+);
+u.displayName = "Article";
+export {
+  u as Article,
+  l as Aside,
+  f as Footer,
+  d as Header,
+  N as Main,
+  m as Nav
+};
+//# sourceMappingURL=Semantic.js.map

package/dist/components/layout/Semantic/Semantic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Semantic.js","sources":["../../../../src/components/layout/Semantic/Semantic.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, type CSSProperties } from 'react'\nimport { cx } from '../../../utils/styles'\n\n// Common props for semantic elements\ninterface SemanticProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  className?: string\n  style?: CSSProperties\n  testId?: string\n}\n\n// Header Component\nexport interface HeaderProps extends SemanticProps {\n  role?: 'banner' | 'none'\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  function Header({ children, className, testId, ...props }, ref) {\n    return (\n      <header\n        ref={ref}\n        className={cx('brycks-header', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </header>\n    )\n  }\n)\n\nHeader.displayName = 'Header'\n\n// Nav Component\nexport interface NavProps extends SemanticProps {\n  'aria-label'?: string\n}\n\nexport const Nav = forwardRef<HTMLElement, NavProps>(\n  function Nav({ children, className, testId, ...props }, ref) {\n    return (\n      <nav\n        ref={ref}\n        className={cx('brycks-nav', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </nav>\n    )\n  }\n)\n\nNav.displayName = 'Nav'\n\n// Aside Component\nexport interface AsideProps extends SemanticProps {\n  'aria-label'?: string\n}\n\nexport const Aside = forwardRef<HTMLElement, AsideProps>(\n  function Aside({ children, className, testId, ...props }, ref) {\n    return (\n      <aside\n        ref={ref}\n        className={cx('brycks-aside', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </aside>\n    )\n  }\n)\n\nAside.displayName = 'Aside'\n\n// Main Component\nexport interface MainProps extends SemanticProps {\n  id?: string\n}\n\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main({ children, className, testId, ...props }, ref) {\n    return (\n      <main\n        ref={ref}\n        className={cx('brycks-main', className)}\n        data-testid={testId}\n        role=\"main\"\n        {...props}\n      >\n        {children}\n      </main>\n    )\n  }\n)\n\nMain.displayName = 'Main'\n\n// Footer Component\nexport interface FooterProps extends SemanticProps {\n  role?: 'contentinfo' | 'none'\n}\n\nexport const Footer = forwardRef<HTMLElement, FooterProps>(\n  function Footer({ children, className, testId, ...props }, ref) {\n    return (\n      <footer\n        ref={ref}\n        className={cx('brycks-footer', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </footer>\n    )\n  }\n)\n\nFooter.displayName = 'Footer'\n\n// Article Component\nexport type ArticleProps = SemanticProps\n\nexport const Article = forwardRef<HTMLElement, ArticleProps>(\n  function Article({ children, className, testId, ...props }, ref) {\n    return (\n      <article\n        ref={ref}\n        className={cx('brycks-article', className)}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </article>\n    )\n  }\n)\n\nArticle.displayName = 'Article'\n"],"names":["Header","forwardRef","children","className","testId","props","ref","jsx","cx","Nav","Aside","Main","Footer","Article"],"mappings":";;;AAgBO,MAAMA,IAASC;AAAA,EACpB,SAAgB,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC9D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,QACxC,eAAaC;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAO,cAAc;AAOd,MAAMS,IAAMR;AAAA,EACjB,SAAa,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC3D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,cAAcL,CAAS;AAAA,QACrC,eAAaC;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAO,EAAI,cAAc;AAOX,MAAMC,IAAQT;AAAA,EACnB,SAAe,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC7D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,gBAAgBL,CAAS;AAAA,QACvC,eAAaC;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAQ,EAAM,cAAc;AAOb,MAAMC,IAAOV;AAAA,EAClB,SAAc,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC5D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,eAAeL,CAAS;AAAA,QACtC,eAAaC;AAAA,QACb,MAAK;AAAA,QACJ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAS,EAAK,cAAc;AAOZ,MAAMC,IAASX;AAAA,EACpB,SAAgB,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC9D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,QACxC,eAAaC;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAU,EAAO,cAAc;AAKd,MAAMC,IAAUZ;AAAA,EACrB,SAAiB,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,GAAK;AAC/D,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWE,EAAG,kBAAkBL,CAAS;AAAA,QACzC,eAAaC;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAW,EAAQ,cAAc;"}

package/dist/components/layout/Spacer/Spacer.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),p=require("react"),u=require("../../../utils/styles.cjs"),h=require("../../../design-system/tokens/spacing.cjs"),a=p.forwardRef(function({size:t,customSize:c,flex:r=!1,direction:i="vertical",className:o,style:s,...n},l){const e=c??(t?h.spacing[t]:void 0),d={flex:r?1:void 0,width:i==="horizontal"?e??(r?void 0:0):void 0,height:i==="vertical"?e??(r?void 0:0):void 0,minWidth:i==="horizontal"&&e?e:void 0,minHeight:i==="vertical"&&e?e:void 0,flexShrink:0,...s};return v.jsx("div",{ref:l,className:u.cx("brycks-spacer",o),style:d,"aria-hidden":"true",...n})});a.displayName="Spacer";exports.Spacer=a;
+//# sourceMappingURL=Spacer.cjs.map

package/dist/components/layout/Spacer/Spacer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.cjs","sources":["../../../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["/**\n * Spacer Component\n *\n * A flexible spacing utility component.\n * Can be used to add space between elements or to push elements apart in flex containers.\n */\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing as spacingTokens } from '../../../design-system/tokens/spacing'\n\ntype SpacingKey = keyof typeof spacingTokens\n\nexport interface SpacerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size in spacing tokens */\n  size?: SpacingKey\n  /** Custom size in pixels */\n  customSize?: number\n  /** Whether to expand to fill available space (flex: 1) */\n  flex?: boolean\n  /** Direction of the spacer */\n  direction?: 'horizontal' | 'vertical'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Spacer = forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    size,\n    customSize,\n    flex = false,\n    direction = 'vertical',\n    className,\n    style,\n    ...props\n  },\n  ref\n) {\n  const pixelSize = customSize ?? (size ? spacingTokens[size] : undefined)\n\n  const spacerStyle: CSSProperties = {\n    flex: flex ? 1 : undefined,\n    width: direction === 'horizontal' ? (pixelSize ?? (flex ? undefined : 0)) : undefined,\n    height: direction === 'vertical' ? (pixelSize ?? (flex ? undefined : 0)) : undefined,\n    minWidth: direction === 'horizontal' && pixelSize ? pixelSize : undefined,\n    minHeight: direction === 'vertical' && pixelSize ? pixelSize : undefined,\n    flexShrink: 0,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-spacer', className)}\n      style={spacerStyle}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  )\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","forwardRef","size","customSize","flex","direction","className","style","props","ref","pixelSize","spacingTokens","spacerStyle","jsx","cx"],"mappings":"sOA0BaA,EAASC,EAAAA,WAAwC,SAC5D,CACE,KAAAC,EACA,WAAAC,EACA,KAAAC,EAAO,GACP,UAAAC,EAAY,WACZ,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAYP,IAAeD,EAAOS,EAAAA,QAAcT,CAAI,EAAI,QAExDU,EAA6B,CACjC,KAAMR,EAAO,EAAI,OACjB,MAAOC,IAAc,aAAgBK,IAAcN,EAAO,OAAY,GAAM,OAC5E,OAAQC,IAAc,WAAcK,IAAcN,EAAO,OAAY,GAAM,OAC3E,SAAUC,IAAc,cAAgBK,EAAYA,EAAY,OAChE,UAAWL,IAAc,YAAcK,EAAYA,EAAY,OAC/D,WAAY,EACZ,GAAGH,CAAA,EAGL,OACEM,EAAAA,IAAC,MAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GAAG,gBAAiBR,CAAS,EACxC,MAAOM,EACP,cAAY,OACX,GAAGJ,CAAA,CAAA,CAGV,CAAC,EAEDR,EAAO,YAAc"}

package/dist/components/layout/Spacer/Spacer.js

@@ -0,0 +1,38 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { cx as l } from "../../../utils/styles.js";
+import { spacing as n } from "../../../design-system/tokens/spacing.js";
+const h = v(function({
+  size: a,
+  customSize: t,
+  flex: o = !1,
+  direction: r = "vertical",
+  className: e,
+  style: c,
+  ...p
+}, d) {
+  const i = t ?? (a ? n[a] : void 0), m = {
+    flex: o ? 1 : void 0,
+    width: r === "horizontal" ? i ?? (o ? void 0 : 0) : void 0,
+    height: r === "vertical" ? i ?? (o ? void 0 : 0) : void 0,
+    minWidth: r === "horizontal" && i ? i : void 0,
+    minHeight: r === "vertical" && i ? i : void 0,
+    flexShrink: 0,
+    ...c
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: d,
+      className: l("brycks-spacer", e),
+      style: m,
+      "aria-hidden": "true",
+      ...p
+    }
+  );
+});
+h.displayName = "Spacer";
+export {
+  h as Spacer
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/components/layout/Spacer/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["/**\n * Spacer Component\n *\n * A flexible spacing utility component.\n * Can be used to add space between elements or to push elements apart in flex containers.\n */\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing as spacingTokens } from '../../../design-system/tokens/spacing'\n\ntype SpacingKey = keyof typeof spacingTokens\n\nexport interface SpacerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size in spacing tokens */\n  size?: SpacingKey\n  /** Custom size in pixels */\n  customSize?: number\n  /** Whether to expand to fill available space (flex: 1) */\n  flex?: boolean\n  /** Direction of the spacer */\n  direction?: 'horizontal' | 'vertical'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Spacer = forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    size,\n    customSize,\n    flex = false,\n    direction = 'vertical',\n    className,\n    style,\n    ...props\n  },\n  ref\n) {\n  const pixelSize = customSize ?? (size ? spacingTokens[size] : undefined)\n\n  const spacerStyle: CSSProperties = {\n    flex: flex ? 1 : undefined,\n    width: direction === 'horizontal' ? (pixelSize ?? (flex ? undefined : 0)) : undefined,\n    height: direction === 'vertical' ? (pixelSize ?? (flex ? undefined : 0)) : undefined,\n    minWidth: direction === 'horizontal' && pixelSize ? pixelSize : undefined,\n    minHeight: direction === 'vertical' && pixelSize ? pixelSize : undefined,\n    flexShrink: 0,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-spacer', className)}\n      style={spacerStyle}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  )\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","forwardRef","size","customSize","flex","direction","className","style","props","ref","pixelSize","spacingTokens","spacerStyle","jsx","cx"],"mappings":";;;;AA0BO,MAAMA,IAASC,EAAwC,SAC5D;AAAA,EACE,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYP,MAAeD,IAAOS,EAAcT,CAAI,IAAI,SAExDU,IAA6B;AAAA,IACjC,MAAMR,IAAO,IAAI;AAAA,IACjB,OAAOC,MAAc,eAAgBK,MAAcN,IAAO,SAAY,KAAM;AAAA,IAC5E,QAAQC,MAAc,aAAcK,MAAcN,IAAO,SAAY,KAAM;AAAA,IAC3E,UAAUC,MAAc,gBAAgBK,IAAYA,IAAY;AAAA,IAChE,WAAWL,MAAc,cAAcK,IAAYA,IAAY;AAAA,IAC/D,YAAY;AAAA,IACZ,GAAGH;AAAA,EAAA;AAGL,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAG,iBAAiBR,CAAS;AAAA,MACxC,OAAOM;AAAA,MACP,eAAY;AAAA,MACX,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAEDR,EAAO,cAAc;"}

package/dist/components/layout/Stack/Stack.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),a=require("../../../utils/styles.cjs"),k=["m","mx","my","mt","mr","mb","ml","p","px","py","pt","pr","pb","pl","direction","gap","gapX","gapY","align","justify","wrap","inline","testId"];function m(t){const n={...t};for(const e of k)delete n[e];return n}function x(t){const e={...a.buildSpacingStyles(t),display:t.inline?"inline-flex":"flex",flexDirection:t.direction??"column"};return t.gap!==void 0?e.gap=a.spacingToCss(t.gap):(t.gapX!==void 0&&(e.columnGap=a.spacingToCss(t.gapX)),t.gapY!==void 0&&(e.rowGap=a.spacingToCss(t.gapY))),t.align&&(e.alignItems=t.align),t.justify&&(e.justifyContent=t.justify),t.wrap&&(e.flexWrap=t.wrap),e}const j=({as:t,className:n,style:e,children:f,testId:d,...l},u)=>{const g=t||"div",y=x(l),S=m(l);return c.jsx(g,{ref:u,className:a.cx("brycks-stack",n),style:{...y,...e},"data-testid":d,...S,children:f})},i=s.forwardRef(j);i.displayName="Stack";const w=(t,n)=>c.jsx(i,{ref:n,direction:"row",align:"center",...t}),o=s.forwardRef(w);o.displayName="HStack";const p=(t,n)=>c.jsx(i,{ref:n,direction:"column",...t}),r=s.forwardRef(p);r.displayName="VStack";exports.HStack=o;exports.Stack=i;exports.VStack=r;
+//# sourceMappingURL=Stack.cjs.map

package/dist/components/layout/Stack/Stack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.cjs","sources":["../../../../src/components/layout/Stack/Stack.tsx"],"sourcesContent":["/**\r\n * Stack Component\r\n *\r\n * A flexbox layout component for stacking elements vertically or horizontally.\r\n * Provides consistent spacing between children.\r\n */\r\n\r\nimport React, { forwardRef, type ElementType, type ComponentPropsWithRef, type CSSProperties } from 'react'\r\nimport type { StackProps, StackOwnProps } from './Stack.types'\r\nimport { buildSpacingStyles, spacingToCss, cx } from '../../../utils/styles'\r\n\r\ninterface StackComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: StackProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst stackOwnPropKeys: (keyof StackOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'direction',\r\n  'gap',\r\n  'gapX',\r\n  'gapY',\r\n  'align',\r\n  'justify',\r\n  'wrap',\r\n  'inline',\r\n  'testId',\r\n]\r\n\r\nfunction omitStackProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof stackOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of stackOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildStackStyles(props: StackOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    display: props.inline ? 'inline-flex' : 'flex',\r\n    flexDirection: props.direction ?? 'column',\r\n  }\r\n\r\n  if (props.gap !== undefined) {\r\n    styles.gap = spacingToCss(props.gap)\r\n  } else {\r\n    if (props.gapX !== undefined) styles.columnGap = spacingToCss(props.gapX)\r\n    if (props.gapY !== undefined) styles.rowGap = spacingToCss(props.gapY)\r\n  }\r\n\r\n  if (props.align) styles.alignItems = props.align\r\n  if (props.justify) styles.justifyContent = props.justify\r\n  if (props.wrap) styles.flexWrap = props.wrap\r\n\r\n  return styles\r\n}\r\n\r\nconst StackInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: StackProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const stackStyles = buildStackStyles(props as StackOwnProps)\r\n  const filteredProps = omitStackProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-stack', className)}\r\n      style={{ ...stackStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Stack = forwardRef(StackInner) as StackComponent\r\n\r\nStack.displayName = 'Stack'\r\n\r\n/** Horizontal stack shorthand */\r\nconst HStackInner = <E extends ElementType = 'div'>(\r\n  props: Omit<StackProps<E>, 'direction'> & { ref?: ComponentPropsWithRef<E>['ref'] },\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Stack ref={ref} direction=\"row\" align=\"center\" {...props} />\r\n}\r\n\r\nexport const HStack = forwardRef(HStackInner) as StackComponent\r\n\r\nHStack.displayName = 'HStack'\r\n\r\n/** Vertical stack shorthand */\r\nconst VStackInner = <E extends ElementType = 'div'>(\r\n  props: Omit<StackProps<E>, 'direction'> & { ref?: ComponentPropsWithRef<E>['ref'] },\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Stack ref={ref} direction=\"column\" {...props} />\r\n}\r\n\r\nexport const VStack = forwardRef(VStackInner) as StackComponent\r\n\r\nVStack.displayName = 'VStack'\r\n"],"names":["stackOwnPropKeys","omitStackProps","props","result","key","buildStackStyles","styles","buildSpacingStyles","spacingToCss","StackInner","as","className","style","children","testId","ref","Component","stackStyles","filteredProps","jsx","cx","Stack","forwardRef","HStackInner","HStack","VStackInner","VStack"],"mappings":"+KAkBMA,EAA4C,CAChD,IACA,KACA,KACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,YACA,MACA,OACA,OACA,QACA,UACA,OACA,SACA,QACF,EAEA,SAASC,EACPC,EAC4C,CAC5C,MAAMC,EAAS,CAAE,GAAGD,CAAA,EACpB,UAAWE,KAAOJ,EAChB,OAAOG,EAAOC,CAAG,EAEnB,OAAOD,CACT,CAEA,SAASE,EAAiBH,EAAqC,CAG7D,MAAMI,EAAwB,CAC5B,GAHoBC,EAAAA,mBAAmBL,CAAK,EAI5C,QAASA,EAAM,OAAS,cAAgB,OACxC,cAAeA,EAAM,WAAa,QAAA,EAGpC,OAAIA,EAAM,MAAQ,OAChBI,EAAO,IAAME,eAAaN,EAAM,GAAG,GAE/BA,EAAM,OAAS,WAAkB,UAAYM,EAAAA,aAAaN,EAAM,IAAI,GACpEA,EAAM,OAAS,WAAkB,OAASM,EAAAA,aAAaN,EAAM,IAAI,IAGnEA,EAAM,QAAOI,EAAO,WAAaJ,EAAM,OACvCA,EAAM,UAASI,EAAO,eAAiBJ,EAAM,SAC7CA,EAAM,OAAMI,EAAO,SAAWJ,EAAM,MAEjCI,CACT,CAEA,MAAMG,EAAa,CACjB,CAAE,GAAAC,EAAI,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGZ,CAAA,EAC7Ca,IACG,CACH,MAAMC,EAAYN,GAAM,MAClBO,EAAcZ,EAAiBH,CAAsB,EACrDgB,EAAgBjB,EAAeC,CAAK,EAE1C,OACEiB,EAAAA,IAACH,EAAA,CACC,IAAAD,EACA,UAAWK,EAAAA,GAAG,eAAgBT,CAAS,EACvC,MAAO,CAAE,GAAGM,EAAa,GAAGL,CAAA,EAC5B,cAAaE,EACZ,GAAGI,EAEH,SAAAL,CAAA,CAAA,CAGP,EAEaQ,EAAQC,EAAAA,WAAWb,CAAU,EAE1CY,EAAM,YAAc,QAGpB,MAAME,EAAc,CAClBrB,EACAa,IAEOI,EAAAA,IAACE,GAAM,IAAAN,EAAU,UAAU,MAAM,MAAM,SAAU,GAAGb,EAAO,EAGvDsB,EAASF,EAAAA,WAAWC,CAAW,EAE5CC,EAAO,YAAc,SAGrB,MAAMC,EAAc,CAClBvB,EACAa,UAEQM,EAAA,CAAM,IAAAN,EAAU,UAAU,SAAU,GAAGb,EAAO,EAG3CwB,EAASJ,EAAAA,WAAWG,CAAW,EAE5CC,EAAO,YAAc"}

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { cx as g, buildSpacingStyles as u, spacingToCss as a } from "../../../utils/styles.js";
+const S = [
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "direction",
+  "gap",
+  "gapX",
+  "gapY",
+  "align",
+  "justify",
+  "wrap",
+  "inline",
+  "testId"
+];
+function k(t) {
+  const i = { ...t };
+  for (const n of S)
+    delete i[n];
+  return i;
+}
+function p(t) {
+  const n = {
+    ...u(t),
+    display: t.inline ? "inline-flex" : "flex",
+    flexDirection: t.direction ?? "column"
+  };
+  return t.gap !== void 0 ? n.gap = a(t.gap) : (t.gapX !== void 0 && (n.columnGap = a(t.gapX)), t.gapY !== void 0 && (n.rowGap = a(t.gapY))), t.align && (n.alignItems = t.align), t.justify && (n.justifyContent = t.justify), t.wrap && (n.flexWrap = t.wrap), n;
+}
+const x = ({ as: t, className: i, style: n, children: o, testId: r, ...s }, f) => {
+  const m = t || "div", d = p(s), y = k(s);
+  return /* @__PURE__ */ e(
+    m,
+    {
+      ref: f,
+      className: g("brycks-stack", i),
+      style: { ...d, ...n },
+      "data-testid": r,
+      ...y,
+      children: o
+    }
+  );
+}, l = c(x);
+l.displayName = "Stack";
+const w = (t, i) => /* @__PURE__ */ e(l, { ref: i, direction: "row", align: "center", ...t }), b = c(w);
+b.displayName = "HStack";
+const j = (t, i) => /* @__PURE__ */ e(l, { ref: i, direction: "column", ...t }), I = c(j);
+I.displayName = "VStack";
+export {
+  b as HStack,
+  l as Stack,
+  I as VStack
+};
+//# sourceMappingURL=Stack.js.map

package/dist/components/layout/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../../src/components/layout/Stack/Stack.tsx"],"sourcesContent":["/**\r\n * Stack Component\r\n *\r\n * A flexbox layout component for stacking elements vertically or horizontally.\r\n * Provides consistent spacing between children.\r\n */\r\n\r\nimport React, { forwardRef, type ElementType, type ComponentPropsWithRef, type CSSProperties } from 'react'\r\nimport type { StackProps, StackOwnProps } from './Stack.types'\r\nimport { buildSpacingStyles, spacingToCss, cx } from '../../../utils/styles'\r\n\r\ninterface StackComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: StackProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst stackOwnPropKeys: (keyof StackOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'direction',\r\n  'gap',\r\n  'gapX',\r\n  'gapY',\r\n  'align',\r\n  'justify',\r\n  'wrap',\r\n  'inline',\r\n  'testId',\r\n]\r\n\r\nfunction omitStackProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof stackOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of stackOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildStackStyles(props: StackOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    display: props.inline ? 'inline-flex' : 'flex',\r\n    flexDirection: props.direction ?? 'column',\r\n  }\r\n\r\n  if (props.gap !== undefined) {\r\n    styles.gap = spacingToCss(props.gap)\r\n  } else {\r\n    if (props.gapX !== undefined) styles.columnGap = spacingToCss(props.gapX)\r\n    if (props.gapY !== undefined) styles.rowGap = spacingToCss(props.gapY)\r\n  }\r\n\r\n  if (props.align) styles.alignItems = props.align\r\n  if (props.justify) styles.justifyContent = props.justify\r\n  if (props.wrap) styles.flexWrap = props.wrap\r\n\r\n  return styles\r\n}\r\n\r\nconst StackInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: StackProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const stackStyles = buildStackStyles(props as StackOwnProps)\r\n  const filteredProps = omitStackProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-stack', className)}\r\n      style={{ ...stackStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Stack = forwardRef(StackInner) as StackComponent\r\n\r\nStack.displayName = 'Stack'\r\n\r\n/** Horizontal stack shorthand */\r\nconst HStackInner = <E extends ElementType = 'div'>(\r\n  props: Omit<StackProps<E>, 'direction'> & { ref?: ComponentPropsWithRef<E>['ref'] },\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Stack ref={ref} direction=\"row\" align=\"center\" {...props} />\r\n}\r\n\r\nexport const HStack = forwardRef(HStackInner) as StackComponent\r\n\r\nHStack.displayName = 'HStack'\r\n\r\n/** Vertical stack shorthand */\r\nconst VStackInner = <E extends ElementType = 'div'>(\r\n  props: Omit<StackProps<E>, 'direction'> & { ref?: ComponentPropsWithRef<E>['ref'] },\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Stack ref={ref} direction=\"column\" {...props} />\r\n}\r\n\r\nexport const VStack = forwardRef(VStackInner) as StackComponent\r\n\r\nVStack.displayName = 'VStack'\r\n"],"names":["stackOwnPropKeys","omitStackProps","props","result","key","buildStackStyles","styles","buildSpacingStyles","spacingToCss","StackInner","as","className","style","children","testId","ref","Component","stackStyles","filteredProps","jsx","cx","Stack","forwardRef","HStackInner","HStack","VStackInner","VStack"],"mappings":";;;AAkBA,MAAMA,IAA4C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAASC,EACPC,GAC4C;AAC5C,QAAMC,IAAS,EAAE,GAAGD,EAAA;AACpB,aAAWE,KAAOJ;AAChB,WAAOG,EAAOC,CAAG;AAEnB,SAAOD;AACT;AAEA,SAASE,EAAiBH,GAAqC;AAG7D,QAAMI,IAAwB;AAAA,IAC5B,GAHoBC,EAAmBL,CAAK;AAAA,IAI5C,SAASA,EAAM,SAAS,gBAAgB;AAAA,IACxC,eAAeA,EAAM,aAAa;AAAA,EAAA;AAGpC,SAAIA,EAAM,QAAQ,SAChBI,EAAO,MAAME,EAAaN,EAAM,GAAG,KAE/BA,EAAM,SAAS,aAAkB,YAAYM,EAAaN,EAAM,IAAI,IACpEA,EAAM,SAAS,aAAkB,SAASM,EAAaN,EAAM,IAAI,KAGnEA,EAAM,UAAOI,EAAO,aAAaJ,EAAM,QACvCA,EAAM,YAASI,EAAO,iBAAiBJ,EAAM,UAC7CA,EAAM,SAAMI,EAAO,WAAWJ,EAAM,OAEjCI;AACT;AAEA,MAAMG,IAAa,CACjB,EAAE,IAAAC,GAAI,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGZ,EAAA,GAC7Ca,MACG;AACH,QAAMC,IAAYN,KAAM,OAClBO,IAAcZ,EAAiBH,CAAsB,GACrDgB,IAAgBjB,EAAeC,CAAK;AAE1C,SACE,gBAAAiB;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWK,EAAG,gBAAgBT,CAAS;AAAA,MACvC,OAAO,EAAE,GAAGM,GAAa,GAAGL,EAAA;AAAA,MAC5B,eAAaE;AAAA,MACZ,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaQ,IAAQC,EAAWb,CAAU;AAE1CY,EAAM,cAAc;AAGpB,MAAME,IAAc,CAClBrB,GACAa,MAEO,gBAAAI,EAACE,KAAM,KAAAN,GAAU,WAAU,OAAM,OAAM,UAAU,GAAGb,GAAO,GAGvDsB,IAASF,EAAWC,CAAW;AAE5CC,EAAO,cAAc;AAGrB,MAAMC,IAAc,CAClBvB,GACAa,wBAEQM,GAAA,EAAM,KAAAN,GAAU,WAAU,UAAU,GAAGb,GAAO,GAG3CwB,IAASJ,EAAWG,CAAW;AAE5CC,EAAO,cAAc;"}

package/dist/components/layout.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./layout/Box/Box.cjs"),t=require("./layout/Stack/Stack.cjs"),a=require("./layout/Grid/Grid.cjs"),c=require("./layout/Container/Container.cjs"),r=require("./layout/Card/Card.cjs"),d=require("./layout/Section/Section.cjs"),n=require("./layout/Spacer/Spacer.cjs"),o=require("./layout/Flex/Flex.cjs"),e=require("./layout/Semantic/Semantic.cjs"),s=require("./layout/AspectRatio/AspectRatio.cjs");exports.Box=i.Box;exports.HStack=t.HStack;exports.Stack=t.Stack;exports.VStack=t.VStack;exports.Grid=a.Grid;exports.GridItem=a.GridItem;exports.Container=c.Container;exports.Card=r.Card;exports.CardBody=r.CardBody;exports.CardFooter=r.CardFooter;exports.CardHeader=r.CardHeader;exports.Section=d.Section;exports.Spacer=n.Spacer;exports.Flex=o.Flex;exports.FlexItem=o.FlexItem;exports.Article=e.Article;exports.Aside=e.Aside;exports.Footer=e.Footer;exports.Header=e.Header;exports.Main=e.Main;exports.Nav=e.Nav;exports.AspectRatio=s.AspectRatio;
+//# sourceMappingURL=layout.cjs.map

package/dist/components/layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout.d.ts

@@ -0,0 +1,2 @@
+export * from './layout/index'
+export {}

package/dist/components/layout.js

@@ -0,0 +1,35 @@
+import { Box as e } from "./layout/Box/Box.js";
+import { HStack as a, Stack as x, VStack as m } from "./layout/Stack/Stack.js";
+import { Grid as d, GridItem as f } from "./layout/Grid/Grid.js";
+import { Container as c } from "./layout/Container/Container.js";
+import { Card as S, CardBody as n, CardFooter as F, CardHeader as k } from "./layout/Card/Card.js";
+import { Section as A } from "./layout/Section/Section.js";
+import { Spacer as s } from "./layout/Spacer/Spacer.js";
+import { Flex as G, FlexItem as I } from "./layout/Flex/Flex.js";
+import { Article as y, Aside as M, Footer as N, Header as R, Main as V, Nav as b } from "./layout/Semantic/Semantic.js";
+import { AspectRatio as h } from "./layout/AspectRatio/AspectRatio.js";
+export {
+  y as Article,
+  M as Aside,
+  h as AspectRatio,
+  e as Box,
+  S as Card,
+  n as CardBody,
+  F as CardFooter,
+  k as CardHeader,
+  c as Container,
+  G as Flex,
+  I as FlexItem,
+  N as Footer,
+  d as Grid,
+  f as GridItem,
+  a as HStack,
+  R as Header,
+  V as Main,
+  b as Nav,
+  A as Section,
+  s as Spacer,
+  x as Stack,
+  m as VStack
+};
+//# sourceMappingURL=layout.js.map

package/dist/components/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/media/Image/Image.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),h=require("../../../utils/styles.cjs"),N={none:"0",sm:"var(--brycks-radius-sm)",md:"var(--brycks-radius-md)",lg:"var(--brycks-radius-lg)",xl:"var(--brycks-radius-xl)",full:"var(--brycks-radius-full)"};function M(e){if(e===void 0)return;if(typeof e=="number")return e;const o=e.split(/[:/]/);if(o.length===2){const n=parseFloat(o[0]),s=parseFloat(o[1]);if(!isNaN(n)&&!isNaN(s)&&s!==0)return n/s}const r=parseFloat(e);return isNaN(r)?void 0:r}const S=u.forwardRef(function({src:o,alt:r,aspectRatio:n,fit:s="cover",loading:R="lazy",fallback:d,placeholder:c,radius:C="none",showBackground:F=!0,onLoad:p,onError:k,className:g,style:y,testId:m,...f},q){const[i,x]=u.useState("loading"),I=u.useCallback(v=>{x("loaded"),p?.(v)},[p]),B=u.useCallback(v=>{x("error"),k?.(v)},[k]),a=M(n),l=N[C]??N.none,b={position:"relative",overflow:"hidden",borderRadius:l,backgroundColor:F&&i==="loading"?"var(--brycks-background-muted)":void 0,...a?{width:"100%",paddingBottom:`${1/a*100}%`}:{}},j={display:"block",objectFit:s,borderRadius:l,...a?{position:"absolute",top:0,left:0,width:"100%",height:"100%"}:{width:y?.width??"100%",height:y?.height??"auto"},opacity:i==="loaded"?1:0,transition:"opacity var(--brycks-duration-normal, 200ms) var(--brycks-easing-out, ease-out)",...y},w={position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:l};return i==="error"?typeof d=="string"?t.jsx("div",{className:h.cx("brycks-image","brycks-image--fallback",g),style:b,"data-testid":m,children:t.jsx("img",{src:d,alt:r,style:{...j,opacity:1},...f})}):t.jsxs("div",{className:h.cx("brycks-image","brycks-image--error",g),style:{...b,backgroundColor:"var(--brycks-background-muted)"},"data-testid":m,role:"img","aria-label":r,children:[a&&t.jsx("div",{style:{paddingBottom:`${1/a*100}%`}}),d&&t.jsx("div",{style:w,children:d})]}):t.jsxs("div",{className:h.cx("brycks-image",i==="loading"&&"brycks-image--loading",i==="loaded"&&"brycks-image--loaded",g),style:a?b:{position:"relative",borderRadius:l},"data-testid":m,children:[i==="loading"&&c&&t.jsx("div",{style:w,children:typeof c=="string"?t.jsx("img",{src:c,alt:"","aria-hidden":"true",style:{width:"100%",height:"100%",objectFit:s,filter:"blur(10px)",transform:"scale(1.1)"}}):c}),t.jsx("img",{ref:q,src:o,alt:r,loading:R,onLoad:I,onError:B,style:j,...f})]})});S.displayName="Image";exports.Image=S;
+//# sourceMappingURL=Image.cjs.map

package/dist/components/media/Image/Image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.cjs","sources":["../../../../src/components/media/Image/Image.tsx"],"sourcesContent":["/**\r\n * Image Component\r\n *\r\n * Responsive image with lazy loading, fallback support, and aspect ratio control.\r\n * Follows accessibility best practices and design system conventions.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useCallback,\r\n  type CSSProperties,\r\n  type ImgHTMLAttributes,\r\n  type ReactNode,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type ImageLoading = 'lazy' | 'eager'\r\n\r\nexport interface ImageProps\r\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\r\n  /** Image source URL */\r\n  src: string\r\n  /** Alternative text for accessibility (required) */\r\n  alt: string\r\n  /** Aspect ratio (width/height). If set, maintains ratio */\r\n  aspectRatio?: number | string\r\n  /** How the image should fit within its container */\r\n  fit?: ImageFit\r\n  /** Loading strategy */\r\n  loading?: ImageLoading\r\n  /** Fallback content or URL when image fails to load */\r\n  fallback?: ReactNode | string\r\n  /** Placeholder shown while loading */\r\n  placeholder?: ReactNode | string\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Whether to show a subtle background while loading */\r\n  showBackground?: boolean\r\n  /** Callback when image loads successfully */\r\n  onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void\r\n  /** Callback when image fails to load */\r\n  onError?: (event: SyntheticEvent<HTMLImageElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  // Handle string formats like \"16:9\" or \"16/9\"\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\r\n  {\r\n    src,\r\n    alt,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    loading = 'lazy',\r\n    fallback,\r\n    placeholder,\r\n    radius = 'none',\r\n    showBackground = true,\r\n    onLoad,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading')\r\n\r\n  const handleLoad = useCallback(\r\n    (event: SyntheticEvent<HTMLImageElement>) => {\r\n      setStatus('loaded')\r\n      onLoad?.(event)\r\n    },\r\n    [onLoad]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLImageElement>) => {\r\n      setStatus('error')\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  // Container styles for aspect ratio support\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor:\r\n      showBackground && status === 'loading'\r\n        ? 'var(--brycks-background-muted)'\r\n        : undefined,\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n  }\r\n\r\n  const imageStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: style?.width ?? '100%',\r\n          height: style?.height ?? 'auto',\r\n        }),\r\n    opacity: status === 'loaded' ? 1 : 0,\r\n    transition: 'opacity var(--brycks-duration-normal, 200ms) var(--brycks-easing-out, ease-out)',\r\n    ...style,\r\n  }\r\n\r\n  const overlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    borderRadius,\r\n  }\r\n\r\n  // Render fallback content\r\n  if (status === 'error') {\r\n    if (typeof fallback === 'string') {\r\n      // Fallback is an image URL\r\n      return (\r\n        <div\r\n          className={cx('brycks-image', 'brycks-image--fallback', className)}\r\n          style={containerStyle}\r\n          data-testid={testId}\r\n        >\r\n          <img\r\n            src={fallback}\r\n            alt={alt}\r\n            style={{\r\n              ...imageStyle,\r\n              opacity: 1,\r\n            }}\r\n            {...props}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n\r\n    // Fallback is a ReactNode\r\n    return (\r\n      <div\r\n        className={cx('brycks-image', 'brycks-image--error', className)}\r\n        style={{\r\n          ...containerStyle,\r\n          backgroundColor: 'var(--brycks-background-muted)',\r\n        }}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label={alt}\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        {fallback && <div style={overlayStyle}>{fallback}</div>}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // Render image with optional placeholder\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-image',\r\n        status === 'loading' && 'brycks-image--loading',\r\n        status === 'loaded' && 'brycks-image--loaded',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      {/* Placeholder */}\r\n      {status === 'loading' && placeholder && (\r\n        <div style={overlayStyle}>\r\n          {typeof placeholder === 'string' ? (\r\n            <img\r\n              src={placeholder}\r\n              alt=\"\"\r\n              aria-hidden=\"true\"\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                objectFit: fit,\r\n                filter: 'blur(10px)',\r\n                transform: 'scale(1.1)',\r\n              }}\r\n            />\r\n          ) : (\r\n            placeholder\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {/* Main image */}\r\n      <img\r\n        ref={ref}\r\n        src={src}\r\n        alt={alt}\r\n        loading={loading}\r\n        onLoad={handleLoad}\r\n        onError={handleError}\r\n        style={imageStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nImage.displayName = 'Image'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Image","forwardRef","src","alt","aspectRatio","fit","loading","fallback","placeholder","radius","showBackground","onLoad","onError","className","style","testId","props","ref","status","setStatus","useState","handleLoad","useCallback","event","handleError","parsedRatio","borderRadius","containerStyle","imageStyle","overlayStyle","jsx","cx","jsxs"],"mappings":"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"}