@gnist/design-system 0.1.0

package/dist/building-blocks/skeletons/RectangularSkeleton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const reactContentLoader = require("react-content-loader");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
+const ContentLoader = reactContentLoader__default.default;
+const RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => jsxRuntime.jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: rounded ? "4" : "0", ry: rounded ? "4" : "0", height, width }) });
+exports.RectangularSkeleton = RectangularSkeleton;

package/dist/building-blocks/skeletons/RectangularSkeleton.d.ts

@@ -0,0 +1,14 @@
+interface RectangularSkeletonProps {
+    /** Whether the rectangle should be slightly rounded */
+    rounded?: boolean;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+/**
+ * A skeleton representing a rectangular element.
+ * By default, fills the entire width and height of the parent element.
+ */
+export declare const RectangularSkeleton: ({ className, height, width, rounded, }: RectangularSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RectangularSkeleton.d.ts.map

package/dist/building-blocks/skeletons/RectangularSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RectangularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/RectangularSkeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,2CAK7B,wBAAwB,4CAmB1B,CAAC"}

package/dist/building-blocks/skeletons/RectangularSkeleton.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import reactContentLoader from "react-content-loader";
+const ContentLoader = reactContentLoader;
+const RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: rounded ? "4" : "0", ry: rounded ? "4" : "0", height, width }) });
+export {
+  RectangularSkeleton
+};

package/dist/building-blocks/skeletons/TextSkeleton.cjs

@@ -0,0 +1,15 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Row = require("../../utilities/layout/Row.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const reactContentLoader = require("react-content-loader");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
+const ContentLoader = reactContentLoader__default.default;
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsxRuntime.jsx(Row.Row, { className, style: {
+  height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
+  width
+}, verticalAlign: "center", horizontalAlign: "end", children: jsxRuntime.jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+exports.TextSkeleton = TextSkeleton;

package/dist/building-blocks/skeletons/TextSkeleton.d.ts

@@ -0,0 +1,11 @@
+export interface TextSkeletonProps {
+    width?: string;
+    height?: string;
+    className?: string;
+}
+/**
+ * A skeleton representing a line of text.
+ * By default, gets an appropriate height from the font-size of the parent element, and fills the entire width.
+ */
+export declare const TextSkeleton: ({ className, height, width, }: TextSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextSkeleton.d.ts.map

package/dist/building-blocks/skeletons/TextSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAqBnB,CAAC"}

package/dist/building-blocks/skeletons/TextSkeleton.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Row } from "../../utilities/layout/Row.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import reactContentLoader from "react-content-loader";
+const ContentLoader = reactContentLoader;
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsx(Row, { className, style: {
+  height: `calc(1em * ${tokens.typeface["line-height"]})`,
+  width
+}, verticalAlign: "center", horizontalAlign: "end", children: jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+export {
+  TextSkeleton
+};

package/dist/building-blocks/skeletons/index.cjs

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

package/dist/building-blocks/skeletons/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./TextSkeleton.js";
+export * from "./CircularSkeleton.js";
+export * from "./RectangularSkeleton.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/building-blocks/skeletons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC"}

package/dist/building-blocks/skeletons/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { TextSkeleton } from "./TextSkeleton.js";
+import { CircularSkeleton } from "./CircularSkeleton.js";
+import { RectangularSkeleton } from "./RectangularSkeleton.js";
+export {
+  CircularSkeleton,
+  RectangularSkeleton,
+  TextSkeleton
+};

package/dist/building-blocks/skeletons/package.json

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

package/dist/components/actions/buttons/ButtonBase.cjs

@@ -0,0 +1,60 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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");
+const classNames = require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/visuallyHidden.css.cjs");
+const Spinner = require("../../progress/Spinner.cjs");
+const styles_css = require("./styles.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === "object" && "default" in e) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const BoxedButtonBase = React__namespace.forwardRef(function BoxedButtonBase2({ $as, as, children, loading, className, disabled = loading == null ? void 0 : loading.isLoading, type = "button", density = "default", ...props }, ref) {
+  const buttonProps = {
+    ...props,
+    disabled: (loading == null ? void 0 : loading.isLoading) === true ? loading.isLoading : disabled,
+    className: classNames__default.default(className, styles_css.boxedButton({ density })),
+    type,
+    ref
+  };
+  return React__namespace.createElement($as ?? as ?? "button", buttonProps, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React__namespace.Children.map(children, (child) => {
+    if (React__namespace.isValidElement(child) && child.type === Icon.Icon) {
+      return React__namespace.cloneElement(child, {
+        size: density === "compact" ? "m" : "l"
+      });
+    }
+    if (typeof child === "string") {
+      return jsxRuntime.jsx(index.BodyText, { style: {
+        fontWeight: tokens_css_js.tokens.typeface.weight.medium
+      }, children: child });
+    }
+    return child;
+  }), (loading == null ? void 0 : loading.isLoading) && (loading == null ? void 0 : loading.loadingText) && jsxRuntime.jsx(Spinner.Spinner, { diameter: tokens_css_js.tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading == null ? void 0 : loading.loadingText }), jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { "aria-live": "polite", children: (loading == null ? void 0 : loading.isLoading) && loading.loadingText })] }));
+});
+exports.BoxedButtonBase = BoxedButtonBase;

