@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/components/feedback/alerts/AlertBanner.css.js

@@ -1,71 +1,51 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
-const boxColors = (colorName) => atoms({
-  backgroundColor: `${colorName}-container`,
-  color: `on-${colorName}-container`,
-  borderColor: `on-${colorName}-container`
+import { recipe } from "@vanilla-extract/recipes";
+import { style } from "@vanilla-extract/css";
+//#region src/components/feedback/alerts/AlertBanner.css.ts
+var boxColors = (colorName) => atoms({
+	backgroundColor: `${colorName}-container`,
+	color: `on-${colorName}-container`,
+	borderColor: `on-${colorName}-container`
 });
-const banner = gnistRecipe({
-  base: [
-    {
-      borderStyle: "solid"
-    },
-    atoms({
-      display: "flex",
-      borderWidth: "small",
-      borderRadius: "card"
-    })
-  ],
-  variants: {
-    density: {
-      default: atoms({ padding: "s" }),
-      compact: atoms({ padding: "xxs" })
-    },
-    type: {
-      success: boxColors("success"),
-      warning: boxColors("warning"),
-      error: boxColors("error"),
-      info: boxColors("info")
-    }
-  }
+var banner = recipe({
+	base: [{ borderStyle: "solid" }, atoms({
+		display: "flex",
+		borderWidth: "small",
+		borderRadius: "card"
+	})],
+	variants: {
+		density: {
+			default: atoms({ padding: "s" }),
+			compact: atoms({ padding: "xxs" })
+		},
+		type: {
+			success: boxColors("success"),
+			warning: boxColors("warning"),
+			error: boxColors("error"),
+			info: boxColors("info")
+		}
+	}
 });
-const icon = gnistRecipe({
-  variants: {
-    type: {
-      success: atoms({ color: "on-success-container" }),
-      warning: atoms({ color: "on-warning-container" }),
-      error: atoms({ color: "on-error-container" }),
-      info: atoms({ color: "on-info-container" })
-    }
-  }
+var icon = recipe({ variants: { type: {
+	success: atoms({ color: "on-success-container" }),
+	warning: atoms({ color: "on-warning-container" }),
+	error: atoms({ color: "on-error-container" }),
+	info: atoms({ color: "on-info-container" })
+} } });
+var mainContentContainer = recipe({
+	base: [{ flex: 1 }],
+	variants: { density: {
+		default: atoms({ marginLeft: "xs" }),
+		compact: atoms({ marginLeft: "xxs" })
+	} }
 });
-const mainContentContainer = gnistRecipe({
-  base: [
-    {
-      flex: 1
-    }
-  ],
-  variants: {
-    density: {
-      default: atoms({ marginLeft: "xs" }),
-      compact: atoms({ marginLeft: "xxs" })
-    }
-  }
-});
-const bannerHeading = gnistStyle([
-  { float: "left" },
-  atoms({ margin: "none", typography: "heading3-small" })
-]);
-const closeButton = gnistStyle({ float: "right" });
-const messageContainer = gnistStyle({ clear: "left" });
-const actionButton = atoms({ marginTop: "xs" });
-export {
-  actionButton,
-  banner,
-  bannerHeading,
-  closeButton,
-  icon,
-  mainContentContainer,
-  messageContainer
-};
+var bannerHeading = style([{ float: "left" }, atoms({
+	margin: "none",
+	typography: "heading3-small"
+})]);
+var closeButton = style({ float: "right" });
+var messageContainer = style({ clear: "left" });
+var actionButton = atoms({ marginTop: "xs" });
+//#endregion
+export { actionButton, banner, bannerHeading, closeButton, icon, mainContentContainer, messageContainer };

package/dist/components/feedback/alerts/AlertBanner.js

@@ -1,29 +1,65 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { component } from "@gnist/component-utils";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
+import "../../../foundation/iconography/index.js";
 import { TextContainer } from "../../../foundation/typography/index.js";
-import { useTranslation } from "../../../translations/index.js";
-import classNames from "classnames";
-import "react";
-import "../../../foundation/logos/Logo.css.js";
-import "@gnist/themes/tokens.css.js";
-import "../../../utilities/accessibility/ScreenReaderOnly.js";
-import "../../../utilities/accessibility/visuallyHidden.css.js";
-import "../../progress/Spinner.js";
-import "../../actions/buttons/styles.css.js";
-import "../../../styles/states.css.js";
 import { TextButton } from "../../actions/buttons/TextButton.js";
 import { IconButton } from "../../actions/buttons/IconButton.js";
-import { bannerHeading, icon, closeButton, messageContainer, actionButton, mainContentContainer, banner } from "./AlertBanner.css.js";
-const BannerHeading = component("BannerHeading", bannerHeading, "h2");
-const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
-  const text = useTranslation((t) => t.components.feedback.alerts);
-  return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), typeof message === "string" ? jsx(TextContainer, { className: messageContainer, children: message }) : jsx("div", { className: messageContainer, children: message }), action && jsx(TextButton, { className: actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
-};
-export {
-  AlertBanner
+import "../../actions/buttons/index.js";
+import { useTranslation } from "../../../translations/index.js";
+import { actionButton, banner, bannerHeading, closeButton, icon, mainContentContainer, messageContainer } from "./AlertBanner.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { component } from "@gnist/component-utils";
+import classNames from "classnames";
+//#region src/components/feedback/alerts/AlertBanner.tsx
+var BannerHeading = component("BannerHeading", bannerHeading, "h2");
+/** An alert banner displays an important and high-signal message, and provides actions for users to address (or dismiss the banner). They’re meant to be noticed and often requires a user action to be dismissed.
+
+Message is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take. The message prop can be string or other React Node.
+
+Title and button with a contextual action are optional.
+
+Documentation: [AlertBanner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-alerts-alertbanner--docs)
+*/
+var AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
+	const text = useTranslation((t) => t.components.feedback.alerts);
+	return jsxs("div", {
+		className: classNames(className, banner({
+			type,
+			density
+		})),
+		children: [jsx(Icon, {
+			type,
+			icon: type,
+			className: icon({ type })
+		}), jsxs("div", {
+			className: mainContentContainer({ density }),
+			children: [
+				heading && jsx(BannerHeading, {
+					"$as": headingLevel,
+					children: heading
+				}),
+				dismiss && jsx(IconButton, {
+					className: closeButton,
+					icon: "close",
+					label: text.dismissLabel,
+					onClick: dismiss
+				}),
+				typeof message === "string" ? jsx(TextContainer, {
+					className: messageContainer,
+					children: message
+				}) : jsx("div", {
+					className: messageContainer,
+					children: message
+				}),
+				action && jsx(TextButton, {
+					className: actionButton,
+					onClick: action.onClick,
+					underline: true,
+					children: action.label
+				})
+			]
+		})]
+	});
 };
+//#endregion
+export { AlertBanner };

package/dist/components/feedback/alerts/index.cjs

@@ -1,5 +1,4 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const AlertBanner = require("./AlertBanner.cjs");
-exports.AlertBanner = AlertBanner.AlertBanner;
+const require_AlertBanner = require("./AlertBanner.cjs");
+exports.AlertBanner = require_AlertBanner.AlertBanner;

package/dist/components/feedback/alerts/index.js

@@ -1,5 +1,3 @@
 "use client";
 import { AlertBanner } from "./AlertBanner.js";
-export {
-  AlertBanner
-};
+export { AlertBanner };

package/dist/components/feedback/index.cjs

@@ -1,15 +1,18 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const AlertBanner = require("./alerts/AlertBanner.cjs");
-const LoadingSpinner = require("./loaders/LoadingSpinner.cjs");
-const LoadingBar = require("./loaders/LoadingBar.cjs");
-const Lozenge = require("./notifications/Lozenge.cjs");
-const ProgressBar = require("./progress/ProgressBar.cjs");
-exports.AlertBanner = AlertBanner.AlertBanner;
-exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
-exports.LoadingBar = LoadingBar.LoadingBar;
-exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;
-exports.Lozenge = Lozenge.Lozenge;
-exports.ProgressBar = ProgressBar.ProgressBar;
-exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;
+const require_AlertBanner = require("./alerts/AlertBanner.cjs");
+require("./alerts/index.cjs");
+const require_LoadingSpinner = require("./loaders/LoadingSpinner.cjs");
+const require_LoadingBar = require("./loaders/LoadingBar.cjs");
+require("./loaders/index.cjs");
+const require_Lozenge = require("./notifications/Lozenge.cjs");
+require("./notifications/index.cjs");
+const require_ProgressBar = require("./progress/ProgressBar.cjs");
+require("./progress/index.cjs");
+exports.AlertBanner = require_AlertBanner.AlertBanner;
+exports.LoadingBar = require_LoadingBar.LoadingBar;
+exports.LoadingBarComponent = require_LoadingBar.LoadingBarComponent;
+exports.LoadingSpinner = require_LoadingSpinner.LoadingSpinner;
+exports.Lozenge = require_Lozenge.Lozenge;
+exports.ProgressBar = require_ProgressBar.ProgressBar;
+exports.ProgressBarComponent = require_ProgressBar.ProgressBarComponent;

package/dist/components/feedback/index.js

@@ -1,15 +1,11 @@
 "use client";
 import { AlertBanner } from "./alerts/AlertBanner.js";
+import "./alerts/index.js";
 import { LoadingSpinner } from "./loaders/LoadingSpinner.js";
 import { LoadingBar, LoadingBarComponent } from "./loaders/LoadingBar.js";
+import "./loaders/index.js";
 import { Lozenge } from "./notifications/Lozenge.js";
+import "./notifications/index.js";
 import { ProgressBar, ProgressBarComponent } from "./progress/ProgressBar.js";
-export {
-  AlertBanner,
-  LoadingBar,
-  LoadingBarComponent,
-  LoadingSpinner,
-  Lozenge,
-  ProgressBar,
-  ProgressBarComponent
-};
+import "./progress/index.js";
+export { AlertBanner, LoadingBar, LoadingBarComponent, LoadingSpinner, Lozenge, ProgressBar, ProgressBarComponent };

package/dist/components/feedback/loaders/LoadingBar.cjs

@@ -1,21 +1,38 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const componentUtils = require("@gnist/component-utils");
-const loadingBar_css = require("./loadingBar.css.cjs");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
-  const barHeight = {
-    s: tokens_css_js.tokens.size.xxs,
-    m: tokens_css_js.tokens.size.xs,
-    l: tokens_css_js.tokens.size.s
-  };
-  return jsxRuntime.jsxs("div", { className: loadingBar_css.loadingBarStyles, children: [children, isLoading && maxDuration <= 30 && jsxRuntime.jsx("div", { className: loadingBar_css.loadingBar, role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, style: {
-    animationDuration: `${maxDuration}s`,
-    minHeight: barHeight[size]
-  } })] });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_loadingBar_css = require("./loadingBar.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_component_utils = require("@gnist/component-utils");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+//#region src/components/feedback/loaders/LoadingBar.tsx
+var LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
+	const barHeight = {
+		s: _gnist_themes_tokens_css_js.tokens.size.xxs,
+		m: _gnist_themes_tokens_css_js.tokens.size.xs,
+		l: _gnist_themes_tokens_css_js.tokens.size.s
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: require_loadingBar_css.loadingBarStyles,
+		children: [children, isLoading && maxDuration <= 30 && (0, react_jsx_runtime.jsx)("div", {
+			className: require_loadingBar_css.loadingBar,
+			role: "progressbar",
+			"aria-label": ariaLabel,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			style: {
+				animationDuration: `${maxDuration}s`,
+				minHeight: barHeight[size]
+			}
+		})]
+	});
 };
-const LoadingBar = componentUtils.component("Loading Bar", loadingBar_css.loadingBarStyles, LoadingBarComponent);
+/**
+* Loading bars are used to show the progress of a task or process.
+* They are used to show the user how far along they are in a process.
+*
+* Documentation: [LoadingBar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingbar--docs)
+*/
+var LoadingBar = (0, _gnist_component_utils.component)("Loading Bar", require_loadingBar_css.loadingBarStyles, LoadingBarComponent);
+//#endregion
 exports.LoadingBar = LoadingBar;
 exports.LoadingBarComponent = LoadingBarComponent;

package/dist/components/feedback/loaders/LoadingBar.js

@@ -1,21 +1,36 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { loadingBar, loadingBarStyles } from "./loadingBar.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { component } from "@gnist/component-utils";
-import { loadingBarStyles, loadingBar } from "./loadingBar.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-const LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
-  const barHeight = {
-    s: tokens.size.xxs,
-    m: tokens.size.xs,
-    l: tokens.size.s
-  };
-  return jsxs("div", { className: loadingBarStyles, children: [children, isLoading && maxDuration <= 30 && jsx("div", { className: loadingBar, role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, style: {
-    animationDuration: `${maxDuration}s`,
-    minHeight: barHeight[size]
-  } })] });
-};
-const LoadingBar = component("Loading Bar", loadingBarStyles, LoadingBarComponent);
-export {
-  LoadingBar,
-  LoadingBarComponent
+//#region src/components/feedback/loaders/LoadingBar.tsx
+var LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
+	const barHeight = {
+		s: tokens.size.xxs,
+		m: tokens.size.xs,
+		l: tokens.size.s
+	};
+	return jsxs("div", {
+		className: loadingBarStyles,
+		children: [children, isLoading && maxDuration <= 30 && jsx("div", {
+			className: loadingBar,
+			role: "progressbar",
+			"aria-label": ariaLabel,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			style: {
+				animationDuration: `${maxDuration}s`,
+				minHeight: barHeight[size]
+			}
+		})]
+	});
 };
+/**
+* Loading bars are used to show the progress of a task or process.
+* They are used to show the user how far along they are in a process.
+*
+* Documentation: [LoadingBar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingbar--docs)
+*/
+var LoadingBar = component("Loading Bar", loadingBarStyles, LoadingBarComponent);
+//#endregion
+export { LoadingBar, LoadingBarComponent };

package/dist/components/feedback/loaders/LoadingSpinner.cjs

@@ -1,29 +1,35 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const componentUtils = require("@gnist/component-utils");
-const loadingSpinner_css = require("./loadingSpinner.css.cjs");
-const Spinner = componentUtils.component("Spinner", loadingSpinner_css.loadingSpinnerStyle, "div");
-const LoadingSpinner = ({ isFullScreen = false, withoutDelay = false, delegated }) => {
-  const [showSpinner, setShowSpinner] = React.useState(false);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowSpinner(true);
-    }, withoutDelay ? 0 : 500);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [withoutDelay]);
-  if (!showSpinner) {
-    return null;
-  }
-  return jsxRuntime.jsx("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: isFullScreen ? "80vh" : "auto"
-  }, children: jsxRuntime.jsx(Spinner, { ...delegated }) });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_loadingSpinner_css = require("./loadingSpinner.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/components/feedback/loaders/LoadingSpinner.tsx
+var Spinner = (0, require("@gnist/component-utils").component)("Spinner", require_loadingSpinner_css.loadingSpinnerStyle, "div");
+/**
+* A loading spinner that can be used to indicate that a page or component is loading.
+*
+* Documentation: [LoadingSpinner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingspinner--docs)
+* */
+var LoadingSpinner = ({ isFullScreen = false, withoutDelay = false, delegated }) => {
+	const [showSpinner, setShowSpinner] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const timeout = setTimeout(() => {
+			setShowSpinner(true);
+		}, withoutDelay ? 0 : 500);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [withoutDelay]);
+	if (!showSpinner) return null;
+	return (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			height: isFullScreen ? "80vh" : "auto"
+		},
+		children: (0, react_jsx_runtime.jsx)(Spinner, { ...delegated })
+	});
 };
