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

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

@@ -1,10 +1,18 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ButtonBase = require("./ButtonBase.cjs");
-const createButtonVariant = require("./createButtonVariant.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ButtonBase = require("./ButtonBase.cjs");
+const require_createButtonVariant = require("./createButtonVariant.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/buttons/GhostButton.tsx
+/**
+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.
+
+Documentation: [GhostButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-ghostbutton--docs)
+*/
 function GhostButton(props) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("transparent", props) });
+	return (0, react_jsx_runtime.jsx)(require_ButtonBase.BoxedButtonBase, { ...require_createButtonVariant.getButtonVariantProps("transparent", props) });
 }
+//#endregion
 exports.GhostButton = GhostButton;

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

@@ -1,10 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/buttons/GhostButton.tsx
+/**
+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.
+
+Documentation: [GhostButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-ghostbutton--docs)
+*/
 function GhostButton(props) {
-  return jsx(BoxedButtonBase, { ...getButtonVariantProps("transparent", props) });
+	return jsx(BoxedButtonBase, { ...getButtonVariantProps("transparent", props) });
 }
-export {
-  GhostButton
-};
+//#endregion
+export { GhostButton };

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

@@ -1,27 +1,49 @@
 "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 require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/iconography/index.cjs");
+const require_index$1 = require("../../../foundation/typography/index.cjs");
+const require_states_css = require("../../../styles/states.css.cjs");
+const require_styles_css = require("./styles.css.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/actions/buttons/IconButton.tsx
+/**
+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.
+
+Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for IconButton.
+
+Documentation: [IconButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-iconbutton--docs)
+*/
 function IconButton({ $as, as, className, showLabel, label, icon, variantOverride, ...props }) {
-  return React.createElement($as ?? as ?? "button", {
-    ...props,
-    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, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label })] }));
+	return (0, react.createElement)($as ?? as ?? "button", {
+		...props,
+		className: (0, classnames.default)(className, require_styles_css.buttonRecipe({
+			color: "transparent",
+			buttonType: "icon"
+		}), require_styles_css.iconButton({ showLabel }), require_states_css.stateLayers({
+			borderSize: "medium",
+			borderRadius: "button",
+			backgroundColor: "palette-black",
+			setFocusState: true
+		}))
+	}, (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		showLabel === "left" && (0, react_jsx_runtime.jsx)(require_index$1.BodyText, {
+			className: require_styles_css.actionText,
+			children: label
+		}),
+		(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			icon,
+			title: showLabel ? void 0 : label,
+			variantOverride
+		}),
+		showLabel === "right" && (0, react_jsx_runtime.jsx)(require_index$1.BodyText, {
+			className: require_styles_css.actionText,
+			children: label
+		})
+	] }));
 }
+//#endregion
 exports.IconButton = IconButton;

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

@@ -1,25 +1,47 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { stateLayers } from "../../../styles/states.css.js";
-import classNames from "classnames";
-import { 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 "../../../foundation/iconography/index.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import { buttonRecipe, iconButton, actionText } from "./styles.css.js";
+import { stateLayers } from "../../../styles/states.css.js";
+import { actionText, buttonRecipe, iconButton } from "./styles.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import classNames from "classnames";
+//#region src/components/actions/buttons/IconButton.tsx
+/**
+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.
+
+Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for IconButton.
+
+Documentation: [IconButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-iconbutton--docs)
+*/
 function IconButton({ $as, as, className, showLabel, label, icon, variantOverride, ...props }) {
-  return createElement($as ?? as ?? "button", {
-    ...props,
-    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, { className: actionText, children: label }), jsx(Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsx(BodyText, { className: actionText, children: label })] }));
+	return createElement($as ?? as ?? "button", {
+		...props,
+		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, {
+			className: actionText,
+			children: label
+		}),
+		jsx(Icon, {
+			icon,
+			title: showLabel ? void 0 : label,
+			variantOverride
+		}),
+		showLabel === "right" && jsx(BodyText, {
+			className: actionText,
+			children: label
+		})
+	] }));
 }
-export {
-  IconButton
-};
+//#endregion
+export { IconButton };

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

