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

package/dist/components/surfaces/cards/CheckboxCard.cjs

@@ -1,18 +1,48 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
-const SelectionCard = require("./internal/SelectionCard.cjs");
-const InfoCard = require("./InfoCard.cjs");
-const checkboxCard_css = require("./checkboxCard.css.cjs");
-const classNames = require("classnames");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
+const require_SelectionCard = require("./internal/SelectionCard.cjs");
+const require_InfoCard = require("./InfoCard.cjs");
+const require_checkboxCard_css = require("./checkboxCard.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/surfaces/cards/CheckboxCard.tsx
+/**
+Checkbox cards allow you to present an option and optionally provide additional information and supplementary actions.
+
+The checkbox card includes a checkbox, label, and description. The card is clickable from top to above the description text.
+
+The card serves to draw extra attention to a checkbox selection in the user interface.
+
+Documentation: [CheckboxCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-checkboxcard--docs)
+*/
 function CheckboxCard({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ref, ...props }) {
-  return jsxRuntime.jsx(InfoCard.InfoCard, { ref, ...props, className: classNames__default.default(checkboxCard_css.StyledCardRecipe({
-    disabled: props.disabled,
-    cardStyle: cardStyle ?? "elevation"
-  }), props.className), children: isLoading ? jsxRuntime.jsx(SelectionCard.SelectionCardLoader, { type: "checkbox", density: props.density }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox.Checkbox, { label, value, onChange, validity, id, disabled: props.disabled, ...checkboxProps }), jsxRuntime.jsx(SelectionCard.SelectionCardContent, { description, value, density: props.density, children })] }) });
+	return (0, react_jsx_runtime.jsx)(require_InfoCard.InfoCard, {
+		ref,
+		...props,
+		className: (0, classnames.default)(require_checkboxCard_css.StyledCardRecipe({
+			disabled: props.disabled,
+			cardStyle: cardStyle ?? "elevation"
+		}), props.className),
+		children: isLoading ? (0, react_jsx_runtime.jsx)(require_SelectionCard.SelectionCardLoader, {
+			type: "checkbox",
+			density: props.density
+		}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+			label,
+			value,
+			onChange,
+			validity,
+			id,
+			disabled: props.disabled,
+			...checkboxProps
+		}), (0, react_jsx_runtime.jsx)(require_SelectionCard.SelectionCardContent, {
+			description,
+			value,
+			density: props.density,
+			children
+		})] })
+	});
 }
+//#endregion
 exports.CheckboxCard = CheckboxCard;

package/dist/components/surfaces/cards/CheckboxCard.js

@@ -1,16 +1,46 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
-import { SelectionCardLoader, SelectionCardContent } from "./internal/SelectionCard.js";
+import { SelectionCardContent, SelectionCardLoader } from "./internal/SelectionCard.js";
 import { InfoCard } from "./InfoCard.js";
 import { StyledCardRecipe } from "./checkboxCard.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+//#region src/components/surfaces/cards/CheckboxCard.tsx
+/**
+Checkbox cards allow you to present an option and optionally provide additional information and supplementary actions.
+
+The checkbox card includes a checkbox, label, and description. The card is clickable from top to above the description text.
+
+The card serves to draw extra attention to a checkbox selection in the user interface.
+
+Documentation: [CheckboxCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-checkboxcard--docs)
+*/
 function CheckboxCard({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ref, ...props }) {
-  return jsx(InfoCard, { ref, ...props, className: classNames(StyledCardRecipe({
-    disabled: props.disabled,
-    cardStyle: cardStyle ?? "elevation"
-  }), props.className), children: isLoading ? jsx(SelectionCardLoader, { type: "checkbox", density: props.density }) : jsxs(Fragment, { children: [jsx(Checkbox, { label, value, onChange, validity, id, disabled: props.disabled, ...checkboxProps }), jsx(SelectionCardContent, { description, value, density: props.density, children })] }) });
+	return jsx(InfoCard, {
+		ref,
+		...props,
+		className: classNames(StyledCardRecipe({
+			disabled: props.disabled,
+			cardStyle: cardStyle ?? "elevation"
+		}), props.className),
+		children: isLoading ? jsx(SelectionCardLoader, {
+			type: "checkbox",
+			density: props.density
+		}) : jsxs(Fragment, { children: [jsx(Checkbox, {
+			label,
+			value,
+			onChange,
+			validity,
+			id,
+			disabled: props.disabled,
+			...checkboxProps
+		}), jsx(SelectionCardContent, {
+			description,
+			value,
+			density: props.density,
+			children
+		})] })
+	});
 }
-export {
-  CheckboxCard
-};
+//#endregion
+export { CheckboxCard };

