@easypost/easy-ui 1.0.0-alpha.2 → 1.0.0-alpha.21

package/Badge/Badge.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactNode } from "react";
+import { IconSymbol } from "../types";
+export declare const DEFAULT_VARIANT = "primary";
+export type BadgeVariant = "primary" | "secondary" | "black" | "inverse" | "gray" | "success" | "warning" | "danger";
+export type BadgeProps = {
+    /**
+     * Accessible label for the badge if it differs from its content. Required
+     * for icon badges.
+     */
+    accessibilityLabel?: string;
+    /** Primary badge label. */
+    children?: ReactNode;
+    /** Badge icon */
+    icon?: IconSymbol;
+    /**
+     * Any additional text to support the primary label on text badges.
+     */
+    secondaryLabel?: ReactNode;
+    /**
+     * Badge variant.
+     * @default primary
+     */
+    variant?: BadgeVariant;
+};
+/**
+ * A visual text label for small bits of supporting information.
+ *
+ * @remarks
+ * Badges can be used to support categorizing information, getting a user's
+ * attention, and describing metadata.
+ *
+ * @example
+ * _Simple text:_
+ * ```tsx
+ * <Badge>Badge text</Badge>
+ * ```
+ *
+ * @example
+ * _Simple icon:_
+ * ```tsx
+ * <Badge accessibilityLabel="Intent of badge" icon={IconSymbol} />
+ * ```
+ *
+ * @example
+ * _Detailed text:_
+ * ```tsx
+ * <Badge secondaryLabel="Last updated: Jan 3. 2023">
+ *   Deprecated
+ * </Badge>
+ * ```
+ *
+ * @example
+ * _Detailed icon:_
+ * ```tsx
+ * <Badge icon={IconSymbol}>Badge text</Badge>
+ * ```
+ */
+export declare function Badge(props: BadgeProps): React.JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,eAAO,MAAM,eAAe,YAAY,CAAC;AAEzC,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,iBAAiB;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAiDtC"}

package/Badge/Badge.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./Badge";
+type Story = StoryObj<typeof Badge>;
+declare const meta: Meta<typeof Badge>;
+export default meta;
+export declare const SimpleText: Story;
+export declare const SimpleIcon: Story;
+export declare const DetailedIcon: Story;
+export declare const DetailedText: Story;
+export declare const ColorVariants: Story;
+export declare const WithTooltip: Story;
+//# sourceMappingURL=Badge.stories.d.ts.map

package/Badge/Badge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMlD,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAG5C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC"}

package/Badge/Badge.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.test.d.ts.map

package/Badge/Badge.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.test.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.test.tsx"],"names":[],"mappings":""}

package/Badge/index.d.ts

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

package/Badge/index.d.ts.map

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

package/Badge/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Icon_index = require("../Icon/index.js");
+const Text_index = require("../Text/index.js");
+const utilities_css = require("../utilities/css.js");
+const root = "_root_1i1hd_5";
+const primary = "_primary_1i1hd_16";
+const secondary = "_secondary_1i1hd_17";
+const text = "_text_1i1hd_32";
+const variantPrimary = "_variantPrimary_1i1hd_37";
+const variantSecondary = "_variantSecondary_1i1hd_44";
+const variantBlack = "_variantBlack_1i1hd_51";
+const variantInverse = "_variantInverse_1i1hd_58";
+const variantGray = "_variantGray_1i1hd_65";
+const variantSuccess = "_variantSuccess_1i1hd_72";
+const variantWarning = "_variantWarning_1i1hd_79";
+const variantDanger = "_variantDanger_1i1hd_86";
+const styles = {
+  root,
+  primary,
+  secondary,
+  text,
+  variantPrimary,
+  variantSecondary,
+  variantBlack,
+  variantInverse,
+  variantGray,
+  variantSuccess,
+  variantWarning,
+  variantDanger
+};
+const DEFAULT_VARIANT = "primary";
+function Badge(props) {
+  const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
+  const className = utilities_css.classNames(styles.root, styles[utilities_css.variationName("variant", variant)]);
+  if (!icon && !children) {
+    console.warn("Badge requires one of children or icon");
+  }
+  if (secondaryLabel && icon) {
+    console.warn("secondaryLabel is not supported on a Badge with icon");
+  }
+  if (icon && !children && !accessibilityLabel) {
+    console.warn("Badge with only icon must have accessibilityLabel");
+  }
+  return React.createElement("span", {
+    className
+  }, accessibilityLabel && React.createElement(Text_index.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement("span", {
+    className: styles.primary
+  }, icon ? React.createElement(Icon_index.Icon, {
+    symbol: icon,
+    size: "sm"
+  }) : React.createElement("span", {
+    className: styles.text
+  }, children)), children && (icon || secondaryLabel) && React.createElement("span", {
+    className: styles.secondary
+  }, React.createElement("span", {
+    className: styles.text
+  }, icon ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, secondaryLabel))));
+}
+exports.Badge = Badge;
+exports.DEFAULT_VARIANT = DEFAULT_VARIANT;