+//#endregion
 exports.LoadingSpinner = LoadingSpinner;

package/dist/components/feedback/loaders/LoadingSpinner.js

@@ -1,29 +1,35 @@
 "use client";
+import { loadingSpinnerStyle } from "./loadingSpinner.css.js";
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { component } from "@gnist/component-utils";
-import { loadingSpinnerStyle } from "./loadingSpinner.css.js";
-const Spinner = component("Spinner", loadingSpinnerStyle, "div");
-const LoadingSpinner = ({ isFullScreen = false, withoutDelay = false, delegated }) => {
-  const [showSpinner, setShowSpinner] = useState(false);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowSpinner(true);
-    }, withoutDelay ? 0 : 500);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [withoutDelay]);
-  if (!showSpinner) {
-    return null;
-  }
-  return jsx("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: isFullScreen ? "80vh" : "auto"
-  }, children: jsx(Spinner, { ...delegated }) });
-};
-export {
-  LoadingSpinner
+//#region src/components/feedback/loaders/LoadingSpinner.tsx
+var Spinner = component("Spinner", loadingSpinnerStyle, "div");
+/**
+* A loading spinner that can be used to indicate that a page or component is loading.
+*
+* Documentation: [LoadingSpinner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingspinner--docs)
+* */
+var LoadingSpinner = ({ isFullScreen = false, withoutDelay = false, delegated }) => {
+	const [showSpinner, setShowSpinner] = useState(false);
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setShowSpinner(true);
+		}, withoutDelay ? 0 : 500);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [withoutDelay]);
+	if (!showSpinner) return null;
+	return jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			height: isFullScreen ? "80vh" : "auto"
+		},
+		children: jsx(Spinner, { ...delegated })
+	});
 };
