@cfx-dev/ui-components 2.0.0 → 2.0.2

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,26 @@
+import { default as React, PropsWithChildren } from 'react';
+import { IconName } from '../Icon';
+
+export interface AccordionContextProps {
+    openItems: Set<string>;
+    toggleItem: (id: string) => void;
+}
+export interface AccordionProps {
+    className?: string;
+}
+export declare const Accordion: React.FC<PropsWithChildren<AccordionProps>>;
+export declare const AccordionItem: React.FC<React.PropsWithChildren<{
+    id: string;
+}>>;
+export declare const AccordionHeader: React.FC<React.PropsWithChildren>;
+interface AccordionTriggerProps {
+    id: string;
+    text: string;
+    iconLeft?: IconName;
+}
+export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
+interface AccordionContentProps {
+    id: string;
+}
+export declare const AccordionContent: React.FC<React.PropsWithChildren<AccordionContentProps>>;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,120 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import w, { createContext as D, useState as p, useContext as A, useEffect as U } from "react";
+import { Icon as C } from "../Icon/Icon.js";
+import { Flex as x } from "../Layout/Flex/Flex.js";
+import { Text as I } from "../Text/Text.js";
+import { clsx as u } from "../../utils/clsx.js";
+import '../../assets/Accordion.css';const b = "_root_44hi4_1", S = "_item_44hi4_5", F = "_header_44hi4_5", N = "_triggerContainer_44hi4_10", y = "_iconFlip_44hi4_23", T = "_iconUp_44hi4_26", R = "_iconDown_44hi4_29", $ = "_iconLeft_44hi4_32", k = "_iconRight_44hi4_36", E = "_content_44hi4_49", L = "_open_44hi4_56", O = "_iconSlideUp_44hi4_1", j = "_iconSlideDown_44hi4_1", o = {
+  root: b,
+  item: S,
+  header: F,
+  triggerContainer: N,
+  iconFlip: y,
+  iconUp: T,
+  iconDown: R,
+  iconLeft: $,
+  iconRight: k,
+  content: E,
+  open: L,
+  iconSlideUp: O,
+  iconSlideDown: j
+}, g = D(void 0), q = function({
+  children: t,
+  className: n
+}) {
+  const [c, s] = p(/* @__PURE__ */ new Set()), a = w.useCallback((i) => {
+    s((m) => {
+      const r = new Set(m);
+      return r.has(i) ? r.delete(i) : r.add(i), r;
+    });
+  }, []), h = w.useMemo(() => ({
+    openItems: c,
+    toggleItem: a
+  }), [c, a]);
+  return /* @__PURE__ */ e(g.Provider, { value: h, children: /* @__PURE__ */ e("div", { className: u(o.root, n), role: "presentation", children: t }) });
+}, B = function({
+  children: t,
+  id: n
+}) {
+  return /* @__PURE__ */ e("div", { className: o.item, id: n, role: "region", "aria-labelledby": `${n}-header`, children: t });
+}, G = function({
+  children: t
+}) {
+  return /* @__PURE__ */ e("div", { className: o.header, children: t });
+}, J = function({
+  text: t,
+  id: n,
+  iconLeft: c
+}) {
+  const s = A(g);
+  if (!s)
+    throw new Error("AccordionTrigger must be used within an Accordion");
+  const {
+    toggleItem: a,
+    openItems: h
+  } = s, i = h.has(n), [m, r] = p(!1), [_, v] = p(i ? "UpChevron" : "DownChevron");
+  return U(() => {
+    const d = setTimeout(() => {
+      v(i ? "UpChevron" : "DownChevron"), r(!1);
+    }, 300);
+    return r(!0), () => clearTimeout(d);
+  }, [i]), /* @__PURE__ */ f(
+    "div",
+    {
+      className: o.triggerContainer,
+      onClick: () => a(n),
+      onKeyDown: (d) => {
+        (d.key === "Enter" || d.key === " ") && a(n);
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": i,
+      "aria-controls": `${n}-content`,
+      id: `${n}-header`,
+      children: [
+        /* @__PURE__ */ f(x, { centered: !0, children: [
+          c && /* @__PURE__ */ e(C, { name: c, className: o.iconLeft }),
+          /* @__PURE__ */ e(I, { size: "xxsmall", children: t })
+        ] }),
+        /* @__PURE__ */ e(x, { centered: !0, children: /* @__PURE__ */ e(
+          C,
+          {
+            className: u(o.iconRight, {
+              [o.iconFlip]: m,
+              [o.iconUp]: _ === "UpChevron",
+              [o.iconDown]: _ === "DownChevron"
+            }),
+            name: _
+          }
+        ) })
+      ]
+    }
+  );
+}, Q = function({
+  children: t,
+  id: n
+}) {
+  const c = A(g);
+  if (!c)
+    throw new Error("AccordionContent must be used within an Accordion");
+  const {
+    openItems: s
+  } = c;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: u(o.content, { [o.open]: s.has(n) }),
+      id: `${n}-content`,
+      role: "region",
+      "aria-labelledby": `${n}-header`,
+      children: /* @__PURE__ */ e(I, { color: "secondary", size: "xxsmall", children: t })
+    }
+  );
+};
+export {
+  q as Accordion,
+  Q as AccordionContent,
+  G as AccordionHeader,
+  B as AccordionItem,
+  J as AccordionTrigger
+};

