@gobolt/genesis 0.0.10 → 0.1.0

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,61 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Avatar as a } from "./styles.js";
+import "../Badge/styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { a as e } from "../../Typography-CoZ5qD-t.js";
+import "../Breadcrumb/styles.js";
+import "../Button/styles.js";
+import "../Card/styles.js";
+import "../Checkbox/styles.js";
+import "react";
+import "../ErrorBoundaryFallback/styles.js";
+import "../Input/styles.js";
+import "../Layout/Content/styles.js";
+import "../Message/styles.js";
+import "../Notification/NotificationBadge/styles.js";
+import "../Notification/styles.js";
+import "../../styles-CWdUpZom.js";
+import "../Progress/styles.js";
+import "../../styles/global-styles.js";
+import "../Row/styles.js";
+import "../Row/RowLabelValue/styles.js";
+import "../Row/RowActions/styles.js";
+import "../SegmentedControls/styles.js";
+import "../Select/styles.js";
+import "../Switch/styles.js";
+import "../../styles-qerRs7Rn.js";
+import "../Tabs/styles.js";
+import "../Tile/styles.js";
+import "../Toast/styles.js";
+import "../Tooltip/styles.js";
+const M = ({
+  size: r = 64,
+  shape: o = "circle",
+  imageUrl: i,
+  altText: p,
+  children: m,
+  backgroundColor: s = "#00282B"
+}) => typeof m == "string" ? /* @__PURE__ */ t(
+  a,
+  {
+    "data-testid": "avatar",
+    shape: o,
+    size: r,
+    src: i,
+    alt: p,
+    style: { backgroundColor: s },
+    children: /* @__PURE__ */ t(e, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: m })
+  }
+) : /* @__PURE__ */ t(
+  a,
+  {
+    "data-testid": "avatar",
+    shape: o,
+    size: r,
+    src: i,
+    alt: p
+  }
+);
+export {
+  M as default
+};

package/dist/components/Avatar/__stories__/Avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Avatar } from '../Avatar';
+
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const ImageStory: Story;
+export declare const SmallerTextStory: Story;

package/dist/components/Avatar/__tests__/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/__tests__/Avatar.test.js

@@ -0,0 +1,17 @@
+import { jsx as a } from "react/jsx-runtime";
+import { a as s } from "../../../setup-CUbCc8fQ.js";
+import i from "../Avatar.js";
+describe("<Avatar />", () => {
+  let t;
+  beforeEach(() => {
+    t = {
+      imageUrl: "https://lh4.googleusercontent.com/XC0gixA6JwMn7vvYsT2qtoOKPfJuUDKnS0KsCWS2eY0EKg4bgmd46vwQ6MDt29haf-KG8iZ40M1D1pXfPUUWSAtr_Udn0fgdljQDn3qlDHf4yhUUpopObnszdpH6z5oYiA=w1280",
+      altText: "User Avatar"
+    };
+  });
+  const r = () => s(/* @__PURE__ */ a(i, { ...t }));
+  it("should render avatar image correctly", () => {
+    const { getByRole: o } = r(), e = o("img");
+    expect(e).toHaveAttribute("src", t.imageUrl), expect(e).toHaveAttribute("alt", t.altText);
+  });
+});

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Avatar.js";
+export {
+  o as default
+};

package/dist/components/Avatar/styles.d.ts

