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

package/public/index.d.ts

@@ -2,12 +2,7 @@ import classNames from "classnames";
 import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
 import { usePopper } from "react-popper";
-export * from "./components/Absolute";
 export * from "./components/Accordion";
-export * from "./components/Appbar";
-export * from "./components/ArrowButton";
-export * from "./components/ArrowLink";
-export * from "./components/Aside";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Banner";
@@ -22,7 +17,6 @@ export * from "./components/DateRangePicker";
 export * from "./components/Description";
 export * from "./components/Divider";
 export * from "./components/Drawer";
-export * from "./components/Fixed";
 export * from "./components/FileUpload";
 export * from "./components/Flex";
 export * from "./components/FormGroup";
@@ -33,7 +27,6 @@ export * from "./components/Icon";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/InputFeedback";
-export * from "./components/IntegrationLogo";
 export * from "./components/Label";
 export * from "./components/Link";
 export * from "./components/List";
@@ -42,7 +35,6 @@ export * from "./components/Markdown";
 export * from "./components/MarkdownEditor";
 export * from "./components/Menu";
 export * from "./components/MenuRenderer";
-export * from "./components/Meta";
 export * from "./components/Modal";
 export * from "./components/OptionButton";
 export * from "./components/Panel";
@@ -51,9 +43,7 @@ export * from "./components/Paragraph";
 export * from "./components/Popover";
 export * from "./components/PopoverMenu";
 export * from "./components/Portal";
-export * from "./components/PropertyDiff";
 export * from "./components/Radio";
-export * from "./components/Relative";
 export * from "./components/Reference";
 export * from "./components/ScrollPane";
 export * from "./components/Select";
@@ -64,9 +54,6 @@ export * from "./components/SmallCaps";
 export * from "./components/Snackbar";
 export * from "./components/SpeechBubble";
 export * from "./components/Stack";
-export * from "./components/StatusLabel";
-export * from "./components/StatusPanel";
-export * from "./components/Sticky";
 export * from "./components/Svg";
 export * from "./components/Tab";
 export * from "./components/Table";
@@ -76,10 +63,8 @@ export * from "./components/Textarea";
 export * from "./components/Toast";
 export * from "./components/Toggle";
 export * from "./components/Token";
-export * from "./components/TopBar";
 export * from "./components/Tooltip";
 export * from "./components/Truncate";
-export * from "./components/VendorLogo";
 export * from "./components/VisuallyHidden";
 export * from "./contexts";
 export * from "./hooks";

package/public/index.js

@@ -22,12 +22,7 @@ const react_remove_scroll_1 = require("react-remove-scroll");
 Object.defineProperty(exports, "RemoveScroll", { enumerable: true, get: function () { return react_remove_scroll_1.RemoveScroll; } });
 const react_popper_1 = require("react-popper");
 Object.defineProperty(exports, "usePopper", { enumerable: true, get: function () { return react_popper_1.usePopper; } });
-__exportStar(require("./components/Absolute"), exports);
 __exportStar(require("./components/Accordion"), exports);
-__exportStar(require("./components/Appbar"), exports);
-__exportStar(require("./components/ArrowButton"), exports);
-__exportStar(require("./components/ArrowLink"), exports);
-__exportStar(require("./components/Aside"), exports);
 __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/Banner"), exports);
@@ -42,7 +37,6 @@ __exportStar(require("./components/DateRangePicker"), exports);
 __exportStar(require("./components/Description"), exports);
 __exportStar(require("./components/Divider"), exports);
 __exportStar(require("./components/Drawer"), exports);
-__exportStar(require("./components/Fixed"), exports);
 __exportStar(require("./components/FileUpload"), exports);
 __exportStar(require("./components/Flex"), exports);
 __exportStar(require("./components/FormGroup"), exports);
@@ -53,7 +47,6 @@ __exportStar(require("./components/Icon"), exports);
 __exportStar(require("./components/Image"), exports);
 __exportStar(require("./components/Input"), exports);
 __exportStar(require("./components/InputFeedback"), exports);