+//#endregion
+export { LoadingSpinner };

package/dist/components/feedback/loaders/index.cjs

@@ -1,8 +1,7 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const LoadingSpinner = require("./LoadingSpinner.cjs");
-const LoadingBar = require("./LoadingBar.cjs");
-exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
-exports.LoadingBar = LoadingBar.LoadingBar;
-exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;
+const require_LoadingSpinner = require("./LoadingSpinner.cjs");
+const require_LoadingBar = require("./LoadingBar.cjs");
+exports.LoadingBar = require_LoadingBar.LoadingBar;
+exports.LoadingBarComponent = require_LoadingBar.LoadingBarComponent;
+exports.LoadingSpinner = require_LoadingSpinner.LoadingSpinner;

package/dist/components/feedback/loaders/index.js

@@ -1,8 +1,4 @@
 "use client";
 import { LoadingSpinner } from "./LoadingSpinner.js";
 import { LoadingBar, LoadingBarComponent } from "./LoadingBar.js";
-export {
-  LoadingBar,
-  LoadingBarComponent,
-  LoadingSpinner
-};
+export { LoadingBar, LoadingBarComponent, LoadingSpinner };

package/dist/components/feedback/loaders/loadingBar.css.cjs

@@ -1,37 +1,23 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const css = require("@vanilla-extract/css");
-const loadingBarStyles = layers_css_js.gnistStyle([
-  {
-    overflow: "hidden",
-    display: "flex",
-    backgroundColor: tokens_css_js.tokens.palette.neutral[20],
-    width: "100%"
-  },
-  atoms_css_js.atoms({
-    borderRadius: "medium"
-  })
-]);
-const loadingAnimation = css.keyframes({
-  "0%": {
-    width: "0%"
-  },
-  "100%": {
-    width: "100%"
-  }
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/components/feedback/loaders/loadingBar.css.ts
+var loadingBarStyles = (0, _vanilla_extract_css.style)([{
+	overflow: "hidden",
+	display: "flex",
+	backgroundColor: _gnist_themes_tokens_css_js.tokens.palette.neutral[20],
+	width: "100%"
+}, (0, _gnist_themes_atoms_css_js.atoms)({ borderRadius: "medium" })]);
+var loadingAnimation = (0, _vanilla_extract_css.keyframes)({
+	"0%": { width: "0%" },
+	"100%": { width: "100%" }
 });
-const loadingBar = layers_css_js.gnistStyle([
-  {
-    backgroundColor: tokens_css_js.tokens.palette.tertiary[40],
-    animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
-  },
-  atoms_css_js.atoms({
-    borderRadius: "medium"
-  })
-]);
+var loadingBar = (0, _vanilla_extract_css.style)([{
+	backgroundColor: _gnist_themes_tokens_css_js.tokens.palette.tertiary[40],
+	animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
+}, (0, _gnist_themes_atoms_css_js.atoms)({ borderRadius: "medium" })]);
+//#endregion
 exports.loadingBar = loadingBar;
 exports.loadingBarStyles = loadingBarStyles;

package/dist/components/feedback/loaders/loadingBar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadingBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}
+{"version":3,"file":"loadingBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingBar.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}