package/dist/components/surfaces/cards/InfoCard.cjs

@@ -1,18 +1,31 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const cards_css = require("./cards.css.cjs");
-const SharedComponents = require("./SharedComponents.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_cards_css = require("./cards.css.cjs");
+const require_SharedComponents = require("./SharedComponents.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/surfaces/cards/InfoCard.tsx
+/** Cards that contain content but is not clickable. A card can stand alone, without relying on surrounding elements for context.
+
+The component is empty and the content and layout can be designed for each spesific case and sent in as children.
+
+Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
+
+Documentation: [InfoCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-infocard--docs)
+*/
 function InfoCard({ isLoading, transparent, density, ref, ...props }) {
-  return jsxRuntime.jsx("div", { ref, ...props, className: classNames__default.default(cards_css.cardsRecipe({
-    type: "info",
-    isLoading,
-    transparent,
-    density
-  }), props.className), children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : props.children });
+	return (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		...props,
+		className: (0, classnames.default)(require_cards_css.cardsRecipe({
+			type: "info",
+			isLoading,
+			transparent,
+			density
+		}), props.className),
+		children: isLoading ? (0, react_jsx_runtime.jsx)(require_SharedComponents.LoadingSkeleton, {}) : props.children
+	});
 }
+//#endregion
 exports.InfoCard = InfoCard;

package/dist/components/surfaces/cards/InfoCard.js

@@ -1,16 +1,29 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
 import { cardsRecipe } from "./cards.css.js";
 import { LoadingSkeleton } from "./SharedComponents.js";
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+//#region src/components/surfaces/cards/InfoCard.tsx
+/** Cards that contain content but is not clickable. A card can stand alone, without relying on surrounding elements for context.
+
+The component is empty and the content and layout can be designed for each spesific case and sent in as children.
+
+Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
+
+Documentation: [InfoCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-infocard--docs)
+*/
 function InfoCard({ isLoading, transparent, density, ref, ...props }) {
-  return jsx("div", { ref, ...props, className: classNames(cardsRecipe({
-    type: "info",
-    isLoading,
-    transparent,
-    density
-  }), props.className), children: isLoading ? jsx(LoadingSkeleton, {}) : props.children });
+	return jsx("div", {
+		ref,
+		...props,
+		className: classNames(cardsRecipe({
+			type: "info",
+			isLoading,
+			transparent,
+			density
+		}), props.className),
+		children: isLoading ? jsx(LoadingSkeleton, {}) : props.children
+	});
 }
-export {
-  InfoCard
-};
+//#endregion
+export { InfoCard };

package/dist/components/surfaces/cards/LinkCard.cjs

@@ -1,23 +1,33 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const cards_css = require("./cards.css.cjs");
-const SharedComponents = require("./SharedComponents.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_cards_css = require("./cards.css.cjs");
+const require_SharedComponents = require("./SharedComponents.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/surfaces/cards/LinkCard.tsx
+/** Cards that contain content and actions about a single subject that helps users make a decision. The card serves as an overview and an entry point for more detailed information about the subject. A card can stand alone, without relying on surrounding elements for context.
+
+The component is empty and the content and layout can be designed for each spesific case and sent in as children.
+
+Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
+
+`LinkCard` is meant for links with a `href` attribute. If an `onClick` action is desired, use `ActionCard` instead.
+
+Documentation: [LinkCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-linkcard--docs)
+*/
 function LinkCard({ $as, as, children, isLoading, density, ref, ...props }) {
-  const cardProps = {
-    ...props,
-    ref,
-    className: classNames__default.default(cards_css.cardsRecipe({
-      type: "link",
-      isLoading,
-      density
-    }), props.className)
-  };
-  return React.createElement($as ?? as ?? "a", cardProps, jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : children }));
+	const cardProps = {
+		...props,
+		ref,
+		className: (0, classnames.default)(require_cards_css.cardsRecipe({
+			type: "link",
+			isLoading,
+			density
+		}), props.className)
+	};
+	return (0, react.createElement)($as ?? as ?? "a", cardProps, (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: isLoading ? (0, react_jsx_runtime.jsx)(require_SharedComponents.LoadingSkeleton, {}) : children }));
 }
+//#endregion
 exports.LinkCard = LinkCard;

package/dist/components/surfaces/cards/LinkCard.js

@@ -1,21 +1,31 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
-import classNames from "classnames";
-import { createElement } from "react";
 import { cardsRecipe } from "./cards.css.js";
 import { LoadingSkeleton } from "./SharedComponents.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import classNames from "classnames";
