@caseparts-org/caseblocks 0.0.1

package/dist/atoms/Link/Link.stories.js

@@ -0,0 +1,21 @@
+import { Link as t } from "./Link.js";
+const a = {
+  title: "Case Parts/Atoms/Link",
+  component: t,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, s = {
+  args: {
+    children: "Link text",
+    href: "#",
+    disabled: !1
+  }
+};
+export {
+  s as Default,
+  a as default
+};

package/dist/atoms/ResponsiveProp.d.ts

@@ -0,0 +1,2 @@
+export type ResponsiveProp<T> = T | [T, T, T];
+export declare function responsivePropToCSSVariables<T>(cssVariableName: string, prop: ResponsiveProp<T>): Record<string, T>;

package/dist/atoms/ResponsiveProp.js

@@ -0,0 +1,14 @@
+function u(r) {
+  return Array.isArray(r) ? r : [r, r, r];
+}
+function l(r, e) {
+  const [n, t, i] = u(e);
+  return {
+    [`--${r}-small`]: n,
+    [`--${r}-medium`]: t,
+    [`--${r}-large`]: i
+  };
+}
+export {
+  l as responsivePropToCSSVariables
+};

package/dist/atoms/Root/Head.d.ts

@@ -0,0 +1 @@
+export declare function Head(): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Root/Head.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+function s() {
+  return /* @__PURE__ */ o(
+    "script",
+    {
+      src: "https://kit.fontawesome.com/45f07dbc42.js",
+      crossOrigin: "anonymous"
+    }
+  );
+}
+export {
+  s as Head
+};

package/dist/atoms/Root/Root.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function Root({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package/dist/atoms/Root/Root.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/Root.css';const r = "_root_15hbp_39", s = {
+  root: r
+};
+function c({ children: o }) {
+  return /* @__PURE__ */ t("div", { className: s.root, children: o });
+}
+export {
+  c as Root
+};

package/dist/atoms/Separator/Separator.d.ts

@@ -0,0 +1,7 @@
+import { HideAtProps } from '../HideAt';
+/** A visual separator between elements. */
+export interface SeparatorProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
+    /** Orient the separator in a specific direction. */
+    orientation?: "horizontal" | "vertical";
+}
+export declare function Separator({ orientation, hideAt, className, ...otherProps }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Separator/Separator.js

@@ -0,0 +1,30 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as c } from "../HideAt.js";
+import '../../assets/Separator.css';const i = "_separator_1ucrf_1", r = {
+  separator: i,
+  "separator-vertical": "_separator-vertical_1ucrf_19",
+  "separator-horizontal": "_separator-horizontal_1ucrf_27"
+};
+function f({
+  orientation: a = "vertical",
+  hideAt: t,
+  className: o,
+  ...e
+}) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: p(
+        r.separator,
+        r[`separator-${a}`],
+        c(t),
+        o
+      ),
+      ...e
+    }
+  );
+}
+export {
+  f as Separator
+};

package/dist/atoms/Separator/Separator.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+import { Separator } from './Separator';
+declare const meta: {
+    title: string;
+    component: typeof Separator;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+export declare const Vertical: StoryObj<typeof Separator>;
+export declare const Horizontal: StoryObj<typeof Separator>;

package/dist/atoms/Separator/Separator.stories.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Separator as t } from "./Separator.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Text as r } from "../Text/Text.js";
+const s = {
+  title: "Case Parts/Atoms/Separator",
+  component: t,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+}, m = {
+  render: () => /* @__PURE__ */ o(i, { flexDirection: "row", style: { gap: "10px" }, children: [
+    /* @__PURE__ */ e(r, { size: "md", children: "Before" }),
+    /* @__PURE__ */ e(t, {}),
+    /* @__PURE__ */ e(r, { size: "md", children: "Middle" }),
+    /* @__PURE__ */ e(t, {}),
+    /* @__PURE__ */ e(r, { size: "md", children: "After" })
+  ] })
+}, c = {
+  render: () => /* @__PURE__ */ o(i, { flexDirection: "column", style: { gap: "10px", width: "50vw" }, children: [
+    /* @__PURE__ */ e(r, { size: "md", children: "Before" }),
+    /* @__PURE__ */ e(t, { orientation: "horizontal" }),
+    /* @__PURE__ */ e(r, { size: "md", children: "Middle" }),
+    /* @__PURE__ */ e(t, { orientation: "horizontal" }),
+    /* @__PURE__ */ e(r, { size: "md", children: "After" })
+  ] })
+};
+export {
+  c as Horizontal,
+  m as Vertical,
+  s as default
+};

package/dist/atoms/Text/Text.d.ts