@@ -0,0 +1,18 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+
+interface StyledAvatarProps {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}, type?: string, state?: string) => string;
+export declare const Avatar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLSpanElement>;
+}, StyledAvatarProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>> & {
+    Group: import('react').FC<import('antd/es/avatar').GroupProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Avatar/styles.js

@@ -0,0 +1,326 @@
+import { d as re } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import * as n from "react";
+import { e as T } from "../../presets-Djh_L_6R.js";
+import { R as oe } from "../../index-BQM5OniU.js";
+import { j as se, m as ae, k as ie, f as ce, t as le, C as D, g as X } from "../../index-BbTV2Cw5.js";
+import { r as de } from "../../responsiveObserver-dCkpy7Cb.js";
+import { u as q } from "../../useCSSVarCls-Dau77fzS.js";
+import { u as ue } from "../../useSize-DSq4r6zy.js";
+import { u as fe } from "../../useBreakpoint-TkMv121M.js";
+import "../../index-DLdU7Tpd.js";
+import { t as me } from "../../toArray-U3Az44CO.js";
+import { c as pe } from "../../reactNode-sKPeiqPL.js";
+import { a as ge } from "../../index-CbVOl2U6.js";
+const B = /* @__PURE__ */ n.createContext({}), ve = (e) => {
+  const {
+    antCls: r,
+    componentCls: o,
+    iconCls: t,
+    avatarBg: i,
+    avatarColor: z,
+    containerSize: h,
+    containerSizeLG: y,
+    containerSizeSM: v,
+    textFontSize: g,
+    textFontSizeLG: x,
+    textFontSizeSM: N,
+    borderRadius: u,
+    borderRadiusLG: f,
+    borderRadiusSM: O,
+    lineWidth: j,
+    lineType: R
+  } = e, E = (s, m, P) => ({
+    width: s,
+    height: s,
+    borderRadius: "50%",
+    [`&${o}-square`]: {
+      borderRadius: P
+    },
+    [`&${o}-icon`]: {
+      fontSize: m,
+      [`> ${t}`]: {
+        margin: 0
+      }
+    }
+  });
+  return {
+    [o]: Object.assign(Object.assign(Object.assign(Object.assign({}, ie(e)), {
+      position: "relative",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      color: z,
+      whiteSpace: "nowrap",
+      textAlign: "center",
+      verticalAlign: "middle",
+      background: i,
+      border: `${ce(j)} ${R} transparent`,
+      "&-image": {
+        background: "transparent"
+      },
+      [`${r}-image-img`]: {
+        display: "block"
+      }
+    }), E(h, g, u)), {
+      "&-lg": Object.assign({}, E(y, x, f)),
+      "&-sm": Object.assign({}, E(v, N, O)),
+      "> img": {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
+    })
+  };
+}, Se = (e) => {
+  const {
+    componentCls: r,
+    groupBorderColor: o,
+    groupOverlapping: t,
+    groupSpace: i
+  } = e;
+  return {
+    [`${r}-group`]: {
+      display: "inline-flex",
+      [r]: {
+        borderColor: o
+      },
+      "> *:not(:first-child)": {
+        marginInlineStart: t
+      }
+    },
+    [`${r}-group-popover`]: {
+      [`${r} + ${r}`]: {
+        marginInlineStart: i
+      }
+    }
+  };
+}, he = (e) => {
+  const {
+    controlHeight: r,
+    controlHeightLG: o,
+    controlHeightSM: t,
+    fontSize: i,
+    fontSizeLG: z,
+    fontSizeXL: h,
+    fontSizeHeading3: y,
+    marginXS: v,
+    marginXXS: g,
+    colorBorderBg: x
+  } = e;
+  return {
+    containerSize: r,
+    containerSizeLG: o,
+    containerSizeSM: t,
+    textFontSize: Math.round((z + h) / 2),
+    textFontSizeLG: y,
+    textFontSizeSM: i,
+    groupSpace: g,
+    groupOverlapping: -v,
+    groupBorderColor: x
+  };
+}, U = se("Avatar", (e) => {
+  const {
+    colorTextLightSolid: r,
+    colorTextPlaceholder: o
+  } = e, t = ae(e, {
+    avatarBg: o,
+    avatarColor: r
+  });
+  return [ve(t), Se(t)];
+}, he);
+var ye = function(e, r) {
+  var o = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var i = 0, t = Object.getOwnPropertySymbols(e); i < t.length; i++)
+    r.indexOf(t[i]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[i]) && (o[t[i]] = e[t[i]]);
+  return o;
+};
+const xe = (e, r) => {
+  const [o, t] = n.useState(1), [i, z] = n.useState(!1), [h, y] = n.useState(!0), v = n.useRef(null), g = n.useRef(null), x = le(r, v), {
+    getPrefixCls: N,
+    avatar: u
+  } = n.useContext(D), f = n.useContext(B), O = () => {
+    if (!g.current || !v.current)
+      return;
+    const c = g.current.offsetWidth, l = v.current.offsetWidth;
+    if (c !== 0 && l !== 0) {
+      const {
+        gap: S = 4
+      } = e;
+      S * 2 < l && t(l - S * 2 < c ? (l - S * 2) / c : 1);
+    }
+  };
+  n.useEffect(() => {
+    z(!0);
+  }, []), n.useEffect(() => {
+    y(!0), t(1);
+  }, [e.src]), n.useEffect(O, [e.gap]);
+  const j = () => {
+    const {
+      onError: c
+    } = e;
+    (c == null ? void 0 : c()) !== !1 && y(!1);
+  }, {
+    prefixCls: R,
+    shape: E,
+    size: s,
+    src: m,
+    srcSet: P,
+    icon: p,
+    className: A,
+    rootClassName: M,
+    alt: V,
+    draggable: _,
+    children: C,
+    crossOrigin: $
+  } = e, b = ye(e, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "rootClassName", "alt", "draggable", "children", "crossOrigin"]), a = ue((c) => {
+    var l, S;
+    return (S = (l = s ?? (f == null ? void 0 : f.size)) !== null && l !== void 0 ? l : c) !== null && S !== void 0 ? S : "default";
+  }), w = Object.keys(typeof a == "object" ? a || {} : {}).some((c) => ["xs", "sm", "md", "lg", "xl", "xxl"].includes(c)), G = fe(w), L = n.useMemo(() => {
+    if (typeof a != "object")
+      return {};
+    const c = de.find((S) => G[S]), l = a[c];
+    return l ? {
+      width: l,
+      height: l,
+      fontSize: l && (p || C) ? l / 2 : 18
+    } : {};
+  }, [G, a]);
+  if (process.env.NODE_ENV !== "production") {
+    const c = X("Avatar");
+    process.env.NODE_ENV !== "production" && c(!(typeof p == "string" && p.length > 2), "breaking", `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${p}\` at https://ant.design/components/icon`);
+  }
+  const d = N("avatar", R), I = q(d), [K, Q, Y] = U(d, I), Z = T({
+    [`${d}-lg`]: a === "large",
+    [`${d}-sm`]: a === "small"
+  }), W = /* @__PURE__ */ n.isValidElement(m), ee = E || (f == null ? void 0 : f.shape) || "circle", te = T(d, Z, u == null ? void 0 : u.className, `${d}-${ee}`, {
+    [`${d}-image`]: W || m && h,
+    [`${d}-icon`]: !!p
+  }, Y, I, A, M, Q), ne = typeof a == "number" ? {
+    width: a,
+    height: a,
+    fontSize: p ? a / 2 : 18
+  } : {};
+  let k;
+  if (typeof m == "string" && h)
+    k = /* @__PURE__ */ n.createElement("img", {
+      src: m,
+      draggable: _,
+      srcSet: P,
+      onError: j,
+      alt: V,
+      crossOrigin: $
+    });
+  else if (W)
+    k = m;
+  else if (p)
+    k = p;
+  else if (i || o !== 1) {
+    const c = `scale(${o})`, l = {
+      msTransform: c,
+      WebkitTransform: c,
+      transform: c
+    };
+    k = /* @__PURE__ */ n.createElement(oe, {
+      onResize: O
+    }, /* @__PURE__ */ n.createElement("span", {
+      className: `${d}-string`,
+      ref: g,
+      style: Object.assign({}, l)
+    }, C));
+  } else
+    k = /* @__PURE__ */ n.createElement("span", {
+      className: `${d}-string`,
+      style: {
+        opacity: 0
+      },
+      ref: g
+    }, C);
+  return delete b.onError, delete b.gap, K(/* @__PURE__ */ n.createElement("span", Object.assign({}, b, {
+    style: Object.assign(Object.assign(Object.assign(Object.assign({}, ne), L), u == null ? void 0 : u.style), b.style),
+    className: te,
+    ref: x
+  }), k));
+}, F = /* @__PURE__ */ n.forwardRef(xe);
+process.env.NODE_ENV !== "production" && (F.displayName = "Avatar");
+const H = (e) => {
+  const {
+    size: r,
+    shape: o
+  } = n.useContext(B), t = n.useMemo(() => ({
+    size: e.size || r,
+    shape: e.shape || o
+  }), [e.size, e.shape, r, o]);
+  return /* @__PURE__ */ n.createElement(B.Provider, {
+    value: t
+  }, e.children);
+}, Ce = (e) => {
+  var r, o, t, i;
+  const {
+    getPrefixCls: z,
+    direction: h
+  } = n.useContext(D), {
+    prefixCls: y,
+    className: v,
+    rootClassName: g,
+    style: x,
+    maxCount: N,
+    maxStyle: u,
+    size: f,
+    shape: O,
+    maxPopoverPlacement: j,
+    maxPopoverTrigger: R,
+    children: E,
+    max: s
+  } = e;
+  if (process.env.NODE_ENV !== "production") {
+    const a = X("Avatar.Group");
+    a.deprecated(!N, "maxCount", "max={{ count: number }}"), a.deprecated(!u, "maxStyle", "max={{ style: CSSProperties }}"), a.deprecated(!j, "maxPopoverPlacement", "max={{ popover: PopoverProps }}"), a.deprecated(!R, "maxPopoverTrigger", "max={{ popover: PopoverProps }}");
+  }
+  const m = z("avatar", y), P = `${m}-group`, p = q(m), [A, M, V] = U(m, p), _ = T(P, {
+    [`${P}-rtl`]: h === "rtl"
+  }, V, p, v, g, M), C = me(E).map((a, w) => pe(a, {
+    // eslint-disable-next-line react/no-array-index-key
+    key: `avatar-key-${w}`
+  })), $ = (s == null ? void 0 : s.count) || N, b = C.length;
+  if ($ && $ < b) {
+    const a = C.slice(0, $), w = C.slice($, b), G = (s == null ? void 0 : s.style) || u, L = ((r = s == null ? void 0 : s.popover) === null || r === void 0 ? void 0 : r.trigger) || R || "hover", d = ((o = s == null ? void 0 : s.popover) === null || o === void 0 ? void 0 : o.placement) || j || "top", I = Object.assign(Object.assign({
+      content: w
+    }, s == null ? void 0 : s.popover), {
+      classNames: {
+        root: T(`${P}-popover`, (i = (t = s == null ? void 0 : s.popover) === null || t === void 0 ? void 0 : t.classNames) === null || i === void 0 ? void 0 : i.root)
+      },
+      placement: d,
+      trigger: L
+    });
+    return a.push(/* @__PURE__ */ n.createElement(ge, Object.assign({
+      key: "avatar-popover-key",
+      destroyTooltipOnHide: !0
+    }, I), /* @__PURE__ */ n.createElement(F, {
+      style: G
+    }, `+${b - $}`))), A(/* @__PURE__ */ n.createElement(H, {
+      shape: O,
+      size: f
+    }, /* @__PURE__ */ n.createElement("div", {
+      className: _,
+      style: x
+    }, a)));
+  }
+  return A(/* @__PURE__ */ n.createElement(H, {
+    shape: O,
+    size: f
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: _,
+    style: x
+  }, C)));
+}, J = F;
+J.Group = Ce;
+const be = ({ colors: e, borderRadius: r, sizing: o }, t = "primary", i = "active") => "", Ge = re(J)`
+  ${({ theme: e, type: r, state: o }) => be(e, r, o)}
+`;
+export {
+  Ge as Avatar,
+  be as getGenesisClass
+};

