@common-origin/design-system 1.1.0 → 1.3.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import Link from 'next/link';
-import Image from 'next/image';
 import { parseISO, format } from 'date-fns';
+import Image from 'next/image';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -31,6 +31,17 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -43,6 +54,44 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -670,11 +719,14 @@ var tokens = {
 	semantic: semantic$1
 };
 
+React.createElement;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$size'].includes(prop);
-  }
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarContainer",
+  componentId: "sc-ezn4ax-0"
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.avatar[$size];
 }, function (_a) {
@@ -683,14 +735,18 @@ var AvatarContainer = styled.div.withConfig({
 }, tokens.base.border.radius.circle, tokens.semantic.color.background.subtle);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$size'].includes(prop);
-  }
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokens.base.border.radius.circle);
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarImage",
+  componentId: "sc-ezn4ax-1"
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokens.base.border.radius.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$size'].includes(prop);
-  }
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+    return !prop.startsWith('$');
+  },
+  displayName: "Avatar__AvatarInitials",
+  componentId: "sc-ezn4ax-2"
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -753,24 +809,27 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$c, templateObject_2$4, templateObject_3$3;
+var templateObject_1$k, templateObject_2$8, templateObject_3$6;
 
+React.createElement;
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
-  }
+  },
+  displayName: "Box__StyledBox",
+  componentId: "sc-aj0jhd-0"
 })(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
 }, function (props) {
@@ -952,7 +1011,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$b, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var templateObject_1$j, templateObject_2$7, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1047,11 +1106,14 @@ var iconsData = {
 	userBox: userBox
 };
 
+React.createElement;
 var IconStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
-  }
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+  },
+  displayName: "Icon__IconStyled",
+  componentId: "sc-1105czq-0"
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -1115,19 +1177,20 @@ var Icon = function Icon(_a) {
     d: iconData.path
   })));
 };
-var templateObject_1$a;
+var templateObject_1$i;
 
+React.createElement;
 var button = tokens.component.button,
   semantic = tokens.semantic;
 // Base styles shared between button and link
 var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(button.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
-var getVariantStyles$1 = function getVariantStyles(_a) {
+var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant;
   return "\n  background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n  color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n  \n  &:hover:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n  }\n\n  &:disabled {\n    background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n    color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n  }\n");
 };
 // Dynamic size styles using component tokens
-var getSizeStyles$1 = function getSizeStyles(_a) {
+var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
@@ -1142,16 +1205,20 @@ var getSizeStyles$1 = function getSizeStyles(_a) {
 };
 var StyledButton = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$variant', '$size'].includes(prop);
-  }
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledButton",
+  componentId: "sc-1eiuum9-0"
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$variant', '$size'].includes(prop);
-  }
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledLink",
+  componentId: "sc-1eiuum9-1"
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
-])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -1242,73 +1309,92 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$9, templateObject_2$2;
+var templateObject_1$h, templateObject_2$6;
 
+React.createElement;
 var chip = tokens.component.chip;
