@fluidattacks/design 8.4.0 → 8.5.0

package/dist/components/collapsible-card/index.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { ICollapsibleCardProps } from './types';
+declare const CollapsibleCard: ({ children, expanded, title, }: Readonly<PropsWithChildren<ICollapsibleCardProps>>) => JSX.Element;
+export { CollapsibleCard };
+export type { ICollapsibleCardProps };

package/dist/components/collapsible-card/index.js

@@ -0,0 +1,41 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as p, useState as m, useCallback as C } from "react";
+import { useTheme as h } from "styled-components";
+import { CollapsibleContainer as f, CardToggle as u, CardTitle as g, CardContent as x } from "./styles.js";
+import { Icon as T } from "../icon/index.js";
+const k = ({
+  children: r,
+  expanded: i = !1,
+  title: a
+}) => {
+  const l = h(), n = p(), [o, d] = m(i), c = C(() => {
+    d((s) => !s);
+  }, []);
+  return /* @__PURE__ */ t(f, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        "aria-controls": n,
+        "aria-expanded": o,
+        onClick: c,
+        type: "button",
+        children: [
+          /* @__PURE__ */ e(g, { children: a }),
+          /* @__PURE__ */ e(
+            T,
+            {
+              icon: o ? "chevron-up" : "chevron-down",
+              iconColor: l.palette.gray[700],
+              iconSize: "md",
+              iconType: "fa-light"
+            }
+          )
+        ]
+      }
+    ),
+    o ? /* @__PURE__ */ e(x, { id: n, children: r }) : void 0
+  ] });
+};
+export {
+  k as CollapsibleCard
+};

package/dist/components/collapsible-card/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react-vite';
+import { ICollapsibleCardProps } from './types';
+declare const config: Meta;
+declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ICollapsibleCardProps>;
+declare const Expanded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ICollapsibleCardProps>;
+export { Default, Expanded };
+export default config;

package/dist/components/collapsible-card/index.test.d.ts

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

package/dist/components/collapsible-card/styles.d.ts

@@ -0,0 +1,5 @@
+declare const CollapsibleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const CardToggle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+declare const CardTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+declare const CardContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export { CardContent, CardTitle, CardToggle, CollapsibleContainer };

package/dist/components/collapsible-card/styles.js

@@ -0,0 +1,48 @@
+import { styled as n } from "styled-components";
+const i = n.div`
+  ${({ theme: a }) => `
+    background-color: ${a.palette.white};
+    border: 1px solid ${a.palette.gray[300]};
+    border-radius: ${a.spacing[0.25]};
+  `}
+`, o = n.button`
+  ${({ theme: a }) => `
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: ${a.spacing[0.25]};
+    cursor: pointer;
+    display: flex;
+    gap: ${a.spacing[0.75]};
+    justify-content: space-between;
+    padding: ${a.spacing[0.75]};
+    width: 100%;
+
+    > :last-child {
+      flex-shrink: 0;
+    }
+
+    &[aria-expanded="true"] {
+      padding-bottom: ${a.spacing[0.625]};
+    }
+  `}
+`, r = n.span`
+  ${({ theme: a }) => `
+    color: ${a.palette.gray[400]};
+    font-family: ${a.typography.type.primary};
+    font-size: ${a.typography.text.sm};
+    font-weight: ${a.typography.weight.bold};
+    line-height: 18px;
+    text-align: start;
+  `}
+`, p = n.div`
+  ${({ theme: a }) => `
+    padding: 0 ${a.spacing[0.75]} ${a.spacing[0.75]};
+  `}
+`;
+export {
+  p as CardContent,
+  r as CardTitle,
+  o as CardToggle,
+  i as CollapsibleContainer
+};

package/dist/components/collapsible-card/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Collapsible card component props. The content, passed as children, is
+ * mounted only while the card is open.
+ * @interface ICollapsibleCardProps
+ * @property { boolean } [expanded] - Whether the card starts open. Later
+ * changes to it are ignored; the card keeps its own open state.
+ * @property { string } title - Title shown in the header, which also names
+ * the toggle button.
+ */
+interface ICollapsibleCardProps {
+    expanded?: boolean;
+    title: string;
+}
+export type { ICollapsibleCardProps };

package/dist/components/comparison-table/index.d.ts

@@ -0,0 +1,4 @@
+import { IComparisonRow, IComparisonTableProps } from './types';
+declare const ComparisonTable: ({ currentHeader, labelHeader, previousHeader, rows, }: Readonly<IComparisonTableProps>) => JSX.Element;
+export { ComparisonTable };
+export type { IComparisonRow, IComparisonTableProps };

package/dist/components/comparison-table/index.js

@@ -0,0 +1,32 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { ComparisonFrame as p, StyledComparisonTable as m, ComparisonRow as u } from "./styles.js";
+const i = "—", s = (e) => e === void 0 || e.trim() === "" ? void 0 : e, b = (e, o) => e === o ? "unchanged" : e === void 0 ? "added" : "changed", g = ({
+  currentHeader: e,
+  labelHeader: o,
+  previousHeader: h,
+  rows: l
+}) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ n(m, { children: [
+  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ n("tr", { children: [
+    /* @__PURE__ */ r("th", { scope: "col", children: o }),
+    /* @__PURE__ */ r("th", { scope: "col", children: h }),
+    /* @__PURE__ */ r("th", { scope: "col", children: e })
+  ] }) }),
+  /* @__PURE__ */ r("tbody", { children: l.map((t, a) => {
+    const c = s(t.previous), d = s(t.current);
+    return /* @__PURE__ */ n(
+      u,
+      {
+        $status: b(c, d),
+        children: [
+          /* @__PURE__ */ r("th", { scope: "row", children: t.label }),
+          /* @__PURE__ */ r("td", { children: c ?? i }),
+          /* @__PURE__ */ r("td", { children: d ?? i })
+        ]
+      },
+      a
+    );
+  }) })
+] }) });
+export {
+  g as ComparisonTable
+};

