@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/src/typography/Title.tsx

@@ -35,9 +35,8 @@ import {
   type CssProp,
   type SizeType,
 } from "../types";
-import { getBgClass, getColor, getColorClass } from "../utils";
+import { getColor } from "../utils";
 import { TitleSizeMap } from "./types";
-import classes from "./Typography.module.css";
 
 export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
   as?: ElementType<
@@ -67,7 +66,22 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
 }
 
 /**
- * Typography title component
+ * A component that renders a title with customizable styles such as background color, text color, size, alignment, and font family.
+ * It can be rendered as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @param {TitleProps} props - The properties for the Title component.
+ * @returns {JSX.Element} The rendered Title component.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1" bg="blue-500" color="white" size="2xl" align="center">
+ *   This is a Title
+ * </Title>
+ * // Renders a title as an h1 element with a blue background, white text color, size of 2xl, and centered alignment.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--title} for more details.
  */
 export const Title = ({
   children,
@@ -109,13 +123,10 @@ export const Title = ({
   return (
     <E
       className={classNames(
-        classes.title,
-        "px-[2px] py-1 truncate whitespace-pre-wrap",
+        "fabric-title",
         className,
         family && `font-${family}`,
         !as && "text-lg",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
       )}
       style={styles}
       {...aria}

package/src/typography/index.ts

@@ -22,8 +22,8 @@
  */
 
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/src/{overlays/tooltip/Tooltip.module.css → utils/cloneElement.ts}

@@ -21,33 +21,27 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .tooltip {
-    z-index: var(--z-tooltip);
-    color: theme(backgroundColor.invert);
+import { type ReactNode, Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
 
-    &[data-color="primary"] {
-      color: theme(colors.primary.600);
+export const cloneChildren = (
+  children: ReactNode,
+  callback: (child: ReactNode, index: number) => ReactNode,
+): ReactNode => {
+  return Children.map(children, (c: ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren((c.props as AnyObject)?.children, callback);
+      }
+      return c;
     }
-
-    &[data-color="accent"] {
-      color: theme(colors.accent.600);
-    }
-
-    &[data-color="info"] {
-      color: theme(colors.info.600);
-    }
-
-    &[data-color="danger"] {
-      color: theme(colors.danger.600);
-    }
-
-    &[data-color="success"] {
-      color: theme(colors.success.600);
-    }
-
-    &[data-color="warning"] {
-      color: theme(colors.warning.600);
+    if (c instanceof Promise) {
+      return undefined;
     }
-  }
-}
+    return c as AnyObject;
+  })
+    ?.flat()
+    .filter(Boolean)
+    .map(callback);
+};

package/src/utils/getColor.ts

@@ -29,21 +29,5 @@ export const getColor = (color: string) => {
   if (color && isColor(color)) {
     return color;
   }
-};
-
-export const getBgClass = (bg: string) => {
-  if (bg && !isColor(bg)) {
-    return `bg-${bg}`;
-  }
-};
-
-export const getColorClass = (color: string) => {
-  if (color && !isColor(color)) {
-    return `text-${color}`;
-  }
-};
-export const getBorderClass = (color: string) => {
-  if (color && !isColor(color)) {
-    return `border-${color}`;
-  }
+  return `var(--color-${color})`;
 };

package/src/utils/index.ts

@@ -24,5 +24,6 @@
 /* istanbul ignore file */
 
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";

package/css/index.js

@@ -1,250 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-/* istanbul ignore file */
-
-import {
-  backgroundColor,
-  borderColor,
-  colors,
-  textColor,
-} from "./tailwind/colors";
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(
-  ({ addUtilities, matchUtilities, addBase, theme }) => {
-    matchUtilities({
-      area: (value) => ({
-        gridArea: value,
-      }),
-    });
-    addUtilities({
-      ".z-1": { "z-index": 1 },
-      ".z-2": { "z-index": 2 },
-      ".z-3": { "z-index": 3 },
-      ".z-4": { "z-index": 4 },
-      ".z-5": { "z-index": 5 },
-      ".area-content": { "grid-area": "content" },
-      ".area-head": { "grid-area": "head" },
-      ".area-foot": { "grid-area": "foot" },
-      ".area-side-s": { "grid-area": "side-s" },
-      ".area-side-e": { "grid-area": "side-e" },
-      ".area-body": { "grid-area": "body" },
-      ".overflow-wrap": {
-        "overflow-wrap": "anywhere",
-        "word-break": "normal",
-        "text-wrap": "wrap",
-      },
-      ".fixed-numbers": {
-        "font-variant-numeric": "tabular-nums",
-      },
-      ".mixed-lang": {},
-      ".bg-alternate": {},
-      ".scroll-thin": {},
-      ".scroll-hide": {},
-      ...Object.fromEntries(
-        Object.entries(theme("spacing")).map(([key, size]) => [
-          `.gap-${key}`,
-          { gap: size, "--gutter": size },
-        ]),
-      ),
-      ".span-1": { flex: "0 1 calc((1 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-2": { flex: "0 1 calc((2 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-3": { flex: "0 1 calc((3 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-4": { flex: "0 1 calc((4 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-5": { flex: "0 1 calc((5 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-6": { flex: "0 1 calc((6 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-7": { flex: "0 1 calc((7 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-8": { flex: "0 1 calc((8 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-9": { flex: "0 1 calc((9 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-10": { flex: "0 1 calc((10 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-11": { flex: "0 1 calc((11 / 12) * 100% - var(--gutter, 0px))" },
-      ".span-12": { flex: "0 1 calc((12 / 12) * 100% - var(--gutter, 0px))" },
-    });
-  },
-  {
-    darkMode: ["selector", '[data-color-scheme="dark"]'],
-    safelist: [
-      "font-san",
-      "font-serif",
-      "font-mono",
-      "object-fit",
-      "object-cover",
-      "object-contain",
-      "self-start",
-      "self-center",
-      "self-end",
-      "self-stretch",
-      "items-start",
-      "items-center",
-      "items-end",
-      "items-stretch",
-      "justify-start",
-      "justify-center",
-      "justify-end",
-      "justify-between",
-      "animate-spin",
-      "animate-pulse",
-      "animate-bounce",
-      "animate-progress",
-      {
-        pattern:
-          /bg-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
-      },
-      {
-        pattern:
-          /text-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
-      },
-      {
-        pattern:
-          /ring-(info|danger|success|warning|primary|accent|tint)(-\d*)?/,
-      },
-      {
-        pattern:
-          /border-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
-      },
-    ],
-    theme: {
-      fontFamily: {
-        sans: [
-          "Avenir Next",
-          "Avenir",
-          "Noto Sans",
-          "Roboto",
-          "Helvetica Neue",
-          "Segoe UI",
-          "Arial",
-          "sans-serif",
-          "BlinkMacSystemFont",
-          "Apple Color Emoji",
-          "Segoe UI Emoji",
-          "Segoe UI Symbol",
-          "Noto Color Emoji",
-        ],
-        serif: [
-          "Noto Serif",
-          "Georgia",
-          "Cambria",
-          "Times New Roman",
-          "Times",
-          "serif",
-        ],
-        mono: [
-          "Noto Sans Mono",
-          "Menlo",
-          "Monaco",
-          "Consolas",
-          "Liberation Mono",
-          "Courier New",
-          "monospace",
-        ],
-      },
-      colors,
-      gap: {},
-      fontSize: {
-        xs: ["0.75rem", { lineHeight: "1rem" }],
-        sm: ["0.875rem", { lineHeight: "1.25rem" }],
-        reset: ["1rem", { lineHeight: "1.5rem" }],
-        md: ["1.125rem", { lineHeight: "1.5rem" }],
-        lg: ["1.25rem", { lineHeight: "1.75rem" }],
-        xl: ["1.5rem", { lineHeight: "2rem" }],
-        "2xl": ["1.75rem", { lineHeight: "2.25rem" }],
-        "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
-        "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
-        "5xl": ["3rem", { lineHeight: "1" }],
-        "6xl": ["3.75rem", { lineHeight: "1" }],
-        "7xl": ["4.5rem", { lineHeight: "1" }],
-        "8xl": ["6rem", { lineHeight: "1" }],
-        "9xl": ["8rem", { lineHeight: "1" }],
-      },
-      extend: {
-        backgroundColor,
-        borderColor,
-        stroke: borderColor,
-        outlineColor: borderColor,
-        textColor,
-        fill: backgroundColor,
-        screens: {
-          xs: "320px",
-        },
-        keyframes: {
-          cardpulse: {
-            "50%": { opacity: 0.5 },
-          },
-          bgprogress: {
-            "0%": {
-              "background-position-x": 0,
-            },
-            "100%": {
-              "background-position-x": "1rem",
-            },
-          },
-        },
-        animation: {
-          pulse: "cardpulse 2s cubic-bezier(.4,0,.6,1) infinite",
-          progress: "bgprogress 750ms linear infinite",
-        },
-        aspectRatio: {
-          screen: "4 / 3",
-          portrait: "3 / 4",
-        },
-        flex: {
-          full: "1 1 100%",
-          content: "0 0 auto",
-        },
-        maxWidth: {
-          screen: "100vw",
-        },
-        minWidth: {
-          screen: "100vw",
-        },
-        borderRadius: {
-          capped: "var(--rounding-cap)",
-          DEFAULT: "var(--rounding)",
-        },
-        boxShadow: {
-          1: "0 0 0 1px var(--tw-shadow-color)",
-          xs: "0 1px 1px 0 var(--tw-shadow-color)",
-          sm: "0 1px 2px 0 var(--tw-shadow-color)",
-          DEFAULT:
-            "0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)",
-          md: "0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",
-          lg: "0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)",
-          xl: "0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)",
-          "2xl": "0 25px 50px -12px var(--tw-shadow-color)",
-          inset: "inset 0 0 2px var(--tw-shadow-color)",
-          inner: "inset 0 2px 4px 0 var(--tw-shadow-color)",
-          paper: "0 1px 3px 0 var(--tw-shadow-color)",
-          none: "none",
-        },
-        boxShadowColor: {
-          ...borderColor,
-          DEFAULT: "var(--fabric-shadow)",
-          base: "var(--fabric-shadow)",
-        },
-        ringOffsetColor: {
-          base: "var(--fabric-bg)",
-        },
-      },
-    },
-  },
-);

package/css/tailwind/colors.ts

@@ -1,158 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-/* istanbul ignore file */
-
-const COlORS = {
-  silver: "#989da5",
-  steel: "#7c99af",
-  olive: "#769b8d",
-  sand: "#9b9789",
-  info: "#00bfff",
-  danger: "#f24c3d",
-  success: "#44bc69",
-  warning: "#edaa00",
-  scarlet: "#e5484d",
-  pumpkin: "#f76a15",
-  marigold: "#ffc100",
-  avacado: "#46a758",
-  jade: "#29a383",
-  denim: "#0190ff",
-  iris: "#5b5bd6",
-  lilac: "#8e4ec6",
-  coral: "#e93d82",
-  wood: "#ad7f58",
-};
-
-const colorMix = (color: string, shader: string, percent: number) =>
-  `color-mix(in lab, ${applyAlpha(color)} ${percent}%,  ${applyAlpha(shader)})`;
-
-const applyAlpha = (color: string) =>
-  `color(from ${color} srgb r g b / <alpha-value>)`;
-
-export const colors = {
-  black: "#191a1b",
-  white: "#fefdfc",
-  bg: `${applyAlpha("var(--fabric-bg)")}`,
-  text: `${applyAlpha("var(--fabric-text)")}`,
-  primary: {
-    DEFAULT: "var(--primary)",
-    50: colorMix("var(--primary)", "var(--fabric-bg)", 10),
-    100: colorMix("var(--primary)", "var(--fabric-bg)", 27),
-    200: colorMix("var(--primary)", "var(--fabric-bg)", 45),
-    300: colorMix("var(--primary)", "var(--fabric-bg)", 62),
-    400: colorMix("var(--primary)", "var(--fabric-bg)", 80),
-    500: applyAlpha("var(--primary)"),
-    600: colorMix("var(--primary)", "var(--fabric-text)", 80),
-    700: colorMix("var(--primary)", "var(--fabric-text)", 62),
-    800: colorMix("var(--primary)", "var(--fabric-text)", 45),
-    900: colorMix("var(--primary)", "var(--fabric-text)", 27),
-    950: colorMix("var(--primary)", "var(--fabric-text)", 10),
-  },
-  accent: {
-    DEFAULT: "var(--accent)",
-    50: colorMix("var(--accent)", "var(--fabric-bg)", 10),
-    100: colorMix("var(--accent)", "var(--fabric-bg)", 27),
-    200: colorMix("var(--accent)", "var(--fabric-bg)", 45),
-    300: colorMix("var(--accent)", "var(--fabric-bg)", 62),
-    400: colorMix("var(--accent)", "var(--fabric-bg)", 80),
-    500: applyAlpha("var(--accent)"),
-    600: colorMix("var(--accent)", "var(--fabric-text)", 80),
-    700: colorMix("var(--accent)", "var(--fabric-text)", 62),
-    800: colorMix("var(--accent)", "var(--fabric-text)", 45),
-    900: colorMix("var(--accent)", "var(--fabric-text)", 27),
-    950: colorMix("var(--accent)", "var(--fabric-text)", 10),
-  },
-  tint: {
-    DEFAULT: "var(--tint)",
-    50: colorMix("var(--tint)", "var(--fabric-bg)", 10),
-    100: colorMix("var(--tint)", "var(--fabric-bg)", 27),
-    200: colorMix("var(--tint)", "var(--fabric-bg)", 45),
-    300: colorMix("var(--tint)", "var(--fabric-bg)", 62),
-    400: colorMix("var(--tint)", "var(--fabric-bg)", 80),
-    500: applyAlpha("var(--tint)"),
-    600: colorMix("var(--tint)", "var(--fabric-text)", 80),
-    700: colorMix("var(--tint)", "var(--fabric-text)", 62),
-    800: colorMix("var(--tint)", "var(--fabric-text)", 45),
-    900: colorMix("var(--tint)", "var(--fabric-text)", 27),
-    950: colorMix("var(--tint)", "var(--fabric-text)", 10),
-  },
-  ...Object.entries(COlORS).reduce(
-    (ret, [key, color]) => ({
-      ...ret,
-      [key]: {
-        DEFAULT: color,
-        50: colorMix(color, "var(--fabric-bg)", 10),
-        100: colorMix(color, "var(--fabric-bg)", 27),
-        200: colorMix(color, "var(--fabric-bg)", 45),
-        300: colorMix(color, "var(--fabric-bg)", 62),
-        400: colorMix(color, "var(--fabric-bg)", 80),
-        500: applyAlpha(color),
-        600: colorMix(color, "var(--fabric-text)", 80),
-        700: colorMix(color, "var(--fabric-text)", 62),
-        800: colorMix(color, "var(--fabric-text)", 45),
-        900: colorMix(color, "var(--fabric-text)", 27),
-        950: colorMix(color, "var(--fabric-text)", 10),
-      },
-    }),
-    {},
-  ),
-};
-
-export const backgroundColor = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 99),
-  base: colorMix("var(--fabric-bg)", "var(--tint)", 99),
-  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 90),
-  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
-  gray: colorMix("var(--fabric-bg)", "var(--tint)", 50),
-  dark: colorMix("var(--black)", "var(--tint)", 90),
-  light: colorMix("var(--white)", "var(--tint)", 90),
-  invert: colorMix("var(--fabric-bg)", "var(--fabric-text)", 5),
-};
-export const textColor = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  DEFAULT: colorMix("var(--fabric-text)", "var(--tint)", 95),
-  base: colorMix("var(--fabric-text)", "var(--tint)", 95),
-  dimmed: colorMix("var(--fabric-text)", "var(--tint)", 65),
-  muted: colorMix("var(--fabric-text)", "var(--tint)", 45),
-  gray: colorMix("var(--fabric-text)", "var(--tint)", 50),
-  dark: colorMix("var(--black)", "var(--tint)", 75),
-  light: colorMix("var(--white)", "var(--tint)", 75),
-  invert: colorMix("var(--fabric-text)", "var(--fabric-bg)", 5),
-};
-export const borderColor = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 65),
-  base: colorMix("var(--fabric-bg)", "var(--tint)", 65),
-  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 72),
-  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
-  gray: applyAlpha("var(--tint)"),
-  dark: colorMix("var(--black)", "var(--tint)", 75),
-  light: colorMix("var(--white)", "var(--tint)", 75),
-};

package/dist/cjs/components/actionLabel/ActionLabel.module.css

@@ -1 +0,0 @@
-@layer comp{.actionLabel{&>.actions{--width:4rem;width:0}&:not([data-disabled=true]):hover>.actions{transition:all .1s cubic-bezier(.215,.61,.355,1);transition-delay:.5s;width:var(--width)}}}

package/dist/cjs/components/animations/Animations.module.css

@@ -1 +0,0 @@
-@layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}

package/dist/cjs/components/avatar/Avatar.module.css

@@ -1 +0,0 @@
-@layer comp{.avatar{border-radius:var(--rounding);box-shadow:0 0 1px theme(borderColor.base);height:1em;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{background-color:theme(backgroundColor.dimmed);border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&>.imagePlaceholder{z-index:-1}}.avatarGroup{&>.avatar{box-shadow:0 0 0 1px theme(borderColor.muted),0 0 0 .125em var(--fabric-bg);&:not(:first-child){margin-inline-start:-.125em}}& .avatarGroup--extra{border-radius:inherit;font-size:inherit;height:1em;width:1em}}}@layer util{.avatarGroup{&>.avatar{border-radius:inherit;font-size:inherit}}}

package/dist/cjs/components/badge/Badge.module.css

@@ -1 +0,0 @@
-@layer comp{@keyframes pinger{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3)}}.badge{--tw-bg-opacity:1;background-color:theme(colors.tint.200/var(--tw-bg-opacity));box-sizing:content-box;color:theme(textColor.base);outline:.5px solid theme(backgroundColor.base);&>span{font-size:.625em;font-weight:500;line-height:1;vertical-align:.125em}&[data-ping=true]{--translate:50%;&:before{animation:pinger 1s linear infinite;background-color:inherit;border-radius:999px;content:"";inset:0;position:absolute;z-index:-1}}&:not([data-ping=true]){--translate:0.75rem;min-width:1em}&[data-placement=top]{left:50%;top:0;transform:translate(-50%,-50%)}&[data-placement=top-start]{inset-inline-start:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=top-end]{inset-inline-end:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=bottom]{bottom:0;left:50%;transform:translate(-50%,50%)}&[data-placement=bottom-start]{bottom:0;inset-inline-start:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=bottom-end]{bottom:0;inset-inline-end:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=start]{inset-inline-start:0;top:50%;:global([dir=ltr]) &{transform:translate(-50%,-50%)}:global([dir=rtl]) &{transform:translate(50%,-50%)}}&[data-placement=end]{inset-inline-end:0;top:50%;:global([dir=ltr]) &{transform:translate(50%,-50%)}:global([dir=rtl]) &{transform:translate(-50%,-50%)}}}}

package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css

@@ -1 +0,0 @@
-@layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}

package/dist/cjs/components/button/Button.module.css

@@ -1 +0,0 @@
-@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

package/dist/cjs/components/card/Card.module.css

@@ -1 +0,0 @@
-@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}

package/dist/cjs/components/chip/Chip.module.css

@@ -1 +0,0 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

package/dist/cjs/components/collapsable/Collapsable.module.css

@@ -1 +0,0 @@
-@layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}

package/dist/cjs/components/dropdown/Dropdown.module.css

@@ -1 +0,0 @@
-@layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}

package/dist/cjs/components/icon/Icon.module.css

@@ -1 +0,0 @@
-@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}

package/dist/cjs/components/media/Media.module.css

@@ -1 +0,0 @@
-@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}

package/dist/cjs/components/menu/Menu.module.css

@@ -1 +0,0 @@
-@layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}

package/dist/cjs/components/meter/Meter.module.css

@@ -1 +0,0 @@
-@layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}

package/dist/cjs/components/panel/Panel.module.css

@@ -1 +0,0 @@
-@layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}

package/dist/cjs/components/progress/Progress.module.css

@@ -1 +0,0 @@
-@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}