pentatrion-design 0.1.3 → 0.2.0

package/README.md

@@ -78,6 +78,13 @@ Mettre à jour le fichier `src/index.css`
 @import "tailwindcss/utilities";
 ```
 
+```json
+// .prettierrc
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
+```
+
 ## Installation
 
 
@@ -96,13 +103,13 @@ const config = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
-+   "./node_modules/pentatrion-design/lib/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/components/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/hooks/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/redux/**/*.{ts,tsx}",
++   "./node_modules/pentatrion-design/lib/**/*.js",
++   "./node_modules/pentatrion-design/components/**/*.js",
++   "./node_modules/pentatrion-design/hooks/**/*.js",
++   "./node_modules/pentatrion-design/redux/**/*.js",
   ],
   darkMode: ["class"],
-+  plugins: [pentatrionTw],
++  plugins: [pentatrionTw()],
 };
 
 export default config;

package/components/dropdown-menu/useDropdownMenu.d.ts

@@ -2,7 +2,7 @@ import type { DropdownMenuOptions } from "./interface.js";
 export declare function useDropdownMenu({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, color, modal, }: DropdownMenuOptions): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/dropdown-menu/useDropdownMenuContext.d.ts

@@ -4,7 +4,7 @@ export declare const DropdownMenuContext: import("react").Context<ContextType>;
 export declare function useDropdownMenuContext(): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/input/Input.js

@@ -9,7 +9,7 @@ export const Input = forwardRef(({ variant = "normal", color = "yellow", disable
     return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", readOnly && "readonly", className), children: [prefix && (_jsx("div", { className: clsx([
                     "relative flex-center",
                     typeof prefix === "string" && "mx-2 select-none text-gray-6",
-                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onClick: (e) => {
+                ]), children: prefix })), _jsx("input", { autoFocus: true, ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onClick: (e) => {
                     if (readOnly) {
                         e.target?.select();
                     }

package/components/modal/useModal.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { ModalOptions } from "./interface.js";
 export declare function useModal({ initialOpen, open: controlledOpen, onOpen: setControlledOpen, color, }?: ModalOptions): {
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: Dispatch<SetStateAction<string | undefined>>;

package/components/modal/useModalContext.d.ts

@@ -2,7 +2,7 @@ import { useModal } from "./useModal.js";
 type ContextType = ReturnType<typeof useModal> | null;
 export declare const ModalContext: import("react").Context<ContextType>;
 export declare function useModalContext(): {
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;

package/components/popover/usePopover.d.ts

@@ -1,7 +1,7 @@
 import { PopoverOptions } from "./interface.js";
 export declare function usePopover({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, color, modal, }: PopoverOptions): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor | undefined;
+    color: import("../../types.js").ThemeColor | undefined;
     modal: boolean;
     labelId: string | undefined;
     descriptionId: string | undefined;

package/components/popover/usePopoverContext.d.ts

@@ -3,7 +3,7 @@ type ContextType = ReturnType<typeof usePopover> | null;
 export declare const PopoverContext: import("react").Context<ContextType>;
 export declare function usePopoverContext(): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor | undefined;
+    color: import("../../types.js").ThemeColor | undefined;
     modal: boolean;
     labelId: string | undefined;
     descriptionId: string | undefined;

package/components/tooltip/useTooltip.d.ts

@@ -1,7 +1,7 @@
 import { TooltipOptions } from "./interface.js";
 export declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, openDelay, closeDelay, color, }?: TooltipOptions): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor;
+    color: import("../../types.js").ThemeColor;
     placement: import("@floating-ui/react").Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;

package/components/tooltip/useTooltipContext.d.ts

@@ -3,7 +3,7 @@ type ContextType = ReturnType<typeof useTooltip> | null;
 export declare const TooltipContext: import("react").Context<ContextType>;
 export declare function useTooltipContext(): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor;
+    color: import("../../types.js").ThemeColor;
     placement: import("@floating-ui/react-dom").Placement;
     strategy: import("@floating-ui/react-dom").Strategy;
     middlewareData: import("@floating-ui/react-dom").MiddlewareData;

package/index.d.ts

@@ -1,33 +1,2 @@
-export type { ThemeColor } from "./types.js";
-export * from "./components/autocomplete/index.js";
-export * from "./components/badge/index.js";
-export * from "./components/button/index.js";
-export * from "./components/card/index.js";
-export * from "./components/code/index.js";
-export * from "./components/context-menu/index.js";
-export * from "./components/dialog/index.js";
-export * from "./components/dropdown-menu/index.js";
-export * from "./components/dropdown-menu-nested/index.js";
-export * from "./components/flash/index.js";
-export * from "./components/highlight/index.js";
-export * from "./components/href/index.js";
-export * from "./components/input/index.js";
-export * from "./components/input-field/index.js";
-export * from "./components/loader/index.js";
-export * from "./components/modal/index.js";
-export * from "./components/notification/index.js";
-export * from "./components/popover/index.js";
-export * from "./components/portal/index.js";
-export * from "./components/resize-area/index.js";
-export * from "./components/scroll/index.js";
-export * from "./components/select/index.js";
-export * from "./components/snack/index.js";
-export * from "./components/sortable/index.js";
-export * from "./components/steps/index.js";
-export * from "./components/table/index.js";
-export * from "./components/tabs/index.js";
-export * from "./components/textarea/index.js";
-export * from "./components/tooltip/index.js";
-export * from "./hooks/index.js";
-export * from "./lib/index.js";
-export { pentatrionTw } from "./tailwind/index.js";
+declare const _default: {};
+export default _default;

package/index.js

@@ -1,32 +1,5 @@
-export * from "./components/autocomplete/index.js";
-export * from "./components/badge/index.js";
-export * from "./components/button/index.js";
-export * from "./components/card/index.js";
-export * from "./components/code/index.js";
-export * from "./components/context-menu/index.js";
-export * from "./components/dialog/index.js";
-export * from "./components/dropdown-menu/index.js";
-export * from "./components/dropdown-menu-nested/index.js";
-export * from "./components/flash/index.js";
-export * from "./components/highlight/index.js";
-export * from "./components/href/index.js";
-export * from "./components/input/index.js";
-export * from "./components/input-field/index.js";
-export * from "./components/loader/index.js";
-export * from "./components/modal/index.js";
-export * from "./components/notification/index.js";
-export * from "./components/popover/index.js";
-export * from "./components/portal/index.js";
-export * from "./components/resize-area/index.js";
-export * from "./components/scroll/index.js";
-export * from "./components/select/index.js";
-export * from "./components/snack/index.js";
-export * from "./components/sortable/index.js";
-export * from "./components/steps/index.js";
-export * from "./components/table/index.js";
-export * from "./components/tabs/index.js";
-export * from "./components/textarea/index.js";
-export * from "./components/tooltip/index.js";
-export * from "./hooks/index.js";
-export * from "./lib/index.js";
-export { pentatrionTw } from "./tailwind/index.js";
+// This file exists for module resolution purposes.
+// Not exporting anything from the root entry point
+// Please use individual entry points in order to always
+// obtain minimum kbs.
+export default {};

package/package.json

@@ -1,10 +1,47 @@
 {
   "name": "pentatrion-design",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",
   "license": "ISC",
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types.js",
+    "./components/autocomplete": "./components/autocomplete.js",
+    "./components/badge": "./components/badge.js",
+    "./components/button": "./components/button.js",
+    "./components/card": "./components/card.js",
+    "./components/code": "./components/code.js",
+    "./components/context-menu": "./components/context.js",
+    "./components/dialog": "./components/dialog.js",
+    "./components/dropdown-menu": "./components/dropdown.js",
+    "./components/dropdown-menu-nested": "./components/dropdown.js",
+    "./components/flash": "./components/flash.js",
+    "./components/highlight": "./components/highlight.js",
+    "./components/href": "./components/href.js",
+    "./components/input": "./components/input.js",
+    "./components/input-field": "./components/input.js",
+    "./components/loader": "./components/loader.js",
+    "./components/modal": "./components/modal.js",
+    "./components/notification": "./components/notification.js",
+    "./components/popover": "./components/popover.js",
+    "./components/portal": "./components/portal.js",
+    "./components/resize-area": "./components/resize.js",
+    "./components/scroll": "./components/scroll.js",
+    "./components/select": "./components/select.js",
+    "./components/snack": "./components/snack.js",
+    "./components/sortable": "./components/sortable.js",
+    "./components/steps": "./components/steps.js",
+    "./components/table": "./components/table.js",
+    "./components/tabs": "./components/tabs.js",
+    "./components/textarea": "./components/textarea.js",
+    "./components/tooltip": "./components/tooltip.js",
+    "./hooks": "./hooks/index.js",
+    "./lib": "./lib/index.js",
+    "./redux/notification": "./redux/notification/index.js",
+    "./tailwind": "./tailwind/index.js"
+  },
   "type": "module",
   "dependencies": {
     "@floating-ui/react": "^0.26.17",

package/redux/notification/notificationSlice.d.ts

@@ -1,5 +1,8 @@
 import { Message } from "../../types.js";
-declare const _default: Reducer<State>;
+type NotificationState = {
+    messages: Message[];
+};
+declare const _default: import("@reduxjs/toolkit").Reducer<NotificationState>;
 export default _default;
 export declare const messageAdded: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[content: string, options?: Partial<Omit<Message, "content" | "id">> | undefined], {
     id: string;

package/redux/index.d.ts

@@ -1 +0,0 @@
-export * from "./notification/index.js";

package/redux/index.js

@@ -1 +0,0 @@
-export * from "./notification/index.js";

package/tailwind/base.d.ts

@@ -1,3 +0,0 @@
-import { CSSRuleObject } from "tailwindcss/types/config";
-export declare const layout: CSSRuleObject;
-export declare const base: CSSRuleObject;

package/tailwind/base.js

@@ -1,105 +0,0 @@
-export const layout = {
-    html: {
-        "font-size": "16px",
-        "line-height": "24px",
-        "color-scheme": "normal",
-    },
-    body: {
-        "@apply bg-gray-0 font-sans text-gray-7": {},
-    },
-    ".light": {
-        colorScheme: "light",
-    },
-};
-export const base = {
-    ":focus-visible": {
-        "@apply rounded outline outline-2 outline-offset-2 outline-yellow-5": {},
-    },
-    "textarea[readonly],.readonly": {
-        "@apply bg-gray-1": {},
-    },
-    ":is(input,textarea)[readonly]": {
-        color: "rgb(var(--color-gray-6))",
-    },
-    'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration': {
-        display: "none",
-    },
-    'input[type="range"]': {
-        backgroundColor: "transparent",
-        "-webkit-appearance": "none",
-        appearance: "none",
-    },
-    'input[type="range"]::-webkit-slider-thumb': {
-        "-webkit-appearance": "none",
-        appearance: "none",
-        border: "0",
-        boxSizing: "border-box",
-        borderRadius: "50%",
-        cursor: "pointer",
-        position: "relative",
-    },
-    'input[type="range"]::-moz-range-thumb': {
-        appearance: "none",
-        border: "0",
-        boxSizing: "border-box",
-        borderRadius: "50%",
-        cursor: "pointer",
-        position: "relative",
-    },
-    'input[type="range"]::-ms-thumb': {
-        appearance: "none",
-        border: "0",
-        boxSizing: "border-box",
-        borderRadius: "50%",
-        cursor: "pointer",
-        position: "relative",
-    },
-    mark: {
-        "@apply bg-yellow-1 text-gray-8": {},
-    },
-    abbr: {
-        "@apply cursor-help underline decoration-dashed": {},
-    },
-    '[data-color="yellow"]': {
-        "--color-custom-1": "var(--color-yellow-1);",
-        "--color-custom-2": "var(--color-yellow-2);",
-        "--color-custom-3": "var(--color-yellow-3);",
-        "--color-custom-4": "var(--color-yellow-4);",
-        "--color-custom-5": "var(--color-yellow-5);",
-    },
-    '[data-color="gray"]': {
-        "--color-custom-1": "var(--color-gray-1);",
-        "--color-custom-2": "var(--color-gray-2);",
-        "--color-custom-3": "var(--color-gray-3);",
-        "--color-custom-4": "var(--color-gray-4);",
-        "--color-custom-5": "var(--color-gray-5);",
-    },
-    '[data-color="red"]': {
-        "--color-custom-1": "var(--color-red-1);",
-        "--color-custom-2": "var(--color-red-2);",
-        "--color-custom-3": "var(--color-red-3);",
-        "--color-custom-4": "var(--color-red-4);",
-        "--color-custom-5": "var(--color-red-5);",
-    },
-    '[data-color="orange"]': {
-        "--color-custom-1": "var(--color-orange-1);",
-        "--color-custom-2": "var(--color-orange-2);",
-        "--color-custom-3": "var(--color-orange-3);",
-        "--color-custom-4": "var(--color-orange-4);",
-        "--color-custom-5": "var(--color-orange-5);",
-    },
-    '[data-color="green"]': {
-        "--color-custom-1": "var(--color-green-1);",
-        "--color-custom-2": "var(--color-green-2);",
-        "--color-custom-3": "var(--color-green-3);",
-        "--color-custom-4": "var(--color-green-4);",
-        "--color-custom-5": "var(--color-green-5);",
-    },
-    '[data-color="blue"]': {
-        "--color-custom-1": "var(--color-blue-1);",
-        "--color-custom-2": "var(--color-blue-2);",
-        "--color-custom-3": "var(--color-blue-3);",
-        "--color-custom-4": "var(--color-blue-4);",
-        "--color-custom-5": "var(--color-blue-5);",
-    },
-};

package/tailwind/components.d.ts

@@ -1,5 +0,0 @@
-import { CSSRuleObject } from "tailwindcss/types/config";
-export declare const componentsStep: CSSRuleObject;
-export declare const componentsResizeArea: CSSRuleObject;
-export declare const componentsInputOutline: CSSRuleObject;
-export declare const components: CSSRuleObject;

package/tailwind/components.js

@@ -1,258 +0,0 @@
-export const componentsStep = {
-    ".ll-steps-extra": {
-        "@apply flex justify-between": {},
-        "& button:first-child": {
-            padding: "calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) / 2)\n      calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) * 1.5 + 1rem)",
-        },
-        "& .ll-marker": {
-            transform: "translate(calc(var(--step-circle-radius) / 3))",
-        },
-    },
-    ".ll-steps": {
-        "@apply relative": {},
-        '&[data-marker="circle"]': {
-            ".marker": {
-                "@apply shadow bg-gray-1": {},
-                width: "calc(var(--step-circle-radius) * 2)",
-                height: "calc(var(--step-circle-radius) * 2)",
-                "&.active": { "@apply bg-gray-2": {} },
-            },
-        },
-        '&[data-marker="bullet"]': {
-            ".marker": {
-                "@apply text-2xs bg-gray-0 outline outline-2 outline-gray-2": {},
-                margin: "calc(var(--step-circle-radius) / 2)",
-                width: "calc(var(--step-circle-radius))",
-                height: "calc(var(--step-circle-radius))",
-                "&.active": { "@apply outline-gray-4": {} },
-            },
-        },
-        '&[data-direction="horizontal"]': {
-            "@apply flex flex-wrap": {},
-            '&[data-marker="circle"]': {
-                "--line-width": "calc(100% - var(--step-circle-radius) * 2 - var(--line-space) * 2)",
-                "--line-left": "calc(50% + var(--step-circle-radius) + var(--line-space))",
-            },
-            '&[data-marker="bullet"]': {
-                "--line-width": "calc(100% - var(--step-circle-radius) - var(--line-space) * 2)",
-                "--line-left": "calc(50% + var(--step-circle-radius) / 2 + var(--line-space))",
-            },
-            "& .ll-step": {
-                "@apply flex flex-col flex-1 text-center": {},
-                ".content": { "@apply mt-2": {} },
-            },
-            '&[data-global-line="false"] .ll-step:not(:last-child)::after': {
-                content: '""',
-                borderStyle: "none none var(--line-style) none",
-                width: "var(--line-width)",
-                marginTop: "-2px",
-                order: "-1",
-                position: "relative",
-                top: "calc(var(--step-circle-radius) + 1px)",
-                left: "var(--line-left)",
-            },
-            ".marker-container": { "@apply flex items-center justify-center": {} },
-        },
-        '&[data-direction="vertical"]': {
-            '&[data-marker="circle"]': {
-                "--line-top": "calc(var(--step-circle-radius) * 2 + var(--line-space))",
-                "--line-bottom": "var(--line-space)",
-            },
-            '&[data-marker="bullet"]': {
-                "--line-top": "calc(var(--step-circle-radius) * 1.5 + var(--line-space))",
-                "--line-bottom": "calc(-0.5 * var(--step-circle-radius) + var(--line-space))",
-            },
-            ".ll-step": {
-                "@apply relative gap-1 items-start flex": {},
-                "&:not(:last-child)": { paddingBottom: "0.5rem" },
-            },
-            '&[data-global-line="false"] .ll-step:not(:last-child)::after': {
-                "@apply absolute left-0 w-0": {},
-                content: '""',
-                top: "var(--line-top)",
-                bottom: "var(--line-bottom)",
-                transform: "translateX(calc(var(--step-circle-radius) - 1px))",
-                borderStyle: "none none none var(--line-style)",
-            },
-            '&[data-global-line="{}"]::after': {
-                "@apply absolute left-0 w-0 z-0": {},
-                content: '""',
-                top: "var(--line-top)",
-                bottom: "var(--line-top)",
-                transform: "translateX(calc(var(--step-circle-radius) - 1px))",
-                borderStyle: "none none none var(--line-style)",
-            },
-            ".content": { "@apply flex-1": {} },
-            ".title": { lineHeight: "1rem" },
-        },
-        '&[data-global-line="{}"]': {
-            "&::after": { "@apply border-gray-2 border-2": {} },
-            "&.status-done::after": { "@apply border-gray-3": {} },
-        },
-    },
-    ".ll-step": {
-        '[data-global-line="false"] &:not(:last-child)': {
-            "&::after": { "@apply border-gray-2 border-2": {} },
-            "&.status-done::after": { "@apply border-gray-3": {} },
-        },
-        ".handle": {
-            "@apply cursor-row-resize text-gray-6 motion-safe:transition-all": {},
-            "&.active": { "&:hover": { "@apply bg-gray-2 text-transparent": {} } },
-        },
-        ".ll-autocomplete": { "@apply flex-1": {} },
-        ".ll-button": { "@apply my-[2px] ml-2": {} },
-    },
-};
-export const componentsResizeArea = {
-    ".p8n-resize-area": {
-        position: "absolute",
-        left: "0",
-        right: "0",
-        top: "0",
-        bottom: "0",
-        zIndex: "10",
-        overflow: "visible",
-        ".area-button": {
-            position: "absolute",
-            "&::before": {
-                content: '""',
-                position: "absolute",
-                transitionDelay: "0.25s",
-                transition: "background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
-            },
-            "&:hover::before": { backgroundColor: "rgb(var(--color-gray-5))" },
-        },
-        "&:where(.top, .bottom)": {
-            height: "0",
-            width: "100%",
-            ".area-button": {
-                left: "0",
-                right: "0",
-                width: "100%",
-                height: "var(--resize-grip)",
-                cursor: "row-resize",
-                "&::before": {
-                    left: "0",
-                    right: "0",
-                    height: "var(--resize-indicator)",
-                },
-            },
-        },
-        "&:where(.left, .right)": {
-            width: "0",
-            height: "100%",
-            ".area-button": {
-                top: "0",
-                bottom: "0",
-                height: "100%",
-                width: "var(--resize-grip)",
-                cursor: "col-resize",
-                "&::before": {
-                    top: "0",
-                    bottom: "0",
-                    width: "var(--resize-indicator)",
-                },
-            },
-        },
-        "&.top": {
-            bottom: "auto",
-            ".area-button": {
-                top: "calc(-1 * var(--resize-grip) / 2)",
-                "&::before": { top: "calc(50% - var(--resize-indicator) / 2)" },
-            },
-        },
-        "&.bottom": {
-            top: "auto",
-            ".area-button": {
-                bottom: "calc(-1 * var(--resize-grip) / 2)",
-                "&::before": { bottom: "calc(50% - var(--resize-indicator) / 2)" },
-            },
-        },
-        "&.right": {
-            left: "auto",
-            ".area-button": {
-                right: "calc(-1 * var(--resize-grip) / 2)",
-                "&::before": { right: "calc(50% - var(--resize-indicator) / 2)" },
-            },
-        },
-        "&.left": {
-            right: "auto",
-            ".area-button": {
-                left: "calc(-1 * var(--resize-grip) / 2)",
-                "&::before": { left: "calc(50% - var(--resize-indicator) / 2)" },
-            },
-        },
-    },
-};
-export const componentsInputOutline = {
-    ":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea)": {
-        "@apply outline outline-1 outline-[rgb(var(--color-custom-2))] hover:outline-[rgb(var(--color-custom-3))] focus-full:outline-[rgb(var(--color-custom-4))]": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="yellow"])': {
-        "@apply outline-gray-2 hover:outline-gray-3": {},
-    },
-    ":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):not([readonly], .readonly)": {
-        "@apply focus-full:outline-2": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-variant="ghost"])': {
-        "@apply outline-transparent": {},
-    },
-    ":is(.p8n-input-checkbox, .p8n-input-radio)": {
-        "@apply text-[rgb(var(--color-custom-3))]": {},
-    },
-    ":is(.p8n-input-checkbox, .p8n-input-radio):is(:checked, .checked, .indeterminate)": {
-        "@apply bg-full bg-center bg-no-repeat outline-gray-1 bg-current": {},
-    },
-    ".p8n-input-checkbox:not(.p8n-input-toggle):where(:checked, .checked)": {
-        backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")",
-    },
-    ".p8n-input-radio:where(:checked, .checked)": {
-        backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")",
-    },
-    ":is(.p8n-input-checkbox, .p8n-input-radio):is(.indeterminate, :checked.indeterminate)": {
-        backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 7.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1Z' /%3e%3c/svg%3e\")",
-    },
-};
-export const components = {
-    ".can-copy": {
-        textDecorationLine: "underline",
-        textDecorationStyle: "dashed",
-        textDecorationColor: "rgb(var(--color-gray-3) / 1)",
-        cursor: "copy",
-        "&:hover": {
-            textDecorationColor: "rgb(var(--color-gray-7) / 1)",
-        },
-    },
-    ".disabled": {
-        pointerEvents: "none",
-        color: "rgb(var(--color-gray-6) / 1)",
-        "&[disabled]": {
-            opacity: "0.5",
-        },
-    },
-    ".option": {
-        "@apply flex w-full px-2 h-8 items-center text-left relative cursor-pointer first:rounded-t-2xl last:rounded-b-2xl hover:bg-gray-1 focus-full:text-gray-8 outline-none": {},
-        "&[disabled]": { color: "rgb(var(--color-gray-6))", pointerEvents: "none" },
-        ".bullet": {
-            width: "1rem",
-            height: "1rem",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            outline: "2px solid rgb(var(--color-gray-2))",
-            fontSize: "var(--font-size-xs)",
-            borderRadius: "50%",
-            margin: "0 0.75rem 0 3px",
-        },
-    },
-    ".p8n-separator": {
-        "@apply bg-gray-1 w-full h-0.5 rounded-sm mx-auto relative": {},
-    },
-    ".p8n-setting": {
-        "@apply flex items-center justify-between": {},
-        "& > :first-child": { "@apply text-gray-6 text-sm": {} },
-        "& > :nth-child(2)": { textAlign: "right" },
-        "& > :nth-child(2) input": { textAlign: "right" },
-        "&.multiple": { alignItems: "flex-start" },
-    },
-};

package/tailwind/index.d.ts

@@ -1,2 +0,0 @@
-export { keyframes } from "./keyframes.js";
-export { pentatrionTw, pentatrionTypographyExtend } from "./pentatrionTw.js";

package/tailwind/index.js

@@ -1,2 +0,0 @@
-export { keyframes } from "./keyframes.js";
-export { pentatrionTw, pentatrionTypographyExtend } from "./pentatrionTw.js";

package/tailwind/keyframes.d.ts

@@ -1,2 +0,0 @@
-import { ThemeConfig } from "tailwindcss/types/config";
-export declare const keyframes: ThemeConfig["keyframes"];

package/tailwind/keyframes.js

@@ -1,67 +0,0 @@
-export const keyframes = {
-    ripple: {
-        to: {
-            transform: "scale(4)",
-            opacity: "0",
-        },
-    },
-    "fade-in": {
-        from: {
-            transform: "scale(.8)",
-            opacity: "0",
-        },
-        to: {
-            transform: "scale(1)",
-            opacity: "1",
-        },
-    },
-    "fade-in-list": {
-        from: {
-            transform: "scaleY(.8)",
-            opacity: "0",
-        },
-        to: {
-            transform: "scaleY(1)",
-            opacity: "1",
-        },
-    },
-    "fade-out": {
-        from: {
-            transform: "scale(1)",
-            opacity: "1",
-        },
-        to: {
-            transform: "scale(.8)",
-            opacity: "0",
-        },
-    },
-    "fade-in-opacity": {
-        from: {
-            opacity: "0",
-        },
-        to: {
-            opacity: "1",
-        },
-    },
-    flash: {
-        "0%": {
-            opacity: "0",
-        },
-        "50%": {
-            opacity: "1",
-        },
-        "100%": {
-            opacity: "0",
-        },
-    },
-    "loader-stroke": {
-        from: {
-            // check : packages/pentatrion-design/components/loader/Loader.tsx
-            // for dashoffset value
-            "stroke-dashoffset": "43.699",
-        },
-        to: {
-            "stroke-dashoffset": "0",
-        },
-    },
-};

package/tailwind/pentatrionTw.d.ts

@@ -1,50 +0,0 @@
-export declare const pentatrionTypographyExtend: {
-    DEFAULT: {
-        css: {
-            maxWidth: string;
-            a: {
-                color: string;
-                textDecoration: string;
-                textDecorationColor: string;
-            };
-            "a:visited": {
-                color: string;
-            };
-            "a:hover": {
-                color: string;
-                textDecorationColor: string;
-                textDecorationThickness: number;
-            };
-            "a:active": {
-                color: string;
-            };
-            mark: {
-                color: string;
-                backgroundColor: string;
-            };
-            abbr: {
-                textDecoration: string;
-                textDecorationStyle: string;
-                cursor: string;
-            };
-        };
-    };
-};
-interface PentatrionTwOptions {
-    vars?: boolean;
-    base?: boolean;
-    components?: boolean;
-    componentsInputOutline?: boolean;
-    componentsResizeArea?: boolean;
-    componentsStep?: boolean;
-    utilities?: boolean;
-    utilitiesDialog?: boolean;
-}
-export declare const pentatrionTw: {
-    (options: PentatrionTwOptions): {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config>;
-    };
-    __isOptionsFunction: true;
-};
-export {};

package/tailwind/pentatrionTw.js

@@ -1,187 +0,0 @@
-import plugin from "tailwindcss/plugin";
-import { keyframes } from "./keyframes.js";
-import defaultTheme from "tailwindcss/defaultTheme";
-import { vars } from "./vars.js";
-import { base } from "./base.js";
-import { components, componentsInputOutline, componentsResizeArea, componentsStep, } from "./components.js";
-import { utilities, utilitiesDialog } from "./utilities.js";
-export const pentatrionTypographyExtend = {
-    DEFAULT: {
-        css: {
-            maxWidth: "none",
-            a: {
-                color: "rgb(var(--color-gray-8))",
-                textDecoration: "underline",
-                textDecorationColor: "rgb(var(--color-gray-8))",
-            },
-            "a:visited": {
-                color: "rgb(var(--color-gray-8))",
-            },
-            "a:hover": {
-                color: "rgb(var(--color-gray-8))",
-                textDecorationColor: "rgb(var(--color-yellow-5))",
-                textDecorationThickness: 2,
-            },
-            "a:active": {
-                color: "rgb(var(--color-yellow-5))",
-            },
-            mark: {
-                color: "rgb(var(--color-gray-8))",
-                backgroundColor: "rgb(var(--color-yellow-1))",
-            },
-            abbr: {
-                textDecoration: "underline",
-                textDecorationStyle: "dashed",
-                cursor: "help",
-            },
-        },
-    },
-};
-export const pentatrionTw = plugin.withOptions(function (options = {}) {
-    return ({ addBase, addUtilities, addComponents, addVariant }) => {
-        options.vars !== false && addBase(vars);
-        options.base !== false && addBase(base);
-        options.components !== false && addComponents(components);
-        options.componentsInputOutline !== false && addComponents(componentsInputOutline);
-        options.componentsResizeArea !== false && addComponents(componentsResizeArea);
-        options.componentsStep !== false && addComponents(componentsStep);
-        options.utilities !== false && addUtilities(utilities);
-        options.utilitiesDialog !== false && addUtilities(utilitiesDialog);
-        addVariant("active-full", ["&:active", "&.active"]);
-        // dbl :focus:focus else :hover will have priority to focus-full variant.
-        addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus:focus"]);
-    };
-}, function () {
-    return {
-        theme: {
-            zIndex: {
-                auto: "auto",
-                0: "0",
-                10: "10",
-                20: "20",
-                30: "30",
-                40: "40",
-                50: "50",
-                dialog: "100",
-                overlay: "100",
-                tooltip: "100",
-                "context-menu": "90",
-                notification: "80",
-            },
-            transitionDuration: {
-                ...defaultTheme.transitionDuration,
-                DEFAULT: "300ms",
-            },
-            colors: {
-                transparent: "transparent",
-                current: "currentColor",
-                black: "rgb(var(--color-black) / <alpha-value>)",
-                white: "rgb(var(--color-white) / <alpha-value>)",
-                yellow: {
-                    1: "rgb(var(--color-yellow-1) / <alpha-value>)",
-                    2: "rgb(var(--color-yellow-2) / <alpha-value>)",
-                    3: "rgb(var(--color-yellow-3) / <alpha-value>)",
-                    4: "rgb(var(--color-yellow-4) / <alpha-value>)",
-                    5: "rgb(var(--color-yellow-5) / <alpha-value>)",
-                    // color of the text when bg is yellow 3
-                    text: "rgb(var(--color-yellow-text) / <alpha-value>)",
-                },
-                green: {
-                    1: "rgb(var(--color-green-1) / <alpha-value>)",
-                    2: "rgb(var(--color-green-2) / <alpha-value>)",
-                    3: "rgb(var(--color-green-3) / <alpha-value>)",
-                    4: "rgb(var(--color-green-4) / <alpha-value>)",
-                    5: "rgb(var(--color-green-5) / <alpha-value>)",
-                    // color of the text when bg is green
-                    text: "rgb(var(--color-green-text) / <alpha-value>)",
-                },
-                blue: {
-                    1: "rgb(var(--color-blue-1) / <alpha-value>)",
-                    2: "rgb(var(--color-blue-2) / <alpha-value>)",
-                    3: "rgb(var(--color-blue-3) / <alpha-value>)",
-                    4: "rgb(var(--color-blue-4) / <alpha-value>)",
-                    5: "rgb(var(--color-blue-5) / <alpha-value>)",
-                    // color of the text when bg is blue
-                    text: "rgb(var(--color-blue-text) / <alpha-value>)",
-                },
-                orange: {
-                    1: "rgb(var(--color-orange-1) / <alpha-value>)",
-                    2: "rgb(var(--color-orange-2) / <alpha-value>)",
-                    3: "rgb(var(--color-orange-3) / <alpha-value>)",
-                    4: "rgb(var(--color-orange-4) / <alpha-value>)",
-                    5: "rgb(var(--color-orange-5) / <alpha-value>)",
-                    // color of the text when bg is orange
-                    text: "rgb(var(--color-orange-text) / <alpha-value>)",
-                },
-                red: {
-                    1: "rgb(var(--color-red-1) / <alpha-value>)",
-                    2: "rgb(var(--color-red-2) / <alpha-value>)",
-                    3: "rgb(var(--color-red-3) / <alpha-value>)",
-                    4: "rgb(var(--color-red-4) / <alpha-value>)",
-                    5: "rgb(var(--color-red-5) / <alpha-value>)",
-                    // color of the text when bg is red
-                    text: "rgb(var(--color-red-text) / <alpha-value>)",
-                },
-                gray: {
-                    0: "rgb(var(--color-gray-0) / <alpha-value>)",
-                    1: "rgb(var(--color-gray-1) / <alpha-value>)",
-                    2: "rgb(var(--color-gray-2) / <alpha-value>)",
-                    3: "rgb(var(--color-gray-3) / <alpha-value>)",
-                    4: "rgb(var(--color-gray-4) / <alpha-value>)",
-                    5: "rgb(var(--color-gray-5) / <alpha-value>)",
-                    6: "rgb(var(--color-gray-6) / <alpha-value>)",
-                    7: "rgb(var(--color-gray-7) / <alpha-value>)",
-                    8: "rgb(var(--color-gray-8) / <alpha-value>)",
-                    // color of the text when bg is gray
-                    text: "rgb(var(--color-gray-text) / <alpha-value>)",
-                },
-            },
-            boxShadow: {
-                sm: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
-                DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15)",
-                md: "0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15)",
-                lg: "0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
-                xl: "0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15)",
-                "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.35)",
-                inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.1)",
-                dark: "0 0 0 1px rgb(var(--color-gray-2))",
-                none: "none",
-            },
-            fontFamily: {
-                sans: ["ui-sans-serif", "system-ui", "sans-serif"],
-                fontello: ["fontello"],
-                serif: defaultTheme.fontFamily.serif,
-                mono: defaultTheme.fontFamily.mono,
-            },
-            extend: {
-                // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
-                backgroundSize: {
-                    full: "100%",
-                },
-                dropShadow: {
-                    arrow: "0 1px 3px rgb(var(--color-gray-3))",
-                },
-                transitionProperty: {
-                    "color-shadow": "color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow",
-                },
-                gridTemplateColumns: {
-                    "repeat-fill-300": "repeat(auto-fill, minmax(300px, 1fr))",
-                    "repeat-fill-160": "repeat(auto-fill, minmax(160px, 1fr))",
-                },
-                animation: {
-                    ripple: "ripple .9s linear",
-                    "fade-in": "fade-in 250ms ease both",
-                    "fade-in-list": "fade-in-list 150ms ease both",
-                    "fade-out": "fade-out 250ms ease both",
-                    "fade-in-opacity": "fade-in-opacity 250ms ease both",
-                    flash: "flash 1000ms ease both infinite",
-                    "loader-stroke": "loader-stroke 1s linear infinite",
-                },
-                fontSize: {
-                    "2xs": ["0.688rem", { lineHeight: "1rem" }],
-                },
-                keyframes,
-            },
-        },
-    };
-});

package/tailwind/utilities.d.ts

@@ -1,3 +0,0 @@
-import { CSSRuleObject } from "tailwindcss/types/config";
-export declare const utilities: CSSRuleObject;
-export declare const utilitiesDialog: CSSRuleObject;

package/tailwind/utilities.js

@@ -1,61 +0,0 @@
-export const utilities = {
-    ".flex-center": {
-        display: "flex",
-        "align-items": "center",
-        "justify-content": "center",
-    },
-    "a.link": {
-        "@apply decoration-gray-8 underline text-gray-8 visited:text-gray-8 active:text-yellow-4 hover:decoration-2 hover:decoration-yellow-4": {},
-    },
-};
-export const utilitiesDialog = {
-    '[data-placement^="top"]': {
-        transformOrigin: "bottom",
-        "& .p8n-arrow": {
-            "@apply w-0 h-0 absolute border-x-8 border-t-8 border-x-transparent border-t-current top-full drop-shadow-arrow dark:drop-shadow-[0_1px_0_rgb(var(--color-gray-2))]": {},
-            clip: "rect(0px, 16px, 12px, 0px)",
-        },
-    },
-    '[data-placement="top-start"]': { transformOrigin: "bottom left" },
-    '[data-placement="top-end"]': { transformOrigin: "bottom right" },
-    '[data-placement^="bottom"]': {
-        transformOrigin: "top",
-        "& .p8n-arrow": {
-            "@apply w-0 h-0 absolute border-x-8 border-b-8 border-x-transparent border-b-current bottom-full drop-shadow-arrow dark:drop-shadow-[0_-1px_0_rgb(var(--color-gray-2))]": {},
-            clip: "rect(-4px, 16px, 8px, 0px)",
-        },
-    },
-    '[data-placement="bottom-start"]': { transformOrigin: "top left" },
-    '[data-placement="bottom-end"]': { transformOrigin: "top right" },
-    '[data-placement^="left"]': {
-        transformOrigin: "right",
-        "& .p8n-arrow": {
-            "@apply w-0 h-0 absolute border-y-8 border-l-8 border-y-transparent border-l-current left-full drop-shadow-arrow dark:drop-shadow-[1px_0_0_rgb(var(--color-gray-2))]": {},
-            clip: "rect(0px, 12px, 16px, 0px)",
-        },
-    },
-    '[data-placement="left-start"]': { transformOrigin: "top right" },
-    '[data-placement="left-end"]': { transformOrigin: "bottom right" },
-    '[data-placement^="right"]': {
-        transformOrigin: "left",
-        "& .p8n-arrow": {
-            "@apply w-0 h-0 absolute border-y-8 border-r-8 border-y-transparent border-r-current right-full drop-shadow-arrow dark:drop-shadow-[-1px_0_0_rgb(var(--color-gray-2))]": {},
-            clip: "rect(0px, 8px, 16px, -4px)",
-        },
-    },
-    '[data-placement="right-start"]': { transformOrigin: "top left" },
-    '[data-placement="right-end"]': { transformOrigin: "bottom left" },
-    ".p8n-arrow": {
-        "@apply text-[rgb(var(--color-custom-1))]": {},
-    },
-    '[data-color="yellow"] .p8n-arrow': {
-        "@apply text-gray-0": {},
-    },
-    '[data-color="gray"] .p8n-arrow': {
-        "@apply text-gray-0": {},
-    },
-    ".option[data-nested][data-open]:not([data-focus-inside])": {
-        "@apply bg-gray-2": {},
-    },
-    ".option[data-focus-inside][data-open]": { "@apply bg-gray-1": {} },
-};

package/tailwind/vars.d.ts

@@ -1,2 +0,0 @@
-import { CSSRuleObject } from "tailwindcss/types/config";
-export declare const vars: CSSRuleObject;

package/tailwind/vars.js

@@ -1,104 +0,0 @@
-export const vars = {
-    ":root": {
-        "--color-white": "255 255 255",
-        "--color-black": "0 0 0",
-        /* bg outlined color */
-        "--color-yellow-1": "255 250 199" /* rgb(255, 250, 199); */,
-        /* bg outlined hovered color */
-        "--color-yellow-2": "255 245 142" /* rgb(255, 245, 142); */,
-        // /* button default bgcolor */
-        "--color-yellow-3": "255 232 34" /* rgb(255, 232, 34); */,
-        // /* text color, button hover bgcolor */
-        "--color-yellow-4": "251 191 36" /* rgb(251, 191, 36); */,
-        // /* text hover color, button active bgcolor */
-        "--color-yellow-5": "245 158 11" /* rgb(245, 158, 11); */,
-        "--color-yellow-text": "var(--color-gray-7)",
-        "--color-green-1": "232 245 212" /* rgb(232, 245, 212); */,
-        "--color-green-2": "209 235 170" /* rgb(209, 235, 170); */,
-        "--color-green-3": "162 215 87" /* rgb(162, 215, 87); */,
-        "--color-green-4": "138 200 66" /* rgb(138, 200, 66); */,
-        "--color-green-5": "79 158 35" /* rgb(79, 158, 35); */,
-        "--color-green-text": "var(--color-gray-7)",
-        "--color-blue-1": "237 247 255" /* rgb(237, 247, 255); */,
-        "--color-blue-2": "203 232 255" /* rgb(203, 232, 255); */,
-        "--color-blue-3": "131 203 255" /* rgb(131, 203, 255);*/,
-        "--color-blue-4": "75 167 230" /* rgb(75, 167, 230);*/,
-        "--color-blue-5": "37 126 158" /* rgb(37, 126, 158);*/,
-        "--color-blue-text": "var(--color-gray-7)",
-        "--color-orange-1": "255 244 219" /* rgb(255, 244, 219); */,
-        "--color-orange-2": "255 221 179" /* rgb(255, 221, 179); */,
-        "--color-orange-3": "255 176 100" /* rgb(255, 176, 100); */,
-        "--color-orange-4": "230 140 53" /* rgb(230, 140, 53); */,
-        "--color-orange-5": "179 91 38" /* rgb(179, 91, 38); */,
-        "--color-orange-text": "var(--color-gray-7)",
-        "--color-red-1": "255 219 219" /* rgb(255, 219, 219); */,
-        "--color-red-2": "255 183 183" /* rgb(255, 183, 183); */,
-        "--color-red-3": "255 111 111" /* rgb(255, 111, 111); */,
-        "--color-red-4": "230 62 62" /* rgb(230, 62, 62); */,
-        "--color-red-5": "179 38 38" /* rgb(179, 38, 38); */,
-        "--color-red-text": "var(--color-gray-7)",
-        "--color-gray-0": "255 255 255" /* rgb(255, 255, 255); */,
-        "--color-gray-1": "242 242 242" /* rgb(242, 242, 242); */,
-        "--color-gray-2": "228 228 228" /* rgb(228, 228, 228); */,
-        "--color-gray-3": "204 204 204" /* rgb(204, 204, 204); */,
-        "--color-gray-4": "180 180 180" /* rgb(180, 180, 180); */,
-        "--color-gray-5": "140 140 140" /* rgb(140, 140, 140); */,
-        /* text-hint text-disabled */
-        "--color-gray-6": "90 90 90" /* rgb(90, 90, 90); */,
-        "--color-gray-7": "50 50 50" /* rgb(50, 50, 50); */,
-        "--color-gray-8": "0 0 0" /* rgb(0, 0, 0); */,
-        "--color-gray-text": "var(--color-gray-7)",
-        "--resize-grip": "10px",
-        "--resize-indicator": "2px",
-        "--step-circle-radius": "16px",
-    },
-    ".dark": {
-        colorScheme: "dark",
-        /* text hover color, button active bgcolor */
-        "--color-yellow-5": "255 250 199" /* rgb(255, 250, 199); */,
-        /* text color, button hover bgcolor */
-        "--color-yellow-4": "255 245 142" /* rgb(255, 245, 142); */,
-        /* button default bgcolor */
-        "--color-yellow-3": "255 232 34" /* rgb(255, 232, 34); */,
-        /* bg outlined hovered color (with generally 50% transparency) */
-        "--color-yellow-2": "251 191 36" /* rgb(251, 191, 36); */,
-        /* bg outlined color (with generally 50% transparency) */
-        "--color-yellow-1": "245 158 11" /* rgb(245, 158, 11); */,
-        "--color-yellow-text": "var(--color-gray-0)",
-        "--color-green-5": "232 245 212" /* rgb(232, 245, 212); */,
-        "--color-green-4": "209 235 170" /* rgb(209, 235, 170); */,
-        "--color-green-3": "162 215 87" /* rgb(162, 215, 87); */,
-        "--color-green-2": "138 200 66" /* rgb(138, 200, 66); */,
-        "--color-green-1": "79 158 35" /* rgb(79, 158, 35); */,
-        "--color-green-text": "var(--color-gray-0)",
-        "--color-blue-5": "237 247 255" /* rgb(237, 247, 255); */,
-        "--color-blue-4": "203 232 255" /* rgb(203, 232, 255); */,
-        "--color-blue-3": "131 203 255" /* rgb(131, 203, 255);*/,
-        "--color-blue-2": "75 167 230" /* rgb(75, 167, 230);*/,
-        "--color-blue-1": "37 126 158" /* rgb(37, 126, 158);*/,
-        "--color-blue-text": "var(--color-gray-0)",
-        "--color-orange-5": "255 244 219" /* rgb(255, 244, 219); */,
-        "--color-orange-4": "255 221 179" /* rgb(255, 221, 179); */,
-        "--color-orange-3": "255 176 100" /* rgb(255, 176, 100); */,
-        "--color-orange-2": "230 140 53" /* rgb(230, 140, 53); */,
-        "--color-orange-1": "179 91 38" /* rgb(179, 91, 38); */,
-        "--color-orange-text": "var(--color-gray-0)",
-        "--color-red-5": "255 219 219" /* rgb(255, 219, 219); */,
-        "--color-red-4": "255 183 183" /* rgb(255, 183, 183); */,
-        "--color-red-3": "255 111 111" /* rgb(255, 111, 111); */,
-        "--color-red-2": "230 62 62" /* rgb(230, 62, 62); */,
-        "--color-red-1": "179 38 38" /* rgb(179, 38, 38); */,
-        "--color-red-text": "var(--color-gray-0)",
-        "--color-gray-8": "255 255 255" /* rgb(255, 255, 255); */,
-        "--color-gray-7": "220 220 220" /* rgb(220, 220, 220); */,
-        /* text-hint text-disabled */
-        "--color-gray-6": "180 180 180" /* rgb(180, 180, 180); */,
-        "--color-gray-5": "140 140 140" /* rgb(140, 140, 140); */,
-        "--color-gray-4": "100 100 100" /* rgb(100, 100, 100); */,
-        "--color-gray-3": "75 75 75" /* rgb(75, 75, 75); */,
-        "--color-gray-2": "50 50 50" /* rgb(50, 50, 50); */,
-        "--color-gray-1": "35 35 35" /* rgb(35, 35, 35); */,
-        "--color-gray-0": "21 29 29" /* rgb(21, 29, 29); */,
-        "--color-gray-text": "var(--color-gray-8)",
-    },
-};