@conveyorhq/arrow-ds 1.30.0 → 1.31.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -56,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 style-dictionary/dist/* 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",

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/Modal/Modal.js

@@ -28,7 +28,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 const react_remove_scroll_1 = require("react-remove-scroll");
 const Box_1 = require("../Box");
-const Fixed_1 = require("../Fixed");
 const Flex_1 = require("../Flex");
 const Portal_1 = require("../Portal");
 const Description_1 = require("../Description");
@@ -76,7 +75,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([
@@ -109,7 +108,7 @@ const Modal = (props) => {
         react_1.default.createElement(Portal_1.Portal, null,
             react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },
                 react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
-                    react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(`${cn}Container`) },
+                    react_1.default.createElement(Box_1.Box, { className: bem_1.bem(`${cn}Container`) },
                         react_1.default.createElement(Box_1.Box, Object.assign({ ref: modalElement, className: classnames_1.default([
                                 bem_1.bem(cn),
                                 bem_1.bem(cn, { m: size }),

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/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"]),
     },
 };

package/public/components/Svg/Svg.d.ts

@@ -1,3 +1,3 @@
-import { FunctionComponent, SVGAttributes } from "react";
-export declare type SvgProps = SVGAttributes<SVGElement>;
-export declare const Svg: FunctionComponent<SvgProps>;
+import React from "react";
+export declare type SvgProps = React.SVGAttributes<SVGElement>;
+export declare const Svg: React.ForwardRefExoticComponent<SvgProps & React.RefAttributes<SVGSVGElement>>;

package/public/components/Svg/Svg.js

@@ -5,5 +5,4 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Svg = void 0;
 const react_1 = __importDefault(require("react"));
-const Svg = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg" }, props)));
-exports.Svg = Svg;
+exports.Svg = react_1.default.forwardRef((props, forwardedRef) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", ref: forwardedRef }, props))));

package/public/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { BoxProps } from "../Box";
-export declare const VisuallyHidden: (props: BoxProps) => JSX.Element;
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<Pick<BoxProps, "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & React.RefAttributes<HTMLDivElement>>;

package/public/components/VisuallyHidden/VisuallyHidden.js

@@ -7,8 +7,6 @@ exports.VisuallyHidden = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
-const VisuallyHidden = (props) => {
-    const { className, ...rest } = props;
-    return react_1.default.createElement(Box_1.Box, Object.assign({}, rest, { className: classnames_1.default("visually-hidden", className) }));
-};
-exports.VisuallyHidden = VisuallyHidden;
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("VisuallyHidden");
+exports.VisuallyHidden = react_1.default.forwardRef(({ className, ...rest }, forwardedRef) => (react_1.default.createElement(Box_1.Box, Object.assign({ ref: forwardedRef, className: classnames_1.default(cn(), className) }, rest))));

package/public/css/styles.css

@@ -1815,6 +1815,7 @@ override built-in Image component classes */
 
 .ads-Button {
   position: relative;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-width: 1px;
@@ -1851,6 +1852,16 @@ override built-in Image component classes */
   margin: auto;
 }
 
+.ads-Button--block {
+  display: flex;
+  width: 100%;
+}
+
+.ads-Button--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 /* Button.Group */
 
 .ads-ButtonGroup {
@@ -4440,6 +4451,7 @@ override built-in Image component classes */
 }
 
 .ads-ModalContainer {
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 900;
@@ -4540,11 +4552,11 @@ override built-in Image component classes */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow-y: auto;
 
   max-height: calc(
     var(--modal-max-height) - 60px - 80px
   );
-  overflow-y: auto;
 }
 
 .ads-Modal-body--padded {
@@ -4554,6 +4566,10 @@ override built-in Image component classes */
   padding-bottom: 16px;
 }
 
+.ads-Modal-progressDots-container {
+  position: relative;
+}
+
 .ads-Modal-progressDots {
   pointer-events: none;
   position: absolute;
@@ -7675,6 +7691,18 @@ override built-in Image component classes */
   width: 35%;
 }
 
+.ads-VisuallyHidden {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -7728,6 +7756,10 @@ override built-in Image component classes */
   z-index: 800;
 }
 
+.z-modal {
+  z-index: 900;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -7932,6 +7964,10 @@ override built-in Image component classes */
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -8179,6 +8215,10 @@ override built-in Image component classes */
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8236,6 +8276,22 @@ override built-in Image component classes */
   border-bottom-right-radius: 0;
 }
 
+.rounded-tr {
+  border-top-right-radius: 4px;
+}
+
+.rounded-tl {
+  border-top-left-radius: 4px;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 4px;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: 4px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -8617,10 +8673,6 @@ override built-in Image component classes */
   -moz-osx-font-smoothing: grayscale;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-40 {
   opacity: 0.4;
 }
@@ -9017,6 +9069,11 @@ override built-in Image component classes */
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));