package/Badge/index.mjs

@@ -0,0 +1,64 @@
+import React__default from "react";
+import { Icon } from "../Icon/index.mjs";
+import { Text } from "../Text/index.mjs";
+import { classNames, variationName } from "../utilities/css.mjs";
+const root = "_root_1i1hd_5";
+const primary = "_primary_1i1hd_16";
+const secondary = "_secondary_1i1hd_17";
+const text = "_text_1i1hd_32";
+const variantPrimary = "_variantPrimary_1i1hd_37";
+const variantSecondary = "_variantSecondary_1i1hd_44";
+const variantBlack = "_variantBlack_1i1hd_51";
+const variantInverse = "_variantInverse_1i1hd_58";
+const variantGray = "_variantGray_1i1hd_65";
+const variantSuccess = "_variantSuccess_1i1hd_72";
+const variantWarning = "_variantWarning_1i1hd_79";
+const variantDanger = "_variantDanger_1i1hd_86";
+const styles = {
+  root,
+  primary,
+  secondary,
+  text,
+  variantPrimary,
+  variantSecondary,
+  variantBlack,
+  variantInverse,
+  variantGray,
+  variantSuccess,
+  variantWarning,
+  variantDanger
+};
+const DEFAULT_VARIANT = "primary";
+function Badge(props) {
+  const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
+  const className = classNames(styles.root, styles[variationName("variant", variant)]);
+  if (!icon && !children) {
+    console.warn("Badge requires one of children or icon");
+  }
+  if (secondaryLabel && icon) {
+    console.warn("secondaryLabel is not supported on a Badge with icon");
+  }
+  if (icon && !children && !accessibilityLabel) {
+    console.warn("Badge with only icon must have accessibilityLabel");
+  }
+  return React__default.createElement("span", {
+    className
+  }, accessibilityLabel && React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement("span", {
+    className: styles.primary
+  }, icon ? React__default.createElement(Icon, {
+    symbol: icon,
+    size: "sm"
+  }) : React__default.createElement("span", {
+    className: styles.text
+  }, children)), children && (icon || secondaryLabel) && React__default.createElement("span", {
+    className: styles.secondary
+  }, React__default.createElement("span", {
+    className: styles.text
+  }, icon ? React__default.createElement(React__default.Fragment, null, children) : React__default.createElement(React__default.Fragment, null, secondaryLabel))));
+}
+export {
+  Badge,
+  DEFAULT_VARIANT
+};

package/Banner/Banner.d.ts

@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+export type BannerColor = "primary" | "success" | "neutral";
+export type BannerProps = {
+    /**
+     * Banner color
+     * @default success
+     */
+    color?: BannerColor;
+    /** Banner emphasis text */
+    emphasisText?: ReactNode;
+    /** Banner content */
+    children?: ReactNode;
+};
+/**
+ * Displays a prominent message that cannot be dismissed.
+ *
+ * @remarks
+ * The color property controls presentational color while emphasisText and children are
+ * for the text content within the banner.
+ *
+ * The difference between the text rendered as children vs the text rendered with the
+ * emphasisText prop is the style of text applied. With respect to Easy UI, emphasisText
+ * is semibold1 and the text rendered via children is body1. Behind the scenes, emphasisText
+ * and children are being wrapped by Easy UI's Text component.
+ *
+ * When rendering a banner with both emphasisText and text via children, a delimeter ":" is
+ * automatically applied.
+ *
+ * This component is useful when wanting to inform users of new features, promotions and
+ * other offerings.
+ *
+ * @example
+ * Default success color with emphasis and body:
+ * ```tsx
+ *  <Banner emphasisText={<>Limited Time Only:</>}>
+ *    Get your first $250 of labels free!
+ *  </Banner>
+ * ```
+ *
+ * @example
+ * Primary color with body only:
+ * ```tsx
+ *   <Banner color="primary">No fees on 120,000 packages per year.</Banner>;
+ * ```
+ */
+export declare function Banner(props: BannerProps): React.JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAqBxC"}

