@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/form-actions/FormActions.js

@@ -1,142 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__ from "../button/Button.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="w-full max-w-md">');
-const FormActions = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "submitText",
-        "cancelText",
-        "isLoading",
-        "isValid",
-        "onCancel",
-        "layout",
-        "children",
-        "dataTheme",
-        "class",
-        "className",
-        "style"
-    ]);
-    const submitText = ()=>local.submitText ?? "Submit";
-    const cancelText = ()=>local.cancelText ?? "Cancel";
-    const layout = ()=>local.layout ?? "single";
-    const isValid = ()=>local.isValid ?? true;
-    const submitButton = (fullWidth)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
-            type: "submit",
-            variant: "primary",
-            fullWidth: fullWidth,
-            get isPending () {
-                return local.isLoading;
-            },
-            get isDisabled () {
-                return !isValid() || local.isLoading;
-            },
-            get ["aria-busy"] () {
-                return local.isLoading;
-            },
-            get children () {
-                return submitText();
-            }
-        });
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-        get when () {
-            return !local.children;
-        },
-        get fallback () {
-            return local.children;
-        },
-        get children () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Switch, {
-                get children () {
-                    return [
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Match, {
-                            get when () {
-                                return "single" === layout();
-                            },
-                            get children () {
-                                var _el$ = _tmpl$();
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                                    role: "group",
-                                    "aria-label": "Form actions",
-                                    get ["data-theme"] () {
-                                        return local.dataTheme;
-                                    },
-                                    get ["class"] () {
-                                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mt-4 flex w-full", local.class, local.className);
-                                    },
-                                    get style () {
-                                        return local.style;
-                                    }
-                                }), false, true);
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>submitButton(true));
-                                return _el$;
-                            }
-                        }),
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Match, {
-                            get when () {
-                                return "split" === layout();
-                            },
-                            get children () {
-                                var _el$2 = _tmpl$();
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                                    role: "group",
-                                    "aria-label": "Form actions",
-                                    get ["data-theme"] () {
-                                        return local.dataTheme;
-                                    },
-                                    get ["class"] () {
-                                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mt-4 flex w-full gap-2", local.class, local.className);
-                                    },
-                                    get style () {
-                                        return local.style;
-                                    }
-                                }), false, true);
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
-                                    type: "button",
-                                    variant: "outline",
-                                    fullWidth: true,
-                                    get onClick () {
-                                        return local.onCancel;
-                                    },
-                                    get isDisabled () {
-                                        return local.isLoading;
-                                    },
-                                    get children () {
-                                        return cancelText();
-                                    }
-                                }), null);
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>submitButton(true), null);
-                                return _el$2;
-                            }
-                        }),
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Match, {
-                            get when () {
-                                return "center" === layout();
-                            },
-                            get children () {
-                                var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                                    role: "group",
-                                    "aria-label": "Form actions",
-                                    get ["data-theme"] () {
-                                        return local.dataTheme;
-                                    },
-                                    get ["class"] () {
-                                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mt-4 flex w-full justify-center", local.class, local.className);
-                                    },
-                                    get style () {
-                                        return local.style;
-                                    }
-                                }), false, true);
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>submitButton(true));
-                                return _el$3;
-                            }
-                        })
-                    ];
-                }
-            });
-        }
-    });
-};
-const form_actions_FormActions = FormActions;
-export { form_actions_FormActions as default };

package/dist/components/form-actions/index.d.ts

@@ -1,2 +0,0 @@
-export { default as FormActions } from "./FormActions";
-export type { FormActionsProps } from "./FormActions";

package/dist/components/form-actions/index.js

@@ -1,3 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE__FormActions_js_b35c9cc0__ from "./FormActions.js";
-var __webpack_exports__FormActions = __WEBPACK_EXTERNAL_MODULE__FormActions_js_b35c9cc0__["default"];
-export { __webpack_exports__FormActions as FormActions };

package/dist/components/hero/Hero.d.ts