package/dist/components/actions/buttons/ButtonBase.d.ts

@@ -0,0 +1,49 @@
+import { PolymorphicProps } from "@gnist/component-utils";
+import * as React from "react";
+import { ButtonHTMLAttributes, ElementType } from "react";
+import { DensitySizes } from "../../../foundation/typography/index.js";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type BoxedButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement> & {
+    /**
+     * Density of the button
+     * @default default
+     */
+    density?: DensitySizes;
+    /**
+     * Loading state of the button and a placeholder text for screen readers
+     */
+    loading?: {
+        /**
+         * Loading state of the button
+         */
+        isLoading: boolean;
+        /**
+         * Placeholder text for screen readers
+         */
+        loadingText: string;
+    };
+};
+export declare const BoxedButtonBase: React.ForwardRefExoticComponent<Omit<{
+    as?: React.ElementType | undefined;
+    $as?: React.ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    /**
+     * Density of the button
+     * @default default
+     */
+    density?: DensitySizes;
+    /**
+     * Loading state of the button and a placeholder text for screen readers
+     */
+    loading?: {
+        /**
+         * Loading state of the button
+         */
+        isLoading: boolean;
+        /**
+         * Placeholder text for screen readers
+         */
+        loadingText: string;
+    };
+}, "ref"> & React.RefAttributes<Element>>;
+//# sourceMappingURL=ButtonBase.d.ts.map

package/dist/components/actions/buttons/ButtonBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAK1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAEH,YAAY,EACf,MAAM,yCAAyC,CAAC;AAKjD,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAElE,MAAM,MAAM,gBAAgB,CAAC,SAAS,SAAS,WAAW,IACtD,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE;QACN;;WAEG;QACH,SAAS,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;CACL,CAAC;AAEN,eAAO,MAAM,eAAe;;;;IApBpB;;;OAGG;cACO,YAAY;IACtB;;OAEG;cACO;QACN;;WAEG;QACH,SAAS,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;KACvB;yCA8DP,CAAC"}

package/dist/components/actions/buttons/ButtonBase.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import * as React from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
+import "../../../utilities/accessibility/visuallyHidden.css.js";
+import { Spinner } from "../../progress/Spinner.js";
+import { boxedButton } from "./styles.css.js";
+const BoxedButtonBase = React.forwardRef(function BoxedButtonBase2({ $as, as, children, loading, className, disabled = loading == null ? void 0 : loading.isLoading, type = "button", density = "default", ...props }, ref) {
+  const buttonProps = {
+    ...props,
+    disabled: (loading == null ? void 0 : loading.isLoading) === true ? loading.isLoading : disabled,
+    className: classNames(className, boxedButton({ density })),
+    type,
+    ref
+  };
+  return React.createElement($as ?? as ?? "button", buttonProps, jsxs(Fragment, { children: [React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Icon) {
+      return React.cloneElement(child, {
+        size: density === "compact" ? "m" : "l"
+      });
+    }
+    if (typeof child === "string") {
+      return jsx(BodyText, { style: {
+        fontWeight: tokens.typeface.weight.medium
+      }, children: child });
+    }
+    return child;
+  }), (loading == null ? void 0 : loading.isLoading) && (loading == null ? void 0 : loading.loadingText) && jsx(Spinner, { diameter: tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading == null ? void 0 : loading.loadingText }), jsx(ScreenReaderOnly, { "aria-live": "polite", children: (loading == null ? void 0 : loading.isLoading) && loading.loadingText })] }));
+});
+export {
+  BoxedButtonBase
+};

package/dist/components/actions/buttons/DangerButton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ButtonBase = require("./ButtonBase.cjs");
+const createButtonVariant = require("./createButtonVariant.cjs");
+const DangerButton = React.forwardRef(function DangerButton2(props, ref) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("error", props) });
+});
+exports.DangerButton = DangerButton;