+//#region src/components/surfaces/cards/LinkCard.tsx
+/** Cards that contain content and actions about a single subject that helps users make a decision. The card serves as an overview and an entry point for more detailed information about the subject. A card can stand alone, without relying on surrounding elements for context.
+
+The component is empty and the content and layout can be designed for each spesific case and sent in as children.
+
+Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
+
+`LinkCard` is meant for links with a `href` attribute. If an `onClick` action is desired, use `ActionCard` instead.
+
+Documentation: [LinkCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-linkcard--docs)
+*/
 function LinkCard({ $as, as, children, isLoading, density, ref, ...props }) {
-  const cardProps = {
-    ...props,
-    ref,
-    className: classNames(cardsRecipe({
-      type: "link",
-      isLoading,
-      density
-    }), props.className)
-  };
-  return createElement($as ?? as ?? "a", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
+	const cardProps = {
+		...props,
+		ref,
+		className: classNames(cardsRecipe({
+			type: "link",
+			isLoading,
+			density
+		}), props.className)
+	};
+	return createElement($as ?? as ?? "a", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
 }
-export {
-  LinkCard
-};
+//#endregion
+export { LinkCard };

package/dist/components/surfaces/cards/RadioCard.cjs

@@ -1,18 +1,49 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const RadioButton = require("../../actions/selectionControls/RadioButton.cjs");
-const SelectionCard = require("./internal/SelectionCard.cjs");
-const InfoCard = require("./InfoCard.cjs");
-const checkboxCard_css = require("./checkboxCard.css.cjs");
-const classNames = require("classnames");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_RadioButton = require("../../actions/selectionControls/RadioButton.cjs");
+const require_SelectionCard = require("./internal/SelectionCard.cjs");
+const require_InfoCard = require("./InfoCard.cjs");
+const require_checkboxCard_css = require("./checkboxCard.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/surfaces/cards/RadioCard.tsx
+/**
+Radio cards allow you to present an option and optionally provide additional information and supplementary actions.
+
+The radio card includes a radio button, label, and description. The card is clickable from top to above the description text.
+
+The card serves to draw extra attention to a radio button selection in the user interface.
+
+Documentation: [RadioCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-radiocard--docs)
+*/
 function RadioCard({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ref, checked, ...props }) {
-  return jsxRuntime.jsx(InfoCard.InfoCard, { ref, ...props, className: classNames__default.default(checkboxCard_css.StyledCardRecipe({
-    disabled: props.disabled,
-    cardStyle: cardStyle ?? "elevation"
-  }), props.className), children: isLoading ? jsxRuntime.jsx(SelectionCard.SelectionCardLoader, { type: "radio", density: props.density }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(RadioButton.RadioButton, { label, value, onChange, disabled: props.disabled, validity, id, name, checked }), jsxRuntime.jsx(SelectionCard.SelectionCardContent, { description, value: checked, density: props.density, children })] }) });
+	return (0, react_jsx_runtime.jsx)(require_InfoCard.InfoCard, {
+		ref,
+		...props,
+		className: (0, classnames.default)(require_checkboxCard_css.StyledCardRecipe({
+			disabled: props.disabled,
+			cardStyle: cardStyle ?? "elevation"
+		}), props.className),
+		children: isLoading ? (0, react_jsx_runtime.jsx)(require_SelectionCard.SelectionCardLoader, {
+			type: "radio",
+			density: props.density
+		}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(require_RadioButton.RadioButton, {
+			label,
+			value,
+			onChange,
+			disabled: props.disabled,
+			validity,
+			id,
+			name,
+			checked
+		}), (0, react_jsx_runtime.jsx)(require_SelectionCard.SelectionCardContent, {
+			description,
+			value: checked,
+			density: props.density,
+			children
+		})] })
+	});
 }
+//#endregion
 exports.RadioCard = RadioCard;

package/dist/components/surfaces/cards/RadioCard.js

@@ -1,16 +1,47 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { RadioButton } from "../../actions/selectionControls/RadioButton.js";
-import { SelectionCardLoader, SelectionCardContent } from "./internal/SelectionCard.js";
+import { SelectionCardContent, SelectionCardLoader } from "./internal/SelectionCard.js";
 import { InfoCard } from "./InfoCard.js";
 import { StyledCardRecipe } from "./checkboxCard.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+//#region src/components/surfaces/cards/RadioCard.tsx