-// Dynamic variant styles using component tokens
-var getVariantStyles = function getVariantStyles(_a) {
-  var variant = _a.variant;
+// Helper functions to get styles as objects for CSS custom properties
+var getVariantStylesAsObject = function getVariantStylesAsObject(variant) {
   switch (variant) {
     case 'emphasis':
-      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n      ");
+      return {
+        backgroundColor: chip.variants.emphasis.backgroundColor,
+        color: chip.variants.emphasis.textColor
+      };
     case 'subtle':
-      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n      ");
+      return {
+        backgroundColor: chip.variants.subtle.backgroundColor,
+        color: chip.variants.subtle.textColor
+      };
     case 'interactive':
-      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n      ");
+      return {
+        backgroundColor: chip.variants.interactive.backgroundColor,
+        color: chip.variants.interactive.textColor
+      };
     case 'default':
     default:
-      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n      ");
+      return {
+        backgroundColor: chip["default"].backgroundColor,
+        color: chip["default"].textColor
+      };
   }
 };
-// Dynamic size styles using component tokens
-var getSizeStyles = function getSizeStyles(_a) {
-  var size = _a.size;
+var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
   switch (size) {
     case 'small':
-      return "\n        font: ".concat(chip.sizes.small.font, ";\n        padding: ").concat(chip.sizes.small.padding, ";\n      ");
+      return {
+        font: chip.sizes.small.font,
+        padding: chip.sizes.small.padding
+      };
     case 'large':
-      return "\n        font: ".concat(chip.sizes.large.font, ";\n        padding: ").concat(chip.sizes.large.padding, ";\n      ");
+      return {
+        font: chip.sizes.large.font,
+        padding: chip.sizes.large.padding
+      };
     case 'medium':
     default:
-      return "\n        font: ".concat(chip.sizes.medium.font, ";\n        padding: ").concat(chip.sizes.medium.padding, ";\n      ");
+      return {
+        font: chip.sizes.medium.font,
+        padding: chip.sizes.medium.padding
+      };
   }
 };
-// Base styled component that only receives styling props
+// Base styled component using CSS variables to avoid prop leaking
 var BaseChip = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    // Explicitly list props that should NOT be forwarded to the DOM
-    var excludedProps = ['variant', 'size', 'disabled', 'clickable'];
-    return !excludedProps.includes(prop);
-  }
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  ", "\n  ", "\n  \n  ", "\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  ", "\n  ", "\n  \n  ", "\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
-// Wrapper component that handles prop filtering
-])), chip["default"].borderRadius, tokens.semantic.motion.interactive, getVariantStyles, getSizeStyles, function (_a) {
-  var clickable = _a.clickable,
-    disabled = _a.disabled;
-  if (disabled) {
-    return "\n        opacity: 0.6;\n        cursor: not-allowed;\n      ";
-  }
-  if (clickable) {
-    return "\n        cursor: pointer;\n        \n        &:hover {\n          opacity: 0.8;\n        }\n        \n        &:active {\n          opacity: 0.9;\n        }\n      ";
-  }
-  return '';
-}, chip.variants.interactive.backgroundColor);
-// Wrapper component that handles prop filtering
+    return !prop.startsWith('$');
+  },
+  displayName: "Chip__BaseChip",
+  componentId: "sc-fvu2t0-0"
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+// Wrapper component that applies styles via CSS custom properties
+])), chip["default"].borderRadius, tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+// Wrapper component that applies styles via CSS custom properties
 var StyledChip = function StyledChip(_a) {
-  var variant = _a.variant,
-    size = _a.size,
-    disabled = _a.disabled,
-    clickable = _a.clickable,
+  var $variant = _a.$variant,
+    $size = _a.$size,
+    $disabled = _a.$disabled,
+    $clickable = _a.$clickable,
     children = _a.children,
-    htmlProps = __rest(_a, ["variant", "size", "disabled", "clickable", "children"]);
-  // Filter out any remaining non-HTML props to ensure they don't reach the DOM
-  var cleanHtmlProps = __rest(htmlProps, []);
+    style = _a.style,
+    htmlProps = __rest(_a, ["$variant", "$size", "$disabled", "$clickable", "children", "style"]);
+  // Get styles for variant and size
+  var variantStyles = getVariantStylesAsObject($variant);
+  var sizeStyles = getSizeStylesAsObject($size);
+  // Create CSS custom properties object
+  var cssProps = {
+    '--chip-bg-color': variantStyles.backgroundColor,
+    '--chip-text-color': variantStyles.color,
+    '--chip-font': sizeStyles.font,
+    '--chip-padding': sizeStyles.padding,
+    '--chip-opacity': $disabled ? '0.6' : '1',
+    '--chip-cursor': $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
+    '--chip-hover-opacity': $disabled ? '0.6' : $clickable ? '0.8' : '1',
+    '--chip-active-opacity': $disabled ? '0.6' : $clickable ? '0.9' : '1'
+  };
   return /*#__PURE__*/React.createElement(BaseChip, _extends({
-    variant: variant,
-    size: size,
-    disabled: disabled,
-    clickable: clickable
-  }, cleanHtmlProps), children);
+    style: __assign(__assign({}, cssProps), style)
+  }, htmlProps), children);
 };
 var Chip = function Chip(_a) {
   var children = _a.children,
@@ -1350,10 +1436,10 @@ var Chip = function Chip(_a) {
     }
   };
   return /*#__PURE__*/React.createElement(StyledChip, _extends({
-    variant: normalizedVariant,
-    size: size,
-    disabled: disabled,
-    clickable: isClickable,
+    $variant: normalizedVariant,
+    $size: size,
+    $disabled: disabled || undefined,
+    $clickable: isClickable || undefined,
     onClick: isClickable ? handleClick : undefined,
     onKeyDown: isClickable ? handleKeyDown : undefined,
     tabIndex: isClickable ? 0 : undefined,
@@ -1375,7 +1461,7 @@ var LegacyChip = function LegacyChip(_a) {
     variant: newVariant
   }, title);
 };
-var templateObject_1$8;
+var templateObject_1$g;
 
 // Breakpoints using base tokens
 var breakpoints$1 = {
@@ -1396,53 +1482,96 @@ var media$1 = {
   '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
 };
 
-var spacing = tokens.semantic.spacing;
-var StyledContainer = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing.layout['2xl'], spacing.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+React.createElement;
+var spacing$3 = tokens.semantic.spacing;
+var StyledContainer = styled.div.withConfig({
+  displayName: "Container__StyledContainer",
+  componentId: "sc-17dbj6n-0"
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
 var Container = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
   return /*#__PURE__*/React.createElement(StyledContainer, props, children);
 };
-var templateObject_1$7;
+var templateObject_1$f;
 
+React.createElement;
 var base = tokens.base;
-var CoverImageWrapper = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
-var ImageLink = styled(Link)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  display: block;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base.duration.normal, base.easing.easeInOut);
-var StyledImage = styled(Image)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n"])), base.border.radius[2]);
-var CoverImage = function CoverImage(_a) {
+var PictureWrapper = styled.div.withConfig({
+  displayName: "Picture__PictureWrapper",
+  componentId: "sc-11d9tei-0"
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
+var ImageLink = styled.a.withConfig({
+  displayName: "Picture__ImageLink",
+  componentId: "sc-11d9tei-1"
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base.duration.normal, base.easing.easeInOut);
+var ImageButton = styled.button.withConfig({
+  displayName: "Picture__ImageButton",
+  componentId: "sc-11d9tei-2"
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base.duration.normal, base.easing.easeInOut);
+var StyledImage = styled.img.withConfig({
+  displayName: "Picture__StyledImage",
+  componentId: "sc-11d9tei-3"
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base.border.radius[2]);
+var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
-    slug = _a.slug,
     _b = _a.width,
     width = _b === void 0 ? 1300 : _b,
     _c = _a.height,
     height = _c === void 0 ? 630 : _c,
+    onClick = _a.onClick,
+    href = _a.href,
     dataTestId = _a["data-testid"];
   var image = /*#__PURE__*/React.createElement(StyledImage, {
     src: src,
     alt: "Cover Image for ".concat(title),
     width: width,
-    height: height,
-    placeholder: "blur",
-    blurDataURL: src,
-    priority: !!slug
+    height: height
   });
-  return /*#__PURE__*/React.createElement(CoverImageWrapper, {
+  return /*#__PURE__*/React.createElement(PictureWrapper, {
     "data-testid": dataTestId
-  }, slug ? /*#__PURE__*/React.createElement(ImageLink, {
-    href: "/posts/".concat(slug),
+  }, href ? /*#__PURE__*/React.createElement(ImageLink, {
+    href: href,
+    "aria-label": "Read more about ".concat(title)
+  }, image) : onClick ? /*#__PURE__*/React.createElement(ImageButton, {
+    onClick: onClick,
     "aria-label": "Read more about ".concat(title)
   }, image) : image);
 };
-var templateObject_1$6, templateObject_2$1, templateObject_3$1;
+var templateObject_1$e, templateObject_2$5, templateObject_3$4, templateObject_4$3;
+
+React.createElement;
+var _a$5 = tokens.semantic,
+  typography$2 = _a$5.typography,
+  color$3 = _a$5.color;
+var TimeStyled = styled.time.withConfig({
+  displayName: "DateFormatter__TimeStyled",
+  componentId: "sc-5464cc-0"
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$2.label, color$3.text.subdued);
+var DateFormatter = function DateFormatter(_a) {
+  var dateString = _a.dateString,
+    _b = _a.formatString,
+    formatString = _b === void 0 ? 'yyyy' : _b,
+    dataTestId = _a["data-testid"];
+  var date = parseISO(dateString);
+  return /*#__PURE__*/React.createElement(TimeStyled, {
+    dateTime: dateString,
+    "data-testid": dataTestId
+  }, format(date, formatString));
+};
+var templateObject_1$d;
 
+React.createElement;
 var motion = tokens.semantic.motion,
   iconButton = tokens.component.iconButton;
 var IconButtonStyled = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$variant', '$size'].includes(prop);
-  }
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+    return !prop.startsWith('$');
+  },
+  displayName: "IconButton__IconButtonStyled",
+  componentId: "sc-k8b14t-0"
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -1553,13 +1682,16 @@ var IconButton = function IconButton(_a) {
     "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
   }));
 };
-var templateObject_1$5;
+var templateObject_1$c;
 
+React.createElement;
 var StyledSeparator = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$variant', '$size'].includes(prop);
-  }
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"], ["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"
+    return !prop.startsWith('$');
+  },
+  displayName: "SectionSeparator__StyledSeparator",
+  componentId: "sc-ynv482-0"
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"], ["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"
 /**
  * SectionSeparator is an atomic component that provides visual separation between content sections.
  *
@@ -1638,30 +1770,18 @@ var SectionSeparator = function SectionSeparator(_a) {
     "aria-orientation": "horizontal"
   });
 };
-var templateObject_1$4;
+var templateObject_1$b;
 
+React.createElement;
 var StyledStack = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$direction', '$gap', '$alignItems', '$justifyContent', '$wrap'].includes(prop);
-  }
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  gap: ", ";\n  flex-wrap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  gap: ", ";\n  flex-wrap: ", ";\n"
+    return !prop.startsWith('$');
+  },
+  displayName: "Stack__StyledStack",
+  componentId: "sc-1ehkxgy-0"
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
 // Helper function to convert gap prop to CSS value
-])), function (_a) {
-  var $direction = _a.$direction;
-  return $direction;
-}, function (_a) {
-  var $alignItems = _a.$alignItems;
-  return $alignItems || 'initial';
-}, function (_a) {
-  var $justifyContent = _a.$justifyContent;
-  return $justifyContent || 'initial';
-}, function (_a) {
-  var $gap = _a.$gap;
-  return $gap;
-}, function (_a) {
-  var $wrap = _a.$wrap;
-  return $wrap ? 'wrap' : 'nowrap';
-});
+])));
 // Helper function to convert gap prop to CSS value
 var getGapValue = function getGapValue(gap) {
   // Get semantic layout spacing token
@@ -1684,20 +1804,25 @@ var Stack = function Stack(_a) {
     wrap = _d === void 0 ? false : _d,
     dataTestId = _a["data-testid"];
   var gapValue = getGapValue(gap);
+  // Create CSS custom properties object with proper typing
+  var cssProps = {
+    '--stack-direction': direction,
+    '--stack-align-items': alignItems || 'initial',
+    '--stack-justify-content': justifyContent || 'initial',
+    '--stack-gap': gapValue,
+    '--stack-wrap': wrap ? 'wrap' : 'nowrap'
+  };
   return /*#__PURE__*/React.createElement(StyledStack, {
-    $direction: direction,
-    $gap: gapValue,
-    $alignItems: alignItems,
-    $justifyContent: justifyContent,
-    $wrap: wrap,
+    style: cssProps,
     "data-testid": dataTestId
   }, children);
 };
-var templateObject_1$3;
+var templateObject_1$a;
 
-var _a$1 = tokens.semantic,
-  typography$1 = _a$1.typography,
-  color$1 = _a$1.color;
+React.createElement;
+var _a$4 = tokens.semantic,
+  typography$1 = _a$4.typography,
+  color$2 = _a$4.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
     display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
@@ -1721,15 +1846,15 @@ var getTypographyStyles = function getTypographyStyles(variant) {
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$1.text["default"],
-    emphasis: color$1.text.emphasis,
-    subdued: color$1.text.subdued,
-    inverse: color$1.text.inverse,
-    disabled: color$1.text.disabled,
-    interactive: color$1.text.interactive,
-    error: color$1.text.error,
-    success: color$1.text.success,
-    warning: color$1.text.warning
+    "default": color$2.text["default"],
+    emphasis: color$2.text.emphasis,
+    subdued: color$2.text.subdued,
+    inverse: color$2.text.inverse,
+    disabled: color$2.text.disabled,
+    interactive: color$2.text.interactive,
+    error: color$2.text.error,
+    success: color$2.text.success,
+    warning: color$2.text.warning
   };
   return colorMap[colorVariant] || colorMap["default"];
 };
@@ -1756,9 +1881,11 @@ var getDefaultElement = function getDefaultElement(variant) {
 };
 var StyledTypography = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$variant', '$color'].includes(prop);
-  }
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
+    return !prop.startsWith('$');
+  },
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-17mqo4k-0"
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
 /**
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
  *
@@ -1825,8 +1952,581 @@ var Typography = function Typography(_a) {
     "data-testid": dataTestId
   }, children);
 };
+var templateObject_1$9;
+
+React.createElement;
+var border$3 = tokens.base.border;
+var ArtCardStyled = styled.div.withConfig({
+  displayName: "ArtCard__ArtCardStyled",
+  componentId: "sc-1788cyb-0"
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
+var ArtCard = function ArtCard(_a) {
+  var title = _a.title;
+    _a.excerpt;
+    var tag = _a.tag,
+    artist = _a.artist,
+    labels = _a.labels,
+    coverImage = _a.coverImage,
+    onImageClick = _a.onImageClick,
+    imageHref = _a.imageHref;
+  if (tag === 'art') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArtCardStyled, null, /*#__PURE__*/React.createElement(Stack, {
+      direction: "column",
+      gap: "md"
+    }, /*#__PURE__*/React.createElement(Picture, {
+      title: title,
+      src: coverImage,
+      onClick: onImageClick,
+      href: imageHref
+    }), /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: "xs"
+    }, /*#__PURE__*/React.createElement(Stack, {
+      direction: "column",
+      gap: "xs"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "h6"
+    }, title), /*#__PURE__*/React.createElement(Typography, {
+      variant: "small",
+      color: "subdued"
+    }, artist)), /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: "xs"
+    }, Array.isArray(labels) && labels.map(function (label, index) {
+      return /*#__PURE__*/React.createElement(Chip, {
+        key: index,
+        title: label,
+        variant: "default"
+      });
+    }))))));
+  }
+  return null;
+};
+var templateObject_1$8;
+
+React.createElement;
+var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var BreadcrumbNavStyled = styled.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbNavStyled",
+  componentId: "sc-7ouzg5-0"
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokens.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+var BreadcrumbStyled = styled.li.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbStyled",
+  componentId: "sc-7ouzg5-1"
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokens.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokens.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokens.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokens.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokens.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokens.semantic.color.text.subdued, tokens.semantic.color.text["default"]);
+var isInternalUrl = function isInternalUrl(url) {
+  return url.startsWith('/') && !url.startsWith('http');
+};
+var Breadcrumbs = function Breadcrumbs(_a) {
+  var breadcrumbs = _a.breadcrumbs;
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(BreadcrumbNavStyled, {
+    "aria-label": "breadcrumb"
+  }, /*#__PURE__*/React.createElement("ol", null, breadcrumbs.map(function (breadcrumb, index) {
+    return /*#__PURE__*/React.createElement(BreadcrumbStyled, {
+      key: index
+    }, index === breadcrumbs.length - 1 ? /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, breadcrumb.label) : isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(Link, {
+      href: breadcrumb.url
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", {
+      href: breadcrumb.url,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, breadcrumb.label)));
+  }))));
+};
+var templateObject_1$7, templateObject_2$4;
+
+React.createElement;
+var ChipGroupWrapper = styled.div.withConfig({
+  displayName: "ChipGroup__ChipGroupWrapper",
+  componentId: "sc-ae049w-0"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+var ChipGroup = function ChipGroup(_a) {
+  var labels = _a.labels,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    dataTestId = _a["data-testid"];
+  return /*#__PURE__*/React.createElement(ChipGroupWrapper, {
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: "sm"
+  }, labels && labels.map(function (title, index) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: index,
+      title: title,
+      variant: variant
+    });
+  })));
+};
+var templateObject_1$6;
+
+React.createElement;
+var _a$2 = tokens.semantic,
+  color$1 = _a$2.color,
+  border$2 = _a$2.border,
+  spacing$2 = _a$2.spacing;
+var StyledCodeBlock = styled.pre.withConfig({
+  displayName: "CodeBlock__StyledCodeBlock",
+  componentId: "sc-1p1t0kp-0"
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokens.base.border.radius[2], spacing$2.layout.md, tokens.base.fontFamily.monospace, tokens.base.fontSize[1], tokens.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
+var CodeBlockWrapper = styled.div.withConfig({
+  displayName: "CodeBlock__CodeBlockWrapper",
+  componentId: "sc-1p1t0kp-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+var CopyButtonWrapper = styled.div.withConfig({
+  displayName: "CodeBlock__CopyButtonWrapper",
+  componentId: "sc-1p1t0kp-2"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
+var CopyButton = function CopyButton(_a) {
+  var text = _a.text,
+    onCopy = _a.onCopy;
+  var _b = useState(false),
+    copied = _b[0],
+    setCopied = _b[1];
+  var timeoutRef = useRef(null);
+  var handleCopy = function handleCopy() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var err_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, navigator.clipboard.writeText(text)];
+          case 1:
+            _a.sent();
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+            // Clear any existing timeout
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+            // Set new timeout
+            timeoutRef.current = setTimeout(function () {
+              setCopied(false);
+              timeoutRef.current = null;
+            }, 2000);
+            return [3 /*break*/, 3];
+          case 2:
+            err_1 = _a.sent();
+            console.error('Failed to copy text: ', err_1);
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  // Cleanup timeout on unmount
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(CopyButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    size: "small",
+    iconName: "copy",
+    onClick: handleCopy,
+    "data-testid": "copy-button"
+  }, copied ? 'Copied!' : 'Copy'));
+};
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param data-testid - Test identifier for the code block
+ */
+var CodeBlock = function CodeBlock(_a) {
+  var children = _a.children,
+    _b = _a.showCopyButton,
+    showCopyButton = _b === void 0 ? true : _b,
+    onCopy = _a.onCopy,
+    testId = _a["data-testid"];
+  return /*#__PURE__*/React.createElement(CodeBlockWrapper, null, /*#__PURE__*/React.createElement(StyledCodeBlock, {
+    "data-testid": testId
+  }, children), showCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
+    text: children,
+    onCopy: onCopy
+  }));
+};
+var templateObject_1$5, templateObject_2$3, templateObject_3$3;
+
+React.createElement;
+var _a$1 = tokens.base,
+  spacing$1 = _a$1.spacing,
+  border$1 = _a$1.border;
+var DesignCardStyled = styled.div.withConfig({
+  displayName: "DesignCard__DesignCardStyled",
+  componentId: "sc-1lah9zd-0"
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.base.breakpoint.md, tokens.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
+var ImageWrapper = styled.div.withConfig({
+  displayName: "DesignCard__ImageWrapper",
+  componentId: "sc-1lah9zd-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.base.breakpoint.lg);
+var ContentSection = styled.div.withConfig({
+  displayName: "DesignCard__ContentSection",
+  componentId: "sc-1lah9zd-2"
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokens.base.breakpoint.lg, spacing$1[8], tokens.base.breakpoint.xl, spacing$1[24]);
+var ButtonWrapper = styled.div.withConfig({
+  displayName: "DesignCard__ButtonWrapper",
+  componentId: "sc-1lah9zd-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
+var ContentWrapper = styled.div.withConfig({
+  displayName: "DesignCard__ContentWrapper",
+  componentId: "sc-1lah9zd-4"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
+var DesignCard = function DesignCard(_a) {
+  var title = _a.title,
+    excerpt = _a.excerpt,
+    _b = _a.labels,
+    labels = _b === void 0 ? [] : _b,
+    tag = _a.tag,
+    coverImage = _a.coverImage,
+    date = _a.date,
+    onReadMore = _a.onReadMore,
+    readMoreHref = _a.readMoreHref,
+    _c = _a.readMoreText,
+    readMoreText = _c === void 0 ? "Read more" : _c;
+  if (tag === 'design') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesignCardStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
+      title: title,
+      src: coverImage
+    })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
+      direction: "column",
+      gap: "md"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "h3"
+    }, title), /*#__PURE__*/React.createElement(DateFormatter, {
+      dateString: date
+    }), /*#__PURE__*/React.createElement(Typography, {
+      variant: "small"
+    }, excerpt), /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      gap: "xs"
+    }, Array.isArray(labels) && labels.map(function (label, index) {
+      return /*#__PURE__*/React.createElement(Chip, {
+        key: index,
+        title: label,
+        variant: "default"
+      });
+    })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
+      purpose: "link",
+      url: readMoreHref
+    }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
+      onClick: onReadMore
+    }, readMoreText)))))), /*#__PURE__*/React.createElement(SectionSeparator, null));
+  }
+  return null;
+};
+var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
+
+React.createElement;
+var _a = tokens.base,
+  spacing = _a.spacing,
+  shadow = _a.shadow,
+  zIndex = _a.zIndex,
+  _b = tokens.semantic,
+  color = _b.color,
+  typography = _b.typography,
+  border = _b.border;
+var DropdownContainer = styled.div.withConfig({
+  displayName: "Dropdown__DropdownContainer",
+  componentId: "sc-kz07c4-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var DropdownTrigger = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownTrigger",
+  componentId: "sc-kz07c4-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: all 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n  \n  &:focus {\n    outline: ", ";\n    outline-offset: 2px;\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n    border-color: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: all 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n  \n  &:focus {\n    outline: ", ";\n    outline-offset: 2px;\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n    border-color: ", ";\n  }\n  \n  ", "\n"])), spacing[3], spacing[4], color.background["default"], border["default"], tokens.base.border.radius[2], typography.body, color.text["default"], color.background.surface, color.border.strong, tokens.semantic.border.focus, color.background.disabled, color.text.disabled, color.border.subtle, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen && "\n    background-color: ".concat(color.background.surface, ";\n    border-color: ").concat(color.border.strong, ";\n  ");
+});
+var DropdownIcon = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownIcon",
+  componentId: "sc-kz07c4-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen && "\n    transform: rotate(180deg);\n  ";
+});
+var DropdownMenu = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownMenu",
+  componentId: "sc-kz07c4-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], color.background["default"], border["default"], tokens.base.border.radius[2], shadow[3], spacing[1], function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 1 : 0;
+}, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 'visible' : 'hidden';
+}, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 'translateY(0)' : 'translateY(-8px)';
+});
+var DropdownOption = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownOption",
+  componentId: "sc-kz07c4-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), spacing[3], spacing[4], function (_a) {
+  var $isSelected = _a.$isSelected,
+    $isFocused = _a.$isFocused;
+  if ($isFocused) return color.background.surface;
+  if ($isSelected) return color.background.surface;
+  return 'transparent';
+}, typography.body, color.text["default"], color.background.surface, color.background.surface, border.subtle);
+var Dropdown = function Dropdown(_a) {
+  var options = _a.options,
+    value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.placeholder,
+    placeholder = _b === void 0 ? 'Select an option' : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    className = _a.className,
+    label = _a.label;
+  var _d = useState(false),
+    isOpen = _d[0],
+    setIsOpen = _d[1];
+  var _e = useState(-1),
+    focusedIndex = _e[0],
+    setFocusedIndex = _e[1];
+  var dropdownRef = useRef(null);
+  // Generate unique ID for accessibility
+  var dropdownId = useRef("dropdown-".concat(Math.random().toString(36).substr(2, 9))).current;
+  var selectedOption = options.find(function (option) {
+    return option.id === value;
+  });
+  // Close dropdown when clicking outside
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  // Close dropdown on escape key and handle arrow navigation
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (!isOpen) return;
+      switch (event.key) {
+        case 'Escape':
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          // Return focus to trigger button
+          if (dropdownRef.current) {
+            var trigger = dropdownRef.current.querySelector('button');
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex(function (prev) {
+            var newIndex = prev < options.length - 1 ? prev + 1 : 0;
+            return newIndex;
+          });
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex(function (prev) {
+            var newIndex = prev > 0 ? prev - 1 : options.length - 1;
+            return newIndex;
+          });
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < options.length) {
+            handleOptionClick(options[focusedIndex].id);
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setFocusedIndex(options.length - 1);
+          break;
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return function () {
+        return document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+    return undefined;
+  }, [isOpen, focusedIndex, options]);
+  var handleTriggerClick = function handleTriggerClick() {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      if (!isOpen) {
+        // When opening, set focus to the currently selected option or first option
+        var selectedIndex = options.findIndex(function (option) {
+          return option.id === value;
+        });
+        setFocusedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      } else {
+        // When closing, reset focus
+        setFocusedIndex(-1);
+      }
+    }
+  };
+  var handleOptionClick = function handleOptionClick(optionId) {
+    onChange(optionId);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    ref: dropdownRef,
+    className: className
+  }, label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: dropdownId,
+    style: {
+      display: 'block',
+      marginBottom: spacing[2]
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "label"
+  }, label)), /*#__PURE__*/React.createElement(DropdownTrigger, {
+    id: dropdownId,
+    $isOpen: isOpen,
+    onClick: handleTriggerClick,
+    disabled: disabled,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox"
+  }, /*#__PURE__*/React.createElement("span", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/React.createElement(DropdownIcon, {
+    $isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowDown",
+    iconColor: disabled ? 'disabled' : 'subdued'
+  }))), /*#__PURE__*/React.createElement(DropdownMenu, {
+    $isOpen: isOpen,
+    role: "listbox",
+    "aria-labelledby": dropdownId
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(DropdownOption, {
+      key: option.id,
+      $isSelected: option.id === value,
+      $isFocused: index === focusedIndex,
+      onClick: function onClick() {
+        return handleOptionClick(option.id);
+      },
+      role: "option",
+      "aria-selected": option.id === value
+    }, option.label);
+  })));
+};
+var templateObject_1$3, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
+
+React.createElement;
+var PageTitleStyled = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "PageTitle__PageTitleStyled",
+  componentId: "sc-16h256f-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokens.base.spacing[6], function (_a) {
+  var $hasBackButton = _a.$hasBackButton;
+  return $hasBackButton ? tokens.base.spacing[0] : tokens.base.spacing[12];
+});
+var PageTitle = function PageTitle(_a) {
+  var title = _a.title,
+    _b = _a.hasBackButton,
+    hasBackButton = _b === void 0 ? false : _b,
+    subtitle = _a.subtitle;
+  return /*#__PURE__*/React.createElement(PageTitleStyled, {
+    $hasBackButton: hasBackButton
+  }, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
+    iconName: "back",
+    size: "large",
+    variant: "naked",
+    url: "/music",
+    "aria-label": "Go back to music page"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "md"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "subdued"
+  }, subtitle)));
+};
 var templateObject_1$2;
 
