@assembly-js/design-system 2.4.0 → 3.0.0

package/.github/workflows/npm-publish.yml

@@ -19,7 +19,9 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-          registry-url: 'https://registry.npmjs.org'
+
+      - name: Upgrade npm for OIDC support
+        run: npm install -g npm@latest
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -36,7 +38,7 @@ jobs:
             delete pkg.deprecated;
             require('fs').writeFileSync('./package.json', JSON.stringify(pkg, null, 2));
           "
-          npm publish --provenance --access public
+          npm publish --access public
 
       # Publish to copilot-design-system (legacy)
       - name: Publish copilot-design-system (legacy)
@@ -47,4 +49,4 @@ jobs:
             pkg.deprecated = 'This package has been renamed to @assembly-js/design-system';
             require('fs').writeFileSync('./package.json', JSON.stringify(pkg, null, 2));
           "
-          npm publish --provenance --access public
+          npm publish --access public

package/dist/esm/common/utils.js

@@ -1,6 +1,9 @@
 // This file is generated by a script. Do not edit this file directly.
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+var twMerge = extendTailwindMerge({
+  prefix: 'cop-'
+});
 export function cn() {
   for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
     inputs[_key] = arguments[_key];

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

@@ -152,7 +152,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     alt: props.alt
   }), 'text' in props && !props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(Heading, {
     size: TEXT_SIZE_MAP[size],
-    className: fallbackClassName
+    className: cn('cop-my-0', fallbackClassName)
   }, props.text)), props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(Icon, {
     icon: props.icon,
     className: AVATAR_ICON_SIZE_MAP[size]

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

@@ -49,6 +49,7 @@ export var Button = function Button(_ref) {
     icon: prefixIcon,
     className: clsx('cop-pr-2', iconClasses)
   }), /*#__PURE__*/React.createElement(Base, {
+    className: "cop-m-0",
     size: size === 'base' ? 'base' : 'xs',
     leading: size === 'base' ? '1' : '075',
     tag: "p",

package/dist/esm/components/Callout/Callout.js

@@ -78,9 +78,11 @@ export var Callout = function Callout(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "cop-flex-1"
   }, /*#__PURE__*/React.createElement(Heading, {
-    size: "base"
+    size: "base",
+    className: "cop-my-0"
   }, title), /*#__PURE__*/React.createElement(Body, {
-    size: "base"
+    size: "base",
+    className: "cop-m-0"
   }, description), footerAction && /*#__PURE__*/React.createElement("div", {
     className: "cop-mt-2"
   }, /*#__PURE__*/React.createElement(TextLink, footerAction))), onClose && /*#__PURE__*/React.createElement(IconButton, {

package/dist/esm/components/Chip/Chip.js

@@ -127,7 +127,8 @@ export var Chip = function Chip(_ref2) {
       size: size
     })
   }), /*#__PURE__*/React.createElement(Body, {
-    size: size !== 'sm' ? 'base' : 'sm'
+    size: size !== 'sm' ? 'base' : 'sm',
+    className: "cop-m-0"
   }, label), Boolean(onClose) ?
   /*#__PURE__*/
   // We intentionally attach both onClick and onTouch event

package/dist/esm/components/Status/Status.js

@@ -60,6 +60,7 @@ export var Status = function Status(_ref) {
     icon: icon !== null && icon !== void 0 ? icon : mapIconToStatus(status),
     className: "cop-h-2.5 cop-w-2.5"
   }) : null, /*#__PURE__*/React.createElement(Heading, {
-    size: "sm"
+    size: "sm",
+    className: "cop-my-0"
   }, label));
 };

package/dist/esm/components/Toast/Toaster.js