package/dist/components/Accordion/AccordionShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function AccordionShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AccordionShowcase>;
+export default _default;

package/dist/components/Accordion/AccordionShowcase.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import a from "react";
+import { Flex as c } from "../Layout/Flex/Flex.js";
+import { Text as d } from "../Text/Text.js";
+import { Accordion as l, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
+function h() {
+  return /* @__PURE__ */ e(c, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(c, { fullWidth: !0, vertical: !0, children: [
+    /* @__PURE__ */ e(d, { size: "large", children: "Accordion" }),
+    /* @__PURE__ */ t(l, { children: [
+      /* @__PURE__ */ t(i, { id: "item1", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item1",
+            text: "Will I get banned from GTA:O?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item1", children: "Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it." })
+      ] }),
+      /* @__PURE__ */ t(i, { id: "item2", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item2",
+            text: "Can I cheat on FiveM?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item2", children: "Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned!" })
+      ] }),
+      /* @__PURE__ */ t(i, { id: "item3", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item3",
+            text: "Is this accordion any good?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item3", children: "Obviously!" })
+      ] }),
+      /* @__PURE__ */ t(i, { id: "item4", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item4",
+            text: "Who said?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item4", children: "Me!" })
+      ] })
+    ] })
+  ] }) });
+}
+const b = a.memo(h);
+export {
+  b as default
+};

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

@@ -0,0 +1 @@
+export { Accordion, AccordionTrigger, AccordionHeader, AccordionItem, } from './Accordion';

package/dist/components/Accordion/index.js

@@ -0,0 +1,7 @@
+import { Accordion as c, AccordionHeader as d, AccordionItem as e, AccordionTrigger as i } from "./Accordion.js";
+export {
+  c as Accordion,
+  d as AccordionHeader,
+  e as AccordionItem,
+  i as AccordionTrigger
+};

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

@@ -0,0 +1,2 @@
+export { default as ClipboardButton, CLIPBOARD_TITLE_APPEARANCE } from './ClipboardButton';
+export type { ClipboardButtonProps } from './ClipboardButton';

package/dist/components/ClipboardButton/index.js

@@ -1 +1,5 @@
-
+import { CLIPBOARD_TITLE_APPEARANCE as A, default as a } from "./ClipboardButton.js";
+export {
+  A as CLIPBOARD_TITLE_APPEARANCE,
+  a as ClipboardButton
+};

package/dist/main.d.ts

