@gnist/design-system 0.1.0

package/dist/components/progress/spinner.css.js

@@ -0,0 +1,27 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { keyframes, style } from "@vanilla-extract/css";
+const rotate360 = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+const fadeIn = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+const spinnerRecipe = style([
+  atoms({ borderWidth: "medium" }),
+  {
+    position: "absolute",
+    borderRadius: "50%",
+    background: "transparent",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderBottomColor: "transparent",
+    animation: `${rotate360} 1s cubic-bezier(0.4, 0.5, 0.7, 0.8) infinite, ${fadeIn} ease 0.5s 1`,
+    animationFillMode: "forwards"
+  }
+]);
+export {
+  spinnerRecipe
+};

package/dist/components/surfaces/accordion/Accordion.cjs

@@ -0,0 +1,21 @@
+"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 = require("../../../foundation/typography/index.cjs");
+const React = require("react");
+require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const accordion_css = require("./accordion.css.cjs");
+const AccordionElement = React.forwardRef(function AccordionElement2({ head, children, ...props }, ref) {
+  const headElement = typeof head === "string" ? jsxRuntime.jsx(index.Heading3Text, { className: atoms_css_js.atoms({ typography: "heading3-small" }), children: head }) : head;
+  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("details", { ...props, open: props.expanded, ref, children: [jsxRuntime.jsxs("summary", { className: accordion_css.head, children: [jsxRuntime.jsx("div", { className: accordion_css.headBackground }), headElement, jsxRuntime.jsx(Icon.Icon, { icon: "expand_more" })] }), jsxRuntime.jsx("div", { className: accordion_css.body, children })] }) });
+});
+const Accordion = componentUtils.component("Accordion", accordion_css.accordionRecipe, AccordionElement);
+exports.Accordion = Accordion;

package/dist/components/surfaces/accordion/Accordion.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+type AccordionProps = {
+    /** Head is the top section of the accordion. It can be a string or a React node. */
+    head: string | ReactNode;
+    /** Children is the content of the accordion. It can be a string or a React node. */
+    children: ReactNode;
+    /** Expanded is a boolean that determines if the accordion is expanded by default or not. */
+    expanded?: boolean;
+    /** withDivider is a boolean that determines if the accordion should have a divider or not, typically used whe lots of accordions are listed together. */
+    withDivider?: boolean;
+    /** withBackground is a boolean that determines if the accordion should have 'surface variant' background.  */
+    withBackground?: boolean;
+    /** className is a string that can be used to add custom styling to the accordion. */
+    className?: string;
+};
+/**
+ * The Accordion component is used to show and hide content.
+ * It is typically used when there is a lot of content that should be hidden by default. It is built with the HTML details and summary elements.
+ *
+ * To facilitate different use cases, the Accordion has some props that can be used to customize the component.
+ * More importantly, the Accordion has a head prop that can be used to pass in either a string or any React node.
+ * This is useful when you want to customize the head of the accordion. Same goes for the children prop.
+ */
+export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDetailsElement>>, import("@gnist/component-utils").VariantSelection<{
+    withDivider: {
+        true: {
+            borderBottom: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
+        };
+    };
+    withBackground: {
+        true: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>>;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/surfaces/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,KAAK,cAAc,GAAG;IAClB,oFAAoF;IACpF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8GAA8G;IAC9G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;GAIrB,CAAC"}

package/dist/components/surfaces/accordion/Accordion.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, Fragment, jsxs } 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 { Heading3Text } from "../../../foundation/typography/index.js";
+import { forwardRef } from "react";
+import "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { head, headBackground, body, accordionRecipe } from "./accordion.css.js";
+const AccordionElement = forwardRef(function AccordionElement2({ head: head$1, children, ...props }, ref) {
+  const headElement = typeof head$1 === "string" ? jsx(Heading3Text, { className: atoms({ typography: "heading3-small" }), children: head$1 }) : head$1;
+  return jsx(Fragment, { children: jsxs("details", { ...props, open: props.expanded, ref, children: [jsxs("summary", { className: head, children: [jsx("div", { className: headBackground }), headElement, jsx(Icon, { icon: "expand_more" })] }), jsx("div", { className: body, children })] }) });
+});
+const Accordion = component("Accordion", accordionRecipe, AccordionElement);
+export {
+  Accordion
+};

package/dist/components/surfaces/accordion/accordion.css.cjs

@@ -0,0 +1,76 @@
+"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 recipes = require("@vanilla-extract/recipes");
+const accordionRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      color: "on-background"
+    })
+  ],
+  variants: {
+    withDivider: {
+      true: {
+        borderBottom: `${tokens_css_js.tokens.stroke.small} solid ${tokens_css_js.tokens.color.outline}`
+      }
+    },
+    withBackground: {
+      true: {
+        backgroundColor: tokens_css_js.tokens.color["surface-variant"]
+      }
+    }
+  }
+});
+const head = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "xs",
+    typography: "heading3-small"
+  }),
+  {
+    cursor: "pointer",
+    paddingInline: tokens_css_js.tokens.spacing.xxs,
+    position: "relative",
+    selectors: {
+      "&:focus": {
+        outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
+      }
+    }
+  }
+]);
+const headBackground = css.style({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  left: 0,
+  selectors: {
+    [`${head}:hover &`]: {
+      backgroundColor: tokens_css_js.tokens.palette.black,
+      opacity: tokens_css_js.tokens.opacity["on-hover"]
+    }
+  }
+});
+const body = css.style({
+  padding: tokens_css_js.tokens.spacing.s,
+  paddingInline: tokens_css_js.tokens.spacing.xxs
+});
+css.globalStyle("summary::-webkit-details-marker", {
+  display: "none"
+});
+css.globalStyle(":not(details[open]) summary svg", {
+  transform: "rotate(0deg)",
+  transition: "transform 0.3s ease-in-out"
+});
+css.globalStyle("details[open] summary svg", {
+  transform: "rotate(180deg)",
+  transition: "transform 0.3s ease-in-out"
+});
+exports.accordionRecipe = accordionRecipe;
+exports.body = body;
+exports.head = head;
+exports.headBackground = headBackground;