package/Banner/Banner.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Banner } from "./Banner";
+type Story = StoryObj<typeof Banner>;
+declare const meta: Meta<typeof Banner>;
+export default meta;
+export declare const Controls: Story;
+export declare const Success: Story;
+export declare const Primary: Story;
+export declare const Neutral: Story;
+export declare const WithoutEmphasisText: Story;
+export declare const OnlyEmphasisText: Story;
+//# sourceMappingURL=Banner.stories.d.ts.map

package/Banner/Banner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAW7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC"}

package/Banner/Banner.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Banner.test.d.ts.map

package/Banner/Banner.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.test.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.test.tsx"],"names":[],"mappings":""}

package/Banner/index.d.ts

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

package/Banner/index.d.ts.map

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

package/Banner/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Text_index = require("../Text/index.js");
+const utilities_css = require("../utilities/css.js");
+const colorSuccess = "_colorSuccess_i04r5_5";
+const colorPrimary = "_colorPrimary_i04r5_10";
+const colorNeutral = "_colorNeutral_i04r5_11";
+const Banner$1 = "_Banner_i04r5_23";
+const styles = {
+  colorSuccess,
+  colorPrimary,
+  colorNeutral,
+  Banner: Banner$1
+};
+function Banner(props) {
+  const { color = "success", emphasisText, children } = props;
+  return React.createElement("div", {
+    className: utilities_css.classNames(styles.Banner, styles[utilities_css.variationName("color", color)])
+  }, emphasisText && React.createElement(Text_index.Text, {
+    as: "strong",
+    variant: "subtitle1",
+    alignment: "center"
+  }, !children ? React.createElement(React.Fragment, null, emphasisText) : React.createElement(React.Fragment, null, emphasisText, ": ")), children && React.createElement(Text_index.Text, {
+    variant: "body1",
+    alignment: "center"
+  }, children));
+}
+exports.Banner = Banner;

package/Banner/index.mjs

@@ -0,0 +1,29 @@
+import React__default from "react";
+import { Text } from "../Text/index.mjs";
+import { classNames, variationName } from "../utilities/css.mjs";
+const colorSuccess = "_colorSuccess_i04r5_5";
+const colorPrimary = "_colorPrimary_i04r5_10";
+const colorNeutral = "_colorNeutral_i04r5_11";
+const Banner$1 = "_Banner_i04r5_23";
+const styles = {
+  colorSuccess,
+  colorPrimary,
+  colorNeutral,
+  Banner: Banner$1
+};
+function Banner(props) {
+  const { color = "success", emphasisText, children } = props;
+  return React__default.createElement("div", {
+    className: classNames(styles.Banner, styles[variationName("color", color)])
+  }, emphasisText && React__default.createElement(Text, {
+    as: "strong",
+    variant: "subtitle1",
+    alignment: "center"
+  }, !children ? React__default.createElement(React__default.Fragment, null, emphasisText) : React__default.createElement(React__default.Fragment, null, emphasisText, ": ")), children && React__default.createElement(Text, {
+    variant: "body1",
+    alignment: "center"
+  }, children));
+}
+export {
+  Banner
+};

package/Button/Button.d.ts

@@ -1,9 +1,10 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { IconSymbol } from "../types";
+import { AriaButtonProps } from "react-aria";
 export type ButtonColor = "primary" | "secondary" | "success" | "warning" | "neutral" | "support" | "inverse";
 export type ButtonVariant = "filled" | "outlined" | "link";
 export type ButtonSize = "sm" | "md";
