@assembly-js/design-system 2.4.1 → 3.0.0

package/dist/umd/common/utils.js

@@ -20,11 +20,14 @@
   _exports.cn = cn;
   _exports.ensureUnreachable = ensureUnreachable;
   _exports.getInitials = getInitials;
+  var twMerge = (0, _tailwindMerge.extendTailwindMerge)({
+    prefix: 'cop-'
+  });
   function cn() {
     for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
       inputs[_key] = arguments[_key];
     }
-    return (0, _tailwindMerge.twMerge)((0, _clsx.clsx)(inputs));
+    return twMerge((0, _clsx.clsx)(inputs));
   }
   function ensureUnreachable(value, message) {
     throw new Error(message !== null && message !== void 0 ? message : "Unreachable code hit with value ".concat(String(value)));

package/dist/umd/components/Avatar/Avatar.js

@@ -169,7 +169,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       alt: props.alt
     }), 'text' in props && !props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(_Typography.Heading, {
       size: TEXT_SIZE_MAP[size],
-      className: fallbackClassName
+      className: (0, _utils.cn)('cop-my-0', fallbackClassName)
     }, props.text)), props.icon && /*#__PURE__*/React.createElement(AvatarFallback, null, /*#__PURE__*/React.createElement(_Icon.Icon, {
       icon: props.icon,
       className: AVATAR_ICON_SIZE_MAP[size]

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

@@ -77,6 +77,7 @@
       icon: prefixIcon,
       className: (0, _clsx["default"])('cop-pr-2', iconClasses)
     }), /*#__PURE__*/_react["default"].createElement(_Base.Base, {
+      className: "cop-m-0",
       size: size === 'base' ? 'base' : 'xs',
       leading: size === 'base' ? '1' : '075',
       tag: "p",

package/dist/umd/components/Callout/Callout.js

@@ -93,9 +93,11 @@
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "cop-flex-1"
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
-      size: "base"
+      size: "base",
+      className: "cop-my-0"
     }, title), /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
-      size: "base"
+      size: "base",
+      className: "cop-m-0"
     }, description), footerAction && /*#__PURE__*/_react["default"].createElement("div", {
       className: "cop-mt-2"
     }, /*#__PURE__*/_react["default"].createElement(_TextLink.TextLink, footerAction))), onClose && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {

package/dist/umd/components/Chip/Chip.js

@@ -143,7 +143,8 @@
         size: size
       })
     }), /*#__PURE__*/_react["default"].createElement(_Typography.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/umd/components/Status/Status.js

@@ -77,7 +77,8 @@
       icon: icon !== null && icon !== void 0 ? icon : mapIconToStatus(status),
       className: "cop-h-2.5 cop-w-2.5"
     }) : null, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
-      size: "sm"
+      size: "sm",
+      className: "cop-my-0"
     }, label));
   };
 });

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

@@ -47,7 +47,8 @@
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "cop-flex cop-w-full cop-items-center cop-justify-between cop-text-primary"
       }, title && /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
-        size: "sm"
+        size: "sm",
+        className: "cop-my-0"
       }, title), props.variant !== 'progress' && /*#__PURE__*/_react["default"].createElement(_Toast.ToastClose, null)), typeof description === 'string' ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "cop-text-secondary"
       }, /*#__PURE__*/_react["default"].createElement(_Body.Body, {

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

@@ -80,7 +80,7 @@
       props = _objectWithoutProperties(_ref, _excluded);
     var Tag = tag;
     return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
-      className: (0, _utils.cn)('cop-m-0', VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], LEADING_CLASSNAMES[leading], WEIGHT_CLASSNAMES[weight], className)
+      className: (0, _utils.cn)(VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], LEADING_CLASSNAMES[leading], WEIGHT_CLASSNAMES[weight], className)
     }, props), children);
   };
 });

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

@@ -1,17 +1,17 @@
 // This file is generated by a script. Do not edit this file directly.
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./Base"], factory);
+    define(["exports", "react", "./Base", "../../common/utils"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./Base"));
+    factory(exports, require("react"), require("./Base"), require("../../common/utils"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.Base);
+    factory(mod.exports, global.react, global.Base, global.utils);
     global.Heading = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Base) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Base, _utils) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -44,6 +44,20 @@
     '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'
+  };
   function Heading(_ref) {
     var children = _ref.children,
       _ref$className = _ref.className,
@@ -53,7 +67,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'base' : _ref$size;
     return /*#__PURE__*/_react["default"].createElement(_Base.Base, {
-      className: className,
+      className: (0, _utils.cn)(MARGIN_CLASSNAMES[size], className),
       size: SIZE_MAP[size],
       variant: "body",
       tag: tag,

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

@@ -41,7 +41,7 @@
       className: "cop-flex cop-items-center cop-px-3 cop-pb-1 cop-pt-2"
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
       size: "xs",
-      className: "cop-text-secondary"
+      className: "cop-my-0 cop-text-secondary"
     }, title)), children);
   };
 });

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

@@ -40,10 +40,10 @@
       ref: innerRef
     }, innerProps, {
       className: (0, _clsx["default"])('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["default"].createElement(_UserWithCompanyAvatar.UserWithCompanyAvatar, {
@@ -64,7 +64,7 @@
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "cop-flex cop-flex-col cop-text-[10px]"
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
-      className: "cop-truncate",
+      className: "cop-m-0 cop-truncate",
       size: "sm"
     }, option.label), companyName && /*#__PURE__*/_react["default"].createElement("span", {
       className: "cop-text-secondary"

package/dist/umd/components/UserCompanySelector/UserCompanySelector.js

@@ -315,7 +315,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           return /*#__PURE__*/_react["default"].createElement("div", {
             className: "cop-flex cop-h-8 cop-items-center cop-gap-2 cop-px-3"
           }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
-            className: "cop-text-secondary",
+            className: "cop-my-0 cop-text-secondary",
             size: "xs"
           }, props.data.label));
         },

package/dist/umd/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/umd/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;