@@ -1,11 +0,0 @@
-import "./hero.css";
-import { type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type HeroProps = IComponentBaseProps & {
-    minHeight?: string;
-};
-declare const HeroNamespaces: ParentComponent<HeroProps> & {
-    Content: ParentComponent<import("./HeroContent").HeroContentProps>;
-    Overlay: ParentComponent<import("./HeroOverlay").HeroOverlayProps>;
-};
-export default HeroNamespaces;

package/dist/components/hero/Hero.js

@@ -1,47 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./hero.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__HeroContent_js_4e9cae79__ from "./HeroContent.js";
-import * as __WEBPACK_EXTERNAL_MODULE__HeroOverlay_js_044abd85__ from "./HeroOverlay.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const Hero = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "minHeight",
-        "style"
-    ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("hero", local.class, local.className);
-    const heroStyle = ()=>{
-        const baseStyle = local.style || {};
-        return {
-            ...baseStyle,
-            minHeight: local.minHeight || void 0
-        };
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return heroStyle();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-const HeroNamespaces = Object.assign(Hero, {
-    Content: __WEBPACK_EXTERNAL_MODULE__HeroContent_js_4e9cae79__.HeroContent,
-    Overlay: __WEBPACK_EXTERNAL_MODULE__HeroOverlay_js_044abd85__.HeroOverlay
-});
-const hero_Hero = HeroNamespaces;
-export { hero_Hero as default };

package/dist/components/hero/HeroContent.d.ts

@@ -1,6 +0,0 @@
-import { type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type HeroContentProps = IComponentBaseProps & {
-    center?: boolean;
-};
-export declare const HeroContent: ParentComponent<HeroContentProps>;

package/dist/components/hero/HeroContent.js

@@ -1,31 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const HeroContent = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "center"
-    ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("hero-content", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "text-center": local.center
-        }));
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-export { HeroContent };

package/dist/components/hero/HeroOverlay.d.ts

@@ -1,6 +0,0 @@
-import { type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type HeroOverlayProps = IComponentBaseProps & {
-    bgOpacity?: string;
-};
-export declare const HeroOverlay: ParentComponent<HeroOverlayProps>;

package/dist/components/hero/HeroOverlay.js

@@ -1,39 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const HeroOverlay = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "bgOpacity",
-        "style"
-    ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("hero-overlay", local.class, local.className);
-    const overlayStyle = ()=>{
-        const baseStyle = local.style || {};
-        return {
-            ...baseStyle,
-            backgroundColor: local.bgOpacity ? `rgba(0, 0, 0, ${local.bgOpacity})` : void 0
-        };
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return overlayStyle();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-export { HeroOverlay };

package/dist/components/hero/hero.css

@@ -1,38 +0,0 @@
-@layer components {
-  .hero-content {
-      isolation: isolate;
-      display: flex;
-      max-width: 80rem;
-      align-items: center;
-      justify-content: center;
-      gap: calc(0.25rem * 4);
-      padding: calc(0.25rem * 4);
-    }
-
-  .hero {
-      display: grid;
-      width: 100%;
-      place-items: center;
-      background-size: cover;
-      background-position: center;
-    }
-
-  .hero > * {
-      grid-column-start: 1;
-      grid-row-start: 1;
-    }
-
-  .hero-overlay {
-      grid-column-start: 1;
-      grid-row-start: 1;
-      height: 100%;
-      width: 100%;
-      background-color: var(--color-neutral);
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .hero-overlay {
-      background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent);
-    }
-    }
-}

package/dist/components/hero/index.d.ts

@@ -1,4 +0,0 @@
-export { default } from "./Hero";
-export type { HeroProps } from "./Hero";
-export type { HeroContentProps } from "./HeroContent";
-export type { HeroOverlayProps } from "./HeroOverlay";

package/dist/components/hero/index.js

@@ -1,3 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Hero_js_b4a7e63e__ from "./Hero.js";
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Hero_js_b4a7e63e__["default"];
-export { __webpack_exports__default as default };

package/dist/components/indicator/Indicator.d.ts

@@ -1,31 +0,0 @@
-import "./indicator.css";
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-type ElementType = keyof JSX.IntrinsicElements;
-type IndicatorBaseProps = {
-    horizontal?: "start" | "center" | "end";
-    vertical?: "top" | "middle" | "bottom";
-    as?: ElementType;
-    children?: JSX.Element;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-};
-type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
-export type IndicatorProps<E extends ElementType = "div"> = Omit<PropsOf<E>, keyof IndicatorBaseProps> & IndicatorBaseProps & IComponentBaseProps;
-type IndicatorItemBaseProps = {
-    horizontal?: "start" | "center" | "end";
-    vertical?: "top" | "middle" | "bottom";
-    as?: ElementType;
-    children?: JSX.Element;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-};
-export type IndicatorItemProps<E extends ElementType = "span"> = Omit<PropsOf<E>, keyof IndicatorItemBaseProps> & IndicatorItemBaseProps & IComponentBaseProps;
-declare const _default: (<E extends ElementType = "div">(props: IndicatorProps<E>) => JSX.Element) & {
-    Item: <E extends ElementType = "span">(props: IndicatorItemProps<E>) => JSX.Element;
-};
-export default _default;

package/dist/components/indicator/Indicator.js

@@ -1,76 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./indicator.css";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-const Indicator = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "horizontal",
-        "vertical",
-        "dataTheme",
-        "class",
-        "className",
-        "style",
-        "as"
-    ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator", local.class, local.className);
-    const Tag = local.as || "div";
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
-    }, others, {
-        get ["data-theme"] () {
-            return local.dataTheme;
-        },
-        get ["class"] () {
-            return classes();
-        },
-        get style () {
-            return local.style;
-        },
-        get children () {
-            return local.children;
-        }
-    }));
-};
-const IndicatorItem = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "horizontal",
-        "vertical",
-        "dataTheme",
-        "class",
-        "className",
-        "style",
-        "as"
-    ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator-item", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "indicator-start": "start" === local.horizontal,
-            "indicator-center": "center" === local.horizontal,
-            "indicator-end": "end" === local.horizontal,
-            "indicator-top": "top" === local.vertical,
-            "indicator-middle": "middle" === local.vertical,
-            "indicator-bottom": "bottom" === local.vertical
-        }));
-    const Tag = local.as || "span";
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
-    }, others, {
-        get ["data-theme"] () {
-            return local.dataTheme;
-        },
-        get ["class"] () {
-            return classes();
-        },
-        get style () {
-            return local.style;
-        },
-        get children () {
-            return local.children;
-        }
-    }));
-};
-const indicator_Indicator = Object.assign(Indicator, {
-    Item: IndicatorItem
-});
-export { indicator_Indicator as default };