package/dist/components/comparison-table/index.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { IComparisonTableProps } from './types';
+declare const config: Meta;
+declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComparisonTableProps>;
+declare const WithoutPrevious: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IComparisonTableProps>;
+declare const Narrow: StoryFn<IComparisonTableProps>;
+export { Default, Narrow, WithoutPrevious };
+export default config;

package/dist/components/comparison-table/index.test.d.ts

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

package/dist/components/comparison-table/styles.d.ts

@@ -0,0 +1,8 @@
+import { TComparisonStatus } from './types';
+interface IStyledComparisonRow {
+    $status: TComparisonStatus;
+}
+declare const ComparisonFrame: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const StyledComparisonTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
+declare const ComparisonRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$status"> & IStyledComparisonRow, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$status"> & IStyledComparisonRow, never>>> & string;
+export { ComparisonFrame, ComparisonRow, StyledComparisonTable };

package/dist/components/comparison-table/styles.js

@@ -0,0 +1,114 @@
+import { styled as o } from "styled-components";
+import { variantBuilder as r } from "../@core/variants/utils.js";
+const { getVariant: i } = r(
+  (t) => {
+    const a = `
+      background-color: ${t.palette.warning[200]}26;
+
+      > th {
+        box-shadow: inset 2px 0 0 ${t.palette.warning[500]};
+        padding-left: calc(${t.spacing[0.625]} + 2px);
+      }
+
+      > td:nth-of-type(2) {
+        color: ${t.palette.warning[600]};
+        font-weight: ${t.typography.weight.bold};
+      }
+    `;
+    return {
+      added: a,
+      changed: `
+        ${a}
+
+        > td:nth-of-type(1) {
+          color: ${t.palette.gray[800]};
+          font-weight: ${t.typography.weight.bold};
+        }
+      `,
+      unchanged: ""
+    };
+  }
+), l = o.div`
+  ${({ theme: t }) => `
+    background-color: ${t.palette.white};
+    border: 1px solid ${t.palette.gray[100]};
+    border-radius: ${t.spacing[0.25]};
+    container-type: inline-size;
+    overflow: hidden;
+  `}
+`, n = o.table`
+  ${({ theme: t }) => `
+    border-collapse: collapse;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.md};
+    line-height: ${t.spacing[1.25]};
+    table-layout: fixed;
+    width: 100%;
+
+    th,
+    td {
+      border-bottom: 1px solid ${t.palette.gray[200]};
+      border-right: 1px solid ${t.palette.gray[200]};
+      padding: 0 ${t.spacing[0.625]};
+      text-align: start;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-color: ${t.palette.gray[100]};
+    }
+
+    thead th {
+      background-color: ${t.palette.gray[600]};
+      color: ${t.palette.white};
+      font-weight: ${t.typography.weight.bold};
+      overflow: hidden;
+      padding-bottom: ${t.spacing[0.25]};
+      padding-top: ${t.spacing[0.25]};
+      white-space: pre;
+    }
+
+    thead th:first-child {
+      width: 150px;
+    }
+
+    /* Beside a 150px label column, a header line of about 80px only fits
+       down to a 330px table. Narrower, the label column gives width back to
+       the values and headers also wrap at spaces. A fixed-layout table
+       ignores min() on a cell width, hence the query rather than one rule. */
+    @container (max-width: 330px) {
+      thead th {
+        white-space: pre-line;
+      }
+
+      thead th:first-child {
+        width: 40%;
+      }
+    }
+
+    tbody tr {
+      height: ${t.spacing[1.75]};
+    }
+
+    tbody th,
+    tbody td {
+      color: ${t.palette.gray[600]};
+      font-weight: ${t.typography.weight.regular};
+    }
+
+    tbody tr:last-child > * {
+      border-bottom: none;
+    }
+
+    tbody tr:last-child > td:last-child {
+      border-right: none;
+    }
+  `}
+`, p = o.tr`
+  ${({ $status: t, theme: a }) => i(a, t)}
+`;
+export {
+  l as ComparisonFrame,
+  p as ComparisonRow,
+  n as StyledComparisonTable
+};

package/dist/components/comparison-table/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Comparison table row.
+ * @interface IComparisonRow
+ * @property {string} current - Value after the change.
+ * @property {string} label - Name of the compared property.
+ * @property {string} [previous] - Value before the change. Leave it undefined
+ * when there is no previous value. A blank value counts as missing, and its
+ * cell shows an em dash.
+ */
+interface IComparisonRow {
+    current: string;
+    label: string;
+    previous?: string;
+}
+/**
+ * Comparison table component props. A row is highlighted when its previous
+ * and current values differ, which includes every row without a previous
+ * value. Headers break where they hold a "\n", and also wrap at spaces when
+ * the table is narrower than 330px.
+ * @interface IComparisonTableProps
+ * @property {string} currentHeader - Header of the current values column.
+ * @property {string} labelHeader - Header of the property names column.
+ * @property {string} previousHeader - Header of the previous values column.
+ * @property {IComparisonRow[]} rows - Rows to compare, in display order.
+ */
+interface IComparisonTableProps {
+    currentHeader: string;
+    labelHeader: string;
+    previousHeader: string;
+    rows: IComparisonRow[];
+}
+type TComparisonStatus = "added" | "changed" | "unchanged";
+export type { IComparisonRow, IComparisonTableProps, TComparisonStatus };

