@gnist/design-system 0.1.0

package/dist/components/actions/selectionControls/shared.css.cjs

@@ -0,0 +1,81 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const states_css = require("../../../styles/states.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const InputWrapper = css.style({
+  position: "relative",
+  display: "flex",
+  width: "fit-content",
+  height: "fit-content"
+});
+const LabelStyle = css.style([
+  {
+    alignSelf: "center"
+  }
+]);
+const LabelRecipe = recipes.recipe({
+  base: [
+    {
+      display: "flex",
+      gap: tokens_css_js.tokens.spacing.base,
+      wordBreak: "break-word",
+      width: "fit-content"
+    },
+    atoms_css_js.atoms({
+      paddingRight: "base",
+      borderRadius: "checkbox"
+    }),
+    states_css.focusStyle
+  ],
+  variants: {
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          color: "on-disabled"
+        }),
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  }
+});
+const InputStyleRecipe = recipes.recipe({
+  base: [
+    {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      border: "none",
+      outlineOffset: "0",
+      margin: "0",
+      appearance: "none",
+      overflow: "hidden",
+      zIndex: 1,
+      borderRadius: tokens_css_js.tokens["border-radius"].medium
+    },
+    states_css.focusStyle
+  ],
+  variants: {
+    disabled: {
+      true: [
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  }
+});
+const indentedDescriptionStyle = css.style({
+  paddingLeft: cssUtils.calc.add(tokens_css_js.tokens.size.s, cssUtils.calc.multiply(tokens_css_js.tokens.spacing.base, 3))
+});
+exports.InputStyleRecipe = InputStyleRecipe;
+exports.InputWrapper = InputWrapper;
+exports.LabelRecipe = LabelRecipe;
+exports.LabelStyle = LabelStyle;
+exports.indentedDescriptionStyle = indentedDescriptionStyle;

package/dist/components/actions/selectionControls/shared.css.d.ts

@@ -0,0 +1,18 @@
+export declare const InputWrapper: string;
+export declare const LabelStyle: string;
+export declare const LabelRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: (string | {
+            cursor: "not-allowed";
+        })[];
+    };
+}>;
+export declare const InputStyleRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+        }[];
+    };
+}>;
+export declare const indentedDescriptionStyle: string;
+//# sourceMappingURL=shared.css.d.ts.map

package/dist/components/actions/selectionControls/shared.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;EA2BtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAyB3B,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAEnC,CAAC"}

package/dist/components/actions/selectionControls/shared.css.js