@@ -0,0 +1,15 @@
+import { HideAtProps } from '../HideAt';
+type ElementType = keyof Pick<JSX.IntrinsicElements, "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div">;
+/** A text element. */
+export type TextProps<T extends ElementType = "span"> = HideAtProps & {
+    /** The HTML element to render as */
+    as?: ElementType;
+    /** The size of the text. */
+    size: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+    /** The variant of the text. */
+    variant?: "body" | "display";
+    /** The weight of the text. */
+    weight?: "thin" | "extra-light" | "light" | "regular" | "medium" | "semibold" | "bold";
+} & Omit<React.ComponentPropsWithoutRef<T>, "size">;
+export declare function Text<T extends ElementType = "span">({ as, size, variant, weight, children, hideAt, className, ...otherProps }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/atoms/Text/Text.js

@@ -0,0 +1,32 @@
+import { jsx as a } from "react/jsx-runtime";
+import { getHideAtStyles as i } from "../HideAt.js";
+import { t } from "../../Text.module-ruz24ug-.js";
+import { c } from "../../clsx-OuTLNxxd.js";
+function d({
+  as: o,
+  size: e,
+  variant: r = "body",
+  weight: m = "regular",
+  children: s,
+  hideAt: n,
+  className: p,
+  ...x
+}) {
+  return /* @__PURE__ */ a(
+    o || "span",
+    {
+      className: c(
+        t[`text-${r}`],
+        t[`text-${e}`],
+        t[`text-${m}`],
+        i(n),
+        p
+      ),
+      ...x,
+      children: s
+    }
+  );
+}
+export {
+  d as Text
+};

package/dist/atoms/Text/Text.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { Text } from './Text';
+declare const meta: {
+    title: string;
+    component: typeof Text;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllProps: Story;
+export declare const Sizes: StoryObj<typeof Text>;
+export declare const Variants: StoryObj<typeof Text>;
+export declare const Weights: StoryObj<typeof Text>;
+export declare const AsElementType: StoryObj<typeof Text>;

package/dist/atoms/Text/Text.stories.js

@@ -0,0 +1,89 @@
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { Text as i } from "./Text.js";
+import { Flex as r } from "../Flex/Flex.js";
+const p = {
+  title: "Case Parts/Atoms/Text",
+  component: i,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, m = {
+  args: {
+    size: "sm",
+    children: "Text value"
+  }
+}, a = [
+  "xxs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl"
+], h = {
+  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: a.map((e) => /* @__PURE__ */ l(i, { size: e, children: [
+    e.charAt(0).toUpperCase() + e.slice(1),
+    " Text"
+  ] }, e)) })
+}, n = ["body", "display"], y = {
+  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: n.map((e) => /* @__PURE__ */ l(i, { size: "md", variant: e, children: [
+    "variant: ",
+    e
+  ] }, e)) })
+}, t = [
+  "thin",
+  "extra-light",
+  "light",
+  "regular",
+  "medium",
+  "semibold",
+  "bold"
+], f = {
+  render: () => /* @__PURE__ */ l(r, { flexDirection: "row", style: { gap: "100px" }, children: [
+    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", children: "`body` variant" }),
+      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, children: [
+        e,
+        " Text"
+      ] }, e))
+    ] }),
+    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", variant: "display", children: "`display` variant" }),
+      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, variant: "display", children: [
+        e,
+        " Text"
+      ] }, e))
+    ] })
+  ] })
+}, d = [
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "div"
+], g = {
+  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: d.map((e) => /* @__PURE__ */ l(i, { size: "lg", as: e, children: [
+    "Rendered as `",
+    e,
+    "` element"
+  ] }, e)) })
+};
+export {
+  m as AllProps,
+  g as AsElementType,
+  h as Sizes,
+  y as Variants,
+  f as Weights,
+  p as default
+};

package/dist/clsx-OuTLNxxd.js

