@assembly-js/design-system 2.4.0

package/README.md

@@ -0,0 +1,62 @@
+# Assembly.js Design System
+
+This is the Assembly.js design system repository. In this repo we're using Tailwind CSS to create a set of reusable, open source components for making Assembly apps.
+
+## Installation
+
+```bash
+npm install @assembly-js/design-system
+# or
+yarn add @assembly-js/design-system
+```
+
+## Migration from copilot-design-system
+
+If you're migrating from `copilot-design-system`:
+
+```bash
+# Remove old package
+npm uninstall copilot-design-system
+
+# Install new package
+npm install @assembly-js/design-system
+```
+
+Update your imports:
+
+```typescript
+// Before
+import { Button } from 'copilot-design-system';
+import 'copilot-design-system/dist/styles/main.css';
+
+// After
+import { Button } from '@assembly-js/design-system';
+import '@assembly-js/design-system/dist/styles/main.css';
+```
+
+## How to develop
+
+Prerequisites:
+
+- Node ^20.12.0
+- Yarn ^4.x.x
+
+How to develop:
+
+- `yarn install`
+- `yarn fetch-env` (fetches environment variables from AWS Secrets Manager - see [ENV_SETUP.md](./docs/ENV_SETUP.md))
+- `yarn storybook`
+
+How to prepare new version:
+
+- increment the patch version in package.json
+- run `yarn build`. Note: the build script uses Dirent.parentPath which was only available in node 20.12.0. If you are using an older version of node .e.g 20.11.1, it will not work.
+- add commit
+- When ready to publish, click "Run Workflow" [here](https://github.com/copilot-platforms/design-system/actions/workflows/npm-publish.yml) with no params.
+
+## Icon import
+
+To import new icons run `yarn fetch-env && yarn export-icons`.
+
+### Token expiration
+If you get a `403 Token Expired` response from Figma, you will need to generate a new access token and add it to AWS Secrets Manager.

package/declarations.d.ts

@@ -0,0 +1 @@
+type Prettify<T> = T extends infer Tb ? { [K in keyof Tb]: Tb[K] } : never;

package/dist/esm/common/ChoiceGroupLayout/ChoiceGroupLayout.js

@@ -0,0 +1,105 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { cva } from 'cva';
+import { Icon } from "../../components/Icon";
+import { cn } from "../utils";
+import { Base } from "../../components/Typography/Base";
+import { Tooltip } from "../../components/Tooltip/Tooltip";
+export var ChoiceGroupDirection = /*#__PURE__*/function (ChoiceGroupDirection) {
+  ChoiceGroupDirection["VERTICAL"] = "vertical";
+  ChoiceGroupDirection["HORIZONTAL"] = "horizontal";
+  return ChoiceGroupDirection;
+}({});
+export var ChoiceGroupColumns = /*#__PURE__*/function (ChoiceGroupColumns) {
+  ChoiceGroupColumns["SingleCol"] = "single-column";
+  ChoiceGroupColumns["TwoCol"] = "two-column";
+  return ChoiceGroupColumns;
+}({});
+var groupDirection = cva({
+  base: 'cop-flex cop-mt-2',
+  variants: {
+    direction: _defineProperty(_defineProperty({}, ChoiceGroupDirection.VERTICAL, 'cop-flex-col cop-gap-2'), ChoiceGroupDirection.HORIZONTAL, 'cop-flex-row cop-gap-4')
+  },
+  defaultVariants: {
+    direction: ChoiceGroupDirection.VERTICAL
+  }
+});
+var groupLayout = cva({
+  base: 'cop-flex',
+  variants: {
+    layout: _defineProperty(_defineProperty({}, ChoiceGroupColumns.SingleCol, 'cop-flex-col'), ChoiceGroupColumns.TwoCol, 'cop-flex-row cop-gap-8')
+  },
+  defaultVariants: {
+    layout: ChoiceGroupColumns.SingleCol
+  }
+});
+export var ChoiceGroupLayout = function ChoiceGroupLayout(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? ChoiceGroupDirection.VERTICAL : _ref$direction,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? ChoiceGroupColumns.SingleCol : _ref$layout,
+    children = _ref.children,
+    className = _ref.className,
+    tooltipProps = _ref.tooltipProps;
+  var isSingleColLayout = layout === ChoiceGroupColumns.SingleCol;
+  var helperTextRenderer = helperText ? /*#__PURE__*/React.createElement("div", {
+    className: "cop-text-secondary"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "sm",
+    leading: "normal",
+    tag: "span",
+    weight: "regular"
+  }, helperText)) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, groupLayout({
+      layout: layout
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-justify-between cop-gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-gap-1"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "base",
+    leading: "tight",
+    tag: "span",
+    weight: "medium"
+  }, label), tooltipProps && /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Info",
+    className: "cop-text-text-primary cop-h-3 cop-w-3"
+  }))), description && /*#__PURE__*/React.createElement("div", {
+    className: "cop-mt-0.5 cop-text-secondary"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "sm",
+    leading: "normal",
+    tag: "span",
+    weight: "regular"
+  }, description))), isSingleColLayout && helperTextRenderer), /*#__PURE__*/React.createElement("div", null, !isSingleColLayout && helperTextRenderer, /*#__PURE__*/React.createElement("div", {
+    className: cn(groupDirection({
+      direction: direction
+    }))
+  }, children), error && /*#__PURE__*/React.createElement("div", {
+    className: "cop-mt-2.5 cop-flex cop-items-center cop-gap-1 cop-text-[#cc0000]"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Warning",
+    className: "cop-h-3 cop-w-3"
+  }), /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "base",
+    leading: "normal",
+    tag: "span",
+    weight: "regular"
+  }, error))));
+};

