@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -25,7 +25,6 @@
     "@popperjs/core": "^2.4.2",
     "@reach/auto-id": "^0.6.1",
     "@reach/portal": "^0.6.1",
-    "@react-spring/web": "^9.4.2",
     "@rehooks/component-size": "^1.0.3",
     "@types/date-fns": "^2.6.0",
     "classnames": "^2.2.6",
@@ -57,7 +56,7 @@
     "build:css": "yarn run postcss -c postcss.config.js -o public/css/styles.css src/css/styles.css",
     "build:copy-files": "yarn run build:copy-svg && yarn run build:copy-style-dictionary",
     "build:copy-svg": "copyfiles -u 1 src/**/*.svg public/",
-    "build:copy-style-dictionary": "copyfiles style-dictionary/**/* style-dictionary/tailwind.config.js 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",
@@ -103,13 +102,15 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.2",
-    "@commitlint/cli": "^13.0.0",
-    "@commitlint/config-conventional": "^13.0.0",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-docs": "^6.4.8",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@storybook/addon-actions": "^v6.5.0-alpha.44",
+    "@storybook/addon-docs": "^v6.5.0-alpha.44",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.4.8",
-    "@storybook/theming": "^6.4.8",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^v6.5.0-alpha.44",
+    "@storybook/theming": "^v6.5.0-alpha.44",
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.91",
     "@types/d3-ease": "^1.0.9",
@@ -132,14 +133,14 @@
     "babel-plugin-inline-react-svg": "^2.0.0",
     "copyfiles": "^2.4.1",
     "csso-cli": "^3.0.0",
-    "eslint": "^7.22.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-formatter-pretty": "^4.0.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mdx": "^1.11.1",
+    "eslint-plugin-mdx": "^1.16.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -147,7 +148,7 @@
     "husky": "^3.1.0",
     "lodash.camelcase": "^4.3.0",
     "plop": "^2.5.3",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.7",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "prettier": "^2.2.1",
@@ -156,9 +157,9 @@
     "react-dom": "^16.11.0",
     "react-is": "^16.12.0",
     "regenerator-runtime": "^0.13.3",
-    "semantic-release": "^18.0.1",
+    "semantic-release": "^19.0.2",
     "style-dictionary": "^3.1.1",
-    "tailwindcss": "^3.0.7",
+    "tailwindcss": "^3.0.23",
     "ts-loader": "^6.2.1",
     "typescript": "^4.2.3",
     "webpack": "^5.0.0",

package/public/components/Accordion/Accordion.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = exports.AccordionContent = exports.AccordionButton = exports.AccordionItem = exports.AccordionGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const web_1 = require("@react-spring/web");
+const renderprops_1 = require("react-spring/renderprops");
 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"));
@@ -69,19 +69,17 @@ const AccordionContent = ({ children, maxHeight, style, className, ...rest }) =>
             setChildrenRef({ current: node });
         }
     }, []);