@@ -0,0 +1,81 @@
+"use client";
+import { focusStyle } from "../../../styles/states.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+const InputWrapper = style({
+  position: "relative",
+  display: "flex",
+  width: "fit-content",
+  height: "fit-content"
+});
+const LabelStyle = style([
+  {
+    alignSelf: "center"
+  }
+]);
+const LabelRecipe = recipe({
+  base: [
+    {
+      display: "flex",
+      gap: tokens.spacing.base,
+      wordBreak: "break-word",
+      width: "fit-content"
+    },
+    atoms({
+      paddingRight: "base",
+      borderRadius: "checkbox"
+    }),
+    focusStyle
+  ],
+  variants: {
+    disabled: {
+      true: [
+        atoms({
+          color: "on-disabled"
+        }),
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  }
+});
+const InputStyleRecipe = recipe({
+  base: [
+    {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      border: "none",
+      outlineOffset: "0",
+      margin: "0",
+      appearance: "none",
+      overflow: "hidden",
+      zIndex: 1,
+      borderRadius: tokens["border-radius"].medium
+    },
+    focusStyle
+  ],
+  variants: {
+    disabled: {
+      true: [
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  }
+});
+const indentedDescriptionStyle = style({
+  paddingLeft: calc.add(tokens.size.s, calc.multiply(tokens.spacing.base, 3))
+});
+export {
+  InputStyleRecipe,
+  InputWrapper,
+  LabelRecipe,
+  LabelStyle,
+  indentedDescriptionStyle
+};

package/dist/components/actions/selectionControls/shared.d.ts

@@ -0,0 +1,38 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+import { CommonInputProps, Validity } from "../../inputs/textFields/shared.js";
+export interface SelectionControlProps<TValue> extends Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value" | "type" | "disabled" | "checked" | "id">, CommonInputProps<TValue>, Validity<{
+    errorMsgRequired: false;
+}> {
+    /**
+     * Option to hide the label. It will still be read by screen readers. May be useful for complex layouts.
+     */
+    hideLabel?: boolean;
+    /**
+     * An optional description, which can include arbitrary elements. Unlike the `label`,
+     * clicking the description does not trigger selection.
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether space should be reserved for an error message.
+     */
+    canShowErrorMessage?: boolean;
+    /**
+     * If you need to customise the layout, you can supply a custom render function
+     */
+    render?: (input: JSX.Element, description?: JSX.Element) => JSX.Element;
+}
+interface HelperTextWrapperProps extends Validity<{
+    errorMsgRequired: false;
+}> {
+    children: React.ReactNode;
+    id: string;
+    reserveSpaceForMessage?: boolean;
+    helperText?: string;
+}
+export declare const HelperTextWrapper: React.FC<HelperTextWrapperProps>;
+export declare const SelectionDescription: ({ disabled, children, }: {
+    disabled?: boolean;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shared.d.ts.map

package/dist/components/actions/selectionControls/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAI/E,MAAM,WAAW,qBAAqB,CAAC,MAAM,CACzC,SAAQ,IAAI,CACJ,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CACnE,EACD,gBAAgB,CAAC,MAAM,CAAC,EACxB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3E;AAED,UAAU,sBAAuB,SAAQ,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,4BAG9B;IACC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,4CAMA,CAAC"}

package/dist/components/actions/selectionControls/shared.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import { Column } from "../../../utilities/layout/Column.js";
+import "../../../utilities/layout/Row.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+const HelperTextWrapper = ({ children, id, validity, reserveSpaceForMessage, helperText }) => {
+  return jsxs(Column, { className: atoms({ position: "relative" }), children: [children, jsx(InputHelperText, { className: atoms({ marginLeft: "base" }), id, helperText, validity, reserveSpaceForMessage })] });
+};
+const SelectionDescription = ({ disabled, children }) => {
+  return jsx("div", { className: disabled ? atoms({ color: "on-disabled" }) : void 0, children });
+};
+export {
+  HelperTextWrapper,
+  SelectionDescription
+};

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

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const componentUtils = require("@gnist/component-utils");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+const index$1 = require("../../../foundation/typography/index.cjs");
+const index = require("../../../translations/index.cjs");
+const classNames = require("classnames");
+require("../../actions/buttons/PrimaryButton.cjs");
+require("../../actions/buttons/SecondaryButton.cjs");
+require("../../actions/buttons/SuccessButton.cjs");
+require("../../actions/buttons/DangerButton.cjs");
+require("../../actions/buttons/GhostButton.cjs");
+const TextButton = require("../../actions/buttons/TextButton.cjs");
+const IconButton = require("../../actions/buttons/IconButton.cjs");
+const AlertBanner_css = require("./AlertBanner.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const BannerHeading = componentUtils.component("BannerHeading", AlertBanner_css.bannerHeading, "h2");
+const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
+  const text = index.useTranslation((t) => t.components.feedback.alerts);
+  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { className: AlertBanner_css.textButton, onClick: action.onClick, children: action.label })] })] });
+};
+exports.AlertBanner = AlertBanner;

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

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const colors_css_js = require("@gnist/themes/colors.css.js");
+const css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
+const banner = recipes.recipe({
+  base: [
+    {
+      borderStyle: "solid"
+    },
+    atoms_css_js.atoms({
+      display: "flex",
+      borderWidth: "small",
+      borderRadius: "card"
+    })
+  ],
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ padding: "s" }),
+      compact: atoms_css_js.atoms({ padding: "xxs" })
+    },
+    type: {
+      success: colors_css_js.boxColors["success-container"],
+      warning: colors_css_js.boxColors["warning-container"],
+      error: colors_css_js.boxColors["error-container"],
+      info: colors_css_js.boxColors["info-container"]
+    }
+  }
+});
+const mainContentContainer = recipes.recipe({
+  base: {
+    flex: 1
+  },
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ marginLeft: "s" }),
+      compact: atoms_css_js.atoms({ marginLeft: "xxs" })
+    }
+  }
+});
+const bannerHeading = css.style([
+  { float: "left" },
+  atoms_css_js.atoms({ margin: "none", typography: "heading3-small" })
+]);
+const closeButton = css.style({ float: "right" });
+const messageContainer = css.style({ clear: "left" });
+const textButton = atoms_css_js.atoms({ marginTop: "base" });
+exports.banner = banner;
+exports.bannerHeading = bannerHeading;
+exports.closeButton = closeButton;
+exports.mainContentContainer = mainContentContainer;
+exports.messageContainer = messageContainer;
+exports.textButton = textButton;

package/dist/components/feedback/alerts/AlertBanner.css.d.ts

@@ -0,0 +1,23 @@
+export declare const banner: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+    type: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+}>;
+export declare const mainContentContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+}>;
+export declare const bannerHeading: string;
+export declare const closeButton: string;
+export declare const messageContainer: string;
+export declare const textButton: string;
+//# sourceMappingURL=AlertBanner.css.d.ts.map

package/dist/components/feedback/alerts/AlertBanner.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAU/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA4B,CAAC;AAErD,eAAO,MAAM,gBAAgB,QAA2B,CAAC;AAEzD,eAAO,MAAM,UAAU,QAA+B,CAAC"}

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