@@ -11,6 +11,9 @@ export type { ValueOrGetter } from './utils/getValue';
 export type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
 export type { OutletPosition } from './utils/hooks';
 export type { SetTimeoutReturn } from './utils/execution';
+export { IconButton } from './components/IconButton';
+export { Accordion, AccordionTrigger, AccordionHeader, AccordionItem, } from './components/Accordion';
+export { ClipboardButton, CLIPBOARD_TITLE_APPEARANCE } from './components/ClipboardButton';
 export { Checkbox } from './components/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';
@@ -60,6 +63,8 @@ export { Text, TextBlock, getTextOpacity, } from './components/Text';
 export { Textarea } from './components/Textarea/Textarea';
 export { Title, TITLE_OUTLET_ID } from './components/Title/Title';
 export { InputDropzone } from './components/InputDropzone';
+export type { IconButtonProps } from './components/IconButton';
+export type { ClipboardButtonProps } from './components/ClipboardButton';
 export type { InputDropzoneProps, FileWithPath } from './components/InputDropzone';
 export type { InputSize, InputProps, RichInputProps, } from './components/Input';
 export type { SwitchProps } from './components/Switch';

package/dist/main.js

@@ -5,166 +5,176 @@ import { usePopoverController as l } from "./utils/hooks/usePopoverController.js
 import { useInstance as i } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as u } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as I } from "./utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
 import { useWindowResize as g } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as S } from "./utils/hooks/useOutlet.js";