+React.createElement;
+var ReleaseCardStyled = styled.div.withConfig({
+  displayName: "ReleaseCard__ReleaseCardStyled",
+  componentId: "sc-44tbzg-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokens.base.border.radius[2], tokens.semantic.color.border.strong);
+var ReleaseCard = function ReleaseCard(_a) {
+  var title = _a.title,
+    coverImage = _a.coverImage,
+    artist = _a.artist,
+    date = _a.date,
+    slug = _a.slug;
+  if (!coverImage || !date) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ReleaseCardStyled, null, /*#__PURE__*/React.createElement(Link, {
+    href: "/releases/".concat(slug),
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "sm"
+  }, /*#__PURE__*/React.createElement(Image, {
+    alt: title,
+    src: coverImage,
+    width: 300,
+    height: 300,
+    sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 25vw, (max-width: 1280px) 16.66vw, 14.28vw",
+    placeholder: "blur",
+    blurDataURL: coverImage,
+    style: {
+      width: '100%',
+      height: 'auto'
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "none"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "small"
+  }, title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "label",
+    color: "subdued"
+  }, artist), /*#__PURE__*/React.createElement(DateFormatter, {
+    dateString: date
+  })))));
+};
+var templateObject_1$1;
+
+React.createElement;
 // Breakpoints using base tokens
 var breakpoints = {
   xs: tokens.base.breakpoint.xs,
@@ -1845,10 +2545,16 @@ var media = {
   xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
   '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
 };
-var GridContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var GridContainer = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridContainer",
+  componentId: "sc-1lhwjqo-0"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"])), function (props) {
   return props.$cols;
 }, function (props) {
-  return props.$gap && css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+  return props.$gap && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
 }, function (props) {
   return props.$gapX && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
 }, function (props) {
@@ -1870,7 +2576,13 @@ var Grid = function Grid(_a) {
     className: className
   }, children);
 };
