@common-origin/design-system 1.6.0 → 1.8.0

package/README.md

@@ -109,7 +109,7 @@ function MyApp() {
 
 **✅ Atoms (12 components)**:
 - Alert, Avatar, Box, Button, Chip, Container
-- Picture, Icon, IconButton, SectionSeparator
+- Picture, Icon, IconButton, Divider
 - Stack, Typography
 
 **✅ Molecules (8 components)**:
@@ -134,16 +134,48 @@ This design system is production-ready with:
 
 ## 🤝 Contributing
 
-This design system follows established patterns:
-- **Comprehensive testing** with jest-axe for accessibility compliance
-- **Token-driven styling** - all components use semantic design tokens
-- **TypeScript interfaces** with complete props documentation  
-- **Atomic design principles** for scalable component organization
-- **Component documentation** with interactive examples and usage patterns
+We welcome contributions! Please follow our established standards:
 
-### Development Workflow
+### Quick Start
+```bash
+# Fork and clone
+git clone <your-fork>
+cd common-origin-design-system
+npm install
+
+# Start development
+npm run docs:dev  # Starts dev server with docs
+npm test          # Run tests
+```
+
+### Commit Convention
+We use [Conventional Commits](https://www.conventionalcommits.org/) for automatic changelog generation:
+
+```bash
+feat(Component): add new feature
+fix(Component): fix bug
+docs: update documentation
+chore: bump version to X.Y.Z
+```
+
+### Release Process
+```bash
+# Automated release (recommended)
+npm run release:create
+
+# Manual release - see .github/RELEASE_PROCESS.md
+```
+
+### Documentation
+- **Contributing Guide**: [CONTRIBUTING.md](./CONTRIBUTING.md)
+- **Release Process**: [.github/RELEASE_PROCESS.md](./.github/RELEASE_PROCESS.md)
+- **Documentation Standards**: [.github/DOCUMENTATION_STANDARDS.md](./.github/DOCUMENTATION_STANDARDS.md)
+- **Quick Reference**: [.github/RELEASE_CHEATSHEET.md](./.github/RELEASE_CHEATSHEET.md)
+
+### Development Standards
 1. Components follow the atomic design hierarchy
 2. All styling uses design tokens from `src/styles/tokens.json`
 3. Each component includes `.test.tsx`, `.docs.tsx`, and implementation files
 4. Tests must include accessibility validation with jest-axe
-5. Documentation includes live examples and prop descriptions
+5. Documentation includes live examples and prop descriptions
+6. Use conventional commit messages for all commits

package/dist/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface BadgeProps {
+    /** Content to wrap with the badge */
+    children: React.ReactNode;
+    /** Number to display in the badge. If 0, badge is hidden */
+    count?: number;
+    /** Maximum number to display before showing "99+" */
+    max?: number;
+    /** Visual variant of the badge */
+    variant?: 'default' | 'primary' | 'error' | 'warning' | 'success';
+    /** Show only a dot indicator instead of count */
+    dot?: boolean;
+    /** Screen reader label for the badge */
+    'aria-label'?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atoms/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/atoms/Divider/Divider.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface DividerProps {
+    /** Variant style of the divider */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atoms/Divider/index.d.ts

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

package/dist/components/atoms/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './Badge';
 export * from './Box';
 export * from './Button';
 export * from './Chip';
@@ -8,6 +9,6 @@ export * from './DateFormatter';
 export * from './Icon';
 export * from './IconButton';
 export * from './ProgressBar';
-export * from './SectionSeparator';
+export * from './Divider';
 export * from './Stack';
 export * from './Typography';

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import Link from 'next/link';
 import { parseISO, format } from 'date-fns';
 import Image from 'next/image';
@@ -745,7 +745,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$l || (templateObject_1$l = __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) {
+})(templateObject_1$m || (templateObject_1$m = __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) {
@@ -758,14 +758,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$a || (templateObject_2$a = __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);
+})(templateObject_2$b || (templateObject_2$b = __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 !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$8 || (templateObject_3$8 = __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"
+})(templateObject_3$9 || (templateObject_3$9 = __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;
@@ -828,7 +828,80 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$l, templateObject_2$a, templateObject_3$8;
+var templateObject_1$m, templateObject_2$b, templateObject_3$9;
+
+React.createElement;
+var _a$6 = tokens.semantic,
+  color$4 = _a$6.color,
+  typography$3 = _a$6.typography,
+  _b$2 = tokens.base,
+  fontSize = _b$2.fontSize;
+  _b$2.shadow;
+var scaleIn = keyframes(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var BadgeWrapper = styled.span.withConfig({
+  displayName: "Badge__BadgeWrapper",
+  componentId: "sc-tjz4pp-0"
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+var BadgeIndicator = styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Badge__BadgeIndicator",
+  componentId: "sc-tjz4pp-1"
+})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+  return props.$isVisible ? 'flex' : 'none';
+}, function (props) {
+  return props.$isDot ? '8px' : '20px';
+}, function (props) {
+  return props.$isDot ? '8px' : '20px';
+}, function (props) {
+  return props.$isDot ? '0' : '0 6px';
+}, tokens.base.border.radius.circle, typography$3.caption, fontSize[1], color$4.background["default"], scaleIn, function (props) {
+  switch (props.$variant) {
+    case 'primary':
+      return "\n          background-color: ".concat(color$4.background.interactive, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'error':
+      return "\n          background-color: ".concat(color$4.background.error, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'warning':
+      return "\n          background-color: ".concat(color$4.background.warning, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'success':
+      return "\n          background-color: ".concat(color$4.background.success, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    default:
+      return "\n          background-color: ".concat(color$4.background.emphasis, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+  }
+});
+var ScreenReaderOnly = styled.span.withConfig({
+  displayName: "Badge__ScreenReaderOnly",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"])));
+var Badge = function Badge(_a) {
+  var children = _a.children,
+    _b = _a.count,
+    count = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 99 : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'default' : _d,
+    _e = _a.dot,
+    dot = _e === void 0 ? false : _e,
+    ariaLabel = _a["aria-label"],
+    className = _a.className;
+  var isVisible = dot || count > 0;
+  var displayCount = count > max ? "".concat(max, "+") : count.toString();
+  // Generate default aria-label if not provided
+  var defaultAriaLabel = dot ? 'New notification indicator' : count === 1 ? '1 notification' : "".concat(count, " notifications");
+  var label = ariaLabel || defaultAriaLabel;
+  return /*#__PURE__*/React.createElement(BadgeWrapper, {
+    className: className
+  }, children, /*#__PURE__*/React.createElement(BadgeIndicator, {
+    $variant: variant,
+    $isDot: dot,
+    $isVisible: isVisible,
+    role: "status",
+    "aria-live": "polite"
+  }, !dot && displayCount, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
+};
+var templateObject_1$l, templateObject_2$a, templateObject_3$8, templateObject_4$6;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1104,6 +1177,10 @@ 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 table = {
+	path: "M20 10H16V19H19C19.4995 19 19.7737 18.9982 19.9639 18.9727C19.9662 18.9724 19.9685 18.971 19.9707 18.9707C19.971 18.9685 19.9724 18.9662 19.9727 18.9639C19.9982 18.7737 20 18.4995 20 18V10ZM22 18C22 18.4431 22.0018 18.876 21.9541 19.2305C21.9026 19.6137 21.7773 20.0509 21.4141 20.4141C21.0509 20.7773 20.6137 20.9026 20.2305 20.9541C19.876 21.0018 19.4431 21 19 21H14V8.00001H22V18Z M10 8.00001V21H5.00001C4.55687 21 4.12397 21.0018 3.76954 20.9541C3.38634 20.9026 2.94916 20.7773 2.58595 20.4141C2.22273 20.0509 2.09743 19.6137 2.04591 19.2305C1.99825 18.876 2.00001 18.4431 2.00001 18V8.00001H10ZM4.00001 18C4.00001 18.4995 4.00181 18.7737 4.02735 18.9639C4.02766 18.9661 4.02803 18.9685 4.02833 18.9707C4.03085 18.9711 4.03351 18.9723 4.03614 18.9727C4.22633 18.9982 4.50051 19 5.00001 19H8.00001V10H4.00001V18Z M16 8.00001V21H8.00001V8.00001H16ZM10 19H14V10H10V19Z M20 6.00001C20 5.50051 19.9982 5.22633 19.9727 5.03614C19.9723 5.03351 19.9711 5.03085 19.9707 5.02833C19.9685 5.02803 19.9661 5.02766 19.9639 5.02735C19.7737 5.00181 19.4995 5.00001 19 5.00001H5.00001C4.50051 5.00001 4.22633 5.00181 4.03614 5.02735C4.03355 5.0277 4.03081 5.02798 4.02833 5.02833C4.02798 5.03081 4.0277 5.03355 4.02735 5.03614C4.00181 5.22633 4.00001 5.50051 4.00001 6.00001V8.00001H20V6.00001ZM22 10H2.00001V6.00001C2.00001 5.55687 1.99825 5.12397 2.04591 4.76954C2.09743 4.38634 2.22273 3.94916 2.58595 3.58595C2.94916 3.22273 3.38634 3.09743 3.76954 3.04591C4.12397 2.99825 4.55687 3.00001 5.00001 3.00001H19C19.4431 3.00001 19.876 2.99825 20.2305 3.04591C20.6137 3.09743 21.0509 3.22273 21.4141 3.58595C21.7773 3.94916 21.9026 4.38634 21.9541 4.76954C22.0018 5.12397 22 5.55687 22 6.00001V10Z",
+	name: "table"
+};
 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"
@@ -1119,6 +1196,10 @@ var iconsData = {
 	check: check,
 	close: close,
 	directionRight: directionRight,
+	"export": {
+	path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
+	name: "export"
+},
 	menu: menu,
 	pause: pause,
 	play: play,
@@ -1127,6 +1208,7 @@ var iconsData = {
 	message: message,
 	copy: copy,
 	link: link,
+	table: table,
 	userBox: userBox
 };
 
@@ -1394,9 +1476,9 @@ var BaseChipStyled = styled.span.withConfig({
   },
   displayName: "ChipBase__BaseChipStyled",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
-])), chip["default"].borderRadius, tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
@@ -1952,49 +2034,78 @@ var ProgressBar = function ProgressBar(_a) {
 var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
 
 React.createElement;
-var StyledSeparator = styled.div.withConfig({
+var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "SectionSeparator__StyledSeparator",
-  componentId: "sc-ynv482-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"], ["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1l0c8ja-0"
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
 /**
- * SectionSeparator is an atomic component that provides visual separation between content sections.
+ * Divider is an atomic component that provides visual separation between content sections.
  *
  * Features:
  * - Multiple variants (default, strong, minimal)
  * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
  * - Semantic token usage for consistent styling
  * - Full accessibility support
  *
  * @example
  * ```tsx
- * <SectionSeparator />
- * <SectionSeparator variant="strong" size="xlarge" />
- * <SectionSeparator variant="minimal" />
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
  * ```
  */])), function (_a) {
+  var _b = _a.$orientation,
+    $orientation = _b === void 0 ? 'horizontal' : _b;
+  if ($orientation === 'vertical') {
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: 1px solid;\n        border-top: none;\n      ";
+  }
+  return "border-top: 1px solid;";
+}, function (_a) {
   var _b = _a.$variant,
-    $variant = _b === void 0 ? 'default' : _b;
+    $variant = _b === void 0 ? 'default' : _b,
+    _c = _a.$orientation,
+    $orientation = _c === void 0 ? 'horizontal' : _c;
+  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
   switch ($variant) {
     case 'strong':
-      return "border-top: ".concat(tokens.component.separator.variants.strong.border, ";");
+      return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.strong.border, ";");
     case 'minimal':
-      return "border-top: ".concat(tokens.component.separator.variants.minimal.border, ";");
+      return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.minimal.border, ";");
     case 'default':
     default:
-      return "border-top: ".concat(tokens.component.separator.variants["default"].border, ";");
+      return "".concat(borderProperty, ": ").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
+    $variant = _c === void 0 ? 'default' : _c,
+    _d = _a.$orientation,
+    $orientation = _d === void 0 ? 'horizontal' : _d;
+  if ($variant === 'minimal' && $orientation === 'horizontal') {
+    // Minimal variant always uses its predefined spacing for horizontal
     return "margin: ".concat(tokens.component.separator.variants.minimal.margin, ";");
   }
+  if ($orientation === 'vertical') {
+    // Vertical orientation uses horizontal margins (left/right)
+    switch ($size) {
+      case 'small':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.sm, ";");
+      case 'medium':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.md, ";");
+      case 'xlarge':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.xl, ";");
+      case 'large':
+      default:
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.lg, ";");
+    }
+  }
+  // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
       return "margin: ".concat(tokens.component.separator.sizes.small.margin, ";");
@@ -2008,33 +2119,38 @@ var StyledSeparator = styled.div.withConfig({
   }
 });
 /**
- * SectionSeparator is an atomic component that provides visual separation between content sections.
+ * Divider is an atomic component that provides visual separation between content sections.
  *
  * Features:
  * - Multiple variants (default, strong, minimal)
  * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
  * - Semantic token usage for consistent styling
  * - Full accessibility support
  *
  * @example
  * ```tsx
- * <SectionSeparator />
- * <SectionSeparator variant="strong" size="xlarge" />
- * <SectionSeparator variant="minimal" />
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
  * ```
  */
-var SectionSeparator = function SectionSeparator(_a) {
+var Divider = function Divider(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'default' : _b,
     _c = _a.size,
     size = _c === void 0 ? 'large' : _c,
+    _d = _a.orientation,
+    orientation = _d === void 0 ? 'horizontal' : _d,
     dataTestId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(StyledSeparator, {
+  return /*#__PURE__*/React.createElement(StyledDivider, {
     $variant: variant,
     $size: size,
+    $orientation: orientation,
     "data-testid": dataTestId,
     role: "separator",
-    "aria-orientation": "horizontal"
+    "aria-orientation": orientation
   });
 };
 var templateObject_1$b;
@@ -2494,7 +2610,7 @@ var DesignCard = function DesignCard(_a) {
       url: readMoreHref
     }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
       onClick: onReadMore
-    }, readMoreText)))))), /*#__PURE__*/React.createElement(SectionSeparator, null));
+    }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
   }
   return null;
 };
@@ -2993,5 +3109,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { ArtCard, Avatar, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
+export { ArtCard, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map