@@ -0,0 +1,16 @@
+function a(r) {
+  var f, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function i() {
+  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
+  return t;
+}
+export {
+  i as c
+};

package/dist/main.d.ts

@@ -0,0 +1,29 @@
+export { Button } from './atoms/Button/Button';
+export type { ButtonProps } from './atoms/Button/Button';
+export { Flex } from './atoms/Flex/Flex';
+export type { FlexProps } from './atoms/Flex/Flex';
+export { Grid, Column } from './atoms/Grid/Grid';
+export type { GridProps, ColumnProps } from './atoms/Grid/Grid';
+export { Head } from './atoms/Root/Head';
+export { Icon } from './atoms/Icon/Icon';
+export { Link } from './atoms/Link/Link';
+export type { LinkProps } from './atoms/Link/Link';
+export { Root } from './atoms/Root/Root';
+export { Separator } from './atoms/Separator/Separator';
+export type { SeparatorProps } from './atoms/Separator/Separator';
+export { Text } from './atoms/Text/Text';
+export type { TextProps } from './atoms/Text/Text';
+export { Account } from './molecules/Account/Account';
+export type { AccountProps } from './molecules/Account/Account';
+export { Avatar } from './molecules/Avatar/Avatar';
+export type { AvatarProps } from './molecules/Avatar/Avatar';
+export { Chip } from './molecules/Chip/Chip';
+export type { ChipProps } from './molecules/Chip/Chip';
+export { Logo } from './molecules/Logo/Logo';
+export { SearchBox } from './molecules/SearchBox/SearchBox';
+export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
+export { ToggleView } from './molecules/ToggleView/ToggleView';
+export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
+export { MainNav } from './organisms/MainNav/MainNav';
+export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
+export type { ChipSelectorProps } from './organisms/ChipSelector/ChipSelector';

package/dist/main.js

@@ -0,0 +1,37 @@
+import { Button as e } from "./atoms/Button/Button.js";
+import { Flex as p } from "./atoms/Flex/Flex.js";
+import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
+import { Head as i } from "./atoms/Root/Head.js";
+import { Icon as c } from "./atoms/Icon/Icon.js";
+import { Link as g } from "./atoms/Link/Link.js";
+import { Root as u } from "./atoms/Root/Root.js";
+import { Separator as S } from "./atoms/Separator/Separator.js";
+import { Text as v } from "./atoms/Text/Text.js";
+import { Account as B } from "./molecules/Account/Account.js";
+import { Avatar as T } from "./molecules/Avatar/Avatar.js";
+import { Chip as w } from "./molecules/Chip/Chip.js";
+import { Logo as G } from "./molecules/Logo/Logo.js";
+import { SearchBox as I } from "./molecules/SearchBox/SearchBox.js";
+import { ToggleView as N } from "./molecules/ToggleView/ToggleView.js";
+import { MainNav as V } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as j } from "./organisms/ChipSelector/ChipSelector.js";
+export {
+  B as Account,
+  T as Avatar,
+  e as Button,
+  w as Chip,
+  j as ChipSelector,
+  m as Column,
+  p as Flex,
+  f as Grid,
+  i as Head,
+  c as Icon,
+  g as Link,
+  G as Logo,
+  V as MainNav,
+  u as Root,
+  I as SearchBox,
+  S as Separator,
+  v as Text,
+  N as ToggleView
+};

package/dist/molecules/Account/Account.d.ts

@@ -0,0 +1,13 @@
+import { HideAtProps } from '../../atoms/HideAt';
+/** Base props shared by all account types */
+export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
+    account?: {
+        /** The account number. */
+        number: string;
+        /** The account user's name. */
+        name: string;
+        /** The account user's initials. */
+        initials: string;
+    };
+}
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Account/Account.js