-import { identity as R, invoke as k, noop as O, returnFalse as b, returnTrue as h } from "./utils/functional.js";
-import { Linkify as D, defaultLinkReplacer as P, defaultLinkReplacerx as v, isExternalUrl as E, linkify as _, linkifyx as F, matchLinkNodes as U, matchLinks as A } from "./utils/links.js";
-import { clamp as K, clamp01 as V } from "./utils/math.js";
-import { isFalseString as G, isTrueString as N, normalizeSlashes as Y, replaceRange as M, splitByIndices as W, unicodeCharAt as j } from "./utils/string.js";
-import { debounce as H, throttle as J } from "./utils/execution.js";
-import { default as X } from "./components/Checkbox/Checkbox.js";
-import { Button as $ } from "./components/Button/Button.js";
-import { LinkButton as ro } from "./components/Button/LinkButton.js";
-import { ButtonBar as to } from "./components/Button/ButtonBar.js";
-import { Avatar as fo } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as mo, BackdropPortal as ao } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as no } from "./components/Badge/Badge.js";
-import { ControlBox as so } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as co } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as Io } from "./components/Decorate/Decorate.js";
-import { Dot as go } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as So, Flyout as Bo } from "./components/Flyout/Flyout.js";
-import { Logos as ko } from "./components/Logos/index.js";
-import { I as bo } from "./cfxIcons-BlbKR-zU.js";
-import { I as Co } from "./cfxIconsBig-CNY8zL27.js";
-import { Icon as Po } from "./components/Icon/Icon.js";
-import { IconBig as Eo } from "./components/IconBig/IconBig.js";
-import { Indicator as Fo } from "./components/Indicator/Indicator.js";
-import { default as Ao } from "./components/InfoPanel/InfoPanel.js";
-import { default as Ko } from "./components/Input/Input.js";
-import { default as wo } from "./components/Input/RichInput.js";
-import { Interactive as No } from "./components/Interactive/Interactive.js";
-import { Island as Mo } from "./components/Island/Island.js";
-import { Box as jo } from "./components/Layout/Box/Box.js";
-import { Center as Ho } from "./components/Layout/Center/Center.js";
-import { Flex as Qo } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as Zo } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as or } from "./components/Layout/Pad/Pad.js";
-import { Page as er } from "./components/Layout/Page/Page.js";
-import { R as pr } from "./Rail-rtPENZs2.js";
-import { Scrollable as xr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as ar } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as nr } from "./components/Loaf/Loaf.js";
-import { Modal as sr } from "./components/Modal/Modal.js";
-import { NavList as cr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Tr, Overlay as Ir } from "./components/Overlay/Overlay.js";
-import { Popover as gr } from "./components/Popover/Popover.js";
-import { PremiumBadge as Sr } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Rr } from "./components/Prose/Prose.js";
-import { Radio as Or } from "./components/Radio/Radio.js";
-import { Select as hr } from "./components/Select/Select.js";
-import { Separator as Dr } from "./components/Separator/Separator.js";
-import { Shroud as vr } from "./components/Shroud/Shroud.js";
-import { Spacer as _r } from "./components/Spacer/Spacer.js";
-import { Style as Ur, useContextualStyle as Ar } from "./components/Style/Style.js";
-import { default as Kr } from "./components/Switch/Switch.js";
-import { ToggleGroup as wr } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as Nr } from "./components/Tabular/Tabular.js";
-import { Table as Mr } from "./components/Table/Table.js";
-import { Text as jr, TextBlock as qr, getTextOpacity as Hr } from "./components/Text/Text.js";
-import { Textarea as Qr } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as Zr, Title as $r } from "./components/Title/Title.js";
-import { default as re } from "./components/InputDropzone/InputDropzone.js";
+import { useOutlet as y } from "./utils/hooks/useOutlet.js";
+import { identity as S, invoke as k, noop as A, returnFalse as C, returnTrue as O } from "./utils/functional.js";
+import { Linkify as b, defaultLinkReplacer as E, defaultLinkReplacerx as D, isExternalUrl as _, linkify as h, linkifyx as v, matchLinkNodes as F, matchLinks as U } from "./utils/links.js";
+import { clamp as K, clamp01 as N } from "./utils/math.js";
+import { isFalseString as w, isTrueString as G, normalizeSlashes as Y, replaceRange as H, splitByIndices as M, unicodeCharAt as W } from "./utils/string.js";
+import { debounce as q, throttle as J } from "./utils/execution.js";
+import { default as X } from "./components/IconButton/IconButton.js";
+import { Accordion as $, AccordionHeader as oo, AccordionItem as ro, AccordionTrigger as eo } from "./components/Accordion/Accordion.js";
+import { CLIPBOARD_TITLE_APPEARANCE as po, default as fo } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as mo } from "./components/Checkbox/Checkbox.js";
+import { Button as lo } from "./components/Button/Button.js";
+import { LinkButton as io } from "./components/Button/LinkButton.js";
+import { ButtonBar as uo } from "./components/Button/ButtonBar.js";
+import { Avatar as Io } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Lo, BackdropPortal as go } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as yo } from "./components/Badge/Badge.js";
+import { ControlBox as So } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as Ao } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as Oo } from "./components/Decorate/Decorate.js";
+import { Dot as bo } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as Do, Flyout as _o } from "./components/Flyout/Flyout.js";
+import { Logos as vo } from "./components/Logos/index.js";
+import { I as Uo } from "./cfxIcons-BlbKR-zU.js";
+import { I as Ko } from "./cfxIconsBig-CNY8zL27.js";
+import { Icon as Vo } from "./components/Icon/Icon.js";
+import { IconBig as Go } from "./components/IconBig/IconBig.js";
+import { Indicator as Ho } from "./components/Indicator/Indicator.js";
+import { default as Wo } from "./components/InfoPanel/InfoPanel.js";
+import { default as qo } from "./components/Input/Input.js";
+import { default as Qo } from "./components/Input/RichInput.js";
+import { Interactive as Zo } from "./components/Interactive/Interactive.js";
+import { Island as or } from "./components/Island/Island.js";
+import { Box as er } from "./components/Layout/Box/Box.js";
+import { Center as pr } from "./components/Layout/Center/Center.js";
+import { Flex as xr } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as ar } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as nr } from "./components/Layout/Pad/Pad.js";
+import { Page as sr } from "./components/Layout/Page/Page.js";
+import { R as cr } from "./Rail-rtPENZs2.js";
+import { Scrollable as Ir } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as Lr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as Br } from "./components/Loaf/Loaf.js";
+import { Modal as Rr } from "./components/Modal/Modal.js";
+import { NavList as kr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Cr, Overlay as Or } from "./components/Overlay/Overlay.js";
+import { Popover as br } from "./components/Popover/Popover.js";
+import { PremiumBadge as Dr } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as hr } from "./components/Prose/Prose.js";
+import { Radio as Fr } from "./components/Radio/Radio.js";
+import { Select as zr } from "./components/Select/Select.js";
+import { Separator as Nr } from "./components/Separator/Separator.js";
+import { Shroud as wr } from "./components/Shroud/Shroud.js";
+import { Spacer as Yr } from "./components/Spacer/Spacer.js";
+import { Style as Mr, useContextualStyle as Wr } from "./components/Style/Style.js";
+import { default as qr } from "./components/Switch/Switch.js";
+import { ToggleGroup as Qr } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as Zr } from "./components/Tabular/Tabular.js";
+import { Table as oe } from "./components/Table/Table.js";
+import { Text as ee, TextBlock as te, getTextOpacity as pe } from "./components/Text/Text.js";
+import { Textarea as xe } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as ae, Title as le } from "./components/Title/Title.js";
+import { default as ie } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { OnScreenSensor as te } from "./components/OnScreenSensor.js";
-import { ui as fe } from "./components/ui.js";
-import { Symbols as me } from "./components/Symbols.js";
+import { OnScreenSensor as ue } from "./components/OnScreenSensor.js";
+import { ui as de } from "./components/ui.js";
+import { Symbols as Te } from "./components/Symbols.js";
 export {
-  fo as Avatar,
-  mo as BACKDROP_OUTLET_ID,
-  ao as BackdropPortal,
-  no as Badge,
-  jo as Box,
-  $ as Button,
-  to as ButtonBar,
-  Ho as Center,
-  X as Checkbox,
-  so as ControlBox,
-  co as CountryFlag,
-  Io as Decorate,
-  go as Dot,
-  So as FLYOUT_OUTLET_ID,
-  Qo as Flex,
-  Zo as FlexRestricter,
-  Bo as Flyout,
-  Po as Icon,
-  Eo as IconBig,
-  bo as Icons,
-  Co as IconsBig,
-  Fo as Indicator,
-  Ao as InfoPanel,
-  Ko as Input,
-  re as InputDropzone,
-  No as Interactive,
-  Mo as Island,
-  ro as LinkButton,
-  D as Linkify,
-  nr as Loaf,
-  ko as Logos,
-  sr as Modal,
-  cr as NavList,
-  Tr as OVERLAY_OUTLET_ID,
-  te as OnScreenSensor,
-  Ir as Overlay,
-  or as Pad,
-  er as Page,
-  gr as Popover,
-  Sr as PremiumBadge,
-  Rr as Prose,
-  Or as Radio,
-  pr as Rail,
-  wo as RichInput,
-  xr as Scrollable,
-  hr as Select,
-  Dr as Separator,
-  vr as Shroud,
-  _r as Spacer,
-  Ur as Style,
-  Kr as Switch,
-  me as Symbols,
-  Zr as TITLE_OUTLET_ID,
-  Mr as Table,
-  Nr as Tabular,
-  jr as Text,
-  qr as TextBlock,
-  Qr as Textarea,
-  $r as Title,
-  wr as ToggleGroup,
-  ar as VirtualScrollable,
+  $ as Accordion,
+  oo as AccordionHeader,
+  ro as AccordionItem,
+  eo as AccordionTrigger,
+  Io as Avatar,
+  Lo as BACKDROP_OUTLET_ID,
+  go as BackdropPortal,
+  yo as Badge,
+  er as Box,
+  lo as Button,
+  uo as ButtonBar,
+  po as CLIPBOARD_TITLE_APPEARANCE,
+  pr as Center,
+  mo as Checkbox,
+  fo as ClipboardButton,
+  So as ControlBox,
+  Ao as CountryFlag,
+  Oo as Decorate,
+  bo as Dot,
+  Do as FLYOUT_OUTLET_ID,
+  xr as Flex,
+  ar as FlexRestricter,
+  _o as Flyout,
+  Vo as Icon,
+  Go as IconBig,
+  X as IconButton,
+  Uo as Icons,
+  Ko as IconsBig,
+  Ho as Indicator,
+  Wo as InfoPanel,
+  qo as Input,
+  ie as InputDropzone,
+  Zo as Interactive,
+  or as Island,
+  io as LinkButton,
+  b as Linkify,
+  Br as Loaf,
+  vo as Logos,
+  Rr as Modal,
+  kr as NavList,
+  Cr as OVERLAY_OUTLET_ID,
+  ue as OnScreenSensor,
+  Or as Overlay,
+  nr as Pad,
+  sr as Page,
+  br as Popover,
+  Dr as PremiumBadge,
+  hr as Prose,
+  Fr as Radio,
+  cr as Rail,
+  Qo as RichInput,
+  Ir as Scrollable,
+  zr as Select,
+  Nr as Separator,
+  wr as Shroud,
+  Yr as Spacer,
+  Mr as Style,
+  qr as Switch,
+  Te as Symbols,
+  ae as TITLE_OUTLET_ID,
+  oe as Table,
+  Zr as Tabular,
+  ee as Text,
+  te as TextBlock,
+  xe as Textarea,
+  le as Title,
+  Qr as ToggleGroup,
+  Lr as VirtualScrollable,
   K as clamp,
-  V as clamp01,
+  N as clamp01,
   f as clsx,
-  H as debounce,
-  P as defaultLinkReplacer,
-  v as defaultLinkReplacerx,
-  Hr as getTextOpacity,
+  q as debounce,
+  E as defaultLinkReplacer,
+  D as defaultLinkReplacerx,
+  pe as getTextOpacity,
   m as getValue,
-  R as identity,
+  S as identity,
   k as invoke,
-  E as isExternalUrl,
-  G as isFalseString,
-  N as isTrueString,
-  _ as linkify,
-  F as linkifyx,
-  U as matchLinkNodes,
-  A as matchLinks,
+  _ as isExternalUrl,
+  w as isFalseString,
+  G as isTrueString,
+  h as linkify,
+  v as linkifyx,
+  F as matchLinkNodes,
+  U as matchLinks,
   t as mergeRefs,
-  O as noop,
+  A as noop,
   Y as normalizeSlashes,
-  M as replaceRange,
-  b as returnFalse,
-  h as returnTrue,
-  W as splitByIndices,
+  H as replaceRange,
+  C as returnFalse,
+  O as returnTrue,
+  M as splitByIndices,
   J as throttle,
-  fe as ui,
-  j as unicodeCharAt,
-  Ar as useContextualStyle,
+  de as ui,
+  W as unicodeCharAt,
+  Wr as useContextualStyle,
   u as useDynamicRef,
   d as useGlobalKeyboardEvent,
   i as useInstance,
-  I as useKeyboardClose,
-  S as useOutlet,
+  T as useKeyboardClose,
+  y as useOutlet,
   l as usePopoverController,
   g as useWindowResize
 };

package/dist/styles-scss/global.scss

@@ -22,6 +22,7 @@ body {
   @include title-tokens;
   @include button-tokens;
   @include badge-tokens;
+  @include accordion-tokens;
 
   // initiat fonts
   @include font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -117,6 +117,11 @@ $control-heights: (
   @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
 }
 
+@mixin accordion-tokens() {
+  @include ui.define-color-token('accordion-border-color', ui.color('secondary', 'pure', .1));
+  @include ui.define-color-token('accordion-background', ui.color('bg'));
+}
+
 @mixin select-tokens() {
   @include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
   @include ui.define-color-token('interactive-list-item-background', transparent);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",