package/dist/components/indicator/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Indicator";
-export type { IndicatorItemProps, IndicatorProps } from "./Indicator";

package/dist/components/indicator/index.js

@@ -1,3 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Indicator_js_454db259__ from "./Indicator.js";
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Indicator_js_454db259__["default"];
-export { __webpack_exports__default as default };

package/dist/components/indicator/indicator.css

@@ -1,70 +0,0 @@
-@layer components {
-  .indicator {
-      position: relative;
-      display: inline-flex;
-      width: max-content;
-    }
-
-  .indicator :where(.indicator-item) {
-      z-index: 1;
-      position: absolute;
-      white-space: nowrap;
-      top: var(--indicator-t, 0);
-      bottom: var(--indicator-b, auto);
-      left: var(--indicator-s, auto);
-      right: var(--indicator-e, 0);
-      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
-    }
-
-  .indicator-end {
-      --indicator-s: auto;
-      --indicator-e: 0;
-      --indicator-x: 50%;
-    }
-
-  [dir="rtl"] .indicator-end {
-      --indicator-s: 0;
-      --indicator-e: auto;
-      --indicator-x: -50%;
-    }
-
-  .indicator-start {
-      --indicator-s: 0;
-      --indicator-e: auto;
-      --indicator-x: -50%;
-    }
-
-  [dir="rtl"] .indicator-start {
-      --indicator-s: auto;
-      --indicator-e: 0;
-      --indicator-x: 50%;
-    }
-
-  .indicator-center {
-      --indicator-s: 50%;
-      --indicator-e: 50%;
-      --indicator-x: -50%;
-    }
-
-  [dir="rtl"] .indicator-center {
-      --indicator-x: 50%;
-    }
-
-  .indicator-bottom {
-      --indicator-t: auto;
-      --indicator-b: 0;
-      --indicator-y: 50%;
-    }
-
-  .indicator-middle {
-      --indicator-t: 50%;
-      --indicator-b: 50%;
-      --indicator-y: -50%;
-    }
-
-  .indicator-top {
-      --indicator-t: 0;
-      --indicator-b: auto;
-      --indicator-y: -50%;
-    }
-}

package/dist/components/kbd/kbd.css

@@ -1,55 +0,0 @@
-@layer components {
-  .kbd {
-      box-shadow: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-field);
-      background-color: var(--color-base-200);
-      vertical-align: middle;
-      padding-inline: 0.5em;
-      border: var(--border) solid var(--color-base-content);
-      border-bottom: calc(var(--border) + 1px) solid var(--color-base-content);
-      --size: calc(var(--size-selector, 0.25rem) * 6);
-      font-size: 0.875rem;
-      height: var(--size);
-      min-width: var(--size);
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .kbd {
-      border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
-    }
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .kbd {
-      border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
-    }
-    }
-
-  .kbd-lg {
-      --size: calc(var(--size-selector, 0.25rem) * 7);
-      font-size: 1rem;
-    }
-
-  .kbd-md {
-      --size: calc(var(--size-selector, 0.25rem) * 6);
-      font-size: 0.875rem;
-    }
-
-  .kbd-sm {
-      --size: calc(var(--size-selector, 0.25rem) * 5);
-      font-size: 0.75rem;
-    }
-
-  .kbd-xl {
-      --size: calc(var(--size-selector, 0.25rem) * 8);
-      font-size: 1.125rem;
-    }
-
-  .kbd-xs {
-      --size: calc(var(--size-selector, 0.25rem) * 4);
-      font-size: 0.625rem;
-    }
-}