-export type ButtonProps = {
+export type ButtonProps = AriaButtonProps & {
     /** Button color */
     color?: ButtonColor;
     /** Button variant */
@@ -23,5 +24,85 @@ export type ButtonProps = {
     /** Link's destination */
     href?: string;
 };
-export declare function Button(props: ButtonProps): JSX.Element;
+/**
+ * Allow users to perform an action or to navigate to another page.
+ *
+ * @remarks
+ * Use to communicate an action the user can take in order to continue
+ * flow in the UI. Supports icons, multiple colors, outlined and link variations,
+ * and small size buttons. Underlying element is a button, but becomes an
+ * anchor when `href` is provided.
+ *
+ * @example
+ * _Default:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *  return <Button onPress={() => alert("clicked")}>Button</Button>;
+ * }
+ * ```
+ *
+ * @example
+ * _Outlined variant:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button onPress={() => alert("clicked")} variant="outlined">
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * _Success color:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button onPress={() => alert("clicked")} color="success">
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ * @example
+ * _With href and icon:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ * import ArrowBackIcon from "@easypost/easy-ui-icons/ArrowBack";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button href="https://www.easypost.com/" iconAtEnd={ArrowBackIcon}>
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<AriaButtonProps<"button"> & {
+    /** Button color */
+    color?: ButtonColor | undefined;
+    /** Button variant */
+    variant?: ButtonVariant | undefined;
+    /** Button size */
+    size?: ButtonSize | undefined;
+    /** Disables button */
+    isDisabled?: boolean | undefined;
+    /** Button will grow to width of container */
+    isBlock?: boolean | undefined;
+    /** Positions icon symbol before children */
+    iconAtStart?: IconSymbol | undefined;
+    /** Positions icon symbol after children */
+    iconAtEnd?: IconSymbol | undefined;
+    /** Content inside button  */
+    children?: ReactNode;
+    /** Link's destination */
+    href?: string | undefined;
+} & React.RefAttributes<null>>;
 //# sourceMappingURL=Button.d.ts.map

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG;IACxB,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eA2DxC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,MAAM;IAjFjB,mBAAmB;;IAEnB,qBAAqB;;IAErB,kBAAkB;;IAElB,sBAAsB;;IAEtB,6CAA6C;;IAE7C,4CAA4C;;IAE5C,2CAA2C;;IAE3C,6BAA6B;eAClB,SAAS;IACpB,yBAAyB;;8BAuHzB,CAAC"}

package/Button/Button.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+type Story = StoryObj<typeof Button>;
+declare const meta: Meta<typeof Button>;
+export default meta;
+export declare const Controls: Story;
+export declare const FilledButtons: Story;
+export declare const OutlinedButtons: Story;
+export declare const LinkButtons: Story;
+export declare const InverseButtons: Story;
+export declare const WithHref: Story;
+export declare const WithIcons: Story;
+export declare const BlockButton: Story;
+export declare const DisabledButtons: Story;
+export declare const ClickEvent: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAGxB,CAAC"}

package/Button/index.js

@@ -1,7 +1,5 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -17,28 +15,42 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Icon = require("../__chunks__/Icon-20c12b7b.js");
+const UnstyledButton_index = require("../__chunks__/index-DwufPu37.js");
+const Icon_index = require("../Icon/index.js");
 const utilities_css = require("../utilities/css.js");
-const utilities = require("../__chunks__/utilities-c5e3cfdd.js");
-const Button$1 = "_Button_gfx5y_5";
-const colorPrimary = "_colorPrimary_gfx5y_20";
-const colorSecondary = "_colorSecondary_gfx5y_28";
-const colorSuccess = "_colorSuccess_gfx5y_36";
-const colorWarning = "_colorWarning_gfx5y_44";
-const colorNeutral = "_colorNeutral_gfx5y_52";
-const colorSupport = "_colorSupport_gfx5y_60";
-const colorInverse = "_colorInverse_gfx5y_66";
-const variantFilled = "_variantFilled_gfx5y_72";
-const variantOutlined = "_variantOutlined_gfx5y_99";
-const variantLink = "_variantLink_gfx5y_127";
-const sizeMd = "_sizeMd_gfx5y_151";
-const sizeSm = "_sizeSm_gfx5y_159";
-const block = "_block_gfx5y_176";
-const iconAtStart = "_iconAtStart_gfx5y_181";
-const iconAtEnd = "_iconAtEnd_gfx5y_185";
+require("../__chunks__/import-LK6z3Rbv.js");
+require("../__chunks__/omit-tcSejr4A.js");
+require("../__chunks__/import-lusj6TWW.js");
+const Button$1 = "_Button_qhxr0_5";
+const colorPrimary = "_colorPrimary_qhxr0_20";
+const colorSecondary = "_colorSecondary_qhxr0_28";
+const colorSuccess = "_colorSuccess_qhxr0_36";
+const colorWarning = "_colorWarning_qhxr0_44";
+const colorNeutral = "_colorNeutral_qhxr0_52";
+const colorSupport = "_colorSupport_qhxr0_60";
+const colorInverse = "_colorInverse_qhxr0_66";
+const variantFilled = "_variantFilled_qhxr0_72";
+const variantOutlined = "_variantOutlined_qhxr0_99";
+const variantLink = "_variantLink_qhxr0_127";
+const sizeMd = "_sizeMd_qhxr0_151";
+const sizeSm = "_sizeSm_qhxr0_159";
+const block = "_block_qhxr0_176";
+const iconAtStart = "_iconAtStart_qhxr0_181";
+const iconAtEnd = "_iconAtEnd_qhxr0_185";
 const styles = {
   Button: Button$1,
   colorPrimary,
@@ -57,55 +69,26 @@ const styles = {
   iconAtStart,
   iconAtEnd
 };
-function Button(props) {
-  const {
-    color = "primary",
-    variant = "filled",
-    size = "md",
-    isDisabled = false,
-    isBlock = false,
-    iconAtStart: iconAtStart2,
-    iconAtEnd: iconAtEnd2,
-    children = "Button",
-    href = ""
-  } = props;
-  const ref = React.useRef(null);
-  const As = href ? "a" : "button";
-  const { buttonProps: elementProps } = utilities.$701a24aa0da5b062$export$ea18c227d4417cc3(
-    __spreadProps(__spreadValues({}, props), { elementType: As }),
-    ref
-  );
+const Button = React.forwardRef((props, inRef) => {
+  const _a = props, { color = "primary", variant = "filled", size = "md", isDisabled = false, isBlock = false, iconAtStart: iconAtStart2, iconAtEnd: iconAtEnd2, children = "Button", href = "" } = _a, restProps = __objRest(_a, ["color", "variant", "size", "isDisabled", "isBlock", "iconAtStart", "iconAtEnd", "children", "href"]);
   const bothIconPropsDefined = iconAtEnd2 && iconAtStart2;
   if (bothIconPropsDefined) {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
   const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
-  utilities.logWarningIfInvalidColorVariantCombination(color, variant);
-  return /* @__PURE__ */ React.createElement(
-    As,
-    __spreadValues({
-      disabled: isDisabled,
-      ref,
-      className: utilities_css.classNames(
-        styles.Button,
-        styles[utilities_css.variationName("color", color)],
-        styles[utilities_css.variationName("variant", variant)],
-        styles[utilities_css.variationName("size", size)],
-        isBlock && styles.block
-      )
-    }, elementProps),
-    iconAtStart2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtStart2 }),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: utilities_css.classNames(
-          iconAtStart2 && canUseIcon && styles.iconAtStart,
-          iconAtEnd2 && canUseIcon && styles.iconAtEnd
-        )
-      },
-      children
-    ),
-    iconAtEnd2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtEnd2 })
-  );
-}
+  UnstyledButton_index.logWarningIfInvalidColorVariantCombination(color, variant);
+  return React.createElement(UnstyledButton_index.UnstyledButton, __spreadValues({
+    isDisabled,
+    ref: inRef,
+    className: utilities_css.classNames(styles.Button, styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("size", size)], isBlock && styles.block),
+    href
+  }, restProps), iconAtStart2 && canUseIcon && React.createElement(Icon_index.Icon, {
+    symbol: iconAtStart2
+  }), React.createElement("span", {
+    className: utilities_css.classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
+  }, children), iconAtEnd2 && canUseIcon && React.createElement(Icon_index.Icon, {
+    symbol: iconAtEnd2
+  }));
+});
+Button.displayName = "Button";
 exports.Button = Button;