package/dist/esm/common/utils.js

@@ -0,0 +1,17 @@
+// This file is generated by a script. Do not edit this file directly.
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn() {
+  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+    inputs[_key] = arguments[_key];
+  }
+  return twMerge(clsx(inputs));
+}
+export function ensureUnreachable(value, message) {
+  throw new Error(message !== null && message !== void 0 ? message : "Unreachable code hit with value ".concat(String(value)));
+}
+export function getInitials(name, twoLetter) {
+  return name.split(' ').map(function (word) {
+    return word.charAt(0).toLocaleUpperCase();
+  }).join('').slice(0, twoLetter ? 2 : 1);
+}

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,180 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "size", "variant", "fallbackColor", "style", "fallbackClassName"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"];
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'cva';
+import { cn, ensureUnreachable } from "../../common/utils";
+import { Heading } from "../Typography";
+import { Icon } from "../Icon";
+var avatarFallbackVariants = cva({
+  variants: {
+    fallbackColor: {
+      teal: 'cop-bg-teal-primary-light cop-text-teal-primary-dark',
+      cyan: 'cop-bg-cyan-primary-light cop-text-cyan-primary-dark',
+      amber: 'cop-bg-amber-primary-light cop-text-amber-primary-dark',
+      rose: 'cop-bg-rose-primary-light cop-text-rose-primary-dark',
+      violet: 'cop-bg-violet-primary-light cop-text-violet-primary-dark',
+      gray: 'cop-bg-avatar-gray cop-text-p-text-primary',
+      purple: 'cop-bg-purple-primary-light cop-text-purple-primary-dark',
+      olive: 'cop-bg-olive-primary-light cop-text-olive-primary-dark'
+    }
+  }
+});
+function getBorderRadius(size, variant) {
+  if (variant === 'circle') {
+    return 'cop-rounded-full';
+  }
+  switch (size) {
+    case '3xs':
+    case '2xs':
+    case 'xs':
+    case 'sm':
+      return 'cop-rounded';
+    case 'md':
+      return 'cop-rounded';
+    case 'lg':
+      return 'cop-rounded-md';
+    case 'xl':
+      return 'cop-rounded-lg';
+    default:
+      ensureUnreachable(size);
+  }
+}
+var PREDEFINED_COLORS = ['teal', 'cyan', 'amber', 'rose', 'violet', 'gray', 'purple', 'olive'];
+var legacyFallbackColorToNewColorsMap = {
+  '#56351E': {
+    fontColor: '#7E5437',
+    bgColor: '#F1EDEA'
+  },
+  '#EC4E20': {
+    fontColor: '#ED7C58',
+    bgColor: '#FFF2E3'
+  },
+  '#7CAE7A': {
+    fontColor: '#75876E',
+    bgColor: '#EBF3E7'
+  },
+  '#AF4D98': {
+    fontColor: '#7A2D87',
+    bgColor: '#FAEEFB'
+  },
+  '#5E0B15': {
+    fontColor: '#894D54',
+    bgColor: '#EBE1E2'
+  }
+};
+var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    variant = _ref.variant,
+    _ref$fallbackColor = _ref.fallbackColor,
+    fallbackColor = _ref$fallbackColor === void 0 ? 'gray' : _ref$fallbackColor,
+    style = _ref.style,
+    fallbackClassName = _ref.fallbackClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Reference: https://www.figma.com/design/HH25FbLn13q9qx5uDCFxYI/%F0%9F%A7%A9-Design-System?node-id=17964-63334&t=6X02LBImhNYSillh-0
+  var AVATAR_SIZE_MAP = {
+    '3xs': 'cop-h-3 cop-w-3',
+    // 12px
+    '2xs': 'cop-h-4 cop-w-4',
+    // 16px
+    xs: 'cop-h-5 cop-w-5',
+    // 20px
+    sm: 'cop-h-6 cop-w-6',
+    // 24px
+    md: 'cop-h-8 cop-w-8',
+    // 32px
+    lg: 'cop-h-10 cop-w-10',
+    // 40px
+    xl: 'cop-h-16 cop-w-16' // 64px
+  };
+  var AVATAR_ICON_SIZE_MAP = {
+    '3xs': 'cop-h-[8px] cop-w-[8px]',
+    '2xs': 'cop-h-[10px] cop-w-[10px]',
+    xs: 'cop-h-[10px] cop-w-[10px]',
+    sm: 'cop-h-[14px] cop-w-[14px]',
+    md: 'cop-h-[18px] cop-w-[18px]',
+    lg: 'cop-h-6 cop-w-6',
+    xl: 'cop-h-7 cop-w-7'
+  };
+  var avatarSize = AVATAR_SIZE_MAP[size];
+  var avatarSizeWithBorder = "".concat(avatarSize, " ").concat(getBorderRadius(size, variant));
+  var TEXT_SIZE_MAP = {
+    '3xs': '3xs',
+    '2xs': '2xs',
+    xs: 'xs',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'lg',
+    xl: '2xl'
+  };
+
+  // Check if fallbackColor is a predefined variant or custom hex color
+  var isAvatarFallbackColor = function isAvatarFallbackColor(color) {
+    return PREDEFINED_COLORS.includes(color);
+  };
+
+  // For custom hex colors, use inline styles (legacy support)
+  var customColorStyles = React.useMemo(function () {
+    if (fallbackColor && !isAvatarFallbackColor(fallbackColor) && 'src' in props && !props.src) {
+      var _legacyFallbackColorT, _legacyFallbackColorT2;
+      return _objectSpread({
+        backgroundColor: (_legacyFallbackColorT = legacyFallbackColorToNewColorsMap[fallbackColor]) === null || _legacyFallbackColorT === void 0 ? void 0 : _legacyFallbackColorT.bgColor,
+        color: (_legacyFallbackColorT2 = legacyFallbackColorToNewColorsMap[fallbackColor]) === null || _legacyFallbackColorT2 === void 0 ? void 0 : _legacyFallbackColorT2.fontColor
+      }, style);
+    }
+    return style !== null && style !== void 0 ? style : {};
+  }, [fallbackColor, style, props]);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Root, _extends({
+    ref: ref,
+    className: cn("cop-relative cop-box-border cop-flex cop-border cop-border-solid cop-border-card-border ".concat(avatarSizeWithBorder, " cop-shrink-0 cop-overflow-hidden"),
+    // Apply CVA variant classes only for predefined colors when image is not loaded
+    isAvatarFallbackColor(fallbackColor) && avatarFallbackVariants({
+      fallbackColor: fallbackColor
+    }), {
+      'cop-bg-avatar-gray': !!props.icon || 'src' in props && !!props.src
+    }, className),
+    style: customColorStyles
+  }, props), 'src' in props && /*#__PURE__*/React.createElement(AvatarImage, {
+    src: props.src,
+    alt: props.alt
+  }), 'text' in props && !props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(Heading, {
+    size: TEXT_SIZE_MAP[size],
+    className: fallbackClassName
+  }, props.text)), props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: props.icon,
+    className: AVATAR_ICON_SIZE_MAP[size]
+  })));
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Image, _extends({
+    ref: ref,
+    className: cn('cop-aspect-square cop-h-full cop-w-full', className)
+  }, props));
+});
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Fallback, _extends({
+    ref: ref,
+    className: cn('cop-bg-muted cop-flex cop-h-full cop-w-full cop-items-center cop-justify-center cop-rounded-full', className)
+  }, props));
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar };

package/dist/esm/components/Avatar/UserWithCompanyAvatar.js

@@ -0,0 +1,52 @@
+// This file is generated by a script. Do not edit this file directly.
+import React from "react";
+import { Avatar } from "./Avatar";
+
+// given the main avatar size, return the size of the sub avatar
+var SUB_AVATAR_SIZE_MAP = {
+  xl: 'md',
+  lg: 'xs',
+  md: '2xs',
+  sm: '3xs',
+  xs: '3xs'
+};
+
+// given the main avatar size, return the offset classname for the sub avatar
+var OFFSET_MAP_CLASSNAME = {
+  xl: 'cop-bottom-[-8px] cop-right-[-8px]',
+  lg: 'cop-bottom-[-4px] cop-right-[-4px]',
+  md: 'cop-bottom-[-2px] cop-right-[-2px]',
+  sm: 'cop-bottom-[-2px] cop-right-[-2px]',
+  xs: 'cop-bottom-[-4px] cop-right-[-4px]'
+};
+export function UserWithCompanyAvatar(_ref) {
+  var size = _ref.size,
+    avatarSrc = _ref.avatarSrc,
+    fallbackColor = _ref.fallbackColor,
+    text = _ref.text,
+    icon = _ref.icon,
+    companyText = _ref.companyText,
+    companyAvatarSrc = _ref.companyAvatarSrc,
+    companyAvatarFallbackColor = _ref.companyAvatarFallbackColor,
+    companyAvatarIcon = _ref.companyAvatarIcon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cop-relative cop-h-fit cop-w-fit"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    src: avatarSrc,
+    fallbackColor: fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : '',
+    text: text,
+    alt: text,
+    size: size,
+    variant: "circle",
+    icon: icon
+  }), companyText && /*#__PURE__*/React.createElement(Avatar, {
+    src: companyAvatarSrc !== null && companyAvatarSrc !== void 0 ? companyAvatarSrc : '',
+    fallbackColor: companyAvatarFallbackColor !== null && companyAvatarFallbackColor !== void 0 ? companyAvatarFallbackColor : '',
+    text: companyText,
+    alt: companyText,
+    size: SUB_AVATAR_SIZE_MAP[size],
+    variant: "rounded",
+    className: "!cop-absolute ".concat(OFFSET_MAP_CLASSNAME[size], " cop-box-border"),
+    icon: companyAvatarIcon
+  }));
+}