package/dist/components/actions/buttons/DangerButton.d.ts

@@ -0,0 +1,15 @@
+import { ElementType } from "react";
+/**
+The danger button appears as a final confirmation for a destructive action like deleting or removing content. These are found mostly in confirmation states and modals.
+*/
+export declare const DangerButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    density?: import("../../../index.js").DensitySizes;
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=DangerButton.d.ts.map

package/dist/components/actions/buttons/DangerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/DangerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;EAEE;AAEF,eAAO,MAAM,YAAY;;;;;;;;;mDAMvB,CAAC"}

package/dist/components/actions/buttons/DangerButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxedButtonBase } from "./ButtonBase.js";
+import { getButtonVariantProps } from "./createButtonVariant.js";
+const DangerButton = forwardRef(function DangerButton2(props, ref) {
+  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("error", props) });
+});
+export {
+  DangerButton
+};

package/dist/components/actions/buttons/GhostButton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ButtonBase = require("./ButtonBase.cjs");
+const createButtonVariant = require("./createButtonVariant.cjs");
+const GhostButton = React.forwardRef(function GhostButton2(props, ref) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("transparent", props) });
+});
+exports.GhostButton = GhostButton;

package/dist/components/actions/buttons/GhostButton.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from "react";
+/**
+Ghost buttons indicate a lower level of emphasis and have a solid outline to draw less attention from the primary action. Because the background is transparent, the text and icon color is inherited from ancestors to acommodate use on different background colors.
+
+As the ghost button looks less like a traditional button, it must always be used with a CTA button nearby.
+*/
+export declare const GhostButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    density?: import("../../../index.js").DensitySizes;
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=GhostButton.d.ts.map

package/dist/components/actions/buttons/GhostButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/GhostButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;;;EAIE;AACF,eAAO,MAAM,WAAW;;;;;;;;;mDAStB,CAAC"}

package/dist/components/actions/buttons/GhostButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxedButtonBase } from "./ButtonBase.js";
+import { getButtonVariantProps } from "./createButtonVariant.js";
+const GhostButton = forwardRef(function GhostButton2(props, ref) {
+  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("transparent", props) });
+});
+export {
+  GhostButton
+};

package/dist/components/actions/buttons/IconButton.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const states_css = require("../../../styles/states.css.cjs");
+const classNames = require("classnames");
+const React = require("react");
+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 styles_css = require("./styles.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const IconButton = React.forwardRef(function IconButton2({ $as, as, className, showLabel, label, icon, variantOverride, ...props }, ref) {
+  return React.createElement($as ?? as ?? "button", {
+    ...props,
+    ref,
+    className: classNames__default.default(className, styles_css.buttonRecipe({ color: "transparent", buttonType: "icon" }), styles_css.iconButton({ showLabel }), states_css.stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showLabel === "left" && jsxRuntime.jsx(index.BodyText, { children: label }), jsxRuntime.jsx(Icon.Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsxRuntime.jsx(index.BodyText, { children: label })] }));
+});
+exports.IconButton = IconButton;

package/dist/components/actions/buttons/IconButton.d.ts

@@ -0,0 +1,27 @@
+import { VariantNames } from "../../../foundation/iconography/variantNames.js";
+import { ElementType } from "react";
+import { AllowedIcons } from "../../../foundation/iconography/index.js";
+/**
+An icon button is a button which displays only an icon with or without a label. Icon buttons allow users to take actions, and make choices, with a single tap. Because the background is transparent, the icon and label color is inherited from ancestors to acommodate use on different background colors.
+*/
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    /**
+     * Which icon to show.
+     */
+    icon: AllowedIcons;
+    /**
+     * A label describing the button's action.
+     */
+    label: string;
+    /**
+     * Where the label should be shown. If "none", label will be added as an accessible title on the icon.
+     * @default none
+     */
+    showLabel?: "left" | "right" | "none";
+    /** Override the default icon variant for this icon. To change the default icon variant, use IconVariantProvider */
+    variantOverride?: VariantNames;
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/actions/buttons/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAuB9E;;EAEE;AACF,eAAO,MAAM,UAAU;;;;IApBf;;OAEG;UACG,YAAY;IAClB;;OAEG;WACI,MAAM;IACb;;;OAGG;gBACS,MAAM,GAAG,OAAO,GAAG,MAAM;IACrC,mHAAmH;sBACjG,YAAY;mDAgDpC,CAAC"}