@@ -1,10 +1,18 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ButtonBase = require("./ButtonBase.cjs");
-const createButtonVariant = require("./createButtonVariant.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ButtonBase = require("./ButtonBase.cjs");
+const require_createButtonVariant = require("./createButtonVariant.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/buttons/PrimaryButton.tsx
+/**
+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.
+
+Documentation: [PrimaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-primarybutton--docs)
+*/
 function PrimaryButton(props) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("primary", props) });
+	return (0, react_jsx_runtime.jsx)(require_ButtonBase.BoxedButtonBase, { ...require_createButtonVariant.getButtonVariantProps("primary", props) });
 }
+//#endregion
 exports.PrimaryButton = PrimaryButton;

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

@@ -1,10 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/buttons/PrimaryButton.tsx
+/**
+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.
+
+Documentation: [PrimaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-primarybutton--docs)
+*/
 function PrimaryButton(props) {
-  return jsx(BoxedButtonBase, { ...getButtonVariantProps("primary", props) });
+	return jsx(BoxedButtonBase, { ...getButtonVariantProps("primary", props) });
 }
-export {
-  PrimaryButton
-};
+//#endregion
+export { PrimaryButton };

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

@@ -1,10 +1,16 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ButtonBase = require("./ButtonBase.cjs");
-const createButtonVariant = require("./createButtonVariant.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ButtonBase = require("./ButtonBase.cjs");
+const require_createButtonVariant = require("./createButtonVariant.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/buttons/SecondaryButton.tsx
+/**
+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.
+
+Documentation: [SecondaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-secondarybutton--docs)
+*/
 function SecondaryButton(props) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("secondary", props) });
+	return (0, react_jsx_runtime.jsx)(require_ButtonBase.BoxedButtonBase, { ...require_createButtonVariant.getButtonVariantProps("secondary", props) });
 }
+//#endregion
 exports.SecondaryButton = SecondaryButton;

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

@@ -1,10 +1,15 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/buttons/SecondaryButton.tsx
+/**
+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.
+
+Documentation: [SecondaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-secondarybutton--docs)
+*/
 function SecondaryButton(props) {
-  return jsx(BoxedButtonBase, { ...getButtonVariantProps("secondary", props) });
+	return jsx(BoxedButtonBase, { ...getButtonVariantProps("secondary", props) });
 }
-export {
-  SecondaryButton
-};
+//#endregion
+export { SecondaryButton };

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

@@ -1,10 +1,18 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ButtonBase = require("./ButtonBase.cjs");
-const createButtonVariant = require("./createButtonVariant.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ButtonBase = require("./ButtonBase.cjs");
+const require_createButtonVariant = require("./createButtonVariant.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/buttons/SuccessButton.tsx
+/**
+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.
+
+Documentation: [SuccessButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-successbutton--docs)
+*/
 function SuccessButton(props) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("success", props) });
+	return (0, react_jsx_runtime.jsx)(require_ButtonBase.BoxedButtonBase, { ...require_createButtonVariant.getButtonVariantProps("success", props) });
 }
+//#endregion
 exports.SuccessButton = SuccessButton;

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

@@ -1,10 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/buttons/SuccessButton.tsx
+/**
+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.
+
+Documentation: [SuccessButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-successbutton--docs)
+*/
 function SuccessButton(props) {
-  return jsx(BoxedButtonBase, { ...getButtonVariantProps("success", props) });
+	return jsx(BoxedButtonBase, { ...getButtonVariantProps("success", props) });
 }
-export {
-  SuccessButton
-};
+//#endregion
+export { SuccessButton };

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

@@ -1,28 +1,37 @@
 "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");