package/dist/components/surfaces/accordion/accordion.css.d.ts

@@ -0,0 +1,16 @@
+export declare const accordionRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    withDivider: {
+        true: {
+            borderBottom: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
+        };
+    };
+    withBackground: {
+        true: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const head: string;
+export declare const headBackground: string;
+export declare const body: string;
+//# sourceMappingURL=accordion.css.d.ts.map

package/dist/components/surfaces/accordion/accordion.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/accordion.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;;;;;;;;;;;EAoB1B,CAAC;AAEH,eAAO,MAAM,IAAI,QAkBf,CAAC;AAEH,eAAO,MAAM,cAAc,QAWzB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC"}

package/dist/components/surfaces/accordion/accordion.css.js

@@ -0,0 +1,76 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const accordionRecipe = recipe({
+  base: [
+    atoms({
+      color: "on-background"
+    })
+  ],
+  variants: {
+    withDivider: {
+      true: {
+        borderBottom: `${tokens.stroke.small} solid ${tokens.color.outline}`
+      }
+    },
+    withBackground: {
+      true: {
+        backgroundColor: tokens.color["surface-variant"]
+      }
+    }
+  }
+});
+const head = style([
+  atoms({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "xs",
+    typography: "heading3-small"
+  }),
+  {
+    cursor: "pointer",
+    paddingInline: tokens.spacing.xxs,
+    position: "relative",
+    selectors: {
+      "&:focus": {
+        outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
+      }
+    }
+  }
+]);
+const headBackground = style({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  left: 0,
+  selectors: {
+    [`${head}:hover &`]: {
+      backgroundColor: tokens.palette.black,
+      opacity: tokens.opacity["on-hover"]
+    }
+  }
+});
+const body = style({
+  padding: tokens.spacing.s,
+  paddingInline: tokens.spacing.xxs
+});
+globalStyle("summary::-webkit-details-marker", {
+  display: "none"
+});
+globalStyle(":not(details[open]) summary svg", {
+  transform: "rotate(0deg)",
+  transition: "transform 0.3s ease-in-out"
+});
+globalStyle("details[open] summary svg", {
+  transform: "rotate(180deg)",
+  transition: "transform 0.3s ease-in-out"
+});
+export {
+  accordionRecipe,
+  body,
+  head,
+  headBackground
+};

package/dist/components/surfaces/accordion/index.cjs

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

package/dist/components/surfaces/accordion/index.d.ts

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

package/dist/components/surfaces/accordion/index.d.ts.map

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

package/dist/components/surfaces/accordion/index.js

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

package/dist/components/surfaces/accordion/package.json

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

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

@@ -0,0 +1,23 @@
+"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 ActionCard = React.forwardRef(function ActionCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+  const cardProps = {
+    ...props,
+    ref,
+    className: classNames__default.default(props.className, cards_css.cardsRecipe({
+      type: "action",
+      isLoading,
+      density
+    }))
+  };
+  return React.createElement($as ?? as ?? "button", cardProps, jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : children }));
+});
+exports.ActionCard = ActionCard;