@@ -32,7 +32,8 @@ export function Toaster() {
     }, /*#__PURE__*/React.createElement("div", {
       className: "cop-flex cop-w-full cop-items-center cop-justify-between cop-text-primary"
     }, title && /*#__PURE__*/React.createElement(Heading, {
-      size: "sm"
+      size: "sm",
+      className: "cop-my-0"
     }, title), props.variant !== 'progress' && /*#__PURE__*/React.createElement(ToastClose, null)), typeof description === 'string' ? /*#__PURE__*/React.createElement("div", {
       className: "cop-text-secondary"
     }, /*#__PURE__*/React.createElement(Body, {

package/dist/esm/components/Toolbar/Toolbar.js

@@ -78,6 +78,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
   };
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
+    tabIndex: -1,
     className: cn(buttonVariants({
       variant: variant,
       isActive: isActive

package/dist/esm/components/Toolbar/ToolbarContext.js

@@ -12,9 +12,9 @@ var ToolbarContext = /*#__PURE__*/createContext(null);
 var Styles = function Styles(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx('[&_h1]:!cop-m-0 [&_h1]:cop-text-lg [&_h1]:cop-font-medium',
+    className: clsx('[&_h1]:!cop-m-0 [&_h1]:cop-text-xl [&_h1]:cop-font-medium',
     // styles for h1
-    '[&_h2]:!cop-m-0 [&_h2]:!cop-text-base [&_h2]:!cop-font-semibold',
+    '[&_h2]:!cop-m-0 [&_h2]:!cop-text-lg [&_h2]:!cop-font-medium',
     // styles for h2
     '[&_h3]:!cop-m-0 [&_h3]:!cop-text-base [&_h3]:!cop-font-medium',
     // styles for h3

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

@@ -61,6 +61,6 @@ export var Base = function Base(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var Tag = tag;
   return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: cn('cop-m-0', VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], LEADING_CLASSNAMES[leading], WEIGHT_CLASSNAMES[weight], className)
+    className: cn(VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], LEADING_CLASSNAMES[leading], WEIGHT_CLASSNAMES[weight], className)
   }, props), children);
 };

package/dist/esm/components/Typography/Heading.js

@@ -1,6 +1,7 @@
 // This file is generated by a script. Do not edit this file directly.
 import React from 'react';
 import { Base } from "./Base";
+import { cn } from "../../common/utils";
 var SIZE_MAP = {
   '3xs': '3xs',
   '2xs': '2xs',
@@ -25,6 +26,20 @@ var LEADING_CLASSNAMES = {
   '3xl': '5',
   '4xl': '6'
 };
+
+// Margin-bottom classes to restore vertical rhythm (Tailwind Preflight removes default margins)
+var MARGIN_CLASSNAMES = {
+  '3xs': 'cop-mb-1',
+  '2xs': 'cop-mb-1',
+  xs: 'cop-mb-1',
+  sm: 'cop-mb-2',
+  base: 'cop-mb-2',
+  lg: 'cop-mb-3',
+  xl: 'cop-mb-3',
+  '2xl': 'cop-mb-4',
+  '3xl': 'cop-mb-4',
+  '4xl': 'cop-mb-5'
+};
 export function Heading(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -34,7 +49,7 @@ export function Heading(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'base' : _ref$size;
   return /*#__PURE__*/React.createElement(Base, {
-    className: className,
+    className: cn(MARGIN_CLASSNAMES[size], className),
     size: SIZE_MAP[size],
     variant: "body",
     tag: tag,

package/dist/esm/components/UserCompanySelector/LimitedOptionsList.js

@@ -23,6 +23,6 @@ export var LimitedOptionsList = function LimitedOptionsList(_ref) {
     className: "cop-flex cop-items-center cop-px-3 cop-pb-1 cop-pt-2"
   }, /*#__PURE__*/React.createElement(Heading, {
     size: "xs",
-    className: "cop-text-secondary"
+    className: "cop-my-0 cop-text-secondary"
   }, title)), children);
 };

package/dist/esm/components/UserCompanySelector/ListItem.js

@@ -24,10 +24,10 @@ export function ListItem(_ref) {
     ref: innerRef
   }, innerProps, {
     className: clsx('cop-flex cop-cursor-pointer cop-items-center cop-gap-3 cop-px-3 hover:cop-bg-gray-100', {
-      'cop-h-10': !!companyId,
-      // if an option has company to render, the option should have a height of 40px
-      'cop-h-8': !companyId,
-      // if an option has no company to render, the option should have a height of 32px
+      'cop-h-10': !!companyName,
+      // if an option has company name to render, the option should have a height of 40px
+      'cop-h-8': !companyName,
+      // if an option has no company name to render, the option should have a height of 32px
       'cop-bg-primary': isFocused
     })
   }), option.type !== 'company' ? /*#__PURE__*/React.createElement(UserWithCompanyAvatar, {
@@ -48,7 +48,7 @@ export function ListItem(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "cop-flex cop-flex-col cop-text-[10px]"
   }, /*#__PURE__*/React.createElement(Body, {
-    className: "cop-truncate",
+    className: "cop-m-0 cop-truncate",
     size: "sm"
   }, option.label), companyName && /*#__PURE__*/React.createElement("span", {
     className: "cop-text-secondary"

package/dist/esm/components/UserCompanySelector/UserCompanySelector.js

@@ -299,7 +299,7 @@ export var UserCompanySelector = function UserCompanySelector(_ref) {
         return /*#__PURE__*/React.createElement("div", {
           className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
         }, /*#__PURE__*/React.createElement(Heading, {
-          className: "cop-text-secondary",
+          className: "cop-my-0 cop-text-secondary",
           size: "xs"
         }, props.data.label));
       },

package/dist/esm/index.js

@@ -1,4 +1,16 @@
 // This file is generated by a script. Do not edit this file directly.
+/**
+ * ─╔═══╗─╔═══╗─╔═══╗─╔═══╗─╔═╗╔═╗─╔══╗──╔╗────╔╗──╔╗
+ * ─║╔═╗║─║╔═╗║─║╔═╗║─║╔══╝─║║╚╝║║─║╔╗║──║║────║╚╗╔╝║
+ * ─║║─║║─║╚══╗─║╚══╗─║╚══╗─║╔╗╔╗║─║╚╝╚╗─║║────╚╗╚╝╔╝
+ * ─║╚═╝║─╚══╗║─╚══╗║─║╔══╝─║║║║║║─║╔═╗║─║║─╔╗──╚╗╔╝─
+ * ─║╔═╗║─║╚═╝║─║╚═╝║─║╚══╗─║║║║║║─║╚═╝║─║╚═╝║───║║──
+ * ─╚╝─╚╝─╚═══╝─╚═══╝─╚═══╝─╚╝╚╝╚╝─╚═══╝─╚═══╝───╚╝──
+ *
+ * @assembly-js/design-system
+ * https://assembly.com
+ */
+
 export * from "./components/Avatar/Avatar";
 export * from "./components/Avatar/UserWithCompanyAvatar";
 export * from "./components/Breadcrumb/Breadcrumbs";

package/dist/esm/types/components/Avatar/Avatar.d.ts

@@ -17,6 +17,9 @@ type TextProps = {
 } & BaseProps;
 type AvatarProps = TextProps | ImageProps;
 declare const Avatar: React.ForwardRefExoticComponent<({
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    prefix?: string | undefined;
     children?: React.ReactNode;
     className?: string | undefined;
     slot?: string | undefined;
@@ -42,14 +45,11 @@ declare const Avatar: React.ForwardRefExoticComponent<({
     placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
-    prefix?: string | undefined;
     property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;
@@ -296,6 +296,9 @@ declare const Avatar: React.ForwardRefExoticComponent<({
     subAvatar?: Omit<AvatarProps, "size" | "subAvatar"> | undefined;
     icon?: "Info" | "InfoSolid" | "Search" | "ResetZoom" | "FitToWidth" | "Ellipsis" | "MoreVertical" | "Download" | "Upload" | "Edit" | "Plus" | "Minus" | "Trash" | "ChevronRight" | "ChevronUp" | "ChevronDown" | "ChevronLeft" | "Copy" | "Duplicate" | "Automation" | "Play" | "Pause" | "Scale" | "Form" | "Message" | "Contract" | "Profile" | "Building" | "InvoicePaid" | "EditSolid" | "Archive" | "Unarchive" | "Settings" | "Link" | "Attachment" | "Close" | "Cancel" | "Smile" | "Share" | "Reply" | "Calendar" | "At" | "List" | "NumberedList" | "UnorderedList" | "Checklist" | "Tasks" | "Filter" | "Templates" | "Star" | "Email" | "EmailUnread" | "EmailRead" | "H1" | "H2" | "H3" | "Text" | "Bold" | "Italicize" | "Underline" | "Strikethrough" | "Menu" | "Inbox" | "Home" | "Notification" | "Billing" | "Dollar" | "Helpdesk" | "AppSetup" | "Gift" | "Location" | "Number" | "MobileNumber" | "Airtable" | "QuickBook" | "Bank" | "Puzzle" | "Code" | "ArrowUpSolid" | "ArrowDownSolid" | "ArrowLeft" | "ArrowRight" | "ArrowNE" | "Dash" | "Compose" | "MassFileShare" | "Warning" | "WarningSolid" | "Failed" | "FailedSolid" | "Check" | "Success" | "SuccessSolid" | "New" | "ToDo" | "InProgress" | "Book" | "Send" | "SendFilled" | "Dot" | "SquareSolid" | "Eye" | "EyeHidden" | "Invoice" | "Comment" | "Invite" | "Spinner" | "Repeat" | "Web" | "Time" | "GraphBarSolid" | "Sidebar" | "SidebarFilled" | "Export" | "File" | "MP4" | "SVG" | "MOV" | "MP3" | "CSV" | "Excel" | "PNG" | "PDF" | "JPG" | "Doc" | "ZIP" | "Movie" | "GIF" | "Store" | "ShoppingBag" | "DragDrop" | "Image" | "ImageMissing" | "LogOut" | "Lead" | "QuestionMark" | "API" | "PlansPayments" | "Customization" | "Teams" | "AI" | "BracketsCurly" | "Callout" | "Table" | "Chart" | "Tag" | "ThumbsUp" | "ThumbsDown" | "CaretDown" | "CaretUp" | "CaretRight" | "Disconnect" | "Mention" | "Insert" | "AssemblyLogo" | "Reposition" | "Marketing" | "Gauge" | "Subtask" | "Compass" | "UnPin" | "Pin" | "Files" | "FolderLocked" | "Unlock" | "Authentication" | "LockFilled" | undefined;
 } | {
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    prefix?: string | undefined;
     children?: React.ReactNode;
     className?: string | undefined;
     slot?: string | undefined;
@@ -321,14 +324,11 @@ declare const Avatar: React.ForwardRefExoticComponent<({
     placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
-    prefix?: string | undefined;
     property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;

package/dist/esm/types/components/Typography/Base.stories.d.ts

@@ -7,8 +7,8 @@ declare const meta: {
         className?: string | undefined;
         leading: "tight" | "snug" | "normal" | "relaxed" | "loose" | "8" | "7" | "6" | "5" | "4" | "3" | "2" | "1" | "075" | "050" | "025";
         size: "3xs" | "2xs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
-        variant: "body" | "display" | "heading";
-        tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div" | "span";
+        variant: "display" | "body" | "heading";
+        tag: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
         weight: "bold" | "semibold" | "medium" | "regular" | "light";
         'data-typography'?: "heading" | undefined;
     }) => import("react").JSX.Element;

package/dist/esm/types/index.d.ts

@@ -1,3 +1,14 @@
+/**
+ * ─╔═══╗─╔═══╗─╔═══╗─╔═══╗─╔═╗╔═╗─╔══╗──╔╗────╔╗──╔╗
+ * ─║╔═╗║─║╔═╗║─║╔═╗║─║╔══╝─║║╚╝║║─║╔╗║──║║────║╚╗╔╝║
+ * ─║║─║║─║╚══╗─║╚══╗─║╚══╗─║╔╗╔╗║─║╚╝╚╗─║║────╚╗╚╝╔╝
+ * ─║╚═╝║─╚══╗║─╚══╗║─║╔══╝─║║║║║║─║╔═╗║─║║─╔╗──╚╗╔╝─
+ * ─║╔═╗║─║╚═╝║─║╚═╝║─║╚══╗─║║║║║║─║╚═╝║─║╚═╝║───║║──
+ * ─╚╝─╚╝─╚═══╝─╚═══╝─╚═══╝─╚╝╚╝╚╝─╚═══╝─╚═══╝───╚╝──
+ *
+ * @assembly-js/design-system
+ * https://assembly.com
+ */
 export * from './components/Avatar/Avatar';
 export * from './components/Avatar/UserWithCompanyAvatar';
 export * from './components/Breadcrumb/Breadcrumbs';