@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/atoms/Box/Box.mjs

@@ -0,0 +1,246 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { spaceByLayoutKey, radiusByKey, borderColorByKey, backgroundByKey, textColorByKey } from '../../../lib/tokenAliases.mjs';
+import { reducedMotion } from '../../../lib/styleUtils.mjs';
+
+var StyledBox = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Box__StyledBox",
+  componentId: "sc-aj0jhd-0"
+})(templateObject_51 || (templateObject_51 = __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  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\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  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\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 || (templateObject_1 = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+}, function (props) {
+  return props.$flexDirection && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+}, function (props) {
+  return props.$justifyContent && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+}, function (props) {
+  return props.$alignItems && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+}, function (props) {
+  return props.$flexWrap && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+}, function (props) {
+  return props.$gap && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), spaceByLayoutKey[props.$gap]);
+}, function (props) {
+  return props.$m && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), spaceByLayoutKey[props.$m]);
+}, function (props) {
+  return props.$mt && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), spaceByLayoutKey[props.$mt]);
+}, function (props) {
+  return props.$mr && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), spaceByLayoutKey[props.$mr]);
+}, function (props) {
+  return props.$mb && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), spaceByLayoutKey[props.$mb]);
+}, function (props) {
+  return props.$ml && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), spaceByLayoutKey[props.$ml]);
+}, function (props) {
+  return props.$mx && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), spaceByLayoutKey[props.$mx], spaceByLayoutKey[props.$mx]);
+}, function (props) {
+  return props.$my && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), spaceByLayoutKey[props.$my], spaceByLayoutKey[props.$my]);
+}, function (props) {
+  return props.$p && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), spaceByLayoutKey[props.$p]);
+}, function (props) {
+  return props.$pt && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), spaceByLayoutKey[props.$pt]);
+}, function (props) {
+  return props.$pr && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), spaceByLayoutKey[props.$pr]);
+}, function (props) {
+  return props.$pb && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), spaceByLayoutKey[props.$pb]);
+}, function (props) {
+  return props.$pl && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), spaceByLayoutKey[props.$pl]);
+}, function (props) {
+  return props.$px && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
+}, function (props) {
+  return props.$py && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
+}, function (props) {
+  return props.$width && css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
+}, function (props) {
+  return props.$height && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
+}, function (props) {
+  return props.$maxWidth && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
+}, function (props) {
+  return props.$maxHeight && css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
+}, function (props) {
+  return props.$minWidth && css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
+}, function (props) {
+  return props.$minHeight && css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
+}, function (props) {
+  return props.$position && css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
+}, function (props) {
+  return props.$top && css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
+}, function (props) {
+  return props.$right && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
+}, function (props) {
+  return props.$bottom && css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
+}, function (props) {
+  return props.$left && css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
+}, function (props) {
+  return props.$borderRadius && css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
+}, function (props) {
+  return props.$border && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
+}, function (props) {
+  return props.$borderTop && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
+}, function (props) {
+  return props.$borderRight && css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
+}, function (props) {
+  return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
+}, function (props) {
+  return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
+}, function (props) {
+  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByKey[props.$bg]);
+}, function (props) {
+  return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
+}, function (props) {
+  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$shadow]);
+}, function (props) {
+  return props.$cursor && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
+}, function (props) {
+  return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
+}, function (props) {
+  return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    /* Pressed settles back: the shadow drops to raised and any lift returns (issue 185). Pressing a\n       control inside the card (an action button) presses that control, not the card. */\n    &:active {\n      transform: translateY(0);\n    }\n\n    ", "\n    \n    &:focus-visible {\n      outline: ", ";\n      outline-offset: ", ";\n    }\n\n    /* Reduced motion keeps the state change and drops the movement (decision 0015) */\n    ", "\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    /* Pressed settles back: the shadow drops to raised and any lift returns (issue 185). Pressing a\n       control inside the card (an action button) presses that control, not the card. */\n    &:active {\n      transform: translateY(0);\n    }\n\n    ", "\n    \n    &:focus-visible {\n      outline: ", ";\n      outline-offset: ", ";\n    }\n\n    /* Reduced motion keeps the state change and drops the movement (decision 0015) */\n    ", "\n  "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), props.$hoverShadow && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      &:active:not(:has(:is(button, a, [role=\"button\"]):active)) {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:active:not(:has(:is(button, a, [role=\"button\"]):active)) {\n        box-shadow: ", ";\n      }\n    "])), tokens.semantic.elevation.raised), tokens.semantic.border.focus, tokens.semantic.border.focusOffset, props.$hoverTransform && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      ", " {\n        &:hover {\n          transform: none;\n        }\n      }\n    "], ["\n      ", " {\n        &:hover {\n          transform: none;\n        }\n      }\n    "])), reducedMotion));
+}, function (props) {
+  return props.$overflow && css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
+}, function (props) {
+  return props.$overflowX && css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
+}, function (props) {
+  return props.$overflowY && css(templateObject_50 || (templateObject_50 = __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,
+    // Shadow
+    shadow = props.shadow,
+    // Cursor
+    cursor = props.cursor,
+    // Transition
+    transition = props.transition,
+    // Hover states
+    hoverShadow = props.hoverShadow,
+    hoverTransform = props.hoverTransform,
+    // Overflow
+    overflow = props.overflow,
+    overflowX = props.overflowX,
+    overflowY = props.overflowY,
+    // Standard props
+    as = props.as,
+    children = props.children,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
+    tabIndex = props.tabIndex,
+    role = props.role,
+    ariaLabel = props["aria-label"],
+    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", "shadow", "cursor", "transition", "hoverShadow", "hoverTransform", "overflow", "overflowX", "overflowY", "as", "children", "onClick", "onKeyDown", "tabIndex", "role", 'aria-label', 'data-testid']);
+  return jsx(StyledBox, __assign({
+    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,
+    "$shadow": shadow,
+    "$cursor": cursor,
+    "$transition": transition,
+    "$hoverShadow": hoverShadow,
+    "$hoverTransform": hoverTransform,
+    "$overflow": overflow,
+    "$overflowX": overflowX,
+    "$overflowY": overflowY,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: tabIndex,
+    role: role,
+    "aria-label": ariaLabel
+  }, rest, {
+    children: children
+  }));
+};
+var Box = BoxTransform;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
+
+export { Box };
+//# sourceMappingURL=Box.mjs.map

package/dist/components/atoms/Box/Box.mjs.map

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

package/dist/components/atoms/Box/index.d.mts

@@ -0,0 +1 @@
+export * from './Box.mjs';

package/dist/components/atoms/Button/Button.d.mts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type IconName } from '../Icon/index.mjs';
+/**
+ * Button variants. `accent` is the blue call to action one level above `primary`;
+ * use at most one per view (decision 0016).
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent'
+/** @deprecated Use `accent`. `emphasis` will be removed in 3.0. */
+ | 'emphasis' | 'danger';
+export interface BaseButtonProps {
+    /**
+     * Visual style. `accent` is the blue call to action above `primary` (at most one per view).
+     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    size?: 'small' | 'medium' | 'large';
+    url?: string;
+    purpose?: 'button' | 'link';
+    target?: string;
+    children: React.ReactNode;
+    iconName?: IconName;
+    id?: string;
+    'data-testid'?: string;
+    /**
+     * Custom link component (e.g., Next.js Link, React Router Link)
+     * Receives href, children, and other props
+     * @example linkComponent={NextLink} or linkComponent={ReactRouterLink}
+     */
+    linkComponent?: React.ComponentType<any>;
+}
+export interface ButtonProps extends BaseButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps> {
+    purpose?: 'button';
+}
+export interface LinkProps extends BaseButtonProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonProps> {
+    purpose: 'link';
+}
+type CustomButtonProps = ButtonProps | LinkProps;
+export declare const Button: React.FC<CustomButtonProps>;
+export {};

package/dist/components/atoms/Button/Button.mjs

@@ -0,0 +1,208 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { forcedColorsEdge } from '../../../lib/styleUtils.mjs';
+
+var button = tokens.component.button,
+  semantic = tokens.semantic;
+// Height comes from size.control as a minimum and the content is centred, so there is no
+// vertical padding (decision 0034). Horizontal padding comes from the semantic spacing scale:
+// no component spacing tokens (decision 0022)
+var inset = semantic.space.inset;
+var control = semantic.size.control;
+// 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.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+// Dynamic variant styles using component tokens
+var getVariantStyles = function getVariantStyles(_a) {
+  var $variant = _a.$variant;
+  var variantConfig = {
+    primary: {
+      bg: button.primary.backgroundColor,
+      text: button.primary.textColor,
+      hoverBg: button.hover.backgroundColor,
+      activeBg: button.active.backgroundColor,
+      disabledBg: button.disabled.backgroundColor,
+      disabledText: button.disabled.textColor
+    },
+    secondary: {
+      bg: button.variants.secondary.backgroundColor,
+      text: button.variants.secondary.textColor,
+      hoverBg: button.variants.secondary.hover.backgroundColor,
+      activeBg: button.variants.secondary.active.backgroundColor,
+      disabledBg: button.variants.secondary.disabled.backgroundColor,
+      disabledText: button.variants.secondary.disabled.textColor
+    },
+    naked: {
+      bg: button.variants.naked.backgroundColor,
+      text: button.variants.naked.textColor,
+      hoverBg: button.variants.naked.hover.backgroundColor,
+      activeBg: button.variants.naked.active.backgroundColor,
+      disabledBg: button.variants.naked.disabled.backgroundColor,
+      disabledText: button.variants.naked.disabled.textColor
+    },
+    accent: {
+      bg: button.variants.accent.backgroundColor,
+      text: button.variants.accent.textColor,
+      hoverBg: button.variants.accent.hover.backgroundColor,
+      activeBg: button.variants.accent.active.backgroundColor,
+      disabledBg: button.variants.accent.disabled.backgroundColor,
+      disabledText: button.variants.accent.disabled.textColor
+    },
+    // Deprecated alias for accent; removed in 3.0
+    emphasis: {
+      bg: button.variants.emphasis.backgroundColor,
+      text: button.variants.emphasis.textColor,
+      hoverBg: button.variants.emphasis.hover.backgroundColor,
+      activeBg: button.variants.emphasis.active.backgroundColor,
+      disabledBg: button.variants.emphasis.disabled.backgroundColor,
+      disabledText: button.variants.emphasis.disabled.textColor
+    },
+    danger: {
+      bg: button.variants.danger.backgroundColor,
+      text: button.variants.danger.textColor,
+      hoverBg: button.variants.danger.hover.backgroundColor,
+      activeBg: button.variants.danger.active.backgroundColor,
+      disabledBg: button.variants.danger.disabled.backgroundColor,
+      disabledText: button.variants.danger.disabled.textColor
+    }
+  };
+  var config = variantConfig[$variant];
+  return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
+};
+// Dynamic size styles: font from component tokens, height from size.control (decision 0034)
+var getSizeStyles = function getSizeStyles(_a) {
+  var $size = _a.$size;
+  switch ($size) {
+    case 'small':
+      return "\n        font: ".concat(button.sizes.small.font, ";\n        min-height: ").concat(control.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
+    case 'medium':
+      return "\n        font: ".concat(button.sizes.medium.font, ";\n        min-height: ").concat(control.md, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
+    case 'large':
+    default:
+      return "\n        font: ".concat(button.sizes.large.font, ";\n        min-height: ").concat(control.lg, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
+  }
+};
+var StyledButton = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledButton",
+  componentId: "sc-1eiuum9-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
+var StyledLink = /*#__PURE__*/styled.a.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledLink",
+  componentId: "sc-1eiuum9-1"
+})(templateObject_2 || (templateObject_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, getSizeStyles);
+// 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 jsxs(Fragment, {
+    children: [jsx(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,
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"],
+    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
+  // For links with custom link component (e.g., Next.js Link, React Router Link)
+  if (purpose === 'link' && url && LinkComponent) {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsx(LinkComponent, __assign({}, linkProps, {
+      href: url,
+      target: target,
+      children: jsx(StyledLink, {
+        as: "span",
+        "$variant": variant,
+        "$size": size,
+        "data-testid": dataTestId,
+        children: renderButtonContent(children, iconName, size)
+      })
+    }));
+  }
+  // For standard links (external or without custom component)
+  if (purpose === 'link' && url) {
+    var linkProps = rest;
+    return jsx(StyledLink, __assign({}, linkProps, {
+      href: url,
+      target: target,
+      "$variant": variant,
+      "$size": size,
+      "data-testid": dataTestId,
+      children: 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 jsx(StyledButton, __assign({}, buttonProps_1, {
+      "$variant": variant,
+      "$size": size,
+      "data-testid": dataTestId,
+      onClick: handleClick,
+      children: renderButtonContent(children, iconName, size)
+    }));
+  }
+  // Regular button
+  var buttonProps = rest;
+  return jsx(StyledButton, __assign({
+    "$variant": variant,
+    "$size": size,
+    "data-testid": dataTestId
+  }, buttonProps, {
+    children: renderButtonContent(children, iconName, size)
+  }));
+};
+var templateObject_1, templateObject_2;
+
+export { Button };
+//# sourceMappingURL=Button.mjs.map

package/dist/components/atoms/Button/Button.mjs.map

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

package/dist/components/atoms/Button/index.d.mts

@@ -0,0 +1 @@
+export * from './Button.mjs';

package/dist/components/atoms/CategoryBadge/CategoryBadge.d.mts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type CategoryLabelProps } from '../CategoryLabel/CategoryLabel.mjs';
+export type { CategoryColor, CategoryVariant } from '../CategoryLabel/CategoryLabel.mjs';
+/**
+ * Size options for CategoryBadge
+ * @deprecated Use `CategoryLabelSize`: CategoryBadge `small` is CategoryLabel `medium`, and
+ * `medium` is `large` (decision 0018).
+ */
+export type CategorySize = 'small' | 'medium';
+/**
+ * Props for the CategoryBadge component
+ * @deprecated Use `CategoryLabelProps`. CategoryBadge is renamed CategoryLabel and is removed in
+ * 3.0 (decision 0018).
+ */
+export interface CategoryBadgeProps extends Omit<CategoryLabelProps, 'size'> {
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: CategorySize;
+}
+/**
+ * CategoryBadge displays a category label.
+ *
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
+ */
+export declare const CategoryBadge: React.FC<CategoryBadgeProps>;

package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs

@@ -0,0 +1,29 @@
+'use client';
+import { __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { CategoryLabel } from '../CategoryLabel/CategoryLabel.mjs';
+
+// CategoryBadge sizes on the decision 0018 scale
+var toLabelSize = {
+  small: 'medium',
+  medium: 'large'
+};
+/**
+ * CategoryBadge displays a category label.
+ *
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
+ */
+var CategoryBadge = function CategoryBadge(_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    props = __rest(_a, ["size"]);
+  return jsx(CategoryLabel, __assign({}, props, {
+    size: toLabelSize[size]
+  }));
+};
+CategoryBadge.displayName = 'CategoryBadge';
+
+export { CategoryBadge };
+//# sourceMappingURL=CategoryBadge.mjs.map

package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryBadge.mjs","sources":["../../../../src/components/atoms/CategoryBadge/CategoryBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { CategoryLabel, type CategoryLabelProps } from '../CategoryLabel/CategoryLabel'\n\nexport type { CategoryColor, CategoryVariant } from '../CategoryLabel/CategoryLabel'\n\n/**\n * Size options for CategoryBadge\n * @deprecated Use `CategoryLabelSize`: CategoryBadge `small` is CategoryLabel `medium`, and\n * `medium` is `large` (decision 0018).\n */\nexport type CategorySize = 'small' | 'medium'\n\n/**\n * Props for the CategoryBadge component\n * @deprecated Use `CategoryLabelProps`. CategoryBadge is renamed CategoryLabel and is removed in\n * 3.0 (decision 0018).\n */\nexport interface CategoryBadgeProps extends Omit<CategoryLabelProps, 'size'> {\n  /**\n   * Size of the badge\n   * @default 'medium'\n   */\n  size?: CategorySize\n}\n\n// CategoryBadge sizes on the decision 0018 scale\nconst toLabelSize = { small: 'medium', medium: 'large' } as const\n\n/**\n * CategoryBadge displays a category label.\n *\n * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size=\"small\"` to\n * `\"medium\"`, and `size=\"medium\"` (or no size) to `\"large\"`, CategoryLabel's default.\n * CategoryBadge is removed in 3.0 (decision 0018).\n */\nexport const CategoryBadge: React.FC<CategoryBadgeProps> = ({ size = 'medium', ...props }) => (\n  <CategoryLabel {...props} size={toLabelSize[size]} />\n)\n\nCategoryBadge.displayName = 'CategoryBadge'\n"],"names":["toLabelSize","small","medium","CategoryBadge","_a","_b","size","props","__rest","_jsx","CategoryLabel","__assign","displayName"],"mappings":";;;;;AAyBA;AACA,IAAMA,WAAW,GAAG;AAAEC,EAAAA,KAAK,EAAE,QAAQ;AAAEC,EAAAA,MAAM,EAAE,OAAA;AAAO,CAAW,CAAA;AAEjE;;;;;;AAMG;IACUC,aAAa,GAAiC,SAA9CA,aAAaA,CAAkCC,EAA6B,EAAA;AAA3B,EAAA,IAAAC,EAAA,GAAAD,EAAA,CAAAE,IAAe;IAAfA,IAAI,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,QAAQ,KAAA;IAAKE,KAAK,GAA3BC,MAAA,CAAAJ,EAAA,EAAA,CAAA,MAAA,CAA6B,CAAF,CAAA;EAAO,OAC5FK,GAAA,CAACC,aAAa,EAAAC,QAAA,CAAA,EAAA,EAAKJ,KAAK,EAAE;IAAAD,IAAI,EAAEN,WAAW,CAACM,IAAI,CAAA;AAAC,GAAA,CAAA,CAAI,CAAA;EACtD;AAEDH,aAAa,CAACS,WAAW,GAAG,eAAe;;;;"}

package/dist/components/atoms/CategoryBadge/index.d.mts

@@ -0,0 +1,2 @@
+export { CategoryBadge } from './CategoryBadge.mjs';
+export type { CategoryBadgeProps, CategorySize } from './CategoryBadge.mjs';