-    const { height: componentHeight } = component_size_1.default(childrenRef);
+    const { height } = component_size_1.default(childrenRef);
+    const heightObj = { height };
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    const { height } = web_1.useSpring({
-        height: isOpen ? componentHeight : 0,
-        immediate: !enableTransition,
-        onRest: () => {
+    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0 }, enter: { height }, leave: { height: 0 }, update: heightObj, onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
-        },
-    });
-    return (react_1.default.createElement(web_1.animated.div, Object.assign({ className: 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: classnames_1.default(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)));
+        }, immediate: !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"), style: maxHeight ? { maxHeight } : undefined }, children)))
+        : null));
 };
 exports.AccordionContent = AccordionContent;
 const Accordion = (props) => {

package/public/components/Avatar/Avatar.js

@@ -27,7 +27,7 @@ const react_1 = __importStar(require("react"));
 const md5_1 = __importDefault(require("md5"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Box_1 = require("../Box");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
@@ -39,35 +39,36 @@ const AvatarGroup_1 = require("./AvatarGroup");
 const types_1 = require("./types");
 const context_1 = require("./context");
 const cn = bem_1.bemHOF("Avatar");
+const { color } = tokens_1.tokens;
 const SystemIcon = (props) => {
     return (react_1.default.createElement(Svg_1.Svg, Object.assign({ viewBox: "0 0 32 32" }, props),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
 };
 const SystemIconConveyor = (props) => (react_1.default.createElement(SystemIcon, Object.assign({}, props)));
 exports.SystemIconConveyor = SystemIconConveyor;
 const SystemIconAptible = (props) => (react_1.default.createElement(Svg_1.Svg, Object.assign({ viewBox: "0 0 40 32" }, props),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M22.018 31.667h5.646v-11.538l11.291 11.538v-7.692l-16.937-17.308z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M27.777 0h-7.452l18.631 18.333v-7.333l-11.178-11z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M0 23.974v7.692l11.291-11.538v11.538h5.646v-25l-16.937 17.308z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M0 11v7.333l18.631-18.333h-7.522l-11.109 11z" })));
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M22.018 31.667h5.646v-11.538l11.291 11.538v-7.692l-16.937-17.308z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M27.777 0h-7.452l18.631 18.333v-7.333l-11.178-11z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M0 23.974v7.692l11.291-11.538v11.538h5.646v-25l-16.937 17.308z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M0 11v7.333l18.631-18.333h-7.522l-11.109 11z" })));
 exports.SystemIconAptible = SystemIconAptible;
 const avatarInitialBackgroundColors = [
-    tokens_1.colors.green["600"],
-    tokens_1.colors.gold["600"],
-    tokens_1.colors.orange["600"],
-    tokens_1.colors.red["600"],
-    tokens_1.colors.pink["600"],
-    tokens_1.colors.purple["600"],
-    tokens_1.colors.blue["600"],
-    tokens_1.colors.cyan["600"],
+    color.green["600"],
+    color.gold["600"],
+    color.orange["600"],
+    color.red["600"],
+    color.pink["600"],
+    color.purple["600"],
+    color.blue["600"],
+    color.cyan["600"],
 ];
 const Initials = ({ email, name, firstInitial, lastInitial, }) => {
     const initialsBgColor = react_1.useMemo(() => {
-        const fallbackColor = tokens_1.colors.gray["600"];
+        const fallbackColor = color.gray["600"];
         if (!email)
             return fallbackColor;
         let hash = 0;

package/public/components/Button/Button.js

@@ -69,7 +69,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
     const isDisabled = disabled || isLoading;
     const themeContext = react_1.useContext(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
-    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block ? ["flex", "w-full"] : "inline-flex", getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled ? ["opacity-50", "pointer-events-none"] : "", className);
+    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block && bem_1.bem(cn, { m: "block" }), getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled && bem_1.bem(cn, { m: "disabled" }), className);
     const iconClassNames = classnames_1.default(bem_1.bem(cn, { e: "icon" }), children && bem_1.bem(cn, { e: "icon", m: iconPosition }), isLoading && bem_1.bem(cn, { e: "icon", m: "invisible" }));
     const iconProps = icon
         ? {
@@ -85,7 +85,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
-    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: disabled, ref: ref }, propsIfLink, rest),
+    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: isDisabled, ref: ref }, propsIfLink, rest),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),
         react_1.default.createElement("span", { className: classnames_1.default(bem_1.bem(cn, { e: "content" }), isLoading && bem_1.bem(cn, { e: "content", m: "invisible" })) }, children),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),

package/public/components/ConveyorLogo/ConveyorLogo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConveyorLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../../types");
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Svg_1 = require("../Svg");
 const WIDTH = 165;
 const HEIGHT = 32;
@@ -14,17 +14,17 @@ const RATIO = WIDTH / HEIGHT;
 const widthFromHeight = (height) => Math.ceil(height * RATIO);
 const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THEME.PRODUCT, variant = "wordmark", className, ...rest }) => {
     const wordmarkColor = {
-        brand: tokens_1.colors.white,
-        product: tokens_1.colors.conveyor.black,
+        brand: tokens_1.tokens.color.white,
+        product: tokens_1.tokens.color.brandBlack,
     };
     const iconColorFunction = () => {
         if (monochrome && theme === types_1.THEME.PRODUCT) {
-            return tokens_1.colors.conveyor.black;
+            return tokens_1.tokens.color.brandBlack;
         }
         if (monochrome && theme === types_1.THEME.BRAND) {
-            return tokens_1.colors.white;
+            return tokens_1.tokens.color.white;
         }
-        return tokens_1.colors.brandGreen[400];
+        return tokens_1.tokens.color.brandGreen[400];
     };
     const iconColor = iconColorFunction();
     return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32", className: className }, rest),

package/public/components/Drawer/Drawer.js

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = exports.WithDrawer = void 0;
 const react_1 = __importStar(require("react"));
-const web_1 = require("@react-spring/web");
+const react_spring_1 = require("react-spring");
 const classnames_1 = __importDefault(require("classnames"));
 const d3_ease_1 = require("d3-ease");
 const bem_1 = require("../../utilities/bem");
@@ -45,7 +45,7 @@ const calculateTransformValue = (isOpen, drawerOnRight, drawerWidth) => {
 const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSlotBottom, scrollableSlot, drawerSide = "left", noAnimation = false, drawerWidth = DEFAULT_DRAWER_WIDTH, }) => {
     const drawerOnRight = drawerSide === "right";
     const [isClosedAtRest, setIsClosedAtRest] = react_1.useState(false);
-    const { transform, paddingLeft, paddingRight } = web_1.useSpring({
+    const { transform, paddingLeft, paddingRight } = react_spring_1.useSpring({
         transform: calculateTransformValue(isOpen, drawerOnRight, drawerWidth),
         paddingLeft: isOpen && !drawerOnRight ? drawerWidth : 0,
         paddingRight: isOpen && drawerOnRight ? drawerWidth : 0,
@@ -63,7 +63,7 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
             easing: d3_ease_1.easeCubicInOut,
         },
     });
-    const { transform: transformReverse } = web_1.useSpring({
+    const { transform: transformReverse } = react_spring_1.useSpring({
         transform: isOpen && !drawerOnRight
             ? `translateX(${drawerWidth}px)`
             : "translateX(0px)",
@@ -79,16 +79,16 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
         react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn(), {
                 [cn({ m: "isOpen" })]: isOpen,
             }) },
-            react_1.default.createElement(web_1.animated.div, { className: classnames_1.default(cn({ e: "wrapper" }), { drawerOnRight }), style: wrapperCombinedStyle }, drawerSlot),
+            react_1.default.createElement(react_spring_1.animated.div, { className: classnames_1.default(cn({ e: "wrapper" }), { drawerOnRight }), style: wrapperCombinedStyle }, drawerSlot),
             react_1.default.createElement(Flex_1.Flex, { className: classnames_1.default(cn({ e: "onScreenContent" }), {
                     drawerOnRight,
                 }) },
-                fixedSlotTop && (react_1.default.createElement(web_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotTop)),
-                scrollableSlot && (react_1.default.createElement(web_1.animated.div, { style: {
+                fixedSlotTop && (react_1.default.createElement(react_spring_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotTop)),
+                scrollableSlot && (react_1.default.createElement(react_spring_1.animated.div, { style: {
                         transform: transformReverse,
                         width: scrollableSlotPaddingToInterpolate.interpolate((w) => `calc(100% - ${w}px)`),
                     }, className: cn({ e: "scrollableSlot" }) }, scrollableSlot)),
-                fixedSlotBottom && (react_1.default.createElement(web_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
+                fixedSlotBottom && (react_1.default.createElement(react_spring_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
 };
 exports.WithDrawer = WithDrawer;
 const Drawer = ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }) => {

package/public/components/Frame/Frame.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-declare type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";
+declare type FrameAreaName = "navbar" | "appbar" | "topbar" | "main" | "bottombar";
 interface FrameProps {
     children: ReactNode;
 }

package/public/components/Icon/Icon.d.ts

@@ -107,6 +107,7 @@ export declare enum ICON_TYPE {
     THUMBS_DOWN = "thumbs-down",
     THUMBS_UP = "thumbs-up",
     TRASH = "trash",
+    UNLOCK = "unlock",
     USER = "user",
     USER_ASTRONAUT = "user-astronaut",
     USER_PLUS = "user-plus",

package/public/components/Icon/Icon.js

@@ -132,6 +132,7 @@ const faThumbsUp_2 = require("@fortawesome/free-solid-svg-icons/faThumbsUp");
 const faTicketAlt_1 = require("@fortawesome/free-solid-svg-icons/faTicketAlt");
 const faTimes_1 = require("@fortawesome/free-solid-svg-icons/faTimes");
 const faTrash_1 = require("@fortawesome/free-solid-svg-icons/faTrash");
+const faUnlock_1 = require("@fortawesome/free-solid-svg-icons/faUnlock");
 const faUser_2 = require("@fortawesome/free-solid-svg-icons/faUser");
 const faUserAstronaut_1 = require("@fortawesome/free-solid-svg-icons/faUserAstronaut");
 const faUserPlus_1 = require("@fortawesome/free-solid-svg-icons/faUserPlus");
@@ -142,7 +143,7 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -260,6 +261,7 @@ var ICON_TYPE;
     ICON_TYPE["THUMBS_DOWN"] = "thumbs-down";
     ICON_TYPE["THUMBS_UP"] = "thumbs-up";
     ICON_TYPE["TRASH"] = "trash";
+    ICON_TYPE["UNLOCK"] = "unlock";
     ICON_TYPE["USER"] = "user";
     ICON_TYPE["USER_ASTRONAUT"] = "user-astronaut";
     ICON_TYPE["USER_PLUS"] = "user-plus";

package/public/components/MenuRenderer/MenuRenderer.js

@@ -27,7 +27,7 @@ const react_1 = __importStar(require("react"));
 const auto_id_1 = require("@reach/auto-id");
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 const react_popper_1 = require("react-popper");
-const web_1 = require("@react-spring/web");
+const react_spring_1 = require("react-spring");
 const d3_ease_1 = require("d3-ease");
 const hooks_1 = require("../../hooks");
 const types_1 = require("../../types");
@@ -128,7 +128,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
         }
     }, [children, update]);
     const PortalComponent = hasPortal ? Portal_1.Portal : react_1.Fragment;
-    const transitions = web_1.useTransition(isOpen, {
+    const transitions = react_spring_1.useTransition(isOpen, null, {
         from: TRANSITION_START,
         enter: TRANSITION_END,
         leave: TRANSITION_START,
@@ -139,14 +139,11 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
     });
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: className, ref: menuElement }, rest),
         react_1.default.createElement(Box_1.Box, { ref: setReferenceElement }, trigger(triggerProps, triggerState)),
-        transitions(({ opacity, transform }, item) => item && (react_1.default.createElement(PortalComponent, null,
+        transitions.map(({ item, key, props: transitionProps }) => item && (react_1.default.createElement(PortalComponent, { key: key },
             react_1.default.createElement(context_1.MenuContext.Provider, { value: context },
                 react_1.default.createElement(Box_1.Box, Object.assign({ className: hasPortal ? "z-toast" : "z-menu", ref: setPopperElement, style: { minWidth: `${minWidth}px`, ...styles.popper } }, attributes.popper),
                     react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus },
-                        react_1.default.createElement(web_1.animated.div, { style: {
-                                opacity,
-                                transform,
-                            }, ref: menuListElement }, typeof children === "function"
+                        react_1.default.createElement(react_spring_1.animated.div, { key: key, style: transitionProps, ref: menuListElement }, typeof children === "function"
                             ? children(renderProps)
                             : children)))))))));
 };

package/public/components/Modal/Modal.js

@@ -52,7 +52,7 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
         react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "buttonLabels" }) },
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "left" }) }, leftButtonLabel),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "right" }) }, rightButtonLabel)),
-        react_1.default.createElement(Box_1.Box, { className: "relative" },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "progressDots-container" }) },
             children,
             react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "progressDots" }) },
                 react_1.default.createElement(Stack_1.Stack, { spacing: 5 }, [...new Array(steps).keys()].map((dot, index) => (react_1.default.createElement(Box_1.Box, { key: dot, className: classnames_1.default([

package/public/components/OptionButton/OptionButton.js

@@ -16,7 +16,7 @@ const bem_1 = require("../../utilities/bem");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
 const types_1 = require("../../types");
 const context_1 = require("./context");
-const cn = "OptionButton";
+const cn = bem_1.bemHOF("OptionButton");
 const OptionButtonGroup = (props) => {
     const { name = "", type = "radio", orientation = types_1.ORIENTATION.VERTICAL, ...rest } = props;
     return (react_1.default.createElement(context_1.OptionButtonContext.Provider, { value: {
@@ -27,7 +27,7 @@ const OptionButtonGroup = (props) => {
 };
 exports.OptionButtonGroup = OptionButtonGroup;
 const OptionButtonRoot = ({ children, className, ...rest }) => {
-    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest), children));
+    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
 };
 exports.OptionButtonRoot = OptionButtonRoot;
 const OptionButtonInput = (props) => {
@@ -37,33 +37,38 @@ const OptionButtonInput = (props) => {
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
     const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
     const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
-    return (react_1.default.createElement(Input_1.Input, Object.assign({ id: id, name: name, type: type, checked: checked, className: classnames_1.default([bem_1.bem(cn, { e: "input" }), className]), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)));
+    return (react_1.default.createElement(Input_1.Input, Object.assign({ id: id, name: name, type: type, checked: checked, className: classnames_1.default([cn({ e: "input" }), className]), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)));
 };
 exports.OptionButtonInput = OptionButtonInput;
-const OptionButtonContent = ({ className, children, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "content" }), className]) }, rest), children));
+const OptionButtonContent = ({ className, children, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "content" }), className]) }, rest), children));
 exports.OptionButtonContent = OptionButtonContent;
