@tramo-digital/react-ui 0.0.0-alpha

package/dist/esm/ui/compositions/LinkGroup/LinkGroup.js

@@ -0,0 +1,212 @@
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { useRef as x, useState as k, useEffect as C, useId as b } from "react";
+import z from "../../primitives/Frame/Frame.js";
+import L from "../../primitives/Icon/Icon.js";
+import m from "../../primitives/Link/Link.js";
+import H from "../../primitives/Button/Button.js";
+import r from "./LinkGroup.module.css.js";
+const T = (a) => {
+  const { textIconBoxes: e } = a || {}, o = x(null), [c, d] = k(!1);
+  return C(() => {
+    const n = o.current;
+    if (!n) return;
+    const l = () => {
+      const u = n.scrollWidth > n.clientWidth || n.scrollHeight > n.clientHeight;
+      d(u);
+    };
+    l();
+    const s = new ResizeObserver(l);
+    return s.observe(n), () => s.disconnect();
+  }, []), /* @__PURE__ */ i("div", { className: r.linkgroupIconWrapper, children: /* @__PURE__ */ i("div", { className: r.linkgroupIconContainer, children: /* @__PURE__ */ i("div", { className: r.linkgroupIconMainContainer, children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: o,
+      className: `${r.linkgroupIconBoxesContainer} ${c ? r.overflow : ""}`,
+      children: /* @__PURE__ */ i("div", { className: r.linkgroupIconBoxesWrapper, children: e?.map((n, l) => /* @__PURE__ */ i(
+        "div",
+        {
+          className: r.iconBoxItem,
+          children: /* @__PURE__ */ g(
+            m,
+            {
+              data: {
+                text: n.data.textLink.text,
+                href: n.data.textLink.href
+              },
+              events: n.events,
+              className: r.iconBoxSurface,
+              "aria-label": n.data.textLink.text,
+              children: [
+                /* @__PURE__ */ i(
+                  L,
+                  {
+                    data: {
+                      ...n.data.objectIcon,
+                      type: n.data.objectIcon.type
+                    }
+                  }
+                ),
+                n.data.textLink.text
+              ]
+            }
+          )
+        },
+        `${n.data.textLink.text}-${l}`
+      )) })
+    }
+  ) }) }) });
+}, B = (a) => {
+  const [e, o] = k(!1), c = x(null), { links: d, buttonVis: n = !0, button: l, stacking: s } = a, u = b(), h = b(), f = s === "vertical", I = () => o((t) => !t), N = e ? "CaratUpSmall" : "CaratDownSmall";
+  C(() => {
+    const t = (p) => {
+      e && c.current && !c.current.contains(p.target) && o(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [e]);
+  const v = d?.map((t, p) => {
+    const w = {
+      ...t,
+      events: {
+        ...t.events,
+        onClick: () => {
+          f && o(!1), t.events?.onClick && t.events.onClick();
+        }
+      }
+    };
+    return /* @__PURE__ */ i(
+      m,
+      {
+        ...w,
+        role: "menuitem"
+      },
+      `${t.data?.text || ""}-${p}`
+    );
+  });
+  return /* @__PURE__ */ i("div", { className: r.linkgroupTextWrapper, children: /* @__PURE__ */ i("div", { className: r.linkgroupTextContent, children: /* @__PURE__ */ g("div", { className: r.linkgroupTextContainer, children: [
+    /* @__PURE__ */ i("div", { className: r.linkgroupTextLeftPanel, children: f ? /* @__PURE__ */ g(
+      "div",
+      {
+        className: r.linkgroupCollapseContent,
+        ref: c,
+        children: [
+          /* @__PURE__ */ i(
+            m,
+            {
+              data: {
+                interfaceIcon: { graph: N },
+                text: "Links",
+                positioning: "right"
+              },
+              events: { onClick: I },
+              "aria-expanded": e,
+              "aria-controls": u,
+              "aria-haspopup": "menu",
+              "aria-label": "Toggle jump links",
+              id: h,
+              role: "button"
+            }
+          ),
+          e ? /* @__PURE__ */ i(
+            "div",
+            {
+              className: r.linkgroupDropdownContainer,
+              id: u,
+              role: "menu",
+              "aria-labelledby": h,
+              children: /* @__PURE__ */ i("div", { className: r.linkgroupDropdownContent, children: /* @__PURE__ */ i("div", { className: r.linkgroupVerticalTextContent, children: v }) })
+            }
+          ) : void 0
+        ]
+      }
+    ) : /* @__PURE__ */ i("div", { className: r.linkgroupLinksWrapper, children: v }) }),
+    /* @__PURE__ */ i("div", { className: r.linkgroupTextRightPanel, children: /* @__PURE__ */ i("div", { className: r.linkgroupTextButtonWrapper, children: l && n ? /* @__PURE__ */ i(H, { ...l }) : void 0 }) })
+  ] }) }) });
+}, $ = ({
+  data: a,
+  tokens: e,
+  colorPalette: o,
+  colorSource: c,
+  customColor: d
+}) => {
+  if (!a) return null;
+  const n = a.textIconBoxes && a.textIconBoxes.length > 0, l = {
+    // Colors
+    ...e?.color?.surface && {
+      "--linkgroup-color-surface": e.color.surface.default
+    },
+    ...e?.color?.scrollbarTrack && {
+      "--linkgroup-scrollbar-background": e.color.scrollbarTrack.default
+    },
+    ...e?.color?.scrollbarThumb && {
+      "--linkgroup-thumb-background": e.color.scrollbarThumb.default
+    },
+    // Spacing
+    ...e?.spacing?.textHorizontalPadding && {
+      "--linkgroup-text-padding-horizontal": e.spacing.textHorizontalPadding.default
+    },
+    ...e?.spacing?.textDivider && {
+      "--linkgroup-text-spacing-divider": e.spacing.textDivider.default
+    },
+    ...e?.spacing?.verticalItemGap && {
+      "--linkgroup-spacing-between-vertical-items": e.spacing.verticalItemGap.default
+    },
+    ...e?.spacing?.groupingLinks && {
+      "--linkgroup-grouping-links-spacing": e.spacing.groupingLinks.default
+    },
+    ...e?.spacing?.dropdownDivider && {
+      "--linkgroup-dropdown-spacing-divider": e.spacing.dropdownDivider.default
+    },
+    ...e?.spacing?.iconSliderTop && {
+      "--linkgroup-icon-spacing-slider-top": e.spacing.iconSliderTop.default
+    },
+    ...e?.spacing?.iconItemsGap && {
+      "--linkgroup-icon-spacing-between-items": e.spacing.iconItemsGap.default
+    },
+    // Sizing
+    ...e?.sizing?.dividerHeight && {
+      "--linkgroup-height-divider": e.sizing.dividerHeight.default
+    },
+    ...e?.sizing?.panelHeight && {
+      "--linkgroup-height": e.sizing.panelHeight.default
+    },
+    ...e?.sizing?.iconSliderMinHeight && {
+      "--linkgroup-icon-slider-min-height": e.sizing.iconSliderMinHeight.default
+    },
+    ...e?.sizing?.trackHeight && {
+      "--linkgroup-track-height": e.sizing.trackHeight.default
+    },
+    ...e?.sizing?.thumbWidth && {
+      "--linkgroup-thumb-width": e.sizing.thumbWidth.default
+    },
+    ...e?.sizing?.thumbHeight && {
+      "--linkgroup-thumb-height": e.sizing.thumbHeight.default
+    },
+    // Border Radius
+    ...e?.borderRadius?.component && {
+      "--linkgroup-border-radius": e.borderRadius.component.default
+    },
+    ...e?.borderRadius?.scrollbar && {
+      "--linkgroup-scrollbar-border-radius": e.borderRadius.scrollbar.default
+    },
+    ...e?.borderRadius?.thumb && {
+      "--linkgroup-thumb-border-radius": e.borderRadius.thumb.default
+    }
+  };
+  return /* @__PURE__ */ i(
+    z,
+    {
+      "data-tui-composition": "base",
+      "data-tui-pattern": "base",
+      colorPalette: o,
+      colorSource: c,
+      customColor: d,
+      className: r.linkgroupWrapper,
+      style: l,
+      children: n ? T(a) : B(a)
+    }
+  );
+};
+export {
+  $ as default
+};
+//# sourceMappingURL=LinkGroup.js.map

package/dist/esm/ui/compositions/LinkGroup/LinkGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkGroup.js","sources":["../../../../../src/ui/compositions/LinkGroup/LinkGroup.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport { SvgIconName } from '@tramo-digital/icons';\nimport { LinkGroupModel } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport Icon from '../../primitives/Icon/Icon';\nimport Link from '../../primitives/Link/Link';\nimport Button from '../../primitives/Button/Button';\nimport styles from './LinkGroup.module.css';\n\nexport interface LinkGroupProps extends React.HTMLAttributes<HTMLElement> {\n  data?: LinkGroupModel['data'];\n  events?: LinkGroupModel['events'];\n  tokens?: LinkGroupModel['tokens'];\n  colorPalette?: LinkGroupModel['colorPalette'];\n  colorSource?: LinkGroupModel['colorSource'];\n  customColor?: LinkGroupModel['customColor'];\n}\n\n/* ────────────────────────────────────────────────\n * Icon mode – scrollable row of Icon + Link pairs\n * ──────────────────────────────────────────────── */\n\nconst renderIconMode = (data: NonNullable<LinkGroupProps['data']>) => {\n  const { textIconBoxes } = data || {};\n  const ref = useRef<HTMLDivElement>(null);\n  const [hasOverflow, setHasOverflow] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const checkOverflow = () => {\n      const has =\n        el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n      setHasOverflow(has);\n    };\n\n    checkOverflow();\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    resizeObserver.observe(el);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <div className={styles.linkgroupIconWrapper}>\n      <div className={styles.linkgroupIconContainer}>\n        <div className={styles.linkgroupIconMainContainer}>\n          <div\n            ref={ref}\n            className={`${styles.linkgroupIconBoxesContainer} ${hasOverflow ? styles.overflow : ''}`}\n          >\n            <div className={styles.linkgroupIconBoxesWrapper}>\n              {textIconBoxes?.map((box, index) => (\n                <div\n                  key={`${box.data.textLink.text}-${index}`}\n                  className={styles.iconBoxItem}\n                >\n                  <Link\n                    data={{\n                      text: box.data.textLink.text,\n                      href: box.data.textLink.href,\n                    }}\n                    events={box.events}\n                    className={styles.iconBoxSurface}\n                    aria-label={box.data.textLink.text}\n                  >\n                    <Icon\n                      data={{\n                        ...box.data.objectIcon,\n                        type: box.data.objectIcon.type as SvgIconName,\n                      }}\n                    />\n                    {box.data.textLink.text}\n                  </Link>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/* ────────────────────────────────────────────────\n * Text mode – horizontal links / vertical collapse\n * ──────────────────────────────────────────────── */\n\nconst renderTextMode = (data: NonNullable<LinkGroupProps['data']>) => {\n  const [collapseOpen, setCollapseOpen] = useState<boolean>(false);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const { links, buttonVis = true, button, stacking } = data;\n  const dropdownId = useId();\n  const toggleId = useId();\n\n  const isCollapseEnabled = stacking === 'vertical';\n  const onCollapseClick = () => setCollapseOpen((prev) => !prev);\n  const caret = collapseOpen ? 'CaratUpSmall' : 'CaratDownSmall';\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!collapseOpen) return;\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setCollapseOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [collapseOpen]);\n\n  const textLinkComponents = links?.map((link, index) => {\n    const augmentedLink = {\n      ...link,\n      events: {\n        ...link.events,\n        onClick: () => {\n          if (isCollapseEnabled) setCollapseOpen(false);\n          if (link.events?.onClick) link.events.onClick();\n        },\n      },\n    };\n    return (\n      <Link\n        key={`${link.data?.text || ''}-${index}`}\n        {...augmentedLink}\n        role=\"menuitem\"\n      />\n    );\n  });\n\n  return (\n    <div className={styles.linkgroupTextWrapper}>\n      <div className={styles.linkgroupTextContent}>\n        <div className={styles.linkgroupTextContainer}>\n          <div className={styles.linkgroupTextLeftPanel}>\n            {isCollapseEnabled ? (\n              <div\n                className={styles.linkgroupCollapseContent}\n                ref={dropdownRef}\n              >\n                <Link\n                  data={{\n                    interfaceIcon: { graph: caret },\n                    text: 'Links',\n                    positioning: 'right',\n                  }}\n                  events={{ onClick: onCollapseClick }}\n                  aria-expanded={collapseOpen}\n                  aria-controls={dropdownId}\n                  aria-haspopup=\"menu\"\n                  aria-label=\"Toggle jump links\"\n                  id={toggleId}\n                  role=\"button\"\n                />\n                {collapseOpen ? (\n                  <div\n                    className={styles.linkgroupDropdownContainer}\n                    id={dropdownId}\n                    role=\"menu\"\n                    aria-labelledby={toggleId}\n                  >\n                    <div className={styles.linkgroupDropdownContent}>\n                      <div className={styles.linkgroupVerticalTextContent}>\n                        {textLinkComponents}\n                      </div>\n                    </div>\n                  </div>\n                ) : undefined}\n              </div>\n            ) : (\n              <div className={styles.linkgroupLinksWrapper}>\n                {textLinkComponents}\n              </div>\n            )}\n          </div>\n          <div className={styles.linkgroupTextRightPanel}>\n            <div className={styles.linkgroupTextButtonWrapper}>\n              {button && buttonVis ? <Button {...button} /> : undefined}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/* ────────────────────────────────────────────────\n * Main LinkGroup composition\n * ──────────────────────────────────────────────── */\n\nconst LinkGroup: React.FC<LinkGroupProps> = ({\n  data,\n  tokens,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = '4432ac8b27dbb3833bcdb045ea45279d';\n\n  const useIconMode = data.textIconBoxes && data.textIconBoxes.length > 0;\n\n  // Map LinkGroup tokens to CSS variables\n  const tokenStyles = {\n    // Colors\n    ...(tokens?.color?.surface && {\n      '--linkgroup-color-surface': tokens.color.surface.default,\n    }),\n    ...(tokens?.color?.scrollbarTrack && {\n      '--linkgroup-scrollbar-background': tokens.color.scrollbarTrack.default,\n    }),\n    ...(tokens?.color?.scrollbarThumb && {\n      '--linkgroup-thumb-background': tokens.color.scrollbarThumb.default,\n    }),\n    // Spacing\n    ...(tokens?.spacing?.textHorizontalPadding && {\n      '--linkgroup-text-padding-horizontal':\n        tokens.spacing.textHorizontalPadding.default,\n    }),\n    ...(tokens?.spacing?.textDivider && {\n      '--linkgroup-text-spacing-divider': tokens.spacing.textDivider.default,\n    }),\n    ...(tokens?.spacing?.verticalItemGap && {\n      '--linkgroup-spacing-between-vertical-items':\n        tokens.spacing.verticalItemGap.default,\n    }),\n    ...(tokens?.spacing?.groupingLinks && {\n      '--linkgroup-grouping-links-spacing':\n        tokens.spacing.groupingLinks.default,\n    }),\n    ...(tokens?.spacing?.dropdownDivider && {\n      '--linkgroup-dropdown-spacing-divider':\n        tokens.spacing.dropdownDivider.default,\n    }),\n    ...(tokens?.spacing?.iconSliderTop && {\n      '--linkgroup-icon-spacing-slider-top':\n        tokens.spacing.iconSliderTop.default,\n    }),\n    ...(tokens?.spacing?.iconItemsGap && {\n      '--linkgroup-icon-spacing-between-items':\n        tokens.spacing.iconItemsGap.default,\n    }),\n    // Sizing\n    ...(tokens?.sizing?.dividerHeight && {\n      '--linkgroup-height-divider': tokens.sizing.dividerHeight.default,\n    }),\n    ...(tokens?.sizing?.panelHeight && {\n      '--linkgroup-height': tokens.sizing.panelHeight.default,\n    }),\n    ...(tokens?.sizing?.iconSliderMinHeight && {\n      '--linkgroup-icon-slider-min-height':\n        tokens.sizing.iconSliderMinHeight.default,\n    }),\n    ...(tokens?.sizing?.trackHeight && {\n      '--linkgroup-track-height': tokens.sizing.trackHeight.default,\n    }),\n    ...(tokens?.sizing?.thumbWidth && {\n      '--linkgroup-thumb-width': tokens.sizing.thumbWidth.default,\n    }),\n    ...(tokens?.sizing?.thumbHeight && {\n      '--linkgroup-thumb-height': tokens.sizing.thumbHeight.default,\n    }),\n    // Border Radius\n    ...(tokens?.borderRadius?.component && {\n      '--linkgroup-border-radius': tokens.borderRadius.component.default,\n    }),\n    ...(tokens?.borderRadius?.scrollbar && {\n      '--linkgroup-scrollbar-border-radius':\n        tokens.borderRadius.scrollbar.default,\n    }),\n    ...(tokens?.borderRadius?.thumb && {\n      '--linkgroup-thumb-border-radius': tokens.borderRadius.thumb.default,\n    }),\n  } as React.CSSProperties;\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data-tui-pattern=\"base\"\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={styles.linkgroupWrapper}\n      style={tokenStyles}\n    >\n      {useIconMode ? renderIconMode(data) : renderTextMode(data)}\n    </Frame>\n  );\n};\n\nexport default LinkGroup;\n"],"names":["renderIconMode","data","textIconBoxes","ref","useRef","hasOverflow","setHasOverflow","useState","useEffect","el","checkOverflow","has","resizeObserver","jsx","styles","box","index","jsxs","Link","Icon","renderTextMode","collapseOpen","setCollapseOpen","dropdownRef","links","buttonVis","button","stacking","dropdownId","useId","toggleId","isCollapseEnabled","onCollapseClick","prev","caret","handleClickOutside","event","textLinkComponents","link","augmentedLink","Button","LinkGroup","tokens","colorPalette","colorSource","customColor","useIconMode","tokenStyles","Frame"],"mappings":"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"}

package/dist/esm/ui/compositions/LinkGroup/LinkGroup.module.css.js

@@ -0,0 +1,46 @@
+const n = "KIWZ6u3p", o = "C-6--lqn", r = "FtNxn8SS", t = "Jn4P8xng", p = "U253-76N", e = "NkcZMwOZ", i = "vK73LAK5", l = "Rh3lqopg", u = "NfmHrG-o", c = "IFdPdvyI", a = "uplArpAt", g = "FXWIIff0", k = "MT-qu1zt", s = "y8sveYjD", x = "_21BXOaMn", C = "O5SQl0oi", I = "IjvObL6x", T = "pa2FTUCz", W = "F52O0V-y", B = "_7n--WpS-", f = {
+  linkgroupWrapper: n,
+  linkgroupTextWrapper: o,
+  linkgroupTextContent: r,
+  linkgroupVerticalTextContent: t,
+  linkgroupCollapseContent: p,
+  linkgroupTextContainer: e,
+  linkgroupTextLeftPanel: i,
+  linkgroupTextRightPanel: l,
+  linkgroupLinksWrapper: u,
+  linkgroupTextButtonWrapper: c,
+  linkgroupDropdownContainer: a,
+  linkgroupDropdownContent: g,
+  linkgroupIconWrapper: k,
+  linkgroupIconContainer: s,
+  linkgroupIconBoxesContainer: x,
+  overflow: C,
+  linkgroupIconBoxesWrapper: I,
+  iconBoxItem: T,
+  iconBoxSurface: W,
+  linkgroupIconMainContainer: B
+};
+export {
+  f as default,
+  T as iconBoxItem,
+  W as iconBoxSurface,
+  p as linkgroupCollapseContent,
+  a as linkgroupDropdownContainer,
+  g as linkgroupDropdownContent,
+  x as linkgroupIconBoxesContainer,
+  I as linkgroupIconBoxesWrapper,
+  s as linkgroupIconContainer,
+  B as linkgroupIconMainContainer,
+  k as linkgroupIconWrapper,
+  u as linkgroupLinksWrapper,
+  c as linkgroupTextButtonWrapper,
+  e as linkgroupTextContainer,
+  r as linkgroupTextContent,
+  i as linkgroupTextLeftPanel,
+  l as linkgroupTextRightPanel,
+  o as linkgroupTextWrapper,
+  t as linkgroupVerticalTextContent,
+  n as linkgroupWrapper,
+  C as overflow
+};
+//# sourceMappingURL=LinkGroup.module.css.js.map

package/dist/esm/ui/compositions/LinkGroup/LinkGroup.module.css.js.map

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

package/dist/esm/ui/compositions/LinkGroup/index.js

@@ -0,0 +1,5 @@
+import r from "./LinkGroup.js";
+export {
+  r as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/LinkGroup/index.js.map

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

package/dist/esm/ui/compositions/MediaQuote/MediaQuote.js

@@ -0,0 +1,65 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import p from "../../primitives/Frame/Frame.js";
+import h from "../../primitives/TextQuote/TextQuote.js";
+import g from "../../patterns/Author/Author.js";
+import t from "./MediaQuote.module.css.js";
+const x = ({
+  data: i,
+  tokens: e,
+  colorPalette: o,
+  colorSource: n,
+  customColor: m
+}) => {
+  if (!i) return null;
+  const l = {
+    ...e?.color?.background && {
+      "--media-quote-background": e.color.background.default
+    },
+    ...e?.border?.borderRadius && {
+      "--media-quote-border-radius": e.border.borderRadius.default
+    },
+    ...e?.spacing?.padding && {
+      "--media-quote-padding": e.spacing.padding.default
+    },
+    ...e?.spacing?.gap && {
+      "--media-quote-content-gap": e.spacing.gap.default
+    },
+    ...e?.dimension?.minWidth && {
+      "--media-quote-left-min-width": e.dimension.minWidth.default
+    }
+  }, { textQuote: u, author: d, src: s, alt: c } = i || {};
+  return /* @__PURE__ */ a(
+    p,
+    {
+      "data-tui-composition": "base",
+      colorPalette: o,
+      colorSource: n,
+      customColor: m,
+      className: t.mediaQuote,
+      style: l,
+      children: /* @__PURE__ */ r("div", { className: t.mediaQuoteWrapper, children: [
+        /* @__PURE__ */ a("div", { className: t.leftPanelContent, children: /* @__PURE__ */ a("img", { className: t.image, src: s, alt: c }) }),
+        /* @__PURE__ */ a("div", { className: t.rightPanelContent, children: /* @__PURE__ */ r("div", { className: t.mediaQuoteContentContainer, children: [
+          /* @__PURE__ */ a("div", { className: t.mediaQuoteContentWrapper, children: /* @__PURE__ */ a(
+            h,
+            {
+              data: { ...u },
+              tokens: e?.elements?.textQuote
+            }
+          ) }),
+          /* @__PURE__ */ a("div", { className: t.mediaQuoteAuthorWrapper, children: d ? /* @__PURE__ */ a("div", { className: t.mediaQuoteAuthorContent, children: /* @__PURE__ */ a(
+            g,
+            {
+              data: { ...d },
+              tokens: e?.elements?.author
+            }
+          ) }) : null })
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  x as default
+};
+//# sourceMappingURL=MediaQuote.js.map

package/dist/esm/ui/compositions/MediaQuote/MediaQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaQuote.js","sources":["../../../../../src/ui/compositions/MediaQuote/MediaQuote.tsx"],"sourcesContent":["import { MediaQuoteModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport TextQuote from \"../../primitives/TextQuote/TextQuote\";\nimport Author from \"../../patterns/Author/Author\";\nimport styles from \"./MediaQuote.module.css\";\n\nexport type MediaQuoteProps = Omit<MediaQuoteModel, \"_type\">;\n\nconst MediaQuote: React.FC<MediaQuoteProps> = ({\n  data,\n  tokens,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = \"d9263775cdc6a33393be4ab25bca8a2d\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--media-quote-background\": tokens.color.background.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--media-quote-border-radius\": tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--media-quote-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--media-quote-content-gap\": tokens.spacing.gap.default,\n    }),\n    ...(tokens?.dimension?.minWidth && {\n      \"--media-quote-left-min-width\": tokens.dimension.minWidth.default,\n    }),\n  };\n\n  const { textQuote, author, src, alt } = data || {};\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={styles.mediaQuote}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.mediaQuoteWrapper}>\n        <div className={styles.leftPanelContent}>\n          <img className={styles.image} src={src} alt={alt} />\n        </div>\n        <div className={styles.rightPanelContent}>\n          <div className={styles.mediaQuoteContentContainer}>\n            <div className={styles.mediaQuoteContentWrapper}>\n              <TextQuote\n                data={{ ...textQuote }}\n                tokens={tokens?.elements?.textQuote}\n              />\n            </div>\n            <div className={styles.mediaQuoteAuthorWrapper}>\n              {author ? (\n                <div className={styles.mediaQuoteAuthorContent}>\n                  <Author\n                    data={{ ...author }}\n                    tokens={tokens?.elements?.author}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Frame>\n  );\n};\n\nexport default MediaQuote;\n"],"names":["MediaQuote","data","tokens","colorPalette","colorSource","customColor","tokenStyles","textQuote","author","src","alt","jsx","Frame","styles","jsxs","TextQuote","Author"],"mappings":";;;;;AAQA,MAAMA,IAAwC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACJ,EAAM,QAAO;AAGlB,QAAMK,IAAc;AAAA,IAClB,GAAIJ,GAAQ,OAAO,cAAc;AAAA,MAC/B,4BAA4BA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAEtD,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,+BAA+BA,EAAO,OAAO,aAAa;AAAA,IAAA;AAAA,IAE5D,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,yBAAyBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAElD,GAAIA,GAAQ,SAAS,OAAO;AAAA,MAC1B,6BAA6BA,EAAO,QAAQ,IAAI;AAAA,IAAA;AAAA,IAElD,GAAIA,GAAQ,WAAW,YAAY;AAAA,MACjC,gCAAgCA,EAAO,UAAU,SAAS;AAAA,IAAA;AAAA,EAC5D,GAGI,EAAE,WAAAK,GAAW,QAAAC,GAAQ,KAAAC,GAAK,KAAAC,EAAA,IAAQT,KAAQ,CAAA;AAEhD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,cAAAT;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAWQ,EAAO;AAAA,MAClB,OAAOP;AAAA,MAEP,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,mBACrB,UAAA;AAAA,QAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,kBACrB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,OAAO,KAAAJ,GAAU,KAAAC,EAAA,CAAU,GACpD;AAAA,QACA,gBAAAC,EAAC,SAAI,WAAWE,EAAO,mBACrB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,4BACrB,UAAA;AAAA,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,0BACrB,UAAA,gBAAAF;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAM,EAAE,GAAGR,EAAA;AAAA,cACX,QAAQL,GAAQ,UAAU;AAAA,YAAA;AAAA,UAAA,GAE9B;AAAA,UACA,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAO,yBACpB,cACC,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,yBACrB,UAAA,gBAAAF;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAM,EAAE,GAAGR,EAAA;AAAA,cACX,QAAQN,GAAQ,UAAU;AAAA,YAAA;AAAA,UAAA,EAC5B,CACF,IACE,KAAA,CACN;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/ui/compositions/MediaQuote/MediaQuote.module.css.js

@@ -0,0 +1,22 @@
+const e = "wIVgl8hc", t = "Ehicgq5m", n = "-z4zVL-b", o = "ZgGhyiOt", a = "aLIuEvbo", i = "uhTe8D9E", r = "Cwsz4KbL", u = "ORCfiGj1", m = {
+  mediaQuote: e,
+  mediaQuoteWrapper: t,
+  leftPanelContent: n,
+  image: o,
+  rightPanelContent: a,
+  mediaQuoteContentContainer: i,
+  mediaQuoteContentWrapper: r,
+  mediaQuoteAuthorWrapper: u
+};
+export {
+  m as default,
+  o as image,
+  n as leftPanelContent,
+  e as mediaQuote,
+  u as mediaQuoteAuthorWrapper,
+  i as mediaQuoteContentContainer,
+  r as mediaQuoteContentWrapper,
+  t as mediaQuoteWrapper,
+  a as rightPanelContent
+};
+//# sourceMappingURL=MediaQuote.module.css.js.map

package/dist/esm/ui/compositions/MediaQuote/MediaQuote.module.css.js.map

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

package/dist/esm/ui/compositions/MediaQuote/index.js

@@ -0,0 +1,5 @@
+import o from "./MediaQuote.js";
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/MediaQuote/index.js.map

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

package/dist/esm/ui/compositions/MediaSplit/MediaSplit.js

@@ -0,0 +1,126 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import y from "../../primitives/Frame/Frame.js";
+import x from "../../primitives/Video/Video.js";
+import V from "../../primitives/Image/Image.js";
+import N from "../../patterns/Content/Content.js";
+import e from "./MediaSplit.module.css.js";
+const W = ({
+  className: c,
+  data: a,
+  tokens: o,
+  colorPalette: s,
+  colorSource: p,
+  customColor: u
+}) => {
+  if (!a) return null;
+  const g = {
+    ...o?.color?.background && {
+      "--media-split-default-background": o.color.background.default
+    },
+    ...o?.spacing?.padding && {
+      "--media-split-default-padding": o.spacing.padding.default
+    },
+    ...o?.spacing?.gap && {
+      "--media-split-default-gap": o.spacing.gap.default
+    }
+  }, {
+    leftContentContainer: m = !0,
+    rightContentContainer: f = !0,
+    leftContent: b,
+    rightContent: k,
+    media: n = {
+      src: void 0,
+      alt: "Hero background image",
+      backgroundType: "image",
+      backgroundVideoSrc: void 0,
+      backgroundVideoPoster: void 0,
+      backgroundVideoType: "video/mp4"
+    }
+  } = a || {}, v = (t) => t.backgroundType === "video" && t.backgroundVideoSrc ? /* @__PURE__ */ i(
+    x,
+    {
+      data: {
+        src: t.backgroundVideoSrc,
+        poster: t.backgroundVideoPoster,
+        alt: t.alt,
+        type: t.backgroundVideoType,
+        autoPlay: !0,
+        loop: !0,
+        muted: !0,
+        playsInline: !0
+      },
+      className: e.backgroundVideo
+    }
+  ) : t.src ? /* @__PURE__ */ i("div", { className: e.imageWrapper, children: /* @__PURE__ */ i(
+    V,
+    {
+      data: {
+        src: t.src,
+        alt: t.alt || "Hero background",
+        fluid: !0,
+        objectFit: "contain"
+      }
+    }
+  ) }) : null, r = (t, d) => d ? /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${e.contentPanel} ${t ? e.leftContentPanel : e.rightContentPanel}`,
+      children: /* @__PURE__ */ i(
+        N,
+        {
+          data: d,
+          tokens: {
+            spacing: {
+              titleGap: {
+                default: "var(--composition-media-split-default-spacing-textblock-headings)"
+              },
+              contentGap: {
+                default: "var(--composition-media-split-default-spacing-contentblock-ctablock)"
+              },
+              containerGap: {
+                default: "var(--composition-media-split-default-spacing-contentblock-logo-icon-textblock)"
+              },
+              textGap: {
+                default: "var(--composition-media-split-default-spacing-textblock-eyebrow-headings-body)"
+              },
+              ctaGap: {
+                default: "var(--composition-media-split-default-spacing-ctablock-buttons-textlink)"
+              },
+              textlinksGap: {
+                default: "var(--composition-media-split-default-spacing-textlinks)"
+              }
+            },
+            dimension: {
+              minWidth: {
+                default: "var(--composition-media-split-default-sizing-content-min-width)"
+              }
+            }
+          }
+        }
+      )
+    }
+  ) : null, h = n.backgroundType === "video" ? n.backgroundVideoSrc : n.src, C = [e.mediaSplit, c ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
+    y,
+    {
+      "data-tui-composition": "base",
+      data: { as: "div" },
+      colorPalette: s,
+      colorSource: p,
+      customColor: u,
+      className: C,
+      style: g,
+      children: [
+        h && /* @__PURE__ */ i("div", { className: e.mediaContainer, children: v(n) }),
+        /* @__PURE__ */ i("div", { className: e.contentWrapper, children: /* @__PURE__ */ l("div", { className: e.mainContentContainer, children: [
+          m && r(!0, b),
+          f && r(!1, k)
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  W as default
+};
+//# sourceMappingURL=MediaSplit.js.map

package/dist/esm/ui/compositions/MediaSplit/MediaSplit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSplit.js","sources":["../../../../../src/ui/compositions/MediaSplit/MediaSplit.tsx"],"sourcesContent":["import type { ContentData, MediaSplitModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Video from \"../../primitives/Video/Video\";\nimport Image from \"../../primitives/Image/Image\";\nimport Content from \"../../patterns/Content/Content\";\nimport styles from \"./MediaSplit.module.css\";\n\nexport interface MediaSplitProps extends MediaSplitModel {\n  children?: React.ReactNode;\n}\n\nconst MediaSplit: React.FC<MediaSplitProps> = ({\n  className,\n  data,\n  tokens,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = \"486b27a8cc7ae2bbdfd8e79656257078\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--media-split-default-background\": tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--media-split-default-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--media-split-default-gap\": tokens.spacing.gap.default,\n    }),\n  };\n\n  const {\n    leftContentContainer = true,\n    rightContentContainer = true,\n    leftContent,\n    rightContent,\n    media = {\n      src: undefined,\n      alt: \"Hero background image\",\n      backgroundType: \"image\",\n      backgroundVideoSrc: undefined,\n      backgroundVideoPoster: undefined,\n      backgroundVideoType: \"video/mp4\",\n    },\n  } = data || {};\n\n  /**\n   * Renders the appropriate media element based on backgroundType\n   */\n  const renderMedia = (mediaData: typeof media) => {\n    if (mediaData.backgroundType === \"video\" && mediaData.backgroundVideoSrc) {\n      return (\n        <Video\n          data={{\n            src: mediaData.backgroundVideoSrc,\n            poster: mediaData.backgroundVideoPoster,\n            alt: mediaData.alt,\n            type: mediaData.backgroundVideoType,\n            autoPlay: true,\n            loop: true,\n            muted: true,\n            playsInline: true,\n          }}\n          className={styles.backgroundVideo}\n        />\n      );\n    }\n\n    if (mediaData.src) {\n      return (\n        <div className={styles.imageWrapper}>\n          <Image\n            data={{\n              src: mediaData.src,\n              alt: mediaData.alt || \"Hero background\",\n              fluid: true,\n              objectFit: \"contain\",\n            }}\n          />\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const renderContentPanel = (isLeft: boolean, contentData?: ContentData) => {\n    if (!contentData) return null;\n\n    return (\n      <div\n        className={`${styles.contentPanel} ${isLeft ? styles.leftContentPanel : styles.rightContentPanel}`}\n      >\n        <Content\n          data={contentData}\n          tokens={{\n            spacing: {\n              titleGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-textblock-headings)\",\n              },\n              contentGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-contentblock-ctablock)\",\n              },\n              containerGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-contentblock-logo-icon-textblock)\",\n              },\n              textGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-textblock-eyebrow-headings-body)\",\n              },\n              ctaGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-ctablock-buttons-textlink)\",\n              },\n              textlinksGap: {\n                default:\n                  \"var(--composition-media-split-default-spacing-textlinks)\",\n              },\n            },\n            dimension: {\n              minWidth: {\n                default:\n                  \"var(--composition-media-split-default-sizing-content-min-width)\",\n              },\n            },\n          }}\n        />\n      </div>\n    );\n  };\n\n  const hasMedia =\n    media.backgroundType === \"video\" ? media.backgroundVideoSrc : media.src;\n  const mediaSplitClassName = [styles.mediaSplit, className ?? \"\"]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data={{ as: \"div\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={mediaSplitClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      {hasMedia && (\n        <div className={styles.mediaContainer}>{renderMedia(media)}</div>\n      )}\n      <div className={styles.contentWrapper}>\n        <div className={styles.mainContentContainer}>\n          {leftContentContainer && renderContentPanel(true, leftContent)}\n          {rightContentContainer && renderContentPanel(false, rightContent)}\n        </div>\n      </div>\n    </Frame>\n  );\n};\n\nexport default MediaSplit;\n"],"names":["MediaSplit","className","data","tokens","colorPalette","colorSource","customColor","tokenStyles","leftContentContainer","rightContentContainer","leftContent","rightContent","media","renderMedia","mediaData","jsx","Video","styles","Image","renderContentPanel","isLeft","contentData","Content","hasMedia","mediaSplitClassName","jsxs","Frame"],"mappings":"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"}

package/dist/esm/ui/compositions/MediaSplit/MediaSplit.module.css.js

@@ -0,0 +1,24 @@
+const n = "y0omOnLN", t = "oumRnSaJ", e = "zmrVciud", o = "NN7jfL-i", a = "_96Xwxt87", i = "fFLHwOIV", r = "tdR2l-YA", c = "FC8dth5p", s = "ue8skmWr", l = {
+  mediaSplit: n,
+  mediaContainer: t,
+  imageWrapper: e,
+  backgroundVideo: o,
+  contentWrapper: a,
+  mainContentContainer: i,
+  contentPanel: r,
+  leftContentPanel: c,
+  rightContentPanel: s
+};
+export {
+  o as backgroundVideo,
+  r as contentPanel,
+  a as contentWrapper,
+  l as default,
+  e as imageWrapper,
+  c as leftContentPanel,
+  i as mainContentContainer,
+  t as mediaContainer,
+  n as mediaSplit,
+  s as rightContentPanel
+};
+//# sourceMappingURL=MediaSplit.module.css.js.map

package/dist/esm/ui/compositions/MediaSplit/MediaSplit.module.css.js.map

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

package/dist/esm/ui/compositions/MediaSplit/index.js

@@ -0,0 +1,5 @@
+import a from "./MediaSplit.js";
+export {
+  a as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/MediaSplit/index.js.map

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