package/dist/components/surfaces/cards/ActionCard.d.ts

@@ -0,0 +1,12 @@
+import { ElementType, ForwardRefExoticComponent } from "react";
+import { ActionCardProps } from "./CardProps.js";
+/** 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.
+
+`ActionCard` is meant for actions with an `onClick` attribute. If a link is desired, use `LinkCard` instead.
+*/
+export declare const ActionCard: ForwardRefExoticComponent<ActionCardProps<ElementType>>;
+//# sourceMappingURL=ActionCard.d.ts.map

package/dist/components/surfaces/cards/ActionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/ActionCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjD;;;;;;;EAOE;AACF,eAAO,MAAM,UAAU,EAAE,yBAAyB,CAC9C,eAAe,CAAC,WAAW,CAAC,CA6B9B,CAAC"}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef, createElement } from "react";
+import { cardsRecipe } from "./cards.css.js";
+import { LoadingSkeleton } from "./SharedComponents.js";
+const ActionCard = forwardRef(function ActionCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+  const cardProps = {
+    ...props,
+    ref,
+    className: classNames(props.className, cardsRecipe({
+      type: "action",
+      isLoading,
+      density
+    }))
+  };
+  return createElement($as ?? as ?? "button", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
+});
+export {
+  ActionCard
+};

package/dist/components/surfaces/cards/CardProps.d.ts

@@ -0,0 +1,23 @@
+import { PolymorphicProps } from "@gnist/component-utils";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, HTMLAttributes } from "react";
+import { DensitySizes } from "../../../foundation/typography/index.js";
+export type CardBaseProps<T extends ElementType> = PolymorphicProps<T> & {
+    /**
+     * Density of the card
+     * @default default
+     */
+    density?: DensitySizes;
+    /**
+     * Loading state of the card
+     */
+    isLoading?: boolean;
+};
+export type InfoCardProps<T extends ElementType> = CardBaseProps<T> & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Transparent background, mainly used for InfoCards
+     */
+    transparent?: boolean | undefined;
+};
+export type LinkCardProps<T extends ElementType> = CardBaseProps<T> & AnchorHTMLAttributes<HTMLAnchorElement>;
+export type ActionCardProps<T extends ElementType> = CardBaseProps<T> & ButtonHTMLAttributes<HTMLButtonElement>;
+//# sourceMappingURL=CardProps.d.ts.map

package/dist/components/surfaces/cards/CardProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardProps.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CardProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EACH,oBAAoB,EACpB,oBAAoB,EACpB,WAAW,EACX,cAAc,EACjB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAEvE,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,GAC/D,cAAc,CAAC,cAAc,CAAC,GAAG;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC,CAAC;AAEN,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,GAC/D,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAC5C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,GACjE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,16 @@
+"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 React = require("react");
+const CheckboxCard = React.forwardRef(function CheckboxCard2({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ...props }, ref) {
+  return jsxRuntime.jsx(InfoCard.InfoCard, { ref, className: checkboxCard_css.StyledCardRecipe({
+    disabled: props.disabled,
+    cardStyle: cardStyle ?? "elevation"
+  }), ...props, 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 })] }) });
+});
+exports.CheckboxCard = CheckboxCard;

package/dist/components/surfaces/cards/CheckboxCard.d.ts

@@ -0,0 +1,22 @@
+import { CheckboxProps } from "../../actions/selectionControls/Checkbox.js";
+import { HtmlSelectionControlProps, SelectionCardProps } from "./internal/SelectionCard.js";
+interface CheckboxCardProps extends SelectionCardProps {
+    /**
+     * Change handler function
+     */
+    onChange: CheckboxProps["onChange"];
+    /**
+     * Props which will be passed to the checkbox
+     */
+    checkboxProps?: Omit<HtmlSelectionControlProps, "ref">;
+}
+/**
+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.
+ */
+export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=CheckboxCard.d.ts.map