@@ -0,0 +1,66 @@
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import { getHideAtStyles as d } from "../../atoms/HideAt.js";
+import { Icon as g } from "../../atoms/Icon/Icon.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Avatar as c } from "../Avatar/Avatar.js";
+import { Flex as t } from "../../atoms/Flex/Flex.js";
+import { Button as f } from "../../atoms/Button/Button.js";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import { Link as h } from "../../atoms/Link/Link.js";
+import '../../assets/Account.css';const u = "_loggedIn_14vhg_1", x = "_customer_14vhg_9", o = {
+  loggedIn: u,
+  customer: x
+};
+function A(e) {
+  return e.account !== void 0;
+}
+function H(e) {
+  return A(e) ? /* @__PURE__ */ i(I, { ...e }) : /* @__PURE__ */ i(p, { ...e });
+}
+function I({
+  account: e,
+  className: m,
+  hideAt: s,
+  ...l
+}) {
+  return /* @__PURE__ */ r(
+    t,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      className: a(o.loggedIn, d(s), m),
+      ...l,
+      children: [
+        /* @__PURE__ */ r(
+          t,
+          {
+            flexDirection: "column",
+            alignItems: "flex-end",
+            hideAt: ["sm", "md"],
+            className: o.customer,
+            children: [
+              /* @__PURE__ */ r(n, { size: "xxs", children: [
+                "Acct: ",
+                e == null ? void 0 : e.number
+              ] }),
+              /* @__PURE__ */ i(h, { href: "#", children: /* @__PURE__ */ r(n, { size: "sm", variant: "display", children: [
+                "Hello ",
+                e == null ? void 0 : e.name
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(c, { initials: e.initials })
+      ]
+    }
+  );
+}
+function p(e) {
+  return /* @__PURE__ */ r(t, { flexDirection: "row", alignItems: "center", ...e, children: [
+    /* @__PURE__ */ i(f, { size: "sm", variant: "primary", hideAt: ["sm", "md"], children: "Sign In / Register" }),
+    /* @__PURE__ */ i(g, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+  ] });
+}
+export {
+  H as Account
+};

package/dist/molecules/Account/Account.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+import { Account } from './Account';
+declare const meta: {
+    title: string;
+    component: typeof Account;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Unauthenticated: Story;
+export declare const Authenticated: Story;

package/dist/molecules/Account/Account.stories.js

@@ -0,0 +1,26 @@
+import { Account as t } from "./Account.js";
+const a = {
+  title: "Case Parts/Molecules/Account",
+  component: t,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, n = {
+  args: {}
+}, o = {
+  args: {
+    account: {
+      name: "Ringo",
+      initials: "RS",
+      number: "123456789012"
+    }
+  }
+};
+export {
+  o as Authenticated,
+  n as Unauthenticated,
+  a as default
+};

package/dist/molecules/Avatar/Avatar.d.ts

@@ -0,0 +1,6 @@
+import { HideAtProps } from '../../atoms/HideAt';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
+    /** The user's initials (2 characters) */
+    initials: string;
+}
+export declare function Avatar({ initials, className, hideAt, ...otherProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Avatar/Avatar.js

@@ -0,0 +1,35 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Flex as i } from "../../atoms/Flex/Flex.js";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
+import { c as n } from "../../clsx-OuTLNxxd.js";
+import { t } from "../../Text.module-ruz24ug-.js";
+import '../../assets/Avatar.css';const c = "_avatar_18kx8_1", l = {
+  avatar: c
+};
+function d({
+  initials: r,
+  className: e,
+  hideAt: a,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    i,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      className: n(
+        l.avatar,
+        t["text-display"],
+        t["text-md"],
+        m(a),
+        e
+      ),
+      ...o,
+      children: r.substring(0, 2)
+    }
+  );
+}
+export {
+  d as Avatar
+};

package/dist/molecules/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: {
+    title: string;
+    component: typeof Avatar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/molecules/Avatar/Avatar.stories.js

@@ -0,0 +1,17 @@
+import { Avatar as t } from "./Avatar.js";
+const e = {
+  title: "Case Parts/Molecules/Avatar",
+  component: t,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, o = {
+  args: { initials: "RS" }
+};
+export {
+  o as Default,
+  e as default
+};

package/dist/molecules/Chip/Chip.d.ts

@@ -0,0 +1,57 @@
+import { HideAtProps } from '../../atoms/HideAt';
+export interface ChipProps extends React.ButtonHTMLAttributes<HTMLDivElement>, HideAtProps {
+    selected?: boolean;
+    disabled?: boolean;
+    text: string;
+    variant?: "selectable" | "dismissable" | "pill";
+    styleVariant?: "primary" | "secondary" | "error";
+    onDismiss?: () => void;
+    onSelect?: () => void;
+    count?: number | undefined;
+}
+/**
+ * A versatile `Chip` component that can be used in various contexts such as selectable, dismissable, or as a pill.
+ *
+ * - **Stateless**: The component is stateless and relies on the parent to manage its state (e.g., `selected`).
+ * - **Variants**:
+ *   - `selectable`: Can be selected or deselected.
+ *   - `dismissable`: Includes a dismiss button.
+ *   - `pill`: A pill-shaped chip.
+ *
+ * ### Props
+ * - `selected` (boolean): Indicates whether the chip is selected (used in `selectable` variant).
+ * - `disabled` (boolean): Disables the chip, preventing interactions.
+ * - `text` (string): The text content displayed inside the chip.
+ * - `variant` (`"selectable" | "dismissable" | "pill"`): The type of chip to render.
+ * - `styleVariant` (`"primary" | "secondary" | "error"`): The style variant for the chip (applies to `dismissable` variant).
+ * - `onDismiss` (function): Callback fired when the dismiss button is clicked (used in `dismissable` variant).
+ * - `onSelect` (function): Callback fired when the chip is clicked (used in `selectable` variant).
+ * - `count` (number): An optional count to display next to the chip text.
+ *
+ * ### Examples
+ * ```tsx
+ * // Selectable chip
+ * <Chip
+ *   variant="selectable"
+ *   selected={true}
+ *   text="Selectable Chip"
+ *   onSelect={() => console.log("Chip selected!")}
+ * />
+ *
+ * // Dismissable chip
+ * <Chip
+ *   variant="dismissable"
+ *   text="Dismissable Chip"
+ *   styleVariant="error"
+ *   onDismiss={() => console.log("Chip dismissed!")}
+ * />
+ *
+ * // Pill chip
+ * <Chip
+ *   variant="pill"
+ *   text="Pill Chip"
+ * />
+ * ```
+ */
+export declare function Chip({ selected, text, hideAt, className, disabled, count, variant, styleVariant, // Default style variant
+onDismiss, onSelect, ...otherProps }: ChipProps): import("react/jsx-runtime").JSX.Element;