package/dist/esm/components/Breadcrumb/Breadcrumbs.js

@@ -0,0 +1,55 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import * as React from 'react';
+import { v4 } from 'uuid';
+import { Icon } from "../Icon";
+function hasSeparator(index, l) {
+  return index < l - 1;
+}
+var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var label = _ref.label,
+    href = _ref.href,
+    active = _ref.active;
+  return /*#__PURE__*/React.createElement("li", {
+    className: ['cop-ounded-xs', 'cop-cursor-pointer', 'cop-px-1', 'cop-py-[2px]', active ? 'cop-text-primary' : 'cop-text-secondary', !active ? 'hover:cop-bg-primary' : ''].join(' ')
+  }, /*#__PURE__*/React.createElement("a", {
+    href: href,
+    className: ['cop-no-underline', 'cop-text-sm', active ? 'cop-text-primary' : 'cop-text-secondary'].join(' ')
+  }, label));
+};
+export var Breadcrumbs = function Breadcrumbs(_ref2) {
+  var items = _ref2.items,
+    _ref2$separator = _ref2.separator,
+    separator = _ref2$separator === void 0 ? 'ChevronRight' : _ref2$separator;
+  var itemsWithIdsSet = new Set(items.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      id: v4()
+    });
+  }));
+  return /*#__PURE__*/React.createElement("nav", {
+    "aria-label": "breadcrumb",
+    className: "cop-w-full"
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "cop-flex cop-list-none cop-items-center cop-gap-3 cop-p-0"
+  }, Array.from(itemsWithIdsSet).map(function (_ref3, index) {
+    var label = _ref3.label,
+      href = _ref3.href,
+      active = _ref3.active,
+      id = _ref3.id;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreadcrumbItem, {
+      key: id,
+      label: label,
+      href: href,
+      active: active
+    }), hasSeparator(index, items.length) && /*#__PURE__*/React.createElement(Icon, {
+      icon: separator,
+      key: index,
+      className: "cop-w-[0.5rem]"
+    }));
+  })));
+};

package/dist/esm/components/Button/Base.js