-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 states_css = require("../../../styles/states.css.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 require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../../foundation/typography/index.cjs");
+require("../../../foundation/index.cjs");
+const require_states_css = require("../../../styles/states.css.cjs");
+const require_styles_css = require("./styles.css.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/actions/buttons/TextButton.tsx
+/**
+Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards and dialogs, text buttons help maintain an emphasis on card content. Because the background is transparent, the text and underline color is inherited from ancestors to acommodate use on different background colors.
+
+Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for TextButton.
+
+Documentation: [TextButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-textbutton--docs)
+*/
 function TextButton({ $as, as, className, underline, ...props }) {
-  return React.createElement($as ?? as ?? "button", {
-    ...props,
-    className: classNames__default.default(className, styles_css.buttonRecipe({ color: "transparent", buttonType: "text" }), states_css.stateLayers({
-      borderSize: "medium",
-      borderRadius: "button",
-      backgroundColor: "palette-black",
-      setFocusState: true
-    }))
-  }, props.children ? jsxRuntime.jsx(index.BodyText, { className: classNames__default.default(styles_css.actionText, styles_css.textButtonText({ underline })), children: props.children }) : void 0);
+	return (0, react.createElement)($as ?? as ?? "button", {
+		...props,
+		className: (0, classnames.default)(className, require_styles_css.buttonRecipe({
+			color: "transparent",
+			buttonType: "text"
+		}), require_states_css.stateLayers({
+			borderSize: "medium",
+			borderRadius: "button",
+			backgroundColor: "palette-black",
+			setFocusState: true
+		}))
+	}, props.children ? (0, react_jsx_runtime.jsx)(require_index.BodyText, {
+		className: (0, classnames.default)(require_styles_css.actionText, require_styles_css.textButtonText({ underline })),
+		children: props.children
+	}) : void 0);
 }
+//#endregion
 exports.TextButton = TextButton;

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

@@ -1,26 +1,35 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
-import "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
+import "../../../foundation/index.js";
+import { stateLayers } from "../../../styles/states.css.js";
+import { actionText, buttonRecipe, textButtonText } from "./styles.css.js";
+import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
-import { stateLayers } from "../../../styles/states.css.js";
-import { buttonRecipe, actionText, textButtonText } from "./styles.css.js";
+//#region src/components/actions/buttons/TextButton.tsx
+/**
+Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards and dialogs, text buttons help maintain an emphasis on card content. Because the background is transparent, the text and underline color is inherited from ancestors to acommodate use on different background colors.
+
+Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for TextButton.
+
+Documentation: [TextButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-textbutton--docs)
+*/
 function TextButton({ $as, as, className, underline, ...props }) {
-  return createElement($as ?? as ?? "button", {
-    ...props,
-    className: classNames(className, buttonRecipe({ color: "transparent", buttonType: "text" }), stateLayers({
-      borderSize: "medium",
-      borderRadius: "button",
-      backgroundColor: "palette-black",
-      setFocusState: true
-    }))
-  }, props.children ? jsx(BodyText, { className: classNames(actionText, textButtonText({ underline })), children: props.children }) : void 0);
+	return createElement($as ?? as ?? "button", {
+		...props,
+		className: classNames(className, buttonRecipe({
+			color: "transparent",
+			buttonType: "text"
+		}), stateLayers({
+			borderSize: "medium",
+			borderRadius: "button",
+			backgroundColor: "palette-black",
+			setFocusState: true
+		}))
+	}, props.children ? jsx(BodyText, {
+		className: classNames(actionText, textButtonText({ underline })),
+		children: props.children
+	}) : void 0);
 }
-export {
-  TextButton
-};
+//#endregion
+export { TextButton };

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

@@ -1,27 +1,27 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const states_css = require("../../../styles/states.css.cjs");
-const classNames = require("classnames");
-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 getButtonVariantProps = (color, { ...props }) => ({
-  ...props,
-  className: classNames__default.default(props.className, styles_css.buttonRecipe({
-    color,
-    buttonType: "box",
-    isLoading: props.loading?.isLoading
-  }), color === "transparent" ? states_css.stateLayers({
-    borderSize: "medium",
-    borderRadius: "button",
-    backgroundColor: "palette-black",
-    setFocusState: true
-  }) : states_css.stateLayers({
-    borderSize: "none",
-    borderRadius: "button",
-    backgroundColor: `on-${color}`,
-    setFocusState: true
-  }))
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_states_css = require("../../../styles/states.css.cjs");
+const require_styles_css = require("./styles.css.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/actions/buttons/createButtonVariant.ts
+var getButtonVariantProps = (color, { ...props }) => ({
+	...props,
+	className: (0, classnames.default)(props.className, require_styles_css.buttonRecipe({
+		color,
+		buttonType: "box",
+		isLoading: props.loading?.isLoading
+	}), color === "transparent" ? require_states_css.stateLayers({
+		borderSize: "medium",
+		borderRadius: "button",
+		backgroundColor: "palette-black",
+		setFocusState: true
+	}) : require_states_css.stateLayers({
+		borderSize: "none",
+		borderRadius: "button",
+		backgroundColor: `on-${color}`,
+		setFocusState: true
+	}))
 });
+//#endregion
 exports.getButtonVariantProps = getButtonVariantProps;

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

@@ -1,25 +1,25 @@
 "use client";
 import { stateLayers } from "../../../styles/states.css.js";
-import classNames from "classnames";
 import { buttonRecipe } from "./styles.css.js";
-const getButtonVariantProps = (color, { ...props }) => ({
-  ...props,
-  className: classNames(props.className, buttonRecipe({
-    color,
-    buttonType: "box",
-    isLoading: props.loading?.isLoading
-  }), color === "transparent" ? stateLayers({
-    borderSize: "medium",
-    borderRadius: "button",
-    backgroundColor: "palette-black",
-    setFocusState: true
-  }) : stateLayers({
-    borderSize: "none",
-    borderRadius: "button",
-    backgroundColor: `on-${color}`,
-    setFocusState: true
-  }))
+import classNames from "classnames";
+//#region src/components/actions/buttons/createButtonVariant.ts
+var getButtonVariantProps = (color, { ...props }) => ({
+	...props,
+	className: classNames(props.className, buttonRecipe({
+		color,
+		buttonType: "box",
+		isLoading: props.loading?.isLoading
+	}), color === "transparent" ? stateLayers({
+		borderSize: "medium",
+		borderRadius: "button",
+		backgroundColor: "palette-black",
+		setFocusState: true
+	}) : stateLayers({
+		borderSize: "none",
+		borderRadius: "button",
+		backgroundColor: `on-${color}`,
+		setFocusState: true
+	}))
 });
-export {
-  getButtonVariantProps
-};
+//#endregion
+export { getButtonVariantProps };

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

@@ -1,17 +1,16 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const PrimaryButton = require("./PrimaryButton.cjs");
-const SecondaryButton = require("./SecondaryButton.cjs");
-const SuccessButton = require("./SuccessButton.cjs");
-const DangerButton = require("./DangerButton.cjs");
-const GhostButton = require("./GhostButton.cjs");
-const TextButton = require("./TextButton.cjs");
-const IconButton = require("./IconButton.cjs");
-exports.PrimaryButton = PrimaryButton.PrimaryButton;
-exports.SecondaryButton = SecondaryButton.SecondaryButton;
-exports.SuccessButton = SuccessButton.SuccessButton;
-exports.DangerButton = DangerButton.DangerButton;
-exports.GhostButton = GhostButton.GhostButton;
-exports.TextButton = TextButton.TextButton;
-exports.IconButton = IconButton.IconButton;
+const require_PrimaryButton = require("./PrimaryButton.cjs");
+const require_SecondaryButton = require("./SecondaryButton.cjs");
+const require_SuccessButton = require("./SuccessButton.cjs");
+const require_DangerButton = require("./DangerButton.cjs");
+const require_GhostButton = require("./GhostButton.cjs");
+const require_TextButton = require("./TextButton.cjs");
+const require_IconButton = require("./IconButton.cjs");
+exports.DangerButton = require_DangerButton.DangerButton;
+exports.GhostButton = require_GhostButton.GhostButton;
+exports.IconButton = require_IconButton.IconButton;
+exports.PrimaryButton = require_PrimaryButton.PrimaryButton;
+exports.SecondaryButton = require_SecondaryButton.SecondaryButton;
+exports.SuccessButton = require_SuccessButton.SuccessButton;
+exports.TextButton = require_TextButton.TextButton;

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

@@ -6,12 +6,4 @@ import { DangerButton } from "./DangerButton.js";
 import { GhostButton } from "./GhostButton.js";
 import { TextButton } from "./TextButton.js";
 import { IconButton } from "./IconButton.js";
-export {
-  DangerButton,
-  GhostButton,
-  IconButton,
-  PrimaryButton,
-  SecondaryButton,
-  SuccessButton,
-  TextButton
-};
+export { DangerButton, GhostButton, IconButton, PrimaryButton, SecondaryButton, SuccessButton, TextButton };