-__exportStar(require("./components/IntegrationLogo"), exports);
 __exportStar(require("./components/Label"), exports);
 __exportStar(require("./components/Link"), exports);
 __exportStar(require("./components/List"), exports);
@@ -62,7 +55,6 @@ __exportStar(require("./components/Markdown"), exports);
 __exportStar(require("./components/MarkdownEditor"), exports);
 __exportStar(require("./components/Menu"), exports);
 __exportStar(require("./components/MenuRenderer"), exports);
-__exportStar(require("./components/Meta"), exports);
 __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/OptionButton"), exports);
 __exportStar(require("./components/Panel"), exports);
@@ -71,9 +63,7 @@ __exportStar(require("./components/Paragraph"), exports);
 __exportStar(require("./components/Popover"), exports);
 __exportStar(require("./components/PopoverMenu"), exports);
 __exportStar(require("./components/Portal"), exports);
-__exportStar(require("./components/PropertyDiff"), exports);
 __exportStar(require("./components/Radio"), exports);
-__exportStar(require("./components/Relative"), exports);
 __exportStar(require("./components/Reference"), exports);
 __exportStar(require("./components/ScrollPane"), exports);
 __exportStar(require("./components/Select"), exports);
@@ -84,9 +74,6 @@ __exportStar(require("./components/SmallCaps"), exports);
 __exportStar(require("./components/Snackbar"), exports);
 __exportStar(require("./components/SpeechBubble"), exports);
 __exportStar(require("./components/Stack"), exports);
-__exportStar(require("./components/StatusLabel"), exports);
-__exportStar(require("./components/StatusPanel"), exports);
-__exportStar(require("./components/Sticky"), exports);
 __exportStar(require("./components/Svg"), exports);
 __exportStar(require("./components/Tab"), exports);
 __exportStar(require("./components/Table"), exports);
@@ -96,10 +83,8 @@ __exportStar(require("./components/Textarea"), exports);
 __exportStar(require("./components/Toast"), exports);
 __exportStar(require("./components/Toggle"), exports);
 __exportStar(require("./components/Token"), exports);
-__exportStar(require("./components/TopBar"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/Truncate"), exports);
-__exportStar(require("./components/VendorLogo"), exports);
 __exportStar(require("./components/VisuallyHidden"), exports);
 __exportStar(require("./contexts"), exports);
 __exportStar(require("./hooks"), exports);

package/public/storybook-components/ComponentHeading.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentHeading = void 0;
 const react_1 = __importDefault(require("react"));
 const __1 = require("..");
-const CURRENT_BRANCH = "master";
+const CURRENT_BRANCH = "main";
 const ComponentHeading = ({ componentName, description, sourcePath, waiAriaPath, hideDemosLink = false, }) => {
-    return (react_1.default.createElement(__1.Box, null,
+    return (react_1.default.createElement(__1.Box, { className: "mb-4" },
         react_1.default.createElement(__1.Heading.H1, { style: { fontSize: "36px" }, className: "mb-1" }, componentName),
         react_1.default.createElement(__1.Text, { style: { fontSize: "20px" }, className: "mb-3" }, description),
         react_1.default.createElement(__1.Stack, { spacing: 2 },
@@ -18,9 +18,7 @@ const ComponentHeading = ({ componentName, description, sourcePath, waiAriaPath,
                 react_1.default.createElement(__1.Link, { href: "#demos", target: "_self" }, "Demos"))),
             sourcePath && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(__1.Divider, { direction: __1.ORIENTATION.VERTICAL, className: "h-4" }),
-                react_1.default.createElement(__1.Link, { href: `https://github.com/aptible/arrow-ds/tree/${CURRENT_BRANCH}/${sourcePath}`, target: "_blank", className: "inline-flex items-center" },
-                    "Source",
-                    react_1.default.createElement(__1.IntegrationLogo, { logo: "github", color: "currentColor", className: "ml-1 inline-block", size: 18 })))),
+                react_1.default.createElement(__1.Link, { href: `https://github.com/aptible/arrow-ds/tree/${CURRENT_BRANCH}/${sourcePath}`, target: "_blank", className: "inline-flex items-center" }, "Source"))),
             waiAriaPath && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(__1.Divider, { direction: __1.ORIENTATION.VERTICAL, className: "h-4" }),
                 react_1.default.createElement(__1.Link, { href: waiAriaPath, target: "_blank" }, "WAI-ARIA Pattern"))))));