@@ -0,0 +1,55 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { boxColors } from "@gnist/themes/colors.css.js";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const 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-container"],
+      warning: boxColors["warning-container"],
+      error: boxColors["error-container"],
+      info: boxColors["info-container"]
+    }
+  }
+});
+const mainContentContainer = recipe({
+  base: {
+    flex: 1
+  },
+  variants: {
+    density: {
+      default: atoms({ marginLeft: "s" }),
+      compact: atoms({ marginLeft: "xxs" })
+    }
+  }
+});
+const bannerHeading = style([
+  { float: "left" },
+  atoms({ margin: "none", typography: "heading3-small" })
+]);
+const closeButton = style({ float: "right" });
+const messageContainer = style({ clear: "left" });
+const textButton = atoms({ marginTop: "base" });
+export {
+  banner,
+  bannerHeading,
+  closeButton,
+  mainContentContainer,
+  messageContainer,
+  textButton
+};

package/dist/components/feedback/alerts/AlertBanner.d.ts

@@ -0,0 +1,16 @@
+import { DensitySizes } from "../../../foundation/typography";
+export interface AlertBannerProps {
+    type: "info" | "success" | "warning" | "error";
+    heading?: string | undefined;
+    message: string;
+    dismiss?: () => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    density?: DensitySizes;
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string | undefined;
+}
+export declare const AlertBanner: ({ type, heading, message, dismiss, action, density, headingLevel, className, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AlertBanner.d.ts.map

package/dist/components/feedback/alerts/AlertBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAapD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CA6BlB,CAAC"}

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

@@ -0,0 +1,26 @@
+"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 { TextContainer } from "../../../foundation/typography/index.js";
+import { useTranslation } from "../../../translations/index.js";
+import classNames from "classnames";
+import "../../actions/buttons/PrimaryButton.js";
+import "../../actions/buttons/SecondaryButton.js";
+import "../../actions/buttons/SuccessButton.js";
+import "../../actions/buttons/DangerButton.js";
+import "../../actions/buttons/GhostButton.js";
+import { TextButton } from "../../actions/buttons/TextButton.js";
+import { IconButton } from "../../actions/buttons/IconButton.js";
+import { bannerHeading, banner, mainContentContainer, closeButton, messageContainer, textButton } 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 }), 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 }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(TextButton, { className: textButton, onClick: action.onClick, children: action.label })] })] });
+};
+export {
+  AlertBanner
+};

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

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

package/dist/components/feedback/alerts/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AlertBanner.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/alerts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

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

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

package/dist/components/feedback/alerts/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/feedback/index.cjs

@@ -0,0 +1,12 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const AlertBanner = require("./alerts/AlertBanner.cjs");
+const LoadingSpinner = require("./loaders/LoadingSpinner.cjs");
+const Lozenge = require("./notifications/Lozenge.cjs");
+const ProgressBar = require("./progress/ProgressBar.cjs");
+exports.AlertBanner = AlertBanner.AlertBanner;
+exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.Lozenge = Lozenge.Lozenge;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;

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

@@ -0,0 +1,5 @@
+export * from "./alerts/index.js";
+export * from "./loaders/index.js";
+export * from "./notifications/index.js";
+export * from "./progress/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/dist/components/feedback/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { AlertBanner } from "./alerts/AlertBanner.js";
+import { LoadingSpinner } from "./loaders/LoadingSpinner.js";
+import { Lozenge } from "./notifications/Lozenge.js";
+import { ProgressBar, ProgressBarComponent } from "./progress/ProgressBar.js";
+export {
+  AlertBanner,
+  LoadingSpinner,
+  Lozenge,
+  ProgressBar,
+  ProgressBarComponent
+};

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

@@ -0,0 +1,29 @@
+"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 }) });
+};
+exports.LoadingSpinner = LoadingSpinner;

package/dist/components/feedback/loaders/LoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+interface LoadingSpinnerProps {
+    isFullScreen?: boolean;
+    withoutDelay?: boolean;
+    delegated?: React.HTMLAttributes<HTMLDivElement>;
+}
+export declare const LoadingSpinner: ({ isFullScreen, withoutDelay, delegated, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=LoadingSpinner.d.ts.map

package/dist/components/feedback/loaders/LoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACpD;AAID,eAAO,MAAM,cAAc,+CAIxB,mBAAmB,mDAgCrB,CAAC"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } 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
+};

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

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

package/dist/components/feedback/loaders/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LoadingSpinner.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/loaders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

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

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

@@ -0,0 +1,23 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const rotate360 = css.keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+const loadingSpinnerStyle = css.style([
+  atoms_css_js.atoms({
+    borderRadius: "full",
+    width: "xxl",
+    height: "xxl"
+  }),
+  {
+    border: `${tokens_css_js.tokens.size.base} solid ${tokens_css_js.tokens.color["on-loader"]}`,
+    borderTopColor: tokens_css_js.tokens.color.loader,
+    animation: `${rotate360} 0.8s linear infinite`
+  }
+]);
+exports.loadingSpinnerStyle = loadingSpinnerStyle;