@@ -0,0 +1,35 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["className", "type", "variant"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { cva } from 'cva';
+import clsx from 'clsx';
+import { cn } from "../../common/utils";
+var baseButtonVariants = cva({
+  base: clsx('cop-flex cop-items-center cop-justify-center cop-border cop-border-solid cop-rounded cop-transition-opacity cop-shadow-none cop-cursor-pointer', 'disabled:cop-pointer-events-none disabled:cop-cursor-default disabled:cop-text-disabled', 'focus:cop-outline-none focus:cop-outline-[1.5px] focus:cop-outline-[#053299] focus:cop-outline-offset-1'),
+  variants: {
+    variant: {
+      primary: clsx('cop-bg-button-primary cop-text-white cop-border-primary', 'hover:cop-bg-[#6B6F76] hover:cop-border-[#00000012]', 'disabled:cop-bg-secondary disabled:cop-border-[#00000012]'),
+      secondary: 'cop-bg-white cop-text-primary cop-border-[#00000012] hover:cop-bg-[#F8F9FB]',
+      minimal: 'cop-bg-transparent cop-border-transparent cop-text-primary hover:cop-bg-[#F8F9FB] hover:cop-border-[#F8F9FB]'
+    }
+  },
+  defaultVariants: {
+    variant: 'primary'
+  }
+});
+export var BaseButton = function BaseButton(_ref) {
+  var className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    variant = _ref.variant,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: cn(baseButtonVariants({
+      variant: variant
+    }), className),
+    type: type
+  }, props));
+};

package/dist/esm/components/Button/Icon.js

@@ -0,0 +1,41 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["className", "icon", "label", "size"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { Icon } from "../Icon";
+import { cva } from 'cva';
+import { BaseButton } from "./Base";
+import { cn } from "../../common/utils";
+var iconButtonVariants = cva({
+  variants: {
+    size: {
+      sm: 'cop-p-[5px]',
+      base: 'cop-p-[7px]'
+    }
+  },
+  defaultVariants: {
+    size: 'base'
+  }
+});
+
+// functionally the same as Omit<BaseButtonProps, 'children'>
+// we're using this instead because Omit breaks in the build
+
+export var IconButton = function IconButton(_ref) {
+  var className = _ref.className,
+    icon = _ref.icon,
+    label = _ref.label,
+    size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseButton, _extends({
+    className: cn(iconButtonVariants({
+      size: size
+    }), className),
+    "aria-label": label !== null && label !== void 0 ? label : props['aria-label']
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    className: "cop-h-4 cop-w-4"
+  }));
+};

package/dist/esm/components/Button/index.js

@@ -0,0 +1,62 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["className", "label", "loading", "prefixIcon", "size", "suffixIcon", "variant"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import clsx from 'clsx';
+import { cva } from 'cva';
+import { Icon } from "../Icon";
+import { Base } from "../Typography/Base";
+import { BaseButton } from "./Base";
+import { cn } from "../../common/utils";
+import { Spinner } from "../Spinner";
+var iconClasses = 'cop-h-3 cop-w-3 cop-fill-current cop-stroke-current';
+var buttonVariants = cva({
+  variants: {
+    size: {
+      sm: 'cop-py-[3px] cop-px-2',
+      base: 'cop-px-3 cop-py-1'
+    }
+  },
+  defaultVariants: {
+    size: 'base'
+  }
+});
+
+// functionally the same as Omit<BaseButtonProps, 'children' | 'variant'>
+// we're using this instead because Omit breaks in the build
+
+export var Button = function Button(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    loading = _ref.loading,
+    prefixIcon = _ref.prefixIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'base' : _ref$size,
+    suffixIcon = _ref.suffixIcon,
+    variant = _ref.variant,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseButton, _extends({
+    "aria-label": loading ? 'Loading...' : props['aria-label'],
+    className: cn(buttonVariants({
+      size: size
+    }), className),
+    variant: variant === 'text' ? 'minimal' : variant
+  }, props), loading ? /*#__PURE__*/React.createElement(Spinner, {
+    size: 5
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, prefixIcon && /*#__PURE__*/React.createElement(Icon, {
+    icon: prefixIcon,
+    className: clsx('cop-pr-2', iconClasses)
+  }), /*#__PURE__*/React.createElement(Base, {
+    size: size === 'base' ? 'base' : 'xs',
+    leading: size === 'base' ? '1' : '075',
+    tag: "p",
+    weight: "medium",
+    variant: "body"
+  }, label), suffixIcon && /*#__PURE__*/React.createElement(Icon, {
+    icon: suffixIcon,
+    className: clsx('cop-pl-1.5', iconClasses)
+  })));
+};
+export * from "./Icon";