package/dist/index.d.ts

@@ -12,7 +12,9 @@ export * from './components/checkbox';
 export * from './components/circular-progress';
 export * from './components/cloud-image';
 export * from './components/code-snippet';
+export * from './components/collapsible-card';
 export * from './components/colors';
+export * from './components/comparison-table';
 export * from './components/conditions-dialog';
 export * from './components/confirm-dialog';
 export * from './components/container';

package/dist/index.js

@@ -1,9 +1,9 @@
 import './assets/styles/global.css';/* empty css                  */
 import { variantBuilder as t } from "./components/@core/variants/utils.js";
-import { hiddenProps as p } from "./components/@core/constants.js";
+import { hiddenProps as m } from "./components/@core/constants.js";
 import { BaseButtonComponent as x, BaseComponent as a, BaseSpanComponent as n, BaseTextComponent as i } from "./components/@core/styles.js";
-import { getStyledConfig as l, setBorder as u, setDisplay as d, setInteraction as C, setMargin as g, setPadding as c, setPosition as S, setText as I } from "./components/@core/utils.js";
-import { Accordion as B } from "./components/accordion/index.js";
+import { getStyledConfig as l, setBorder as u, setDisplay as d, setInteraction as C, setMargin as g, setPadding as c, setPosition as S, setText as T } from "./components/@core/utils.js";
+import { Accordion as b } from "./components/accordion/index.js";
 import { AdvancedBadge as h } from "./components/advanced-badge/index.js";
 import { AdvisoriesCard as D } from "./components/advisories-card/index.js";
 import { Alert as v } from "./components/alert/index.js";
@@ -22,135 +22,137 @@ import { Checkbox as Y } from "./components/checkbox/index.js";
 import { CircularProgress as $ } from "./components/circular-progress/index.js";
 import { CloudImage as or } from "./components/cloud-image/index.js";
 import { CodeSnippet as tr } from "./components/code-snippet/index.js";