+/**
+Radio cards allow you to present an option and optionally provide additional information and supplementary actions.
+
+The radio card includes a radio button, label, and description. The card is clickable from top to above the description text.
+
+The card serves to draw extra attention to a radio button selection in the user interface.
+
+Documentation: [RadioCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-radiocard--docs)
+*/
 function RadioCard({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ref, checked, ...props }) {
-  return jsx(InfoCard, { ref, ...props, className: classNames(StyledCardRecipe({
-    disabled: props.disabled,
-    cardStyle: cardStyle ?? "elevation"
-  }), props.className), children: isLoading ? jsx(SelectionCardLoader, { type: "radio", density: props.density }) : jsxs(Fragment, { children: [jsx(RadioButton, { label, value, onChange, disabled: props.disabled, validity, id, name, checked }), jsx(SelectionCardContent, { description, value: checked, density: props.density, children })] }) });
+	return jsx(InfoCard, {
+		ref,
+		...props,
+		className: classNames(StyledCardRecipe({
+			disabled: props.disabled,
+			cardStyle: cardStyle ?? "elevation"
+		}), props.className),
+		children: isLoading ? jsx(SelectionCardLoader, {
+			type: "radio",
+			density: props.density
+		}) : jsxs(Fragment, { children: [jsx(RadioButton, {
+			label,
+			value,
+			onChange,
+			disabled: props.disabled,
+			validity,
+			id,
+			name,
+			checked
+		}), jsx(SelectionCardContent, {
+			description,
+			value: checked,
+			density: props.density,
+			children
+		})] })
+	});
 }
-export {
-  RadioCard
-};
+//#endregion
+export { RadioCard };

package/dist/components/surfaces/cards/SharedComponents.cjs

@@ -1,23 +1,21 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-require("../../../building-blocks/inputs/internal/TextBelowInput.cjs");
-require("../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../foundation/iconography/icons.cjs");
-require("../../../foundation/iconography/Icon.cjs");
-const index = require("../../../foundation/typography/index.cjs");
-require("react");
-require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const TextSkeleton = require("../../../building-blocks/skeletons/TextSkeleton.cjs");
-require("@gnist/themes/tokens.css.js");
-require("react-content-loader");
-const LoadingSkeleton = () => jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: atoms_css_js.atoms({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start"
-}), children: [jsxRuntime.jsx(index.Heading3Text, { children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, { width: "10em" }) }), jsxRuntime.jsx("div", { className: atoms_css_js.atoms({ marginTop: "base" }), children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, { width: "100px" }) })] }) });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../../foundation/typography/index.cjs");
+const require_TextSkeleton = require("../../../building-blocks/skeletons/TextSkeleton.cjs");
+require("../../../building-blocks/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+//#region src/components/surfaces/cards/SharedComponents.tsx
+var LoadingSkeleton = () => (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react_jsx_runtime.jsxs)("div", {
+	className: (0, _gnist_themes_atoms_css_js.atoms)({
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start"
+	}),
+	children: [(0, react_jsx_runtime.jsx)(require_index.Heading3Text, { children: (0, react_jsx_runtime.jsx)(require_TextSkeleton.TextSkeleton, { width: "10em" }) }), (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _gnist_themes_atoms_css_js.atoms)({ marginTop: "base" }),
+		children: (0, react_jsx_runtime.jsx)(require_TextSkeleton.TextSkeleton, { width: "100px" })
+	})]
+}) });
+//#endregion
 exports.LoadingSkeleton = LoadingSkeleton;

package/dist/components/surfaces/cards/SharedComponents.js

@@ -1,23 +1,20 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import "../../../building-blocks/inputs/internal/TextBelowInput.js";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
-import "../../../foundation/iconography/Icon.js";
 import { Heading3Text } from "../../../foundation/typography/index.js";
-import "react";
-import "classnames";
-import "../../../foundation/logos/Logo.css.js";
-import { atoms } from "@gnist/themes/atoms.css.js";
 import { TextSkeleton } from "../../../building-blocks/skeletons/TextSkeleton.js";
-import "@gnist/themes/tokens.css.js";
-import "react-content-loader";
-const LoadingSkeleton = () => jsx(Fragment, { children: jsxs("div", { className: atoms({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start"
-}), children: [jsx(Heading3Text, { children: jsx(TextSkeleton, { width: "10em" }) }), jsx("div", { className: atoms({ marginTop: "base" }), children: jsx(TextSkeleton, { width: "100px" }) })] }) });
-export {
-  LoadingSkeleton
-};
+import "../../../building-blocks/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { atoms } from "@gnist/themes/atoms.css.js";
+//#region src/components/surfaces/cards/SharedComponents.tsx
+var LoadingSkeleton = () => jsx(Fragment, { children: jsxs("div", {
+	className: atoms({
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start"
+	}),
+	children: [jsx(Heading3Text, { children: jsx(TextSkeleton, { width: "10em" }) }), jsx("div", {
+		className: atoms({ marginTop: "base" }),
+		children: jsx(TextSkeleton, { width: "100px" })
+	})]
+}) });
+//#endregion
+export { LoadingSkeleton };