package/public/storybook-components/ComponentStatus.d.ts

@@ -1,5 +1,6 @@
 export declare enum COMPONENT_STATUS {
     BETA = "beta",
+    DEPRECATED = "deprecated",
     DOCUMENTATION_PENDING = "documentation-pending",
     A11Y_VIOLATION_COLOR_CONTRAST = "a11y-violation-color-contrast"
 }

package/public/storybook-components/ComponentStatus.js

@@ -10,22 +10,26 @@ const Banner_1 = require("../components/Banner");
 var COMPONENT_STATUS;
 (function (COMPONENT_STATUS) {
     COMPONENT_STATUS["BETA"] = "beta";
+    COMPONENT_STATUS["DEPRECATED"] = "deprecated";
     COMPONENT_STATUS["DOCUMENTATION_PENDING"] = "documentation-pending";
     COMPONENT_STATUS["A11Y_VIOLATION_COLOR_CONTRAST"] = "a11y-violation-color-contrast";
 })(COMPONENT_STATUS = exports.COMPONENT_STATUS || (exports.COMPONENT_STATUS = {}));
 const statusVariantMap = {
     [COMPONENT_STATUS.BETA]: types_1.STATUS_VARIANT.DANGER,
+    [COMPONENT_STATUS.DEPRECATED]: types_1.STATUS_VARIANT.WARNING,
     [COMPONENT_STATUS.DOCUMENTATION_PENDING]: types_1.STATUS_VARIANT.WARNING,
     [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: types_1.STATUS_VARIANT.WARNING,
 };
 const statusTitleMap = {
     [COMPONENT_STATUS.BETA]: "Beta",
+    [COMPONENT_STATUS.DEPRECATED]: "Deprecated",
     [COMPONENT_STATUS.DOCUMENTATION_PENDING]: "Documentation Pending",
     [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: "Poor Color Contrast",
 };
 const statusMessageMap = {
     [COMPONENT_STATUS.BETA]: `This component is still a work-in-progress and should not be used for
   production-ready apps.`,
+    [COMPONENT_STATUS.DEPRECATED]: `This component has been deprecated and will be removed from the next major version.`,
     [COMPONENT_STATUS.DOCUMENTATION_PENDING]: `The documentation for this component is undergoing maintenance. All component configuration examples may not be illustrated below and some demonstrations may not be working`,
     [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: `Variants of this component violate acceptable color contrast ratio for legibility.`,
 };

package/public/storybook-components/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./Accessibility";
 export * from "./Code";
 export * from "./ComponentHeading";
+export * from "./ComponentStatus";
 export * from "./EnumTable";
 export { default as Examples } from "./Examples";
-export * from "./TailwindPropertyClasses";

package/public/storybook-components/index.js

@@ -17,7 +17,7 @@ exports.Examples = void 0;
 __exportStar(require("./Accessibility"), exports);
 __exportStar(require("./Code"), exports);
 __exportStar(require("./ComponentHeading"), exports);
+__exportStar(require("./ComponentStatus"), exports);
 __exportStar(require("./EnumTable"), exports);
 var Examples_1 = require("./Examples");
 Object.defineProperty(exports, "Examples", { enumerable: true, get: function () { return __importDefault(Examples_1).default; } });
-__exportStar(require("./TailwindPropertyClasses"), exports);

package/public/style-dictionary/dist/tokens.css

@@ -0,0 +1,377 @@
+/**
+ * This tokens file was automatically generated by Style Dictionary
+ * Please do not edit this file directly; token definitions can be found in style-dictionary.config.js
+ */
+
+:root {
+  --border-radius-none: 0;
+  --border-radius-px: 1px;
+  --border-radius-sm: 2px;
+  --border-radius-md: 3px;
+  --border-radius-default: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-full: 9999px;
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+  --border-width-default: 1px;
+  --color-lighten-100: rgba(255, 255, 255, 0.04);
+  --color-lighten-200: rgba(255, 255, 255, 0.08);
+  --color-lighten-300: rgba(255, 255, 255, 0.12);
+  --color-gray-100: #f9fbfc;
+  --color-gray-200: #f4f7f9;
+  --color-gray-300: #edf3f7;
+  --color-gray-400: #dee7ee;
+  --color-gray-500: #b9c8d2;
+  --color-gray-600: #86a3b5;
+  --color-gray-700: #47687d;
+  --color-gray-800: #204156;
+  --color-gray-900: #001b28;
+  --color-brand-green-200: #7de5ca;
+  --color-brand-green-300: #5cd8b7;
+  --color-brand-green-400: #33c69f;
+  --color-brand-green-500: #20b08a;
+  --color-brand-green-600: #12926f;
+  --color-blue-0: #e6f3ff;
+  --color-blue-100: #c2e2ff;
+  --color-blue-200: #76baf9;
+  --color-blue-300: #3e9ef5;
+  --color-blue-400: #0d7de4;
+  --color-blue-500: #0668ca;
+  --color-blue-600: #0052b1;
+  --color-green-100: #e8f5ee;
+  --color-green-200: #a1ddae;
+  --color-green-300: #7bc88c;
+  --color-green-400: #54af68;
+  --color-green-500: #3c9f52;
+  --color-green-600: #29853d;
+  --color-gold-100: #fff4de;
+  --color-gold-200: #ffd883;
+  --color-gold-300: #ffcc5a;
+  --color-gold-400: #fdb515;
+  --color-gold-500: #f0a600;
+  --color-gold-600: #dc9801;
+  --color-red-100: #fdeeee;
+  --color-red-200: #ffa7a1;
+  --color-red-300: #fa7d76;
+  --color-red-400: #f25d54;
+  --color-red-500: #e4473e;
+  --color-red-600: #d93329;
+  --color-orange-200: #ffc3a1;
+  --color-orange-300: #ffaa7a;
+  --color-orange-400: #f38f56;
+  --color-orange-500: #ed7b3b;
+  --color-orange-600: #e36823;
+  --color-pink-200: #daccd7;
+  --color-pink-300: #d3b8cd;
+  --color-pink-400: #cca8c4;
+  --color-pink-500: #c297b9;
+  --color-pink-600: #b881ac;
+  --color-cyan-200: #a1d8f1;
+  --color-cyan-300: #7dc3e4;
+  --color-cyan-400: #61accf;
+  --color-cyan-500: #3e9ecb;
+  --color-cyan-600: #2488b6;
+  --color-purple-200: #c8b3e8;
+  --color-purple-300: #a68ad2;
+  --color-purple-400: #8969bd;
+  --color-purple-500: #7757ad;
+  --color-purple-600: #604194;
+  --color-white: #ffffff;
+  --color-black: #000b11;
+  --color-screen: rgba(0, 0, 0, 0.25);
+  --color-success: #54af68;
+  --color-failure: #f25d54;
+  --color-caution: #fdb515;
+  --color-border: #dee7ee;
+  --color-placeholder: #86a3b5;
+  --color-link: #0d7de4;
+  --font-size-h1: 26px;
+  --font-size-h2: 20px;
+  --font-size-h3: 16px;
+  --font-size-h4: 14px;
+  --font-size-h5: 12px;
+  --font-size-h6: 11px;
+  --font-size-body-sm: 12px;
+  --font-size-body: 14px;
+  --font-size-body-lg: 16px;
+  --font-size-icon: 13px;
+  --font-size-icon-sm: 11px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --height-0: 0;
+  --height-1: 4px;
+  --height-2: 8px;
+  --height-3: 12px;
+  --height-4: 16px;
+  --height-5: 20px;
+  --height-6: 24px;
+  --height-7: 28px;
+  --height-8: 32px;
+  --height-9: 36px;
+  --height-10: 40px;
+  --height-11: 44px;
+  --height-12: 48px;
+  --height-13: 52px;
+  --height-14: 56px;
+  --height-15: 60px;
+  --height-16: 64px;
+  --height-17: 68px;
+  --height-18: 72px;
+  --height-19: 76px;
+  --height-20: 80px;
+  --height-21: 84px;
+  --height-22: 88px;
+  --height-23: 92px;
+  --height-24: 96px;
+  --height-25: 100px;
+  --height-26: 104px;
+  --height-27: 108px;
+  --height-28: 112px;
+  --height-29: 116px;
+  --height-30: 120px;
+  --height-31: 124px;
+  --height-32: 128px;
+  --height-33: 132px;
+  --height-34: 136px;
+  --height-35: 140px;
+  --height-36: 144px;
+  --height-37: 148px;
+  --height-38: 152px;
+  --height-39: 156px;
+  --height-40: 160px;
+  --height-41: 164px;
+  --height-42: 168px;
+  --height-43: 172px;
+  --height-44: 176px;
+  --height-45: 180px;
+  --height-46: 184px;
+  --height-47: 188px;
+  --height-48: 192px;
+  --height-49: 196px;
+  --height-50: 200px;
+  --height-51: 204px;
+  --height-52: 208px;
+  --height-53: 212px;
+  --height-54: 216px;
+  --height-55: 220px;
+  --height-56: 224px;
+  --height-57: 228px;
+  --height-58: 232px;
+  --height-59: 236px;
+  --height-60: 240px;
+  --height-61: 244px;
+  --height-62: 248px;
+  --height-63: 252px;
+  --height-64: 256px;
+  --height-auto: auto;
+  --height-px: 1px;
+  --height-full: 100%;
+  --height-screen: 100vh;
+  --height-appbar: 48px;
+  --height-cell: 34px;
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-loose: 2;
+  --screen-width-sm: 576px;
+  --screen-width-md: 768px;
+  --screen-width-lg: 992px;
+  --screen-width-xl: 1200px;
+  --shadow-default: 0 2px 4px 0 rgba(0,0,0,0.10);
+  --shadow-up: 0 -2px 4px 0 rgba(0,0,0,0.10);
+  --shadow-md: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
+  --shadow-lg: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+  --shadow-glow: rgba(7,114,239,0.2) 0 0 1rem;
+  --shadow-none: none;
+  --shadow-focus: rgba(7, 114, 239, 0.2) 0 0 1px 3px;
+  --shadow-focus-inside: rgba(7, 114, 239, 0.2) 0 0 1px 3px inset;
+  --shadow-focus-brand: rgba(125, 229, 202, 0.2) 0 0 1px 3px;
+  --shadow-popover: 0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1);
+  --shadow-button-primary: 0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1);
+  --shadow-button-secondary: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-paper: 0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04);
+  --shadow-tile: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1);
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-13: 52px;
+  --spacing-14: 56px;
+  --spacing-15: 60px;
+  --spacing-16: 64px;
+  --spacing-17: 68px;
+  --spacing-18: 72px;
+  --spacing-19: 76px;
+  --spacing-20: 80px;
+  --spacing-21: 84px;
+  --spacing-22: 88px;
+  --spacing-23: 92px;
+  --spacing-24: 96px;
+  --spacing-25: 100px;
+  --spacing-26: 104px;
+  --spacing-27: 108px;
+  --spacing-28: 112px;
+  --spacing-29: 116px;
+  --spacing-30: 120px;
+  --spacing-31: 124px;
+  --spacing-32: 128px;
+  --spacing-33: 132px;
+  --spacing-34: 136px;
+  --spacing-35: 140px;
+  --spacing-36: 144px;
+  --spacing-37: 148px;
+  --spacing-38: 152px;
+  --spacing-39: 156px;
+  --spacing-40: 160px;
+  --spacing-41: 164px;
+  --spacing-42: 168px;
+  --spacing-43: 172px;
+  --spacing-44: 176px;
+  --spacing-45: 180px;
+  --spacing-46: 184px;
+  --spacing-47: 188px;
+  --spacing-48: 192px;
+  --spacing-49: 196px;
+  --spacing-50: 200px;
+  --spacing-51: 204px;
+  --spacing-52: 208px;
+  --spacing-53: 212px;
+  --spacing-54: 216px;
+  --spacing-55: 220px;
+  --spacing-56: 224px;
+  --spacing-57: 228px;
+  --spacing-58: 232px;
+  --spacing-59: 236px;
+  --spacing-60: 240px;
+  --spacing-61: 244px;
+  --spacing-62: 248px;
+  --spacing-63: 252px;
+  --spacing-64: 256px;
+  --tracking-tight: -0.05em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --type-sans: 'Neue Montreal', system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --type-serif: 'Copernicus', serif;
+  --type-mono: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  --width-0: 0;
+  --width-1: 4px;
+  --width-2: 8px;
+  --width-3: 12px;
+  --width-4: 16px;
+  --width-5: 20px;
+  --width-6: 24px;
+  --width-7: 28px;
+  --width-8: 32px;
+  --width-9: 36px;
+  --width-10: 40px;
+  --width-11: 44px;
+  --width-12: 48px;
+  --width-13: 52px;
+  --width-14: 56px;
+  --width-15: 60px;
+  --width-16: 64px;
+  --width-17: 68px;
+  --width-18: 72px;
+  --width-19: 76px;
+  --width-20: 80px;
+  --width-21: 84px;
+  --width-22: 88px;
+  --width-23: 92px;
+  --width-24: 96px;
+  --width-25: 100px;
+  --width-26: 104px;
+  --width-27: 108px;
+  --width-28: 112px;
+  --width-29: 116px;
+  --width-30: 120px;
+  --width-31: 124px;
+  --width-32: 128px;
+  --width-33: 132px;
+  --width-34: 136px;
+  --width-35: 140px;
+  --width-36: 144px;
+  --width-37: 148px;
+  --width-38: 152px;
+  --width-39: 156px;
+  --width-40: 160px;
+  --width-41: 164px;
+  --width-42: 168px;
+  --width-43: 172px;
+  --width-44: 176px;
+  --width-45: 180px;
+  --width-46: 184px;
+  --width-47: 188px;
+  --width-48: 192px;
+  --width-49: 196px;
+  --width-50: 200px;
+  --width-51: 204px;
+  --width-52: 208px;
+  --width-53: 212px;
+  --width-54: 216px;
+  --width-55: 220px;
+  --width-56: 224px;
+  --width-57: 228px;
+  --width-58: 232px;
+  --width-59: 236px;
+  --width-60: 240px;
+  --width-61: 244px;
+  --width-62: 248px;
+  --width-63: 252px;
+  --width-64: 256px;
+  --width-one-half: 50%;
+  --width-one-third: 33.33333%;
+  --width-two-thirds: 66.66667%;
+  --width-one-quarter: 25%;
+  --width-three-quarters: 75%;
+  --width-one-fifth: 20%;
+  --width-two-fifths: 40%;
+  --width-three-fifths: 60%;
+  --width-four-fifths: 80%;
+  --width-one-sixth: 16.66667%;
+  --width-five-sixths: 83.33333%;
+  --width-auto: auto;
+  --width-px: 1px;
+  --width-full: 100%;
+  --width-screen: 100vw;
+  --width-max-content: max-content;
+  --width-xs: 20rem;
+  --width-sm: 30rem;
+  --width-md: 40rem;
+  --width-lg: 50rem;
+  --width-xl: 60rem;
+  --width-two-xl: 70rem;
+  --width-three-xl: 80rem;
+  --width-four-xl: 90rem;
+  --width-five-xl: 100rem;
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-auto: auto;
+  --z-index-below: -1;
+  --z-index-default: 1;
+  --z-index-popup: 400;
+  --z-index-dialog: 500;
+  --z-index-dropdown: 600;
+  --z-index-overlay: 700;
+  --z-index-menu: 800;
+  --z-index-modal: 900;
+  --z-index-toast: 1000;
+  --z-index-max: 2147483647;
+}