-var GridColContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+var GridColContainer = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridColContainer",
+  componentId: "sc-1lhwjqo-1"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
 }, function (props) {
   return props.$order && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
@@ -1918,7 +2630,13 @@ var GridCol = function GridCol(_a) {
     className: className
   }, children);
 };
-var ResponsiveGridContainer = styled.div(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+var ResponsiveGridContainer = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__ResponsiveGridContainer",
+  componentId: "sc-1lhwjqo-2"
+})(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$cols;
 }, function (props) {
   return props.$gap && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
@@ -2006,22 +2724,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     className: className
   }, children);
 };
-var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
-
-var _a = tokens.semantic,
-  typography = _a.typography,
-  color = _a.color;
-var TimeStyled = styled.time(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.label, color.text.subdued);
-var DateFormatter = function DateFormatter(_a) {
-  var dateString = _a.dateString,
-    _b = _a.formatString,
-    formatString = _b === void 0 ? 'yyyy' : _b;
-  var date = parseISO(dateString);
-  return /*#__PURE__*/React.createElement(TimeStyled, {
-    dateTime: dateString
-  }, format(date, formatString));
-};
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { Avatar, Box, Button, Chip, Container, CoverImage, DateFormatter, Grid, GridCol, Icon, IconButton, LegacyChip, ResponsiveGrid, SectionSeparator, Stack, Typography, tokens };
+export { ArtCard, Avatar, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, tokens };
 //# sourceMappingURL=index.esm.js.map