-const OptionButtonHeading = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([bem_1.bem(cn, { e: "heading" }), className]) }, rest), children));
+const OptionButtonHeading = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "heading" }), className]) }, rest), children));
 exports.OptionButtonHeading = OptionButtonHeading;
-const OptionButtonDescription = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([bem_1.bem(cn, { e: "description" }), className]) }, rest), children));
+const OptionButtonDescription = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "description" }), className]) }, rest), children));
 exports.OptionButtonDescription = OptionButtonDescription;
-const OptionButtonBackdrop = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "backdrop" }), className]) }, rest)));
+const OptionButtonBackdrop = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "backdrop" }), className]) }, rest)));
 exports.OptionButtonBackdrop = OptionButtonBackdrop;
-const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "selected" }), className]) }, rest),
-    react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
+const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "selected" }), className]) }, rest),
+    react_1.default.createElement(Icon_1.Icon, { className: cn({ e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
     "Selected"));
 exports.OptionButtonSelectedIcon = OptionButtonSelectedIcon;
 const OptionButton = (props) => {
     const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
-    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", ...rest } = props;
-    const fallbackId = `OptionButton:${auto_id_1.useId()}`;
+    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", disabled = false, ...rest } = props;
+    const fallbackId = `OptionButton-${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
     const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
     const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
-    return (react_1.default.createElement(exports.OptionButtonRoot, { className: classnames_1.default(bem_1.bem(cn), className) },
+    const rootClassName = classnames_1.default([
+        cn(),
+        disabled && cn({ m: "disabled" }),
+        className,
+    ]);
+    return (react_1.default.createElement(exports.OptionButtonRoot, { className: rootClassName },
         react_1.default.createElement(exports.OptionButtonContent, null,
             heading && react_1.default.createElement(exports.OptionButtonHeading, null, heading),
             description && (react_1.default.createElement(exports.OptionButtonDescription, null, description))),
-        react_1.default.createElement(exports.OptionButtonInput, Object.assign({ id: id, name: name, type: type, checked: checked, defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)),
+        react_1.default.createElement(exports.OptionButtonInput, Object.assign({ id: id, name: name, type: type, checked: checked, defaultValue: defaultValue, "aria-checked": checked ? "true" : "false", disabled: disabled }, rest)),
         react_1.default.createElement(exports.OptionButtonBackdrop, null),
         react_1.default.createElement(exports.OptionButtonSelectedIcon, null)));
 };

package/public/components/Select/Select.js

@@ -28,7 +28,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_select_1 = __importStar(require("react-select"));
 const creatable_1 = __importDefault(require("react-select/creatable"));
 const async_1 = __importDefault(require("react-select/async"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const Box_1 = require("../Box");
@@ -88,14 +88,14 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
             ...styles,
             menuPortal: (base) => ({
                 ...base,
-                zIndex: tokens_1.zIndex.max,
+                zIndex: tokens_1.tokens.zIndex.max,
             }),
             singleValue: (base, state) => {
                 return {
                     ...base,
                     paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
                     color: state.selectProps.menuIsOpen && state.selectProps.isSearchable
-                        ? tokens_1.colors.gray["600"]
+                        ? tokens_1.tokens.color.gray["600"]
                         : base.color,
                 };
             },
@@ -110,7 +110,7 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
         },
     };
 };
-const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, ...rest }) => {
+const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.tokens.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, ...rest }) => {
     const { variant: variantContext, id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;

package/public/components/Select/SelectPopover.js

@@ -26,7 +26,7 @@ exports.SelectPopover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const hooks_1 = require("../../hooks");
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
@@ -49,19 +49,19 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
     const selectStyles = {
         control: (provided) => ({
             ...provided,
-            width: `calc(100% - ${tokens_1.tokens.margin[6]})`,
-            margin: tokens_1.tokens.margin[3],
+            width: `calc(100% - ${tokens_1.tokens.spacing[6]})`,
+            margin: tokens_1.tokens.spacing[3],
         }),
         menu: (provided) => ({
             ...provided,
             boxShadow: "none !important",
             borderRadius: "0 !important",
             zIndex: "1 !important",
-            backgroundColor: tokens_1.tokens.colors.white,
+            backgroundColor: tokens_1.tokens.color.white,
             position: "relative",
-            marginTop: tokens_1.tokens.margin[3],
+            marginTop: tokens_1.tokens.spacing[3],
             marginBottom: 0,
-            borderTop: `1px solid ${tokens_1.tokens.colors.gray[300]}`,
+            borderTop: `1px solid ${tokens_1.tokens.color.gray[300]}`,
             maxHeight: "184px",
             overflowY: "auto",
         }),

package/public/components/Select/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type { MenuProps as ReactSelectMenuProps, GroupProps as ReactSelectGroupProps, InputProps as ReactSelectInputProps, OptionProps as ReactSelectOptionProps, ControlProps as ReactSelectControlProps, IndicatorProps as ReactSelectIndicatorProps, MultiValueProps as ReactSelectMultiValueProps, PlaceholderProps as ReactSelectPlaceholderProps, SingleValueProps as ReactSelectSingleValueProps, ValueContainerProps as ReactSelectValueContainerProps, MenuListComponentProps as ReactSelectMenuListComponentProps, } from "react-select";

package/public/components/Select/index.js

@@ -10,5 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectComponents = void 0;
 __exportStar(require("./Select"), exports);
 __exportStar(require("./SelectPopover"), exports);
+var react_select_1 = require("react-select");
+Object.defineProperty(exports, "ReactSelectComponents", { enumerable: true, get: function () { return react_select_1.components; } });

package/public/components/Select/theme.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adsTheme = void 0;
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const toNumber_1 = require("../../utilities/toNumber");
 exports.adsTheme = {
-    borderRadius: toNumber_1.toNumber(tokens_1.borderRadius.DEFAULT),
+    borderRadius: toNumber_1.toNumber(tokens_1.tokens.borderRadius.DEFAULT),
     colors: {
-        danger: tokens_1.colors.red["400"],
-        dangerLight: tokens_1.colors.red["300"],
-        neutral0: tokens_1.colors.white,
-        neutral5: tokens_1.colors.gray["100"],
-        neutral10: tokens_1.colors.gray["100"],
-        neutral20: tokens_1.colors.gray["200"],
-        neutral30: tokens_1.colors.gray["400"],
-        neutral40: tokens_1.colors.gray["500"],
-        neutral50: tokens_1.colors.gray["600"],
-        neutral60: tokens_1.colors.gray["700"],
-        neutral70: tokens_1.colors.gray["800"],
-        neutral80: tokens_1.colors.gray["900"],
-        neutral90: tokens_1.colors.gray["900"],
-        primary: tokens_1.colors.blue["500"],
-        primary25: tokens_1.colors.gray["300"],
-        primary50: tokens_1.colors.gray["300"],
-        primary75: tokens_1.colors.blue["400"],
+        danger: tokens_1.tokens.color.red["400"],
+        dangerLight: tokens_1.tokens.color.red["300"],
+        neutral0: tokens_1.tokens.color.white,
+        neutral5: tokens_1.tokens.color.gray["100"],
+        neutral10: tokens_1.tokens.color.gray["100"],
+        neutral20: tokens_1.tokens.color.gray["200"],
+        neutral30: tokens_1.tokens.color.gray["400"],
+        neutral40: tokens_1.tokens.color.gray["500"],
+        neutral50: tokens_1.tokens.color.gray["600"],
+        neutral60: tokens_1.tokens.color.gray["700"],
+        neutral70: tokens_1.tokens.color.gray["800"],
+        neutral80: tokens_1.tokens.color.gray["900"],
+        neutral90: tokens_1.tokens.color.gray["900"],
+        primary: tokens_1.tokens.color.blue["500"],
+        primary25: tokens_1.tokens.color.gray["300"],
+        primary50: tokens_1.tokens.color.gray["300"],
+        primary75: tokens_1.tokens.color.blue["400"],
     },
     spacing: {
-        baseUnit: toNumber_1.toNumber(tokens_1.margin["1"]),
-        controlHeight: toNumber_1.toNumber(tokens_1.height["10"]),
-        menuGutter: toNumber_1.toNumber(tokens_1.margin["1"]),
+        baseUnit: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
+        controlHeight: toNumber_1.toNumber(tokens_1.tokens.height["10"]),
+        menuGutter: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
     },
 };