package/dist/components/actions/buttons/IconButton.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { stateLayers } from "../../../styles/states.css.js";
+import classNames from "classnames";
+import { forwardRef, createElement } from "react";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import { buttonRecipe, iconButton } from "./styles.css.js";
+const IconButton = forwardRef(function IconButton2({ $as, as, className, showLabel, label, icon, variantOverride, ...props }, ref) {
+  return createElement($as ?? as ?? "button", {
+    ...props,
+    ref,
+    className: classNames(className, buttonRecipe({ color: "transparent", buttonType: "icon" }), iconButton({ showLabel }), stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, jsxs(Fragment, { children: [showLabel === "left" && jsx(BodyText, { children: label }), jsx(Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsx(BodyText, { children: label })] }));
+});
+export {
+  IconButton
+};

package/dist/components/actions/buttons/PrimaryButton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ButtonBase = require("./ButtonBase.cjs");
+const createButtonVariant = require("./createButtonVariant.cjs");
+const PrimaryButton = React.forwardRef(function PrimaryButton2(props, ref) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("primary", props) });
+});
+exports.PrimaryButton = PrimaryButton;

package/dist/components/actions/buttons/PrimaryButton.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from "react";
+/**
+The primary button commands the highest emphasis on the page and is reserved for the main action you want a user to take on a page — the "Call To Action" (CTA) button.
+
+Primary buttons shouldn’t appear more than once in a section, and preferably just once on a screen, as it will confuse users as to which is the most important action. If you need a button next to a primary action, use the ghost button.
+*/
+export declare const PrimaryButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    density?: import("../../../index.js").DensitySizes;
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/components/actions/buttons/PrimaryButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;;;EAIE;AAEF,eAAO,MAAM,aAAa;;;;;;;;;mDASxB,CAAC"}

package/dist/components/actions/buttons/PrimaryButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxedButtonBase } from "./ButtonBase.js";
+import { getButtonVariantProps } from "./createButtonVariant.js";
+const PrimaryButton = forwardRef(function PrimaryButton2(props, ref) {
+  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("primary", props) });
+});
+export {
+  PrimaryButton
+};

package/dist/components/actions/buttons/SecondaryButton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ButtonBase = require("./ButtonBase.cjs");
+const createButtonVariant = require("./createButtonVariant.cjs");
+const SecondaryButton = React.forwardRef(function SecondaryButton2(props, ref) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("secondary", props) });
+});
+exports.SecondaryButton = SecondaryButton;

package/dist/components/actions/buttons/SecondaryButton.d.ts

@@ -0,0 +1,15 @@
+import { ElementType } from "react";
+/**
+Secondary buttons are used for the second most important action. These are often used if you have multiple actions on a page so need more than one button.
+*/
+export declare const SecondaryButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    density?: import("../../../index.js").DensitySizes;
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=SecondaryButton.d.ts.map

package/dist/components/actions/buttons/SecondaryButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;EAEE;AAEF,eAAO,MAAM,eAAe;;;;;;;;;mDAS1B,CAAC"}

package/dist/components/actions/buttons/SecondaryButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxedButtonBase } from "./ButtonBase.js";
+import { getButtonVariantProps } from "./createButtonVariant.js";
+const SecondaryButton = forwardRef(function SecondaryButton2(props, ref) {
+  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("secondary", props) });
+});
+export {
+  SecondaryButton
+};

package/dist/components/actions/buttons/SuccessButton.cjs

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ButtonBase = require("./ButtonBase.cjs");
+const createButtonVariant = require("./createButtonVariant.cjs");
+const SuccessButton = React.forwardRef(function SuccessButton2(props, ref) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("success", props) });
+});
+exports.SuccessButton = SuccessButton;

package/dist/components/actions/buttons/SuccessButton.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from "react";
+/**
+The success button is used for positive actions such as to complete, save or fulfill an order.
+
+There shouldn’t be more than one success button on a page to avoid overwhelming customers.
+*/
+export declare const SuccessButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    density?: import("../../../index.js").DensitySizes;
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=SuccessButton.d.ts.map

package/dist/components/actions/buttons/SuccessButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SuccessButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;;;EAIE;AAEF,eAAO,MAAM,aAAa;;;;;;;;;mDASxB,CAAC"}

package/dist/components/actions/buttons/SuccessButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxedButtonBase } from "./ButtonBase.js";
+import { getButtonVariantProps } from "./createButtonVariant.js";
+const SuccessButton = forwardRef(function SuccessButton2(props, ref) {
+  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("success", props) });
+});
+export {
+  SuccessButton
+};