@common-origin/design-system 1.1.0

package/dist/index.esm.js

@@ -0,0 +1,2027 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import { parseISO, format } from 'date-fns';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var base$1 = {
+	border: {
+		radius: {
+			"1": "0.125rem",
+			"2": "0.25rem",
+			"3": "0.5rem",
+			"4": "0.75rem",
+			"5": "1rem",
+			"6": "1.5rem",
+			"7": "2rem",
+			circle: "10rem"
+		},
+		style: {
+			solid: "solid",
+			dashed: "dashed",
+			dotted: "dotted"
+		},
+		width: {
+			"0": "0",
+			"1": "0.0625rem",
+			"2": "0.125rem",
+			"3": "0.1875rem",
+			"4": "0.25rem",
+			"5": "0.3125rem",
+			"6": "0.375rem",
+			"8": "0.5rem"
+		}
+	},
+	shadow: {
+		"1": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+		"2": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+		"3": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+		"4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		"5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+		"6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+		none: "none"
+	},
+	zIndex: {
+		"0": "0",
+		"1": "10",
+		"2": "20",
+		"3": "30",
+		"4": "40",
+		"5": "50",
+		"6": "1000",
+		"7": "1010",
+		"8": "1020"
+	},
+	opacity: {
+		"0": "0",
+		"5": "0.05",
+		"10": "0.1",
+		"20": "0.2",
+		"25": "0.25",
+		"30": "0.3",
+		"40": "0.4",
+		"50": "0.5",
+		"60": "0.6",
+		"70": "0.7",
+		"75": "0.75",
+		"80": "0.8",
+		"90": "0.9",
+		"95": "0.95",
+		"100": "1"
+	},
+	size: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"16": "4rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"32": "8rem",
+		"40": "10rem",
+		"48": "12rem",
+		"56": "14rem",
+		"64": "16rem",
+		auto: "auto",
+		full: "100%",
+		screen: "100vh",
+		min: "min-content",
+		max: "max-content",
+		fit: "fit-content"
+	},
+	color: {
+		neutral: {
+			"100": "#f8f9fa",
+			"200": "#e9ecef",
+			"300": "#dee2e6",
+			"400": "#ced4da",
+			"500": "#adb5bd",
+			"600": "#6c757d",
+			"700": "#495057",
+			"800": "#343a40",
+			"900": "#212529",
+			"1000": "#16191C",
+			"000": "#ffffff"
+		},
+		green: {
+			"100": "#CEF8E0",
+			"200": "#ADF4CE",
+			"300": "#89ECBC",
+			"400": "#67DEA8",
+			"500": "#49CC93",
+			"600": "#2FB880",
+			"700": "#15A46E",
+			"800": "#008F5D",
+			"900": "#007A4D",
+			"1000": "#00653E",
+			"1100": "#005132",
+			"1200": "#053F27",
+			"1300": "#0A2E1D"
+		},
+		orange: {
+			"100": "#FFECCC",
+			"200": "#FFDFAD",
+			"300": "#FDD291",
+			"400": "#FFBB63",
+			"500": "#FFA037",
+			"600": "#F68511",
+			"700": "#E46F00",
+			"800": "#CB5D00",
+			"900": "#B14C00",
+			"1000": "#953D00",
+			"1100": "#7A2F00",
+			"1200": "#612300",
+			"1300": "#491901"
+		},
+		red: {
+			"100": "#FFEBE7",
+			"200": "#FFDDD6",
+			"300": "#FFCDC3",
+			"400": "#FFB7A9",
+			"500": "#FF9B88",
+			"600": "#FF7C65",
+			"700": "#F75C46",
+			"800": "#EA3829",
+			"900": "#D31510",
+			"1000": "#B40000",
+			"1100": "#930000",
+			"1200": "#740000",
+			"1300": "#590000"
+		},
+		blue: {
+			"100": "#E0F2FF",
+			"200": "#CAE8FF",
+			"300": "#B5DEFF",
+			"400": "#96CEFD",
+			"500": "#78BBFA",
+			"600": "#59A7F6",
+			"700": "#3892F3",
+			"800": "#147AF3",
+			"900": "#0265DC",
+			"1000": "#0054B6",
+			"1100": "#004491",
+			"1200": "#003571",
+			"1300": "#002754"
+		}
+	},
+	spacing: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"16": "4rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"32": "8rem",
+		"40": "10rem",
+		"48": "12rem",
+		"56": "14rem",
+		"64": "16rem",
+		auto: "auto"
+	},
+	fontFamily: {
+		heading: "'Inter', sans-serif",
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		"1": "0.75rem",
+		"2": "0.875rem",
+		"3": "1rem",
+		"4": "1.125rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "3rem",
+		"10": "5rem"
+	},
+	fontWeight: {
+		"1": "300",
+		"2": "400",
+		"3": "500",
+		"4": "600",
+		"5": "700"
+	},
+	lineHeight: {
+		"1": "1rem",
+		"2": "1.125rem",
+		"3": "1.25rem",
+		"4": "1.5rem",
+		"5": "1.75rem",
+		"6": "2rem",
+		"7": "2.25rem",
+		"8": "2.5rem",
+		"9": "3rem",
+		"10": "4.5rem",
+		"11": "5rem"
+	},
+	letterSpacing: {
+		"0": "-0.125rem",
+		"1": "-0.0625rem",
+		"2": "0rem",
+		"3": "0.0625rem",
+		"4": "0.125rem"
+	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	duration: {
+		instant: "0ms",
+		fast: "150ms",
+		normal: "200ms",
+		moderate: "300ms",
+		slow: "500ms",
+		slower: "750ms",
+		slowest: "1000ms"
+	},
+	easing: {
+		linear: "linear",
+		ease: "ease",
+		easeIn: "ease-in",
+		easeOut: "ease-out",
+		easeInOut: "ease-in-out",
+		easeInQuart: "cubic-bezier(0.5, 0, 0.75, 0)",
+		easeOutQuart: "cubic-bezier(0.25, 1, 0.5, 1)",
+		easeInOutQuart: "cubic-bezier(0.76, 0, 0.24, 1)",
+		easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
+		easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+		easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+	},
+	$ref: "./base/index.json"
+};
+var component = {
+	button: {
+		primary: {
+			backgroundColor: "#212529",
+			textColor: "#ffffff",
+			borderRadius: "0.25rem",
+			padding: "0.75rem 1rem",
+			font: "500 1rem/1.5rem 'Inter', sans-serif"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6",
+			textColor: "#adb5bd"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#e9ecef",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#dee2e6"
+				},
+				active: {
+					backgroundColor: "#f8f9fa"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent",
+					textColor: "#adb5bd"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				padding: "0.5rem 0.75rem",
+				font: "500 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "0.5rem 1rem",
+				font: "500 0.875rem/1.5rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.75rem 1rem",
+				font: "500 1rem/1.5rem 'Inter', sans-serif"
+			}
+		}
+	},
+	chip: {
+		"default": {
+			backgroundColor: "#e9ecef",
+			textColor: "#212529",
+			borderRadius: "0.25rem",
+			padding: "0.25rem 0.5rem",
+			font: "400 0.75rem/1rem 'Inter', sans-serif"
+		},
+		variants: {
+			emphasis: {
+				backgroundColor: "#212529",
+				textColor: "#ffffff"
+			},
+			subtle: {
+				backgroundColor: "#ffffff",
+				textColor: "#212529"
+			},
+			interactive: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff"
+			}
+		},
+		sizes: {
+			small: {
+				padding: "0 0.25rem",
+				font: "400 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "0.25rem 0.5rem",
+				font: "400 0.75rem/1rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.5rem 0.75rem",
+				font: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			}
+		}
+	},
+	iconButton: {
+		primary: {
+			backgroundColor: "#212529",
+			borderRadius: "0.25rem",
+			minWidth: "40px",
+			minHeight: "40px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#e9ecef",
+				hover: {
+					backgroundColor: "#dee2e6"
+				},
+				active: {
+					backgroundColor: "#f8f9fa"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				minWidth: "32px",
+				minHeight: "32px",
+				padding: "0.25rem"
+			},
+			medium: {
+				minWidth: "40px",
+				minHeight: "40px",
+				padding: "0.5rem"
+			},
+			large: {
+				minWidth: "48px",
+				minHeight: "48px",
+				padding: "0.75rem"
+			}
+		}
+	},
+	separator: {
+		border: "0.0625rem solid #dee2e6",
+		margin: "2rem 0",
+		variants: {
+			"default": {
+				border: "0.0625rem solid #dee2e6",
+				margin: "2rem 0"
+			},
+			strong: {
+				border: "0.0625rem solid #343a40",
+				margin: "2rem 0"
+			},
+			minimal: {
+				border: "0.0625rem solid #dee2e6",
+				margin: "1.5rem 0"
+			}
+		},
+		sizes: {
+			small: {
+				margin: "1rem 0"
+			},
+			medium: {
+				margin: "1.5rem 0"
+			},
+			large: {
+				margin: "2rem 0"
+			},
+			xlarge: {
+				margin: "3rem 0"
+			}
+		}
+	},
+	$ref: "./component/index.json"
+};
+var semantic$1 = {
+	border: {
+		"default": "0.0625rem solid #e9ecef",
+		subtle: "0.0625rem solid #dee2e6",
+		strong: "0.0625rem solid #343a40",
+		focus: "0.125rem solid #343a40",
+		tooltip: "0.125rem dotted #dee2e6"
+	},
+	size: {
+		icon: {
+			xs: "0.75rem",
+			sm: "1rem",
+			md: "1.25rem",
+			lg: "1.5rem",
+			xl: "2rem",
+			"2xl": "2.5rem"
+		},
+		avatar: {
+			xs: "1.5rem",
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem",
+			xl: "4rem"
+		}
+	},
+	spacing: {
+		separator: {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2rem",
+			xl: "3rem"
+		},
+		layout: {
+			none: "0",
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem",
+			"3xl": "1.75rem",
+			"4xl": "2rem",
+			"5xl": "2.25rem",
+			"6xl": "2.5rem",
+			"7xl": "3rem",
+			"8xl": "3.5rem",
+			"9xl": "4rem",
+			"10xl": "5rem",
+			auto: "auto"
+		}
+	},
+	color: {
+		text: {
+			"default": "#212529",
+			emphasis: "#343a40",
+			subdued: "#495057",
+			inverse: "#ffffff",
+			disabled: "#adb5bd",
+			interactive: "#0265DC",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		},
+		background: {
+			"default": "#f8f9fa",
+			subtle: "#ffffff",
+			emphasis: "#212529",
+			surface: "#e9ecef",
+			inverse: "#343a40",
+			interactive: "#0265DC",
+			"interactive-subtle": "#E0F2FF",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			"error-subtle": "#FFEBE7",
+			success: "#007A4D",
+			"success-subtle": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-subtle": "#FFECCC",
+			disabled: "#dee2e6"
+		},
+		border: {
+			"default": "#e9ecef",
+			subtle: "#dee2e6",
+			strong: "#343a40",
+			interactive: "#0265DC",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		},
+		icon: {
+			"default": "#212529",
+			emphasis: "#343a40",
+			subdued: "#6c757d",
+			disabled: "#adb5bd",
+			inverse: "#ffffff",
+			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		}
+	},
+	typography: {
+		display: "700 5rem/4.5rem 'Inter', sans-serif",
+		h1: "700 3rem/3rem 'Inter', sans-serif",
+		h2: "700 2rem/2.5rem 'Inter', sans-serif",
+		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
+		h4: "500 1.5rem/2rem 'Inter', sans-serif",
+		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
+		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
+		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
+		body: "400 1rem/1.5rem 'Inter', sans-serif",
+		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
+		overline: "700 0.75rem/1rem 'Inter', sans-serif",
+		caption: "400 0.75rem/1rem 'Inter', sans-serif",
+		button1: "500 1rem/1.5rem 'Inter', sans-serif",
+		button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
+		button3: "500 0.75rem/1rem 'Inter', sans-serif",
+		label: "400 0.75rem/1rem 'Inter', sans-serif",
+		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
+	},
+	motion: {
+		transition: {
+			fast: "all 150ms ease-out",
+			normal: "all 200ms ease-in-out",
+			slow: "all 300ms ease-in-out"
+		},
+		hover: "background-color 150ms ease-out, color 150ms ease-out",
+		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
+	},
+	$ref: "./semantic/index.json"
+};
+var tokens = {
+	base: base$1,
+	component: component,
+	semantic: semantic$1
+};
+
+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) {
+  var $size = _a.$size;
+  return tokens.semantic.size.avatar[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return tokens.semantic.size.avatar[$size];
+}, 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);
+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"
+// Helper function to get initials from name
+])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
+  var $size = _a.$size;
+  var sizeMap = {
+    xs: tokens.base.fontSize[1],
+    sm: tokens.base.fontSize[2],
+    md: tokens.base.fontSize[3],
+    lg: tokens.base.fontSize[4],
+    xl: tokens.base.fontSize[5]
+  };
+  return sizeMap[$size];
+}, tokens.semantic.color.text["default"]);
+// Helper function to get initials from name
+var getInitials = function getInitials(name) {
+  return name.split(' ').map(function (word) {
+    return word.charAt(0);
+  }).join('').slice(0, 2).toUpperCase();
+};
+var Avatar = function Avatar(_a) {
+  var name = _a.name,
+    picture = _a.picture,
+    _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["name", "picture", "size", 'data-testid']);
+  // Remove styled-only props from the rest
+  var _c = props;
+    _c.$size;
+    var htmlProps = __rest(_c, ["$size"]);
+  var _d = useState(false),
+    imageError = _d[0],
+    setImageError = _d[1];
+  var _e = useState(false),
+    imageLoaded = _e[0],
+    setImageLoaded = _e[1];
+  var handleImageError = function handleImageError() {
+    setImageError(true);
+  };
+  var handleImageLoad = function handleImageLoad() {
+    setImageLoaded(true);
+  };
+  var showImage = picture && !imageError;
+  var initials = getInitials(name);
+  return /*#__PURE__*/React.createElement(AvatarContainer, _extends({
+    $size: size,
+    "data-testid": dataTestId,
+    "data-size": size,
+    role: "img",
+    "aria-label": "Avatar for ".concat(name)
+  }, htmlProps), showImage ? /*#__PURE__*/React.createElement(AvatarImage, {
+    $size: size,
+    src: picture,
+    alt: "Avatar of ".concat(name),
+    onError: handleImageError,
+    onLoad: handleImageLoad,
+    "data-state": imageLoaded ? 'loaded' : 'loading'
+  }) : /*#__PURE__*/React.createElement(AvatarInitials, {
+    $size: size,
+    "data-initials": initials,
+    "aria-hidden": "true"
+  }, initials));
+};
+var templateObject_1$c, templateObject_2$4, templateObject_3$3;
+
+var StyledBox = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  }
+})(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);
+}, function (props) {
+  return props.$flexDirection && css(templateObject_2$3 || (templateObject_2$3 = __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);
+}, function (props) {
+  return props.$alignItems && css(templateObject_4$1 || (templateObject_4$1 = __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);
+}, function (props) {
+  return props.$gap && css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
+}, function (props) {
+  return props.$m && css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
+}, function (props) {
+  return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
+}, function (props) {
+  return props.$mr && css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokens.semantic.spacing.layout[props.$mr]);
+}, function (props) {
+  return props.$mb && css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$mb]);
+}, function (props) {
+  return props.$ml && css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokens.semantic.spacing.layout[props.$ml]);
+}, function (props) {
+  return props.$mx && css(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokens.semantic.spacing.layout[props.$mx], tokens.semantic.spacing.layout[props.$mx]);
+}, function (props) {
+  return props.$my && css(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokens.semantic.spacing.layout[props.$my], tokens.semantic.spacing.layout[props.$my]);
+}, function (props) {
+  return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokens.semantic.spacing.layout[props.$p]);
+}, function (props) {
+  return props.$pt && css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokens.semantic.spacing.layout[props.$pt]);
+}, function (props) {
+  return props.$pr && css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokens.semantic.spacing.layout[props.$pr]);
+}, function (props) {
+  return props.$pb && css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$pb]);
+}, function (props) {
+  return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokens.semantic.spacing.layout[props.$pl]);
+}, function (props) {
+  return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokens.semantic.spacing.layout[props.$px], tokens.semantic.spacing.layout[props.$px]);
+}, function (props) {
+  return props.$py && css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), tokens.semantic.spacing.layout[props.$py], tokens.semantic.spacing.layout[props.$py]);
+}, function (props) {
+  return props.$width && css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
+}, function (props) {
+  return props.$height && css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
+}, function (props) {
+  return props.$maxWidth && css(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
+}, function (props) {
+  return props.$maxHeight && css(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
+}, function (props) {
+  return props.$minWidth && css(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
+}, function (props) {
+  return props.$minHeight && css(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
+}, function (props) {
+  return props.$position && css(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
+}, function (props) {
+  return props.$top && css(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
+}, function (props) {
+  return props.$right && css(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
+}, function (props) {
+  return props.$bottom && css(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
+}, function (props) {
+  return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
+}, function (props) {
+  return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokens.base.border.radius[props.$borderRadius]);
+}, function (props) {
+  return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokens.semantic.color.border[props.$border]);
+}, function (props) {
+  return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderTop]);
+}, function (props) {
+  return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderRight]);
+}, function (props) {
+  return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderBottom]);
+}, function (props) {
+  return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderLeft]);
+}, function (props) {
+  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokens.semantic.color.background[props.$bg]);
+}, function (props) {
+  return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokens.semantic.color.text[props.$color]);
+}, function (props) {
+  return props.$overflow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
+}, function (props) {
+  return props.$overflowX && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
+}, function (props) {
+  return props.$overflowY && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
+});
+// Transform component that maps clean props to $-prefixed props for styled-components
+var BoxTransform = function BoxTransform(props) {
+  var
+    // Display
+    display = props.display,
+    // Flexbox
+    flexDirection = props.flexDirection,
+    justifyContent = props.justifyContent,
+    alignItems = props.alignItems,
+    flexWrap = props.flexWrap,
+    gap = props.gap,
+    // Spacing
+    m = props.m,
+    mt = props.mt,
+    mr = props.mr,
+    mb = props.mb,
+    ml = props.ml,
+    mx = props.mx,
+    my = props.my,
+    p = props.p,
+    pt = props.pt,
+    pr = props.pr,
+    pb = props.pb,
+    pl = props.pl,
+    px = props.px,
+    py = props.py,
+    // Size
+    width = props.width,
+    height = props.height,
+    maxWidth = props.maxWidth,
+    maxHeight = props.maxHeight,
+    minWidth = props.minWidth,
+    minHeight = props.minHeight,
+    // Position
+    position = props.position,
+    top = props.top,
+    right = props.right,
+    bottom = props.bottom,
+    left = props.left,
+    // Borders
+    borderRadius = props.borderRadius,
+    border = props.border,
+    borderTop = props.borderTop,
+    borderRight = props.borderRight,
+    borderBottom = props.borderBottom,
+    borderLeft = props.borderLeft,
+    // Background & Color
+    bg = props.bg,
+    color = props.color,
+    // Overflow
+    overflow = props.overflow,
+    overflowX = props.overflowX,
+    overflowY = props.overflowY,
+    // Standard props
+    as = props.as,
+    children = props.children,
+    dataTestId = props["data-testid"],
+    rest = __rest(props, ["display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "position", "top", "right", "bottom", "left", "borderRadius", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "bg", "color", "overflow", "overflowX", "overflowY", "as", "children", 'data-testid']);
+  return /*#__PURE__*/React.createElement(StyledBox, _extends({
+    as: as,
+    "data-testid": dataTestId,
+    $display: display,
+    $flexDirection: flexDirection,
+    $justifyContent: justifyContent,
+    $alignItems: alignItems,
+    $flexWrap: flexWrap,
+    $gap: gap,
+    $m: m,
+    $mt: mt,
+    $mr: mr,
+    $mb: mb,
+    $ml: ml,
+    $mx: mx,
+    $my: my,
+    $p: p,
+    $pt: pt,
+    $pr: pr,
+    $pb: pb,
+    $pl: pl,
+    $px: px,
+    $py: py,
+    $width: width,
+    $height: height,
+    $maxWidth: maxWidth,
+    $maxHeight: maxHeight,
+    $minWidth: minWidth,
+    $minHeight: minHeight,
+    $position: position,
+    $top: top,
+    $right: right,
+    $bottom: bottom,
+    $left: left,
+    $borderRadius: borderRadius,
+    $border: border,
+    $borderTop: borderTop,
+    $borderRight: borderRight,
+    $borderBottom: borderBottom,
+    $borderLeft: borderLeft,
+    $bg: bg,
+    $color: color,
+    $overflow: overflow,
+    $overflowX: overflowX,
+    $overflowY: overflowY
+  }, 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 add = {
+	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
+	name: "add"
+};
+var arrowDown = {
+	path: "m18.707 9.707-1.414-1.414L12 13.586 6.707 8.293 5.293 9.707 12 16.414l6.707-6.707Z",
+	name: "arrowDown"
+};
+var arrowUp = {
+	path: "m18.707 14.293-1.414 1.414L12 10.414l-5.293 5.293-1.414-1.414L12 7.586l6.707 6.707Z",
+	name: "arrowUp"
+};
+var arrowLeft = {
+	path: "M15.707 6.70703L10.4141 12L15.707 17.293L14.293 18.707L7.58594 12L14.293 5.29297L15.707 6.70703Z",
+	name: "arrowLeft"
+};
+var arrowRight = {
+	path: "M8.29297 6.70703L13.5859 12L8.29297 17.293L9.70703 18.707L16.4141 12L9.70703 5.29297L8.29297 6.70703Z",
+	name: "arrowRight"
+};
+var back = {
+	path: "m5 12-.707-.707-.707.707.707.707L5 12Zm12 1a1 1 0 1 0 0-2v2ZM8.293 7.293l-4 4 1.414 1.414 4-4-1.414-1.414Zm-4 5.414 4 4 1.414-1.414-4-4-1.414 1.414ZM5 13h12v-2H5v2Z",
+	name: "back"
+};
+var caret = {
+	path: "m14.77 11.808-4.458-3.715A.8.8 0 0 0 9 8.708v6.584a.8.8 0 0 0 1.312.614l4.458-3.714a.25.25 0 0 0 0-.384Z",
+	name: "caret"
+};
+var close = {
+	path: "M19.4141 6L13.4141 12L19.4141 18L18 19.4141L12 13.4141L6 19.4141L4.58594 18L10.5859 12L4.58594 6L6 4.58594L12 10.5859L18 4.58594L19.4141 6Z",
+	name: "close"
+};
+var directionRight = {
+	path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
+	name: "directionRight"
+};
+var menu = {
+	path: "M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z",
+	name: "menu"
+};
+var pause = {
+	path: "M7 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H7ZM15 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2Z",
+	name: "pause"
+};
+var play = {
+	path: "M16.138 10.569 9.605 7.303A1.8 1.8 0 0 0 7 8.913v6.175a1.8 1.8 0 0 0 2.605 1.61l6.533-3.267c1.18-.59 1.18-2.272 0-2.862Z",
+	name: "play"
+};
+var playBack = {
+	path: "m16.293 5.293 1.414 1.414L12.414 12l5.293 5.293-1.414 1.414L9.586 12l6.707-6.707ZM5 17V7h2v10H5Z",
+	name: "playBack"
+};
+var lineOut = {
+	path: "M21 9V3H15V5H17.5859L8.58595 14H6.00001L5.35157 14.0049C5.14361 14.0103 4.94678 14.0221 4.76954 14.0459C4.38634 14.0974 3.94916 14.2227 3.58595 14.5859C3.22274 14.9492 3.09743 15.3863 3.04591 15.7695C2.99825 16.124 3.00001 16.5569 3.00001 17V18C3.00001 18.4431 2.99825 18.876 3.04591 19.2305C3.09743 19.6137 3.22274 20.0508 3.58595 20.4141C3.94916 20.7773 4.38634 20.9026 4.76954 20.9541C5.12397 21.0018 5.55688 21 6.00001 21H7.00001C7.44314 21 7.87604 21.0018 8.23048 20.9541C8.61368 20.9026 9.05086 20.7773 9.41407 20.4141C9.77729 20.0508 9.90259 19.6137 9.95411 19.2305C10.0018 18.876 10 18.4431 10 18V15.4141L19 6.41406V9H21ZM5.40235 16.0039L6.00001 16H8.00001V18C8.00001 18.4995 7.99821 18.7737 7.97266 18.9639C7.97236 18.9661 7.97199 18.9685 7.97169 18.9707C7.96917 18.9711 7.9665 18.9723 7.96388 18.9727C7.77369 18.9982 7.49949 19 7.00001 19H6.00001C5.50052 19 5.22632 18.9982 5.03614 18.9727C5.03384 18.9723 5.03151 18.971 5.02931 18.9707C5.029 18.9685 5.02766 18.9662 5.02735 18.9639C5.00181 18.7737 5.00001 18.4995 5.00001 18V17C5.00001 16.5005 5.00181 16.2263 5.02735 16.0361C5.02771 16.0335 5.02895 16.0308 5.02931 16.0283C5.03147 16.028 5.03389 16.0276 5.03614 16.0273C5.13128 16.0146 5.24749 16.0076 5.40235 16.0039Z",
+	name: "lineOut"
+};
+var message = {
+	path: "M16 5.00001C16.9145 5.00001 17.7014 4.99777 18.3281 5.08204C18.9835 5.17019 19.6115 5.36934 20.1211 5.87891C20.6307 6.38849 20.8298 7.01648 20.918 7.67188C21.0022 8.29863 21 9.08547 21 10V14C21 14.9145 21.0022 15.7014 20.918 16.3281C20.8298 16.9835 20.6307 17.6115 20.1211 18.1211C19.6115 18.6307 18.9835 18.8298 18.3281 18.918C17.7014 19.0022 16.9145 19 16 19H8.00001C7.08547 19 6.29863 19.0022 5.67188 18.918C5.01648 18.8298 4.38849 18.6307 3.87891 18.1211C3.36934 17.6115 3.17019 16.9835 3.08204 16.3281C2.99777 15.7014 3.00001 14.9145 3.00001 14V10C3.00001 9.08547 2.99777 8.29863 3.08204 7.67188C3.17019 7.01648 3.36933 6.38849 3.87891 5.87891C4.38849 5.36933 5.01648 5.17019 5.67188 5.08204C6.29863 4.99777 7.08547 5.00001 8.00001 5.00001H16ZM13.3418 13.4473C12.4972 13.8696 11.5028 13.8696 10.6582 13.4473L5.00001 10.6182V14C5.00001 14.9711 5.00228 15.599 5.06446 16.0615C5.12277 16.4951 5.21687 16.6309 5.29297 16.707C5.36908 16.7831 5.50495 16.8772 5.93848 16.9356C6.40099 16.9977 7.02893 17 8.00001 17H16C16.9711 17 17.599 16.9977 18.0615 16.9356C18.4951 16.8772 18.6309 16.7831 18.707 16.707C18.7831 16.6309 18.8772 16.4951 18.9356 16.0615C18.9977 15.599 19 14.9711 19 14V10.6182L13.3418 13.4473ZM8.00001 7.00001C7.02893 7.00001 6.40099 7.00228 5.93848 7.06446C5.50494 7.12278 5.36908 7.21687 5.29297 7.29297C5.21686 7.36908 5.12278 7.50494 5.06446 7.93848C5.04619 8.07437 5.03381 8.2246 5.02442 8.39356L11.5527 11.6582C11.8343 11.799 12.1657 11.799 12.4473 11.6582L18.9746 8.39356C18.9652 8.22462 18.9538 8.07436 18.9356 7.93848C18.8772 7.50495 18.7831 7.36908 18.707 7.29297C18.6309 7.21687 18.4951 7.12277 18.0615 7.06446C17.599 7.00228 16.9711 7.00001 16 7.00001H8.00001Z",
+	name: "message"
+};
+var copy = {
+	path: "M16 9.00001C16.9145 9.00001 17.7014 8.99777 18.3281 9.08204C18.9835 9.17019 19.6115 9.36934 20.1211 9.87891C20.6307 10.3885 20.8298 11.0165 20.918 11.6719C21.0022 12.2986 21 13.0855 21 14V16C21 16.9145 21.0022 17.7014 20.918 18.3281C20.8298 18.9835 20.6307 19.6115 20.1211 20.1211C19.6115 20.6307 18.9835 20.8298 18.3281 20.918C17.7014 21.0022 16.9145 21 16 21H14C13.0855 21 12.2986 21.0022 11.6719 20.918C11.0165 20.8298 10.3885 20.6307 9.87891 20.1211C9.36934 19.6115 9.17019 18.9835 9.08204 18.3281C8.99777 17.7014 9.00001 16.9145 9.00001 16V14C9.00001 13.0855 8.99777 12.2986 9.08204 11.6719C9.17019 11.0165 9.36933 10.3885 9.87891 9.87891C10.3885 9.36933 11.0165 9.17019 11.6719 9.08204C12.2986 8.99777 13.0855 9.00001 14 9.00001H16ZM14 11C13.0289 11 12.401 11.0023 11.9385 11.0645C11.5049 11.1228 11.3691 11.2169 11.293 11.293C11.2169 11.3691 11.1228 11.5049 11.0645 11.9385C11.0023 12.401 11 13.0289 11 14V16C11 16.9711 11.0023 17.599 11.0645 18.0615C11.1228 18.4951 11.2169 18.6309 11.293 18.707C11.3691 18.7831 11.5049 18.8772 11.9385 18.9356C12.401 18.9977 13.0289 19 14 19H16C16.9711 19 17.599 18.9977 18.0615 18.9356C18.4951 18.8772 18.6309 18.7831 18.707 18.707C18.7831 18.6309 18.8772 18.4951 18.9356 18.0615C18.9977 17.599 19 16.9711 19 16V14C19 13.0289 18.9977 12.401 18.9356 11.9385C18.8772 11.5049 18.7831 11.3691 18.707 11.293C18.6309 11.2169 18.4951 11.1228 18.0615 11.0645C17.599 11.0023 16.9711 11 16 11H14Z M11 3.00001C11.4521 3.00001 11.8413 2.99962 12.1621 3.02149C12.4919 3.04399 12.8225 3.09352 13.1484 3.22852C13.8832 3.53299 14.467 4.1168 14.7715 4.85157C14.9065 5.17749 14.956 5.50807 14.9785 5.8379C15.0004 6.15869 15 6.54787 15 7.00001H13C13 6.52039 12.9996 6.21062 12.9834 5.97364C12.9678 5.74574 12.9411 5.6588 12.9238 5.61719C12.8223 5.37227 12.6277 5.17767 12.3828 5.07618C12.3412 5.05894 12.2543 5.03216 12.0264 5.01661C11.7894 5.00044 11.4796 5.00001 11 5.00001H8.00001C7.02893 5.00001 6.40099 5.00228 5.93848 5.06446C5.50494 5.12278 5.36908 5.21687 5.29297 5.29297C5.21686 5.36908 5.12278 5.50494 5.06446 5.93848C5.00228 6.40099 5.00001 7.02893 5.00001 8.00001V11C5.00001 11.4796 5.00044 11.7894 5.01661 12.0264C5.03216 12.2543 5.05894 12.3412 5.07618 12.3828C5.17767 12.6277 5.37227 12.8223 5.61719 12.9238C5.6588 12.9411 5.74574 12.9678 5.97364 12.9834C6.21062 12.9996 6.52039 13 7.00001 13V15C6.54787 15 6.15869 15.0004 5.8379 14.9785C5.50807 14.956 5.17749 14.9065 4.85157 14.7715C4.1168 14.467 3.53299 13.8832 3.22852 13.1484C3.09352 12.8225 3.04399 12.4919 3.02149 12.1621C2.99962 11.8413 3.00001 11.4521 3.00001 11V8.00001C3.00001 7.08547 2.99777 6.29863 3.08204 5.67188C3.17019 5.01648 3.36933 4.38849 3.87891 3.87891C4.38849 3.36933 5.01648 3.17019 5.67188 3.08204C6.29863 2.99777 7.08547 3.00001 8.00001 3.00001H11Z",
+	name: "copy"
+};
+var link = {
+	path: "M10 7C10.5523 7 11 7.44772 11 8C11 8.55228 10.5523 9 10 9H7C5.34315 9 4 10.3431 4 12C4 13.6569 5.34315 15 7 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H10Z M17 7C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H14C13.4477 17 13 16.5523 13 16C13 15.4477 13.4477 15 14 15H17C18.6569 15 20 13.6569 20 12C20 10.3431 18.6569 9 17 9H14C13.4477 9 13 8.55228 13 8C13 7.44772 13.4477 7 14 7H17Z M16 11C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H16Z",
+	name: "link"
+};
+var userBox = {
+	path: "M12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8Z M14 2C17.7712 2 19.6566 2.0003 20.8281 3.17188C21.9997 4.34345 22 6.22876 22 10V14C22 17.7712 21.9997 19.6566 20.8281 20.8281C19.803 21.8533 18.2315 21.982 15.3281 21.998L14 22H10L8.67188 21.998C5.8719 21.9826 4.31033 21.8625 3.2832 20.9346L3.17188 20.8281C2.14675 19.803 2.01797 18.2315 2.00195 15.3281L2 14V10C2 6.34627 2 4.46248 3.06543 3.2832L3.17188 3.17188C4.34345 2.0003 6.22876 2 10 2H14ZM12 18C10.8577 18 9.76263 18.3153 8.88574 18.876C8.39459 19.1901 7.99492 19.5688 7.69043 19.9834C8.33459 19.9972 9.09233 20 10 20H14C14.9072 20 15.6646 19.9971 16.3086 19.9834C16.0041 19.5689 15.6052 19.19 15.1143 18.876C14.2374 18.3153 13.1423 18 12 18ZM10 4C8.05784 4 6.80197 4.00454 5.87695 4.12891C5.00986 4.24554 4.73816 4.43372 4.58594 4.58594C4.43372 4.73816 4.24554 5.00986 4.12891 5.87695C4.00454 6.80197 4 8.05784 4 10V14C4 15.9422 4.00454 17.198 4.12891 18.123C4.24554 18.9901 4.43372 19.2618 4.58594 19.4141C4.71234 19.5405 4.92163 19.6893 5.48535 19.8037C5.96679 18.7505 6.77822 17.8493 7.80859 17.1904C9.02742 16.4111 10.5007 16 12 16C13.4993 16 14.9726 16.4111 16.1914 17.1904C17.2217 17.8492 18.0322 18.7507 18.5137 19.8037C19.0781 19.6893 19.2876 19.5405 19.4141 19.4141C19.5663 19.2618 19.7545 18.9901 19.8711 18.123C19.9955 17.198 20 15.9422 20 14V10C20 8.05784 19.9955 6.80197 19.8711 5.87695C19.7545 5.00986 19.5663 4.73816 19.4141 4.58594C19.2618 4.43372 18.9901 4.24554 18.123 4.12891C17.198 4.00454 15.9422 4 14 4H10Z",
+	name: "userBox"
+};
+var iconsData = {
+	add: add,
+	arrowDown: arrowDown,
+	arrowUp: arrowUp,
+	arrowLeft: arrowLeft,
+	arrowRight: arrowRight,
+	back: back,
+	caret: caret,
+	close: close,
+	directionRight: directionRight,
+	menu: menu,
+	pause: pause,
+	play: play,
+	playBack: playBack,
+	lineOut: lineOut,
+	message: message,
+	copy: copy,
+	link: link,
+	userBox: userBox
+};
+
+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) {
+  var $size = _a.$size;
+  return tokens.semantic.size.icon[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return tokens.semantic.size.icon[$size];
+}, function (_a) {
+  var $iconColor = _a.$iconColor;
+  switch ($iconColor) {
+    case 'default':
+      return tokens.semantic.color.icon["default"];
+    case 'emphasis':
+      return tokens.semantic.color.icon.emphasis;
+    case 'subdued':
+      return tokens.semantic.color.icon.subdued;
+    case 'disabled':
+      return tokens.semantic.color.icon.disabled;
+    case 'inverse':
+      return tokens.semantic.color.icon.inverse;
+    case 'interactive':
+      return tokens.semantic.color.icon.interactive;
+    case 'error':
+      return tokens.semantic.color.icon.error;
+    case 'success':
+      return tokens.semantic.color.icon.success;
+    case 'warning':
+      return tokens.semantic.color.icon.warning;
+    case 'inherit':
+      return 'currentColor';
+    default:
+      return tokens.semantic.color.icon["default"];
+  }
+});
+var Icon = function Icon(_a) {
+  var name = _a.name,
+    _b = _a.size,
+    size = _b === void 0 ? 'lg' : _b,
+    _c = _a.iconColor,
+    iconColor = _c === void 0 ? 'default' : _c,
+    dataTestId = _a["data-testid"];
+  // Get the icon data from the JSON file
+  var iconData = iconsData[name];
+  if (!iconData) {
+    console.warn("Icon \"".concat(name, "\" not found in icons.json"));
+    return /*#__PURE__*/React.createElement(IconStyled, {
+      $size: size,
+      $iconColor: iconColor,
+      "data-testid": dataTestId
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconStyled, {
+    $size: size,
+    $iconColor: iconColor,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": iconData.name
+  }, /*#__PURE__*/React.createElement("path", {
+    d: iconData.path
+  })));
+};
+var templateObject_1$a;
+
+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 $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 $size = _a.$size;
+  switch ($size) {
+    case 'small':
+      return "\n        font: ".concat(button.sizes.small.font, ";\n        padding: ").concat(button.sizes.small.padding, ";\n      ");
+    case 'medium':
+      return "\n        font: ".concat(button.sizes.medium.font, ";\n        padding: ").concat(button.sizes.medium.padding, ";\n      ");
+    case 'large':
+      return "\n        font: ".concat(button.sizes.large.font, ";\n        padding: ").concat(button.sizes.large.padding, ";\n      ");
+    default:
+      return "\n        font: ".concat(button.sizes.large.font, ";\n        padding: ").concat(button.sizes.large.padding, ";\n      ");
+  }
+};
+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);
+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"
+// Helper function to get icon size based on button size
+])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+// Helper function to get icon size based on button size
+var getIconSize = function getIconSize(buttonSize) {
+  switch (buttonSize) {
+    case 'small':
+      return 'xs';
+    case 'medium':
+      return 'sm';
+    case 'large':
+      return 'md';
+    default:
+      return 'md';
+  }
+};
+// Helper function to render button content with optional icon
+var renderButtonContent = function renderButtonContent(children, iconName, size) {
+  if (!iconName) return children;
+  var iconSize = getIconSize(size);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconColor: "inherit"
+  }), children);
+};
+var Button = function Button(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "large" : _c,
+    url = _a.url,
+    _d = _a.purpose,
+    purpose = _d === void 0 ? 'button' : _d,
+    children = _a.children,
+    target = _a.target,
+    iconName = _a.iconName,
+    dataTestId = _a["data-testid"],
+    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", 'data-testid']);
+  // For internal links, use Next.js Link
+  if (purpose === 'link' && url && !url.startsWith('http') && !target) {
+    var linkProps = rest;
+    return /*#__PURE__*/React.createElement(Link, {
+      href: url,
+      passHref: true,
+      legacyBehavior: true
+    }, /*#__PURE__*/React.createElement(StyledLink, _extends({
+      $variant: variant,
+      $size: size,
+      "data-testid": dataTestId
+    }, linkProps), renderButtonContent(children, iconName, size)));
+  }
+  // For external links or links with target
+  if (purpose === 'link' && url) {
+    var linkProps = rest;
+    return /*#__PURE__*/React.createElement(StyledLink, _extends({
+      href: url,
+      target: target,
+      $variant: variant,
+      $size: size,
+      "data-testid": dataTestId
+    }, linkProps), renderButtonContent(children, iconName, size));
+  }
+  // For button with URL (legacy support)
+  if (purpose === 'button' && url) {
+    var buttonProps_1 = rest;
+    var handleClick = function handleClick(e) {
+      // Call any existing onClick handler first
+      if (buttonProps_1.onClick) {
+        buttonProps_1.onClick(e);
+      }
+      // Handle navigation
+      if (url.startsWith('http') || target) {
+        window.open(url, target || '_self');
+      } else {
+        window.location.href = url;
+      }
+    };
+    return /*#__PURE__*/React.createElement(StyledButton, _extends({}, buttonProps_1, {
+      $variant: variant,
+      $size: size,
+      "data-testid": dataTestId,
+      onClick: handleClick
+    }), renderButtonContent(children, iconName, size));
+  }
+  // Regular button
+  var buttonProps = rest;
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    $variant: variant,
+    $size: size,
+    "data-testid": dataTestId
+  }, buttonProps), renderButtonContent(children, iconName, size));
+};
+var templateObject_1$9, templateObject_2$2;
+
+var chip = tokens.component.chip;
+// Dynamic variant styles using component tokens
+var getVariantStyles = function getVariantStyles(_a) {
+  var variant = _a.variant;
+  switch (variant) {
+    case 'emphasis':
+      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n      ");
+    case 'subtle':
+      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n      ");
+    case 'interactive':
+      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n      ");
+    case 'default':
+    default:
+      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n      ");
+  }
+};
+// Dynamic size styles using component tokens
+var getSizeStyles = function getSizeStyles(_a) {
+  var size = _a.size;
+  switch (size) {
+    case 'small':
+      return "\n        font: ".concat(chip.sizes.small.font, ";\n        padding: ").concat(chip.sizes.small.padding, ";\n      ");
+    case 'large':
+      return "\n        font: ".concat(chip.sizes.large.font, ";\n        padding: ").concat(chip.sizes.large.padding, ";\n      ");
+    case 'medium':
+    default:
+      return "\n        font: ".concat(chip.sizes.medium.font, ";\n        padding: ").concat(chip.sizes.medium.padding, ";\n      ");
+  }
+};
+// Base styled component that only receives styling props
+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
+var StyledChip = function StyledChip(_a) {
+  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, []);
+  return /*#__PURE__*/React.createElement(BaseChip, _extends({
+    variant: variant,
+    size: size,
+    disabled: disabled,
+    clickable: clickable
+  }, cleanHtmlProps), children);
+};
+var Chip = function Chip(_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _e = _a.size,
+    size = _e === void 0 ? 'medium' : _e,
+    onClick = _a.onClick,
+    _f = _a.disabled,
+    disabled = _f === void 0 ? false : _f,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    role = _a.role,
+    title = _a.title,
+    // Legacy prop support
+    props = __rest(_a, ["children", "variant", "size", "onClick", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role", "title"]);
+  var isClickable = Boolean(onClick && !disabled);
+  // Map legacy variants to new variants for backward compatibility
+  var normalizedVariant = variant === 'light' ? 'default' : variant === 'dark' ? 'emphasis' : variant;
+  // Support legacy title prop - prioritize children over title
+  var content = children !== undefined ? children : title;
+  // Remove styled-only props from the rest
+  var _g = props;
+    _g.variant;
+    _g.size;
+    _g.disabled;
+    _g.clickable;
+    var htmlProps = __rest(_g, ["variant", "size", "disabled", "clickable"]);
+  var handleClick = function handleClick() {
+    if (onClick && !disabled) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledChip, _extends({
+    variant: normalizedVariant,
+    size: size,
+    disabled: disabled,
+    clickable: isClickable,
+    onClick: isClickable ? handleClick : undefined,
+    onKeyDown: isClickable ? handleKeyDown : undefined,
+    tabIndex: isClickable ? 0 : undefined,
+    role: role || (isClickable ? 'button' : undefined),
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "data-testid": dataTestId
+  }, htmlProps), content);
+};
+// Legacy component for backward compatibility
+var LegacyChip = function LegacyChip(_a) {
+  var title = _a.title,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'light' : _b;
+  // Map legacy variants to new variants
+  var newVariant = variant === 'dark' ? 'emphasis' : 'default';
+  return /*#__PURE__*/React.createElement(Chip, {
+    variant: newVariant
+  }, title);
+};
+var templateObject_1$8;
+
+// Breakpoints using base tokens
+var breakpoints$1 = {
+  xs: tokens.base.breakpoint.xs,
+  sm: tokens.base.breakpoint.sm,
+  md: tokens.base.breakpoint.md,
+  lg: tokens.base.breakpoint.lg,
+  xl: tokens.base.breakpoint.xl,
+  '2xl': tokens.base.breakpoint['2xl']
+};
+// Media query helpers
+var media$1 = {
+  xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
+  '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']);
+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 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 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,
+    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
+  });
+  return /*#__PURE__*/React.createElement(CoverImageWrapper, {
+    "data-testid": dataTestId
+  }, slug ? /*#__PURE__*/React.createElement(ImageLink, {
+    href: "/posts/".concat(slug),
+    "aria-label": "Read more about ".concat(title)
+  }, image) : image);
+};
+var templateObject_1$6, templateObject_2$1, templateObject_3$1;
+
+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) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'primary':
+      return iconButton.primary.backgroundColor;
+    case 'secondary':
+      return iconButton.variants.secondary.backgroundColor;
+    case 'naked':
+      return iconButton.variants.naked.backgroundColor;
+    default:
+      return iconButton.primary.backgroundColor;
+  }
+}, iconButton.primary.borderRadius, motion.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
+  var $size = _a.$size;
+  return iconButton.sizes[$size].minWidth;
+}, function (_a) {
+  var $size = _a.$size;
+  return iconButton.sizes[$size].minHeight;
+}, function (_a) {
+  var $size = _a.$size;
+  return iconButton.sizes[$size].padding;
+}, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'primary':
+      return iconButton.hover.backgroundColor;
+    case 'secondary':
+      return iconButton.variants.secondary.hover.backgroundColor;
+    case 'naked':
+      return iconButton.variants.naked.hover.backgroundColor;
+    default:
+      return iconButton.hover.backgroundColor;
+  }
+}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor);
+var IconButton = function IconButton(_a) {
+  var variant = _a.variant,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    url = _a.url,
+    _c = _a.iconName,
+    iconName = _c === void 0 ? 'close' : _c,
+    onClick = _a.onClick,
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    ariaExpanded = _a["aria-expanded"],
+    ariaPressed = _a["aria-pressed"],
+    dataTestId = _a["data-testid"],
+    disabled = _a.disabled,
+    _d = _a.type,
+    type = _d === void 0 ? 'button' : _d,
+    htmlProps = __rest(_a, ["variant", "size", "url", "iconName", "onClick", 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-pressed', 'data-testid', "disabled", "type"]);
+  var handleClick = function handleClick(event) {
+    // Prevent default if disabled
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    if (onClick) {
+      onClick();
+    } else if (url && url.trim() !== '') {
+      // Use proper navigation instead of direct href assignment
+      if (url.startsWith('http') || url.startsWith('//')) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+      } else {
+        window.location.assign(url);
+      }
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    // Handle keyboard activation (Enter and Space)
+    if (disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  };
+  var iconSize = size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md';
+  var getIconColor = function getIconColor(variant) {
+    switch (variant) {
+      case 'primary':
+        return 'inverse';
+      case 'secondary':
+        return 'default';
+      case 'naked':
+        return 'default';
+      default:
+        return 'default';
+    }
+  };
+  return /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
+    $variant: variant,
+    $size: size,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    disabled: disabled,
+    type: type,
+    role: "button",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-pressed": ariaPressed,
+    "aria-disabled": disabled,
+    tabIndex: disabled ? -1 : 0,
+    "data-testid": dataTestId
+  }, htmlProps), /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconColor: getIconColor(variant),
+    "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
+  }));
+};
+var templateObject_1$5;
+
+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"
+/**
+ * SectionSeparator is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <SectionSeparator />
+ * <SectionSeparator variant="strong" size="xlarge" />
+ * <SectionSeparator variant="minimal" />
+ * ```
+ */])), function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'default' : _b;
+  switch ($variant) {
+    case 'strong':
+      return "border-top: ".concat(tokens.component.separator.variants.strong.border, ";");
+    case 'minimal':
+      return "border-top: ".concat(tokens.component.separator.variants.minimal.border, ";");
+    case 'default':
+    default:
+      return "border-top: ".concat(tokens.component.separator.variants["default"].border, ";");
+  }
+}, function (_a) {
+  var _b = _a.$size,
+    $size = _b === void 0 ? 'large' : _b,
+    _c = _a.$variant,
+    $variant = _c === void 0 ? 'default' : _c;
+  if ($variant === 'minimal') {
+    // Minimal variant always uses its predefined spacing
+    return "margin: ".concat(tokens.component.separator.variants.minimal.margin, ";");
+  }
+  switch ($size) {
+    case 'small':
+      return "margin: ".concat(tokens.component.separator.sizes.small.margin, ";");
+    case 'medium':
+      return "margin: ".concat(tokens.component.separator.sizes.medium.margin, ";");
+    case 'xlarge':
+      return "margin: ".concat(tokens.component.separator.sizes.xlarge.margin, ";");
+    case 'large':
+    default:
+      return "margin: ".concat(tokens.component.separator.sizes.large.margin, ";");
+  }
+});
+/**
+ * SectionSeparator is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <SectionSeparator />
+ * <SectionSeparator variant="strong" size="xlarge" />
+ * <SectionSeparator variant="minimal" />
+ * ```
+ */
+var SectionSeparator = function SectionSeparator(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'large' : _c,
+    dataTestId = _a["data-testid"];
+  return /*#__PURE__*/React.createElement(StyledSeparator, {
+    $variant: variant,
+    $size: size,
+    "data-testid": dataTestId,
+    role: "separator",
+    "aria-orientation": "horizontal"
+  });
+};
+var templateObject_1$4;
+
+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"
+// 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
+  var semanticSpacing = tokens.semantic.spacing.layout;
+  if (gap in semanticSpacing) {
+    return semanticSpacing[gap];
+  }
+  // Fallback to medium layout spacing if token not found
+  return tokens.semantic.spacing.layout.md;
+};
+var Stack = function Stack(_a) {
+  var children = _a.children,
+    _b = _a.direction,
+    direction = _b === void 0 ? 'row' : _b,
+    _c = _a.gap,
+    gap = _c === void 0 ? 'md' : _c,
+    alignItems = _a.alignItems,
+    justifyContent = _a.justifyContent,
+    _d = _a.wrap,
+    wrap = _d === void 0 ? false : _d,
+    dataTestId = _a["data-testid"];
+  var gapValue = getGapValue(gap);
+  return /*#__PURE__*/React.createElement(StyledStack, {
+    $direction: direction,
+    $gap: gapValue,
+    $alignItems: alignItems,
+    $justifyContent: justifyContent,
+    $wrap: wrap,
+    "data-testid": dataTestId
+  }, children);
+};
+var templateObject_1$3;
+
+var _a$1 = tokens.semantic,
+  typography$1 = _a$1.typography,
+  color$1 = _a$1.color;
+var getTypographyStyles = function getTypographyStyles(variant) {
+  var styles = {
+    display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
+    h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
+    h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
+    h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
+    subtitle: "font: ".concat(typography$1.subtitle, ";"),
+    body: "font: ".concat(typography$1.body, ";"),
+    small: "font: ".concat(typography$1.small, ";"),
+    overline: "font: ".concat(typography$1.overline, ";"),
+    caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(typography$1.button1, ";"),
+    button2: "font: ".concat(typography$1.button2, ";"),
+    button3: "font: ".concat(typography$1.button3, ";"),
+    label: "font: ".concat(typography$1.label, ";")
+  };
+  return styles[variant] || styles.body;
+};
+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
+  };
+  return colorMap[colorVariant] || colorMap["default"];
+};
+var getDefaultElement = function getDefaultElement(variant) {
+  var elementMap = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'p',
+    body: 'p',
+    small: 'span',
+    overline: 'span',
+    caption: 'span',
+    button1: 'span',
+    button2: 'span',
+    button3: 'span',
+    label: 'span'
+  };
+  return elementMap[variant] || 'span';
+};
+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"
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */])), function (_a) {
+  var $variant = _a.$variant;
+  return getTypographyStyles($variant);
+}, function (_a) {
+  var $color = _a.$color;
+  return getTextColor($color);
+}, function (_a) {
+  var $variant = _a.$variant;
+  if (['body', 'subtitle', 'small'].includes($variant)) {
+    return 'line-height: 1.5;';
+  }
+  return '';
+});
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+var Typography = function Typography(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    children = _a.children,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    as = _a.as,
+    dataTestId = _a["data-testid"];
+  // $variant and $color are only used for styled-components prop filtering
+  var defaultElement = getDefaultElement(variant);
+  var elementType = as || defaultElement;
+  return /*#__PURE__*/React.createElement(StyledTypography, {
+    as: elementType,
+    $variant: variant,
+    $color: color,
+    "data-testid": dataTestId
+  }, children);
+};
+var templateObject_1$2;
+
+// Breakpoints using base tokens
+var breakpoints = {
+  xs: tokens.base.breakpoint.xs,
+  sm: tokens.base.breakpoint.sm,
+  md: tokens.base.breakpoint.md,
+  lg: tokens.base.breakpoint.lg,
+  xl: tokens.base.breakpoint.xl,
+  '2xl': tokens.base.breakpoint['2xl']
+};
+// Media query helpers
+var media = {
+  xs: "@media (min-width: ".concat(breakpoints.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints.lg, ")"),
+  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) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_1$1 || (templateObject_1$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) {
+  return props.$gapY && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+});
+var Grid = function Grid(_a) {
+  var _b = _a.cols,
+    cols = _b === void 0 ? 12 : _b,
+    gap = _a.gap,
+    gapX = _a.gapX,
+    gapY = _a.gapY,
+    className = _a.className,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(GridContainer, {
+    $cols: cols,
+    $gap: gap ? tokens.base.spacing[gap] : undefined,
+    $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
+    $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
+    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) {
+  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);
+}, function (props) {
+  return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
+}, function (props) {
+  return props.$spanMd && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.md, props.$spanMd, props.$spanMd);
+}, function (props) {
+  return props.$spanLg && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.lg, props.$spanLg, props.$spanLg);
+}, function (props) {
+  return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
+}, function (props) {
+  return props.$orderSm && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+}, function (props) {
+  return props.$orderMd && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+}, function (props) {
+  return props.$orderLg && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+}, function (props) {
+  return props.$orderXl && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+});
+var GridCol = function GridCol(_a) {
+  var span = _a.span,
+    spanSm = _a.spanSm,
+    spanMd = _a.spanMd,
+    spanLg = _a.spanLg,
+    spanXl = _a.spanXl,
+    order = _a.order,
+    orderSm = _a.orderSm,
+    orderMd = _a.orderMd,
+    orderLg = _a.orderLg,
+    orderXl = _a.orderXl,
+    className = _a.className,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(GridColContainer, {
+    $span: span,
+    $spanSm: spanSm,
+    $spanMd: spanMd,
+    $spanLg: spanLg,
+    $spanXl: spanXl,
+    $order: order,
+    $orderSm: orderSm,
+    $orderMd: orderMd,
+    $orderLg: orderLg,
+    $orderXl: orderXl,
+    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) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+}, function (props) {
+  return props.$gapX && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
+}, function (props) {
+  return props.$gapY && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+}, function (props) {
+  return props.$colsSm && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.sm, props.$colsSm);
+}, function (props) {
+  return props.$colsMd && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.md, props.$colsMd);
+}, function (props) {
+  return props.$colsLg && css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.lg, props.$colsLg);
+}, function (props) {
+  return props.$colsXl && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.xl, props.$colsXl);
+}, function (props) {
+  return props.$gapSm && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.sm, props.$gapSm);
+}, function (props) {
+  return props.$gapMd && css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.md, props.$gapMd);
+}, function (props) {
+  return props.$gapLg && css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.lg, props.$gapLg);
+}, function (props) {
+  return props.$gapXl && css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.xl, props.$gapXl);
+}, function (props) {
+  return props.$gapXSm && css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.sm, props.$gapXSm);
+}, function (props) {
+  return props.$gapXMd && css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.md, props.$gapXMd);
+}, function (props) {
+  return props.$gapXLg && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.lg, props.$gapXLg);
+}, function (props) {
+  return props.$gapXXl && css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.xl, props.$gapXXl);
+}, function (props) {
+  return props.$gapYSm && css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.sm, props.$gapYSm);
+}, function (props) {
+  return props.$gapYMd && css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.md, props.$gapYMd);
+}, function (props) {
+  return props.$gapYLg && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.lg, props.$gapYLg);
+}, function (props) {
+  return props.$gapYXl && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.xl, props.$gapYXl);
+});
+var ResponsiveGrid = function ResponsiveGrid(_a) {
+  var cols = _a.cols,
+    colsSm = _a.colsSm,
+    colsMd = _a.colsMd,
+    colsLg = _a.colsLg,
+    colsXl = _a.colsXl,
+    gap = _a.gap,
+    gapSm = _a.gapSm,
+    gapMd = _a.gapMd,
+    gapLg = _a.gapLg,
+    gapXl = _a.gapXl,
+    gapX = _a.gapX,
+    gapXSm = _a.gapXSm,
+    gapXMd = _a.gapXMd,
+    gapXLg = _a.gapXLg,
+    gapXXl = _a.gapXXl,
+    gapY = _a.gapY,
+    gapYSm = _a.gapYSm,
+    gapYMd = _a.gapYMd,
+    gapYLg = _a.gapYLg,
+    gapYXl = _a.gapYXl,
+    className = _a.className,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(ResponsiveGridContainer, {
+    $cols: cols,
+    $colsSm: colsSm,
+    $colsMd: colsMd,
+    $colsLg: colsLg,
+    $colsXl: colsXl,
+    $gap: gap ? tokens.base.spacing[gap] : undefined,
+    $gapSm: gapSm ? tokens.base.spacing[gapSm] : undefined,
+    $gapMd: gapMd ? tokens.base.spacing[gapMd] : undefined,
+    $gapLg: gapLg ? tokens.base.spacing[gapLg] : undefined,
+    $gapXl: gapXl ? tokens.base.spacing[gapXl] : undefined,
+    $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
+    $gapXSm: gapXSm ? tokens.base.spacing[gapXSm] : undefined,
+    $gapXMd: gapXMd ? tokens.base.spacing[gapXMd] : undefined,
+    $gapXLg: gapXLg ? tokens.base.spacing[gapXLg] : undefined,
+    $gapXXl: gapXXl ? tokens.base.spacing[gapXXl] : undefined,
+    $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
+    $gapYSm: gapYSm ? tokens.base.spacing[gapYSm] : undefined,
+    $gapYMd: gapYMd ? tokens.base.spacing[gapYMd] : undefined,
+    $gapYLg: gapYLg ? tokens.base.spacing[gapYLg] : undefined,
+    $gapYXl: gapYXl ? tokens.base.spacing[gapYXl] : undefined,
+    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;
+
+export { Avatar, Box, Button, Chip, Container, CoverImage, DateFormatter, Grid, GridCol, Icon, IconButton, LegacyChip, ResponsiveGrid, SectionSeparator, Stack, Typography, tokens };
+//# sourceMappingURL=index.esm.js.map