package/dist/components/Badge/Badge.d.ts

@@ -1,6 +1,8 @@
+export type State = "success" | "warning" | "error" | "info" | "generic" | "hollow";
 export interface BadgeProps {
-    badge?: string;
-    state?: string;
+    label?: string;
+    isDisabled?: boolean;
+    state?: State;
 }
-declare const Badge: ({ badge, state }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ label, state, isDisabled, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,103 +1,70 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import g from "./icons/Appointment.js";
-import v from "./icons/ASN.js";
-import C from "./icons/Inventory.js";
-import h from "./icons/Parcel.js";
-import S from "./icons/Product.js";
-import I from "./icons/Route.js";
-import z from "./icons/Shipment.js";
-import y from "./icons/ShoppingCart.js";
-import B from "./icons/System.js";
-import { BADGE as n, STATE as t } from "../../constants/index.js";
-import { n as F } from "../../styled-components.browser.esm-CZ1XM4o4.js";
-import { BadgeWrapper as R, Badge as w, BadgeState as E } from "./styles.js";
-import { a as i } from "../../warning-C63HNL9U.js";
-import * as c from "react";
-import { I as l } from "../../AntdIcon-BoLh1dP8.js";
-import { R as $, a as N } from "../../ExclamationCircleFilled-C0Kj5KQV.js";
-import { R as x } from "../../CloseCircleFilled-DXCxlIQL.js";
-var M = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm176.5 585.7l-28.6 39a7.99 7.99 0 01-11.2 1.7L483.3 569.8a7.92 7.92 0 01-3.3-6.5V288c0-4.4 3.6-8 8-8h48.1c4.4 0 8 3.6 8 8v247.5l142.6 103.1c3.6 2.5 4.4 7.5 1.8 11.1z" } }] }, name: "clock-circle", theme: "filled" }, k = function(e, a) {
-  return /* @__PURE__ */ c.createElement(l, i({}, e, {
-    ref: a,
-    icon: M
-  }));
-}, u = /* @__PURE__ */ c.forwardRef(k);
-process.env.NODE_ENV !== "production" && (u.displayName = "ClockCircleFilled");
-var V = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, name: "info-circle", theme: "filled" }, b = function(e, a) {
-  return /* @__PURE__ */ c.createElement(l, i({}, e, {
-    ref: a,
-    icon: V
-  }));
-}, m = /* @__PURE__ */ c.forwardRef(b);
-process.env.NODE_ENV !== "production" && (m.displayName = "InfoCircleFilled");
-var D = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h368c4.4 0 8 3.6 8 8v48z" } }] }, name: "minus-circle", theme: "filled" }, _ = function(e, a) {
-  return /* @__PURE__ */ c.createElement(l, i({}, e, {
-    ref: a,
-    icon: D
-  }));
-}, d = /* @__PURE__ */ c.forwardRef(_);
-process.env.NODE_ENV !== "production" && (d.displayName = "MinusCircleFilled");
-const s = 14, A = (o, e) => {
-  switch (o) {
-    case t.error:
-      return e.colors.status.error.onsurface;
-    case t.success:
-      return e.colors.status.success.onsurface;
-    case t.warning:
-      return e.colors.status.warning.default;
-    case t.removed:
-      return e.colors.status.generic.default;
-    case t.progress:
-      return e.colors.timebox.evening.default;
-    case t.info:
-    default:
-      return e.colors.status.info.onsurface;
-  }
-}, O = (o, e) => {
-  switch (o) {
-    case t.warning:
-      return /* @__PURE__ */ r(N, { style: { color: e, fontSize: s } });
-    case t.error:
-      return /* @__PURE__ */ r(x, { style: { color: e, fontSize: s } });
-    case t.success:
-      return /* @__PURE__ */ r($, { style: { color: e, fontSize: s } });
-    case t.progress:
-      return /* @__PURE__ */ r(u, { style: { color: e, fontSize: s } });
-    case t.removed:
-      return /* @__PURE__ */ r(d, { style: { color: e, fontSize: s } });
-    case t.info:
-    default:
-      return /* @__PURE__ */ r(m, { style: { color: e, fontSize: s } });
-  }
-}, j = (o) => {
-  switch (o) {
-    case n.appointment:
-      return /* @__PURE__ */ r(g, {});
-    case n.asn:
-      return /* @__PURE__ */ r(v, {});
-    case n.inventory:
-      return /* @__PURE__ */ r(C, {});
-    case n.parcel:
-      return /* @__PURE__ */ r(h, {});
-    case n.product:
-      return /* @__PURE__ */ r(S, {});
-    case n.route:
-      return /* @__PURE__ */ r(I, {});
-    case n.shipment:
-      return /* @__PURE__ */ r(z, {});
-    case n.shoppingCart:
-      return /* @__PURE__ */ r(y, {});
-    case n.system:
-    default:
-      return /* @__PURE__ */ r(B, {});
-  }
-}, oe = ({ badge: o = n.product, state: e = t.info }) => {
-  const a = F(), f = A(e, a);
-  return /* @__PURE__ */ r(R, { children: /* @__PURE__ */ p(w, { "data-testid": "Badge", children: [
-    /* @__PURE__ */ r(E, { "data-testid": "BadgeState", color: f, children: O(e, f) }),
-    j(o)
-  ] }) });
+import { jsx as m } from "react/jsx-runtime";
+import { Badge as e } from "./styles.js";
+import "../Avatar/styles.js";
+import "../Breadcrumb/styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { u as a, a as d } from "../../Typography-CoZ5qD-t.js";
+import "../Button/styles.js";
+import "../Card/styles.js";
+import "../Checkbox/styles.js";
+import "react";
+import "../ErrorBoundaryFallback/styles.js";
+import "../Input/styles.js";
+import "../Layout/Content/styles.js";
+import "../Message/styles.js";
+import "../Notification/NotificationBadge/styles.js";
+import { getBadgeStateIcon as s } from "../../utils/icon-util.js";
+import "../Notification/styles.js";
+import "../../styles-CWdUpZom.js";
+import "../Progress/styles.js";
+import "../../styles/global-styles.js";
+import "../Row/styles.js";
+import "../Row/RowLabelValue/styles.js";
+import "../Row/RowActions/styles.js";
+import "../SegmentedControls/styles.js";
+import "../Select/styles.js";
+import "../Switch/styles.js";
+import "../../styles-qerRs7Rn.js";
+import "../Tabs/styles.js";
+import "../Tile/styles.js";
+import "../Toast/styles.js";
+import "../Tooltip/styles.js";
+const n = !1, O = ({ label: r, state: o = "info", isDisabled: t, ...p }) => {
+  const { theme: i } = a();
+  return r ? /* @__PURE__ */ m(
+    e,
+    {
+      label: r,
+      role: "badge",
+      state: o,
+      disabled: t,
+      ...p,
+      children: /* @__PURE__ */ m(
+        d,
+        {
+          variant: "label2",
+          color: t ? i.colors.status.disabled.default : i.colors.status[o].onsurface,
+          isDisabled: t,
+          children: r
+        }
+      )
+    }
+  ) : /* @__PURE__ */ m(
+    e,
+    {
+      label: r,
+      role: "badge",
+      state: o,
+      disabled: t,
+      ...p,
+      children: s(
+        o,
+        i.colors.status[o].onsurface,
+        n
+      )
+    }
+  );
 };
 export {
-  oe as default
+  O as default
 };

package/dist/components/Badge/__stories__/Badge.stories.d.ts

@@ -6,8 +6,9 @@ export default meta;
 type Story = StoryObj<typeof Badge>;
 export declare const Default: Story;
 export declare const Success: Story;
-export declare const Warning: Story;
-export declare const Removed: Story;
-export declare const Progress: Story;
 export declare const Error: Story;
-export declare const Info: Story;
+export declare const Warning: Story;
+export declare const Generic: Story;
+export declare const Hollow: Story;
+export declare const Disabled: Story;
+export declare const Icon: Story;