@conveyorhq/arrow-ds 1.140.0 → 1.141.0

package/README.md

@@ -93,7 +93,7 @@ All documentation exists within the `src` directory of this repo. If it applies
 Each MDX file should start with importing the `Meta` component and passing a `title` to it:
 
 ```mdx
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/blocks";
 
 <Meta title="Arrow Design System/Introduction" />
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.140.0",
+  "version": "1.141.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -25,9 +25,8 @@
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@popperjs/core": "^2.4.2",
-    "@reach/auto-id": "^0.6.1",
-    "@reach/portal": "^0.6.1",
+    "@popperjs/core": "^2.11.8",
+    "@react-spring/web": "^9.7.3",
     "@rehooks/component-size": "^1.0.3",
     "@types/date-fns": "^2.6.0",
     "classnames": "^2.2.6",
@@ -41,17 +40,17 @@
     "mime-types": "^2.1.30",
     "react-codemirror2": "^7.1.0",
     "react-datepicker": "^3.1.3",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-focus-lock": "^2.2.1",
+    "react-hot-toast": "^2.4.1",
     "react-markdown": "^4.3.1",
     "react-merge-refs": "^1.1.0",
-    "react-popper-2": "npm:react-popper@^2.2.3",
+    "react-popper-2": "npm:react-popper@^2.3.0",
     "react-remove-scroll": "^2.2.0",
     "react-select": "^4.0.2",
     "react-spring": "^8.0.27",
-    "remark-breaks": "^2.0.2",
-    "toasted-notes": "^3.2.0"
+    "remark-breaks": "^2.0.2"
   },
   "scripts": {
     "prepublishOnly": "yarn run build",
@@ -63,8 +62,8 @@
     "build:copy-svg": "copyfiles -u 1 src/**/*.svg public/",
     "build:copy-style-dictionary": "copyfiles src/style-dictionary/dist/* src/style-dictionary/tailwind.config.js public/",
     "minify:css": "csso public/css/styles.css --output public/css/styles.min.css --comments none --source-map file",
-    "storybook": "yarn run build && start-storybook --docs -p 9002 -c .storybook -s .storybook",
-    "build-storybook": "yarn run build && build-storybook --docs -c .storybook -s .storybook -o storybook-static",
+    "storybook": "yarn run build && storybook dev --docs -p 9002 -c .storybook -s .storybook",
+    "build-storybook": "yarn run build && storybook build --docs -c .storybook -s .storybook -o storybook-static",
     "style-dictionary:build": "style-dictionary build --config ./style-dictionary.config.js",
     "style-dictionary:clean": "style-dictionary clean --config ./style-dictionary.config.js",
     "generate": "plop",
@@ -112,13 +111,15 @@
     "@babel/preset-typescript": "^7.7.2",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/addon-mdx-gfm": "^7.6.3",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/theming": "^7.6.3",
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.91",
     "@types/d3-ease": "^1.0.9",
@@ -129,15 +130,15 @@
     "@types/md5": "^2.2.1",
     "@types/mime-types": "^2.1.0",
     "@types/node": "^12.12.6",
-    "@types/react": "^16.9.11",
+    "@types/react": "^18.2.38",
     "@types/react-datepicker": "^3.1.0",
-    "@types/react-dom": "^16.9.4",
+    "@types/react-dom": "^18.2.17",
     "@types/react-fontawesome": "^1.6.4",
-    "@types/react-select": "^3.0.8",
+    "@types/react-select": "^4.0.2",
     "@types/tailwindcss": "^3.0.1",
-    "@types/webpack": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@types/webpack": "^5.28.5",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "^2.0.0",
@@ -154,6 +155,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^8.1.0",
     "husky": "^3.1.0",
     "lodash.camelcase": "^4.3.0",
@@ -162,22 +164,24 @@
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "prettier": "^2.2.1",
-    "react": "^16.11.0",
+    "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^16.11.0",
-    "react-is": "^16.12.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "regenerator-runtime": "^0.13.3",
+    "remark-gfm": "^4.0.0",
     "semantic-release": "^19.0.2",
+    "storybook": "^7.6.3",
     "style-dictionary": "^3.1.1",
     "tailwindcss": "^3.0.23",
     "ts-loader": "^6.2.1",
-    "typescript": "^4.2.3",
-    "webpack": "^5.0.0",
+    "typescript": "^5.3.2",
+    "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "peerDependencies": {
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "browserslist": [
     ">0.2%",

package/public/components/Absolute/Absolute.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { BoxProps } from "../Box";
-export declare const Absolute: (props: BoxProps) => JSX.Element;
+export declare const Absolute: (props: BoxProps) => React.JSX.Element;

package/public/components/Absolute/Absolute.js

@@ -9,6 +9,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
 const Absolute = (props) => {
     const { className, ...rest } = props;
-    return react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default("absolute", className) }, rest));
+    return react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)("absolute", className), ...rest });
 };
 exports.Absolute = Absolute;

package/public/components/Accordion/Accordion.d.ts

@@ -3,49 +3,47 @@ import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
 import { IconProps } from "../Icon";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
-declare type AccordionGroupChildProps = {
+type AccordionGroupChildProps = {
     currentValue: string;
 };
-declare type AccordionGroupChildFunction = {
+type AccordionGroupChildFunction = {
     children(props: AccordionGroupChildProps): React.ReactElement;
 };
-declare type AccordionGroupChildrenUnionType = AccordionGroupChildFunction | {
+type AccordionGroupChildrenUnionType = AccordionGroupChildFunction | {
     children: React.ReactNode;
 };
-export declare type AccordionGroupProps = AccordionGroupOwnProps & AccordionGroupChildrenUnionType & Pick<StackProps, "spacing" | "className">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => JSX.Element;
-export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
-export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
-declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
-declare type AccordionButtonChildFunction = {
-    children(props: AccordionButtonChildProps): React.ReactElement;
+export type AccordionGroupProps = AccordionGroupOwnProps & AccordionGroupChildrenUnionType & Pick<StackProps, "spacing" | "className">;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => React.JSX.Element;
+export type AccordionItemProps = AccordionItemOwnProps & BoxProps;
+export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => React.JSX.Element;
+type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
+declare type AccordionButtonOwnProps = {
+    children: React.ReactNode | ((props: AccordionButtonChildProps) => React.ReactNode);
 };
-declare type AccordionButtonOwnProps = AccordionButtonChildFunction | {
-    children: React.ReactNode;
-};
-export declare type AccordionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & AccordionButtonOwnProps;
+export interface AccordionButtonProps extends AccordionButtonOwnProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+}
 export declare const AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export declare type AccordionIconProps = {
+export type AccordionIconProps = {
     className?: string;
     direction?: "up" | "down" | "left" | "right";
     disabled?: boolean;
 } & Pick<IconProps, "color">;
-export declare const AccordionIcon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
-export declare type AccordionContentProps = {
+export declare const AccordionIcon: ({ className, direction, color, disabled, }: AccordionIconProps) => React.JSX.Element;
+export type AccordionContentProps = {
     children: React.ReactNode;
     maxHeight?: string;
     style?: React.CSSProperties;
     className?: string;
     scrollClassName?: string;
 };
-export declare const AccordionContent: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
-export declare type AccordionProps = AccordionOwnProps & BoxProps;
+export declare const AccordionContent: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => React.JSX.Element;
+export type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
-    (props: AccordionProps): JSX.Element;
-    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => JSX.Element;
-    Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
+    (props: AccordionProps): React.JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => React.JSX.Element;
+    Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => React.JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    Icon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
-    Content: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
+    Icon: ({ className, direction, color, disabled, }: AccordionIconProps) => React.JSX.Element;
+    Content: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => React.JSX.Element;
 };
 export {};

package/public/components/Accordion/Accordion.js

@@ -1,14 +1,36 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = exports.AccordionContent = exports.AccordionIcon = exports.AccordionButton = exports.AccordionItem = exports.AccordionGroup = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const renderprops_1 = require("react-spring/renderprops");
+const web_1 = require("@react-spring/web");
 const component_size_1 = __importDefault(require("@rehooks/component-size"));
-const auto_id_1 = require("@reach/auto-id");
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const utilities_1 = require("../../utilities");
 const hooks_1 = require("../../hooks");
@@ -19,7 +41,7 @@ const Stack_1 = require("../Stack");
 const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
 const context_1 = require("./context");
-const cn = utilities_1.bemHOF("Accordion");
+const cn = (0, utilities_1.bemHOF)("Accordion");
 const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, allowMultiple = true, allowToggle = true, className, ...rest }) => {
     const totalItems = react_1.default.Children.count(children);
     const [currentValue, setCurrentValue] = react_1.default.useState(defaultValue || "");
@@ -40,17 +62,17 @@ const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation,
         allowToggle,
     ]);
     return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: context },
-        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), typeof children === "function" ? children({ currentValue }) : children)));
+        react_1.default.createElement(Stack_1.Stack, { orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className, ...rest }, typeof children === "function" ? children({ currentValue }) : children)));
 };
 exports.AccordionGroup = AccordionGroup;
 const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
-    const { defaultValue, currentValue, setCurrentValue, allowMultiple, allowToggle, } = context_1.useAccordionGroupContext();
+    const { defaultValue, currentValue, setCurrentValue, allowMultiple, allowToggle, } = (0, context_1.useAccordionGroupContext)();
     const hasDefaultValue = typeof defaultValue === "undefined" ? false : defaultValue === value;
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
         : defaultIsOpenProp;
-    const { isOpen, onToggle, onClose, onOpen } = hooks_1.useDisclosure(defaultIsOpen);
-    const id = `accordion-${auto_id_1.useId()}`;
+    const { isOpen, onToggle, onClose, onOpen } = (0, hooks_1.useDisclosure)(defaultIsOpen);
+    const id = `accordion-${(0, react_1.useId)()}`;
     const buttonId = `${id}-button`;
     const contentId = `${id}-content`;
     const context = react_1.default.useMemo(() => ({
@@ -86,17 +108,17 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
         }
     }, [allowMultiple, currentValue, value, onClose]);
     return (react_1.default.createElement(context_1.AccordionItemContext.Provider, { value: context },
-        react_1.default.createElement(Box_1.Box, Object.assign({ "data-component": "accordion", className: classnames_1.default(cn(), className, {
+        react_1.default.createElement(Box_1.Box, { "data-component": "accordion", className: (0, classnames_1.default)(cn(), className, {
                 [cn({ m: "isOpen" })]: isOpen,
-            }) }, rest), children)));
+            }), ...rest }, children)));
 };
 exports.AccordionItem = AccordionItem;
 exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const { children, className, onClick, disabled = false, ...rest } = props;
-    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, allowToggle, } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, allowToggle, } = (0, context_1.useAccordionItemContext)();
     const buttonRef = react_1.default.useRef(null);
-    const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
-    return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+    const ref = (0, react_merge_refs_1.default)([forwardedRef, buttonRef]);
+    return (react_1.default.createElement("button", { ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
             event.stopPropagation();
             if (onClick) {
                 onClick(event);
@@ -110,7 +132,7 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (onOpen && !allowToggle) {
                 onOpen();
             }
-        } }, rest), typeof children === "function"
+        }, ...rest }, typeof children === "function"
         ? children({ isOpen, onClose, onOpen })
         : children));
 });
@@ -121,44 +143,45 @@ const AccordionIcon = ({ className, direction = "down", color, disabled = false,
         left: Icon_1.ICON_TYPE.CHEVRON_LEFT,
         right: Icon_1.ICON_TYPE.CHEVRON_RIGHT,
     };
-    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": disabled ? undefined : direction, icon: icon[direction], color: color }));
+    return (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)([cn({ e: "icon" }), className]), "data-direction": disabled ? undefined : direction, icon: icon[direction], color: color }));
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {
-    const { disableAnimation } = context_1.useAccordionGroupContext();
-    const { buttonId, contentId, defaultIsOpen, isOpen, } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, defaultIsOpen, isOpen, } = (0, context_1.useAccordionItemContext)();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
     const onRefChange = react_1.default.useCallback((node) => {
         if (node !== null) {
             setChildrenRef({ current: node });
         }
     }, []);
-    const { height } = component_size_1.default(childrenRef);
-    const heightObj = { height };
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0, opacity: 0 }, enter: { height, opacity: 1 }, leave: { height: 0, opacity: 0 }, update: heightObj, onRest: () => {
+    const { height: componentHeight } = (0, component_size_1.default)(childrenRef);
+    const { height } = (0, web_1.useSpring)({
+        height: isOpen ? componentHeight : 0,
+        immediate: !enableTransition,
+        onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
-        }, immediate: disableAnimation || !enableTransition }, (show) => show
-        ? (styles) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default("overflow-hidden box-content", className), style: { ...styles, ...style }, "aria-labelledby": buttonId, id: contentId, role: "region" }, rest),
-            react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: classnames_1.default(maxHeight && "overflow-y-auto", scrollClassName), style: maxHeight ? { maxHeight } : undefined }, children)))
-        : null));
+        },
+    });
+    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, height }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
+        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)));
 };
 exports.AccordionContent = AccordionContent;
 const Accordion = (props) => {
     const { title, isActive, maxHeight, children, iconSlot, className, removePadding, ...rest } = props;
-    return (react_1.default.createElement(exports.AccordionItem, Object.assign({ className: className }, rest),
+    return (react_1.default.createElement(exports.AccordionItem, { className: className, ...rest },
         react_1.default.createElement(Heading_1.Heading.H5, null,
-            react_1.default.createElement(exports.AccordionButton, { className: classnames_1.default(cn({ e: "button" }), {
+            react_1.default.createElement(exports.AccordionButton, { className: (0, classnames_1.default)(cn({ e: "button" }), {
                     [cn({ e: "button", m: "isActive" })]: isActive,
                 }) },
                 react_1.default.createElement(Flex_1.Flex, { className: "items-center", as: "span" },
-                    iconSlot && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "iconSlot" })), as: "span" }, iconSlot)),
+                    iconSlot && (react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn({ e: "iconSlot" })), as: "span" }, iconSlot)),
                     title),
                 react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CHEVRON_DOWN, className: cn({ e: "chevronIcon" }) }))),
         react_1.default.createElement(exports.AccordionContent, { className: cn({ e: "content" }), maxHeight: maxHeight },
-            react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "children" }), !removePadding && cn({ e: "children", m: "padded" })) }, children))));
+            react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn({ e: "children" }), !removePadding && cn({ e: "children", m: "padded" })) }, children))));
 };
 exports.Accordion = Accordion;
 exports.Accordion.Group = exports.AccordionGroup;

package/public/components/Accordion/context.d.ts

@@ -1,13 +1,13 @@
 import { Context } from "react";
 import type { AccordionGroupOwnProps, AccordionItemOwnProps, AccordionDisclosureProps } from "./types";
-declare type AccordionGroupContextType = {
+type AccordionGroupContextType = {
     totalItems?: number;
     currentValue?: string;
     setCurrentValue?(value: string): void;
 } & AccordionGroupOwnProps;
 export declare const AccordionGroupContext: Context<AccordionGroupContextType>;
 export declare function useAccordionGroupContext(): AccordionGroupContextType;
-declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
+type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
     buttonId: string;
     contentId: string;
     currentValue?: string;

package/public/components/Accordion/context.js

@@ -11,9 +11,9 @@ const defaultGroupContext = {
     allowMultiple: true,
     allowToggle: true,
 };
-exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
+exports.AccordionGroupContext = (0, react_1.createContext)(defaultGroupContext);
 function useAccordionGroupContext() {
-    const context = react_1.useContext(exports.AccordionGroupContext) || {
+    const context = (0, react_1.useContext)(exports.AccordionGroupContext) || {
         ...defaultGroupContext,
     };
     return context;
@@ -32,9 +32,9 @@ const defaultContext = {
     allowMultiple: true,
     allowToggle: true,
 };
-exports.AccordionItemContext = react_1.createContext(defaultContext);
+exports.AccordionItemContext = (0, react_1.createContext)(defaultContext);
 function useAccordionItemContext() {
-    const context = react_1.useContext(exports.AccordionItemContext) || {
+    const context = (0, react_1.useContext)(exports.AccordionItemContext) || {
         ...defaultContext,
     };
     return context;

package/public/components/Accordion/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/public/components/Accordion/types.d.ts

@@ -1,20 +1,20 @@
 import type { ReactNode } from "react";
 import type { DisclosureProps } from "../../types";
-export declare type AccordionGroupOwnProps = {
+export type AccordionGroupOwnProps = {
     defaultValue?: string;
     disableAnimation?: boolean;
     allowMultiple?: boolean;
     allowToggle?: boolean;
 };
-export declare type AccordionItemOwnProps = {
+export type AccordionItemOwnProps = {
     defaultIsOpen?: boolean;
     value?: string;
 };
-export declare type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOpen"> & {
+export type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOpen"> & {
     title: string;
     isActive?: boolean;
     maxHeight?: string;
     iconSlot?: ReactNode;
     removePadding?: ReactNode;
 };
-export declare type AccordionDisclosureProps = DisclosureProps;
+export type AccordionDisclosureProps = DisclosureProps;

package/public/components/Appbar/Appbar.d.ts

@@ -2,9 +2,9 @@ import React, { ReactNode } from "react";
 import { COMPLY_COMPANY_NAME, PRODUCT_ID } from "../../types";
 import { BoxProps } from "../Box";
 import { LinkProps } from "../Link";
-declare type NavComponent = ReactNode;
-declare type UserComponent = ReactNode;
-declare type OrganizationComponent = ReactNode;
+type NavComponent = ReactNode;
+type UserComponent = ReactNode;
+type OrganizationComponent = ReactNode;
 export interface AppbarProps extends BoxProps {
     company?: COMPLY_COMPANY_NAME;
     currentProduct?: PRODUCT_ID;
@@ -16,9 +16,9 @@ export interface AppbarProps extends BoxProps {
     isProductMenuDisabled?: boolean;
 }
 export declare const Appbar: {
-    (props: AppbarProps): JSX.Element;
-    Tabs: (props: BoxProps) => JSX.Element;
-    Tab: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<{
+    (props: AppbarProps): React.JSX.Element;
+    Tabs: (props: BoxProps) => React.JSX.Element;
+    Tab: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<{
         children: React.ReactNode;
         as?: any;
         active?: boolean | undefined;
@@ -26,28 +26,28 @@ export declare const Appbar: {
     User: ({ name, avatar }: {
         avatar: React.ReactElement<import("../Avatar").AvatarProps, string | React.JSXElementConstructor<any>>;
         name?: string | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     UserDropdown: ({ name, avatar, children, onClose, }: {
         avatar: React.ReactElement<import("../Avatar").AvatarProps, string | React.JSXElementConstructor<any>>;
         children: React.ReactNode;
         name?: string | undefined;
         onClose?: (() => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     UserDropdownMenu: ({ children, }: {
         children: React.ReactNode;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     UserDropdownMenuItem: ({ children, onClick, as, className, ...rest }: {
         [key: string]: any;
         as?: any;
         onClick?: (() => void) | undefined;
         selected?: boolean | undefined;
-    }) => JSX.Element;
-    LogInButton: (props: LinkProps) => JSX.Element;
-    ClaimProfileButton: ({ onClick }: import("../Button").ButtonProps) => JSX.Element;
+    }) => React.JSX.Element;
+    LogInButton: (props: LinkProps) => React.JSX.Element;
+    ClaimProfileButton: ({ onClick }: import("../Button").ButtonProps) => React.JSX.Element;
     Organizations: ({ children, className, }: {
         children: React.ReactNode;
         className?: string | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     Organization: ({ name, status, logoSrc, hideLogo, onClick, className, }: {
         name: string;
         status?: ("claimed" | "unclaimed" | "pending") | undefined;
@@ -55,7 +55,7 @@ export declare const Appbar: {
         hideLogo?: boolean | undefined;
         onClick?: (() => void) | undefined;
         className?: string | undefined;
-    }) => JSX.Element;
-    UserAvatar: (props: import("../Avatar").AvatarProps) => JSX.Element;
+    }) => React.JSX.Element;
+    UserAvatar: (props: import("../Avatar").AvatarProps) => React.JSX.Element;
 };
 export {};

package/public/components/Appbar/Appbar.js

@@ -21,8 +21,8 @@ const context_1 = require("./context");
 const Appbar = (props) => {
     const { company = types_1.COMPLY_COMPANY_NAME.CONVEYOR, logoProps, nav, user, organization, currentProduct, className, isDemoEnvironment, isProductMenuDisabled, ...rest } = props;
     return (react_1.default.createElement(context_1.AppbarContext.Provider, { value: { company } },
-        react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(config_1.cn(), className, { isDemoEnvironment }) }, rest),
-            react_1.default.createElement(AppbarLogo_1.AppbarLogo, Object.assign({}, logoProps)),
+        react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, config_1.cn)(), className, { isDemoEnvironment }), ...rest },
+            react_1.default.createElement(AppbarLogo_1.AppbarLogo, { ...logoProps }),
             currentProduct && (react_1.default.createElement(AppbarProductMenu_1.AppbarProductMenu, { currentProductId: currentProduct, disabled: isProductMenuDisabled })),
             nav,
             (organization || user) && (react_1.default.createElement(Box_1.Box, { className: "h-full ml-auto mr-3" },

package/public/components/Appbar/AppbarClaimProfileButton.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { ButtonProps } from "../Button";
-export declare const AppbarClaimProfileButton: ({ onClick }: ButtonProps) => JSX.Element;
+export declare const AppbarClaimProfileButton: ({ onClick }: ButtonProps) => React.JSX.Element;

package/public/components/Appbar/AppbarDropdownIcon.d.ts

@@ -1 +1,2 @@
-export declare const AppbarDropdownIcon: () => JSX.Element;
+import React from "react";
+export declare const AppbarDropdownIcon: () => React.JSX.Element;

package/public/components/Appbar/AppbarLogInButton.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { LinkProps } from "../Link";
-export declare const AppbarLogInButton: (props: LinkProps) => JSX.Element;
+export declare const AppbarLogInButton: (props: LinkProps) => React.JSX.Element;

package/public/components/Appbar/AppbarLogInButton.js

@@ -9,7 +9,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const Link_1 = require("../Link");
 const AppbarLogInButton = (props) => {
     const { onClick, href, ...rest } = props;
-    return (react_1.default.createElement(Link_1.Link, Object.assign({ className: classnames_1.default([
+    return (react_1.default.createElement(Link_1.Link, { className: (0, classnames_1.default)([
             "py-1",
             "px-2",
             "text-gray-500",
@@ -20,6 +20,6 @@ const AppbarLogInButton = (props) => {
             "hover:text-white",
             "focus:text-white",
             "focus:bg-gray-800",
-        ]), noStyles: true }, rest), "Log in"));
+        ]), noStyles: true, ...rest }, "Log in"));
 };
 exports.AppbarLogInButton = AppbarLogInButton;

package/public/components/Appbar/AppbarLogo.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { LinkProps } from "../Link";
-export declare const AppbarLogo: (props: LinkProps) => JSX.Element;
+export declare const AppbarLogo: (props: LinkProps) => React.JSX.Element;

package/public/components/Appbar/AppbarLogo.js

@@ -14,7 +14,7 @@ const config_1 = require("./config");
 const context_1 = require("./context");
 const types_1 = require("../../types");
 const AppbarLogo = (props) => {
-    const { company } = context_1.useAppbarContext();
+    const { company } = (0, context_1.useAppbarContext)();
     const { href, onClick, className, noStyles, ...rest } = props;
     const logo = () => {
         switch (company) {
@@ -26,6 +26,6 @@ const AppbarLogo = (props) => {
                 return react_1.default.createElement(ConveyorLogo_1.ConveyorLogo, { theme: types_1.THEME.BRAND, height: 20 });
         }
     };
-    return (react_1.default.createElement(Flex_1.Flex, { className: config_1.cn({ e: "logo" }) }, href || onClick ? (react_1.default.createElement(Link_1.Link, Object.assign({ className: classnames_1.default(config_1.cn({ e: "logoLink" }), className), href: href, onClick: onClick, noStyles: true }, rest), logo())) : (react_1.default.createElement(react_1.default.Fragment, null, logo()))));
+    return (react_1.default.createElement(Flex_1.Flex, { className: (0, config_1.cn)({ e: "logo" }) }, href || onClick ? (react_1.default.createElement(Link_1.Link, { className: (0, classnames_1.default)((0, config_1.cn)({ e: "logoLink" }), className), href: href, onClick: onClick, noStyles: true, ...rest }, logo())) : (react_1.default.createElement(react_1.default.Fragment, null, logo()))));
 };
 exports.AppbarLogo = AppbarLogo;