package/dist/components/surfaces/cards/CheckboxCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;CAC1D;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,yBAAyB,CACtD,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAqDtE,CAAC"}

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

@@ -0,0 +1,16 @@
+"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 { InfoCard } from "./InfoCard.js";
+import { StyledCardRecipe } from "./checkboxCard.css.js";
+import { forwardRef } from "react";
+const CheckboxCard = forwardRef(function CheckboxCard2({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ...props }, ref) {
+  return jsx(InfoCard, { ref, className: StyledCardRecipe({
+    disabled: props.disabled,
+    cardStyle: cardStyle ?? "elevation"
+  }), ...props, 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
+};

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

@@ -0,0 +1,19 @@
+"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 InfoCard = React.forwardRef(function InfoCard2({ isLoading, transparent, density, ...props }, ref) {
+  return jsxRuntime.jsx("div", { ref, ...props, className: classNames__default.default(props.className, cards_css.cardsRecipe({
+    type: "info",
+    isLoading,
+    transparent,
+    density
+  })), children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : props.children });
+});
+exports.InfoCard = InfoCard;

package/dist/components/surfaces/cards/InfoCard.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent } from "react";
+import { InfoCardProps } from "./CardProps.js";
+/** 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.
+
+*/
+export declare const InfoCard: ForwardRefExoticComponent<InfoCardProps<"div">>;
+//# sourceMappingURL=InfoCard.d.ts.map

package/dist/components/surfaces/cards/InfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/InfoCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAIH,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;;;;EAME;AACF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAsB/D,CAAC"}

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { cardsRecipe } from "./cards.css.js";
+import { LoadingSkeleton } from "./SharedComponents.js";
+const InfoCard = forwardRef(function InfoCard2({ isLoading, transparent, density, ...props }, ref) {
+  return jsx("div", { ref, ...props, className: classNames(props.className, cardsRecipe({
+    type: "info",
+    isLoading,
+    transparent,
+    density
+  })), children: isLoading ? jsx(LoadingSkeleton, {}) : props.children });
+});
+export {
+  InfoCard
+};

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

@@ -0,0 +1,23 @@
+"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 LinkCard = React.forwardRef(function LinkCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+  const cardProps = {
+    ...props,
+    ref,
+    className: classNames__default.default(props.className, cards_css.cardsRecipe({
+      type: "link",
+      isLoading,
+      density
+    }))
+  };
+  return React.createElement($as ?? as ?? "a", cardProps, jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : children }));
+});
+exports.LinkCard = LinkCard;

package/dist/components/surfaces/cards/LinkCard.d.ts

@@ -0,0 +1,12 @@
+import { ElementType, ForwardRefExoticComponent } from "react";
+import { LinkCardProps } from "./CardProps.js";
+/** 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.
+*/
+export declare const LinkCard: ForwardRefExoticComponent<LinkCardProps<ElementType>>;
+//# sourceMappingURL=LinkCard.d.ts.map

package/dist/components/surfaces/cards/LinkCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/LinkCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C;;;;;;;EAOE;AAEF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CA6BrE,CAAC"}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef, createElement } from "react";
+import { cardsRecipe } from "./cards.css.js";
+import { LoadingSkeleton } from "./SharedComponents.js";
+const LinkCard = forwardRef(function LinkCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+  const cardProps = {
+    ...props,
+    ref,
+    className: classNames(props.className, cardsRecipe({
+      type: "link",
+      isLoading,
+      density
+    }))
+  };
+  return createElement($as ?? as ?? "a", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
+});
+export {
+  LinkCard
+};

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

@@ -0,0 +1,16 @@
+"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 React = require("react");
+const checkboxCard_css = require("./checkboxCard.css.cjs");
+const RadioCard = React.forwardRef(function RadioCard2({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ...props }, ref) {
+  return jsxRuntime.jsx(InfoCard.InfoCard, { ...props, ref, className: checkboxCard_css.StyledCardRecipe({
+    disabled: props.disabled,
+    cardStyle: cardStyle ?? "elevation"
+  }), 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 }), jsxRuntime.jsx(SelectionCard.SelectionCardContent, { description, value, density: props.density, children })] }) });
+});
+exports.RadioCard = RadioCard;