-import { CustomThemeProvider as pr, icons as fr, theme as xr } from "./components/colors/index.js";
-import { useConditionsDialog as nr } from "./components/conditions-dialog/index.js";
-import { useConfirmDialog as sr } from "./components/confirm-dialog/index.js";
-import { Container as ur } from "./components/container/index.js";
-import { CopyButton as Cr } from "./components/copy-button/index.js";
-import { Divider as cr } from "./components/divider/index.js";
-import { Drawer as Ir } from "./components/drawer/index.js";
-import { Dropdown as Br } from "./components/dropdown/index.js";
-import { EmptyState as hr } from "./components/empty-state/index.js";
-import { FATag as Dr } from "./components/fa-tag/index.js";
-import { FilePreview as vr } from "./components/file-preview/index.js";
-import { Filters as Lr } from "./components/filters/index.js";
-import { Form as Mr } from "./components/form/index.js";
-import { GridContainer as kr } from "./components/grid-container/index.js";
-import { GroupSelector as Vr } from "./components/group-selector/index.js";
-import { Icon as Rr } from "./components/icon/index.js";
-import { IconButton as Nr } from "./components/icon-button/index.js";
-import { IndicatorCardDB as zr } from "./components/indicator-card-db/index.js";
-import { ComboBox as Hr } from "./components/inputs/fields/combobox/index.js";
-import { InputDate as Xr } from "./components/inputs/fields/date/index.js";
-import { InputDateRange as jr } from "./components/inputs/fields/date-range/index.js";
-import { InputDateTime as Jr } from "./components/inputs/fields/date-time/index.js";
-import { Editable as Yr } from "./components/inputs/fields/editable/index.js";
-import { InputArray as $r } from "./components/inputs/fields/input-array/index.js";
-import { InputFile as oo } from "./components/inputs/fields/input-file/index.js";
-import { InputSection as to } from "./components/inputs/fields/input-section/index.js";
-import { InputTags as po } from "./components/inputs/fields/input-tags/index.js";
-import { InputNumber as xo } from "./components/inputs/fields/number/index.js";
-import { InputNumberRange as no } from "./components/inputs/fields/number-range/index.js";
-import { PhoneInput as so } from "./components/inputs/fields/phone/index.js";
-import { TextArea as uo } from "./components/inputs/fields/text-area/index.js";
-import { TextInput as go } from "./components/inputs/fields/text-input/index.js";
-import { OutlineContainer as So } from "./components/inputs/outline-container/index.js";
-import { ErrorMessage as To } from "./components/inputs/styles.js";
-import { ItemCardDB as bo } from "./components/item-card-db/index.js";
-import { LanguageSwitcher as Fo } from "./components/language-switcher/index.js";
-import { ButtonToolbarCenter as Po, ButtonToolbarRow as vo, ButtonToolbarStartRow as yo } from "./components/layout/categories/buttons/index.js";
-import { Col as Ao } from "./components/layout/categories/column/index.js";
-import { Gap as Oo } from "./components/layout/categories/gap/index.js";
-import { Row as wo } from "./components/layout/categories/row/index.js";
-import { Link as Eo } from "./components/link/index.js";
-import { ListItem as Wo } from "./components/list-item/index.js";
-import { LittleFlag as Uo } from "./components/little-flag/index.js";
-import { Loading as Go } from "./components/loading/index.js";
-import { Logo as Ko } from "./components/logo/index.js";
-import { Lottie as _o } from "./components/lottie/index.js";
-import { Menu as qo } from "./components/menu/index.js";
-import { MessageBanner as Qo } from "./components/message-banner/index.js";
-import { Modal as Zo } from "./components/modal/index.js";
-import { Notification as re } from "./components/notification/index.js";
-import { NotificationSign as ee } from "./components/notification-sign/index.js";
-import { OAuthSelector as me } from "./components/oauth-selector/index.js";
-import { OptionCard as fe } from "./components/option-card/index.js";
-import { PackageCard as ae } from "./components/package-card/index.js";
-import { PaginatorDb as ie } from "./components/paginator-db/index.js";
-import { PremiumFeature as le } from "./components/premium-feature/index.js";
-import { PriorityCards as de } from "./components/priority-cards/index.js";
-import { PriorityScore as ge } from "./components/priority-score/index.js";
-import { ProgressBar as Se } from "./components/progress-bar/index.js";
-import { ProgressIndicator as Te } from "./components/progress-indicator/index.js";
-import { PopUp as be } from "./components/pop-up/index.js";
-import { RadioButton as Fe } from "./components/radio-button/index.js";
-import { RankPosition as Pe } from "./components/rank-position/index.js";
-import { RulesCard as ye } from "./components/rules-card/index.js";
-import { ScrollUpButton as Ae } from "./components/scroll-button/index.js";
-import { Search as Oe } from "./components/search/index.js";
-import { SearchDropdown as we } from "./components/search-dropdown/index.js";
-import { SegmentedControl as Ee } from "./components/segmented-control/index.js";
-import { SegmentedProgressBar as We } from "./components/segmented-progress-bar/index.js";
-import { SeverityBadge as Ue } from "./components/severity-badge/index.js";
-import { SeverityIndicator as Ge } from "./components/severity-indicator/index.js";
-import { SeverityOverview as Ke } from "./components/severity-overview/index.js";
-import { ShowOnHover as _e } from "./components/show-on-hover/index.js";
-import { SlideOutMenu as qe } from "./components/slide-out-menu/index.js";
-import { Slider as Qe } from "./components/slider/index.js";
-import { StepLapse as Ze } from "./components/step-lapse/index.js";
-import { SummaryCard as rt } from "./components/summary-card/index.js";
-import { Table as et } from "./components/table/index.js";
-import { TableButton as mt } from "./components/table-button/index.js";
-import { TableContent as ft } from "./components/table-content/index.js";
-import { TableOfContents as at } from "./components/table-of-contents/index.js";
-import { Tabs as it } from "./components/tabs/index.js";
-import { Tag as lt } from "./components/tag/index.js";
-import { TimeLine as dt } from "./components/timeline/index.js";
-import { Toggle as gt } from "./components/toggle/index.js";
-import { Tooltip as St } from "./components/tooltip/index.js";
-import { Tour as Tt, baseStep as Bt, defaultOptions as bt } from "./components/tour/index.js";
-import { Tree as Ft } from "./components/tree/index.js";
-import { TruncatedList as Pt } from "./components/truncated-list/index.js";
-import { Heading as yt } from "./components/typography/heading/index.js";
-import { Span as At } from "./components/typography/span/index.js";
-import { Text as Ot } from "./components/typography/text/index.js";
-import { WeaknessesCard as wt } from "./components/weaknesses-card/index.js";
-import { DesignsContext as Et } from "./context/react/index.js";
-import { DesignsProvider as Wt } from "./globals/designs-provider/index.js";
-import { GlobalTypography as Ut } from "./globals/global-typography/index.js";
-import { DesignTokensCss as Gt } from "./globals/design-tokens-css/index.js";
-import { useActiveSection as Kt } from "./hooks/use-active-section.js";
-import { useCarousel as _t } from "./hooks/use-carousel.js";
-import { useClickOutside as qt } from "./hooks/use-click-outside.js";
-import { useCloudinaryImage as Qt } from "./hooks/use-cloudinary-image.js";
-import { useColumnsModal as Zt } from "./hooks/use-columns-modal.js";
-import { useDebouncedCallback as rm } from "./hooks/use-debounced-callback.js";
-import { useFiltersValues as em } from "./hooks/use-filters.js";
-import { useModal as mm } from "./hooks/use-modal.js";
-import { useMountEffect as fm } from "./hooks/use-mount-effect.js";
-import { useSearch as am } from "./hooks/use-search.js";
-import { formatDate as im, formatDateTime as sm, formatDateTimeInInput as lm } from "./utils/date.js";
-import { EXCLUDE_TOKEN as dm, analyzeFilterValue as Cm, formatCheckboxesFilterValue as gm, formatIncludeExcludeFilterValue as cm, formatTextFilterValue as Sm, getPreservedValues as Im, normalizeCheckboxesFilterValue as Tm, parseCheckboxesFilterValue as Bm, parseIncludeExcludeFilterValue as bm, parseTextFilterValue as hm } from "./utils/filters.js";
-import { normalizeDate as Dm, normalizeNumber as Pm } from "./utils/normalizers.js";
-import { openUrl as ym } from "./utils/open-url.js";
-import { clearStorage as Am, getPathname as Mm, getStorageItem as Om } from "./utils/storage.js";
-import { safeUrl as wm } from "./utils/url.js";
-import { ActiveFilters as Em } from "./components/filters/active-filters/index.js";
-import { ColumnsModal as Wm } from "./components/modal/columns-modal/index.js";
-import { Controller as Um, useController as zm, useFieldArray as Gm, useFormContext as Hm, useWatch as Km } from "./node_modules/react-hook-form/dist/index.esm.js";
-import { InnerForm as _m } from "./components/form/inner-form/index.js";
-import { ItemContent as qm } from "./components/table-content/item-content/index.js";
-import { ListItemsWrapper as Qm } from "./components/list-item/styles.js";
-import { ModalConfirm as Zm } from "./components/modal/modal-confirm/index.js";
-import { ModalFooter as rp } from "./components/modal/footer/index.js";
-import { OptionContainer as ep } from "./components/oauth-selector/option-container/index.js";
-import { ProgressStep as mp } from "./components/progress-indicator/step/index.js";
-import { TimeLineCard as fp } from "./components/timeline/card/index.js";
-import { partitionFilters as ap } from "./components/filters/utils.js";
-import { useNumberFormatter as ip } from "./node_modules/react-aria/dist/private/i18n/useNumberFormatter.js";
+import { CollapsibleCard as mr } from "./components/collapsible-card/index.js";
+import { CustomThemeProvider as xr, icons as ar, theme as nr } from "./components/colors/index.js";
+import { ComparisonTable as sr } from "./components/comparison-table/index.js";
+import { useConditionsDialog as ur } from "./components/conditions-dialog/index.js";
+import { useConfirmDialog as Cr } from "./components/confirm-dialog/index.js";
+import { Container as cr } from "./components/container/index.js";
+import { CopyButton as Tr } from "./components/copy-button/index.js";
+import { Divider as br } from "./components/divider/index.js";
+import { Drawer as hr } from "./components/drawer/index.js";
+import { Dropdown as Dr } from "./components/dropdown/index.js";
+import { EmptyState as vr } from "./components/empty-state/index.js";
+import { FATag as Lr } from "./components/fa-tag/index.js";
+import { FilePreview as Mr } from "./components/file-preview/index.js";
+import { Filters as kr } from "./components/filters/index.js";
+import { Form as Vr } from "./components/form/index.js";
+import { GridContainer as Rr } from "./components/grid-container/index.js";
+import { GroupSelector as Nr } from "./components/group-selector/index.js";
+import { Icon as zr } from "./components/icon/index.js";
+import { IconButton as Hr } from "./components/icon-button/index.js";
+import { IndicatorCardDB as Xr } from "./components/indicator-card-db/index.js";
+import { ComboBox as jr } from "./components/inputs/fields/combobox/index.js";
+import { InputDate as Jr } from "./components/inputs/fields/date/index.js";
+import { InputDateRange as Yr } from "./components/inputs/fields/date-range/index.js";
+import { InputDateTime as $r } from "./components/inputs/fields/date-time/index.js";
+import { Editable as oo } from "./components/inputs/fields/editable/index.js";
+import { InputArray as to } from "./components/inputs/fields/input-array/index.js";
+import { InputFile as mo } from "./components/inputs/fields/input-file/index.js";
+import { InputSection as xo } from "./components/inputs/fields/input-section/index.js";
+import { InputTags as no } from "./components/inputs/fields/input-tags/index.js";
+import { InputNumber as so } from "./components/inputs/fields/number/index.js";
+import { InputNumberRange as uo } from "./components/inputs/fields/number-range/index.js";
+import { PhoneInput as go } from "./components/inputs/fields/phone/index.js";
+import { TextArea as So } from "./components/inputs/fields/text-area/index.js";
+import { TextInput as Io } from "./components/inputs/fields/text-input/index.js";
+import { OutlineContainer as Bo } from "./components/inputs/outline-container/index.js";
+import { ErrorMessage as Fo } from "./components/inputs/styles.js";
+import { ItemCardDB as Po } from "./components/item-card-db/index.js";
+import { LanguageSwitcher as yo } from "./components/language-switcher/index.js";
+import { ButtonToolbarCenter as Ao, ButtonToolbarRow as Mo, ButtonToolbarStartRow as Oo } from "./components/layout/categories/buttons/index.js";
+import { Col as wo } from "./components/layout/categories/column/index.js";
+import { Gap as Eo } from "./components/layout/categories/gap/index.js";
+import { Row as Wo } from "./components/layout/categories/row/index.js";
+import { Link as Uo } from "./components/link/index.js";
+import { ListItem as Go } from "./components/list-item/index.js";
+import { LittleFlag as Ko } from "./components/little-flag/index.js";
+import { Loading as _o } from "./components/loading/index.js";
+import { Logo as qo } from "./components/logo/index.js";
+import { Lottie as Qo } from "./components/lottie/index.js";
+import { Menu as Zo } from "./components/menu/index.js";
+import { MessageBanner as re } from "./components/message-banner/index.js";
+import { Modal as ee } from "./components/modal/index.js";
+import { Notification as pe } from "./components/notification/index.js";
+import { NotificationSign as fe } from "./components/notification-sign/index.js";
+import { OAuthSelector as ae } from "./components/oauth-selector/index.js";
+import { OptionCard as ie } from "./components/option-card/index.js";
+import { PackageCard as le } from "./components/package-card/index.js";
+import { PaginatorDb as de } from "./components/paginator-db/index.js";
+import { PremiumFeature as ge } from "./components/premium-feature/index.js";
+import { PriorityCards as Se } from "./components/priority-cards/index.js";
+import { PriorityScore as Ie } from "./components/priority-score/index.js";
+import { ProgressBar as Be } from "./components/progress-bar/index.js";
+import { ProgressIndicator as Fe } from "./components/progress-indicator/index.js";
+import { PopUp as Pe } from "./components/pop-up/index.js";
+import { RadioButton as ye } from "./components/radio-button/index.js";
+import { RankPosition as Ae } from "./components/rank-position/index.js";
+import { RulesCard as Oe } from "./components/rules-card/index.js";
+import { ScrollUpButton as we } from "./components/scroll-button/index.js";
+import { Search as Ee } from "./components/search/index.js";
+import { SearchDropdown as We } from "./components/search-dropdown/index.js";
+import { SegmentedControl as Ue } from "./components/segmented-control/index.js";
+import { SegmentedProgressBar as Ge } from "./components/segmented-progress-bar/index.js";
+import { SeverityBadge as Ke } from "./components/severity-badge/index.js";
+import { SeverityIndicator as _e } from "./components/severity-indicator/index.js";
+import { SeverityOverview as qe } from "./components/severity-overview/index.js";
+import { ShowOnHover as Qe } from "./components/show-on-hover/index.js";
+import { SlideOutMenu as Ze } from "./components/slide-out-menu/index.js";
+import { Slider as rt } from "./components/slider/index.js";
+import { StepLapse as et } from "./components/step-lapse/index.js";
+import { SummaryCard as pt } from "./components/summary-card/index.js";
+import { Table as ft } from "./components/table/index.js";
+import { TableButton as at } from "./components/table-button/index.js";
+import { TableContent as it } from "./components/table-content/index.js";
+import { TableOfContents as lt } from "./components/table-of-contents/index.js";
+import { Tabs as dt } from "./components/tabs/index.js";
+import { Tag as gt } from "./components/tag/index.js";
+import { TimeLine as St } from "./components/timeline/index.js";
+import { Toggle as It } from "./components/toggle/index.js";
+import { Tooltip as Bt } from "./components/tooltip/index.js";
+import { Tour as Ft, baseStep as Dt, defaultOptions as Pt } from "./components/tour/index.js";
+import { Tree as yt } from "./components/tree/index.js";
+import { TruncatedList as At } from "./components/truncated-list/index.js";
+import { Heading as Ot } from "./components/typography/heading/index.js";
+import { Span as wt } from "./components/typography/span/index.js";
+import { Text as Et } from "./components/typography/text/index.js";
+import { WeaknessesCard as Wt } from "./components/weaknesses-card/index.js";
+import { DesignsContext as Ut } from "./context/react/index.js";
+import { DesignsProvider as Gt } from "./globals/designs-provider/index.js";
+import { GlobalTypography as Kt } from "./globals/global-typography/index.js";
+import { DesignTokensCss as _t } from "./globals/design-tokens-css/index.js";
+import { useActiveSection as qt } from "./hooks/use-active-section.js";
+import { useCarousel as Qt } from "./hooks/use-carousel.js";
+import { useClickOutside as Zt } from "./hooks/use-click-outside.js";
+import { useCloudinaryImage as rp } from "./hooks/use-cloudinary-image.js";
+import { useColumnsModal as ep } from "./hooks/use-columns-modal.js";
+import { useDebouncedCallback as pp } from "./hooks/use-debounced-callback.js";
+import { useFiltersValues as fp } from "./hooks/use-filters.js";
+import { useModal as ap } from "./hooks/use-modal.js";
+import { useMountEffect as ip } from "./hooks/use-mount-effect.js";
+import { useSearch as lp } from "./hooks/use-search.js";
+import { formatDate as dp, formatDateTime as Cp, formatDateTimeInInput as gp } from "./utils/date.js";
+import { EXCLUDE_TOKEN as Sp, analyzeFilterValue as Tp, formatCheckboxesFilterValue as Ip, formatIncludeExcludeFilterValue as bp, formatTextFilterValue as Bp, getPreservedValues as hp, normalizeCheckboxesFilterValue as Fp, parseCheckboxesFilterValue as Dp, parseIncludeExcludeFilterValue as Pp, parseTextFilterValue as vp } from "./utils/filters.js";
+import { normalizeDate as Lp, normalizeNumber as Ap } from "./utils/normalizers.js";
+import { openUrl as Op } from "./utils/open-url.js";
+import { clearStorage as wp, getPathname as Vp, getStorageItem as Ep } from "./utils/storage.js";
+import { safeUrl as Wp } from "./utils/url.js";
+import { ActiveFilters as Up } from "./components/filters/active-filters/index.js";
+import { ColumnsModal as Gp } from "./components/modal/columns-modal/index.js";
+import { Controller as Kp, useController as Xp, useFieldArray as _p, useFormContext as jp, useWatch as qp } from "./node_modules/react-hook-form/dist/index.esm.js";
+import { InnerForm as Qp } from "./components/form/inner-form/index.js";
+import { ItemContent as Zp } from "./components/table-content/item-content/index.js";
+import { ListItemsWrapper as rm } from "./components/list-item/styles.js";
+import { ModalConfirm as em } from "./components/modal/modal-confirm/index.js";
+import { ModalFooter as pm } from "./components/modal/footer/index.js";
+import { OptionContainer as fm } from "./components/oauth-selector/option-container/index.js";
+import { ProgressStep as am } from "./components/progress-indicator/step/index.js";
+import { TimeLineCard as im } from "./components/timeline/card/index.js";
+import { partitionFilters as lm } from "./components/filters/utils.js";
+import { useNumberFormatter as dm } from "./node_modules/react-aria/dist/private/i18n/useNumberFormatter.js";
 export {
-  B as Accordion,
-  Em as ActiveFilters,
+  b as Accordion,
+  Up as ActiveFilters,
   h as AdvancedBadge,
   D as AdvisoriesCard,
   v as Alert,
@@ -160,9 +162,9 @@ export {
   n as BaseSpanComponent,
   i as BaseTextComponent,
   M as Button,
-  Po as ButtonToolbarCenter,
-  vo as ButtonToolbarRow,
-  yo as ButtonToolbarStartRow,
+  Ao as ButtonToolbarCenter,
+  Mo as ButtonToolbarRow,
+  Oo as ButtonToolbarStartRow,
   j as CardContainer,
   k as CardHeader,
   V as CardWithImage,
@@ -175,161 +177,163 @@ export {
   $ as CircularProgress,
   or as CloudImage,
   tr as CodeSnippet,
-  Ao as Col,
-  Wm as ColumnsModal,
-  Hr as ComboBox,
-  ur as Container,
-  Um as Controller,
-  Cr as CopyButton,
-  pr as CustomThemeProvider,
-  Gt as DesignTokensCss,
-  Et as DesignsContext,
-  Wt as DesignsProvider,
-  cr as Divider,
-  Ir as Drawer,
-  Br as Dropdown,
-  dm as EXCLUDE_TOKEN,
-  Yr as Editable,
-  hr as EmptyState,
-  To as ErrorMessage,
-  Dr as FATag,
-  vr as FilePreview,
-  Lr as Filters,
-  Mr as Form,
-  Oo as Gap,
-  Ut as GlobalTypography,
-  kr as GridContainer,
-  Vr as GroupSelector,
-  yt as Heading,
-  Rr as Icon,
-  Nr as IconButton,
+  wo as Col,
+  mr as CollapsibleCard,
+  Gp as ColumnsModal,
+  jr as ComboBox,
+  sr as ComparisonTable,
+  cr as Container,
+  Kp as Controller,
+  Tr as CopyButton,
+  xr as CustomThemeProvider,
+  _t as DesignTokensCss,
+  Ut as DesignsContext,
+  Gt as DesignsProvider,
+  br as Divider,
+  hr as Drawer,
+  Dr as Dropdown,
+  Sp as EXCLUDE_TOKEN,
+  oo as Editable,
+  vr as EmptyState,
+  Fo as ErrorMessage,
+  Lr as FATag,
+  Mr as FilePreview,
+  kr as Filters,
+  Vr as Form,
+  Eo as Gap,
+  Kt as GlobalTypography,
+  Rr as GridContainer,
+  Nr as GroupSelector,
+  Ot as Heading,
+  zr as Icon,
+  Hr as IconButton,
   X as IndicatorCard,
-  zr as IndicatorCardDB,
-  _m as InnerForm,
-  $r as InputArray,
-  Xr as InputDate,
-  jr as InputDateRange,
-  Jr as InputDateTime,
-  oo as InputFile,
-  xo as InputNumber,
-  no as InputNumberRange,
-  to as InputSection,
-  po as InputTags,
-  bo as ItemCardDB,
-  qm as ItemContent,
-  Fo as LanguageSwitcher,
-  Eo as Link,
-  Wo as ListItem,
-  Qm as ListItemsWrapper,
-  Uo as LittleFlag,
-  Go as Loading,
-  Ko as Logo,
-  _o as Lottie,
-  qo as Menu,
-  Qo as MessageBanner,
-  Zo as Modal,
-  Zm as ModalConfirm,
-  rp as ModalFooter,
-  re as Notification,
-  ee as NotificationSign,
-  me as OAuthSelector,
-  fe as OptionCard,
-  ep as OptionContainer,
-  So as OutlineContainer,
-  ae as PackageCard,
-  ie as PaginatorDb,
-  so as PhoneInput,
-  be as PopUp,
-  le as PremiumFeature,
-  de as PriorityCards,
-  ge as PriorityScore,
-  Se as ProgressBar,
-  Te as ProgressIndicator,
-  mp as ProgressStep,
-  Fe as RadioButton,
-  Pe as RankPosition,
-  wo as Row,
-  ye as RulesCard,
-  Ae as ScrollUpButton,
-  Oe as Search,
-  we as SearchDropdown,
-  Ee as SegmentedControl,
-  We as SegmentedProgressBar,
-  Ue as SeverityBadge,
-  Ge as SeverityIndicator,
-  Ke as SeverityOverview,
-  _e as ShowOnHover,
-  qe as SlideOutMenu,
-  Qe as Slider,
-  At as Span,
-  Ze as StepLapse,
-  rt as SummaryCard,
-  et as Table,
-  mt as TableButton,
-  ft as TableContent,
-  at as TableOfContents,
-  it as Tabs,
-  lt as Tag,
-  Ot as Text,
-  uo as TextArea,
-  go as TextInput,
-  dt as TimeLine,
-  fp as TimeLineCard,
-  gt as Toggle,
-  St as Tooltip,
-  Tt as Tour,
-  Ft as Tree,
-  Pt as TruncatedList,
-  wt as WeaknessesCard,
-  Cm as analyzeFilterValue,
-  Bt as baseStep,
-  Am as clearStorage,
-  bt as defaultOptions,
-  gm as formatCheckboxesFilterValue,
-  im as formatDate,
-  sm as formatDateTime,
-  lm as formatDateTimeInInput,
-  cm as formatIncludeExcludeFilterValue,
-  Sm as formatTextFilterValue,
-  Mm as getPathname,
-  Im as getPreservedValues,
-  Om as getStorageItem,
+  Xr as IndicatorCardDB,
+  Qp as InnerForm,
+  to as InputArray,
+  Jr as InputDate,
+  Yr as InputDateRange,
+  $r as InputDateTime,
+  mo as InputFile,
+  so as InputNumber,
+  uo as InputNumberRange,
+  xo as InputSection,
+  no as InputTags,
+  Po as ItemCardDB,
+  Zp as ItemContent,
+  yo as LanguageSwitcher,
+  Uo as Link,
+  Go as ListItem,
+  rm as ListItemsWrapper,
+  Ko as LittleFlag,
+  _o as Loading,
+  qo as Logo,
+  Qo as Lottie,
+  Zo as Menu,
+  re as MessageBanner,
+  ee as Modal,
+  em as ModalConfirm,
+  pm as ModalFooter,
+  pe as Notification,
+  fe as NotificationSign,
+  ae as OAuthSelector,
+  ie as OptionCard,
+  fm as OptionContainer,
+  Bo as OutlineContainer,
+  le as PackageCard,
+  de as PaginatorDb,
+  go as PhoneInput,
+  Pe as PopUp,
+  ge as PremiumFeature,
+  Se as PriorityCards,
+  Ie as PriorityScore,
+  Be as ProgressBar,
+  Fe as ProgressIndicator,
+  am as ProgressStep,
+  ye as RadioButton,
+  Ae as RankPosition,
+  Wo as Row,
+  Oe as RulesCard,
+  we as ScrollUpButton,
+  Ee as Search,
+  We as SearchDropdown,
+  Ue as SegmentedControl,
+  Ge as SegmentedProgressBar,
+  Ke as SeverityBadge,
+  _e as SeverityIndicator,
+  qe as SeverityOverview,
+  Qe as ShowOnHover,
+  Ze as SlideOutMenu,
+  rt as Slider,
+  wt as Span,
+  et as StepLapse,
+  pt as SummaryCard,
+  ft as Table,
+  at as TableButton,
+  it as TableContent,
+  lt as TableOfContents,
+  dt as Tabs,
+  gt as Tag,
+  Et as Text,
+  So as TextArea,
+  Io as TextInput,
+  St as TimeLine,
+  im as TimeLineCard,
+  It as Toggle,
+  Bt as Tooltip,
+  Ft as Tour,
+  yt as Tree,
+  At as TruncatedList,
+  Wt as WeaknessesCard,
+  Tp as analyzeFilterValue,
+  Dt as baseStep,
+  wp as clearStorage,
+  Pt as defaultOptions,
+  Ip as formatCheckboxesFilterValue,
+  dp as formatDate,
+  Cp as formatDateTime,
+  gp as formatDateTimeInInput,
+  bp as formatIncludeExcludeFilterValue,
+  Bp as formatTextFilterValue,
+  Vp as getPathname,
+  hp as getPreservedValues,
+  Ep as getStorageItem,
   l as getStyledConfig,
-  p as hiddenProps,
-  fr as icons,
-  Tm as normalizeCheckboxesFilterValue,
-  Dm as normalizeDate,
-  Pm as normalizeNumber,
-  ym as openUrl,
-  Bm as parseCheckboxesFilterValue,
-  bm as parseIncludeExcludeFilterValue,
-  hm as parseTextFilterValue,
-  ap as partitionFilters,
-  wm as safeUrl,
+  m as hiddenProps,
+  ar as icons,
+  Fp as normalizeCheckboxesFilterValue,
+  Lp as normalizeDate,
+  Ap as normalizeNumber,
+  Op as openUrl,
+  Dp as parseCheckboxesFilterValue,
+  Pp as parseIncludeExcludeFilterValue,
+  vp as parseTextFilterValue,
+  lm as partitionFilters,
+  Wp as safeUrl,
   u as setBorder,
   d as setDisplay,
   C as setInteraction,
   g as setMargin,
   c as setPadding,
   S as setPosition,
-  I as setText,
-  xr as theme,
-  Kt as useActiveSection,
-  _t as useCarousel,
-  qt as useClickOutside,
-  Qt as useCloudinaryImage,
-  Zt as useColumnsModal,
-  nr as useConditionsDialog,
-  sr as useConfirmDialog,
-  zm as useController,
-  rm as useDebouncedCallback,
-  Gm as useFieldArray,
-  em as useFiltersValues,
-  Hm as useFormContext,
-  mm as useModal,
-  fm as useMountEffect,
-  ip as useNumberFormatter,
-  am as useSearch,
-  Km as useWatch,
+  T as setText,
+  nr as theme,
+  qt as useActiveSection,
+  Qt as useCarousel,
+  Zt as useClickOutside,
+  rp as useCloudinaryImage,
+  ep as useColumnsModal,
+  ur as useConditionsDialog,
+  Cr as useConfirmDialog,
+  Xp as useController,
+  pp as useDebouncedCallback,
+  _p as useFieldArray,
+  fp as useFiltersValues,
+  jp as useFormContext,
+  ap as useModal,
+  ip as useMountEffect,
+  dm as useNumberFormatter,
+  lp as useSearch,
+  qp as useWatch,
   t as variantBuilder
 };

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "8.4.0"
+  "version": "8.5.0"
 }