@fluidattacks/design 9.1.2 → 9.3.0

package/dist/components/selectable-list/index.d.ts

@@ -0,0 +1,4 @@
+import { ISelectableListItem, ISelectableListProps } from './types';
+declare const SelectableList: ({ counter, emptyText, items, maxHeight, name, onChange, searchPlaceholder, selected, }: Readonly<ISelectableListProps>) => JSX.Element;
+export { SelectableList };
+export type { ISelectableListItem, ISelectableListProps };

package/dist/components/selectable-list/index.js

@@ -0,0 +1,97 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { useState as C, useMemo as x, useCallback as m } from "react";
+import { useTheme as L } from "styled-components";
+import { StyledListHeader as z, StyledList as $, StyledListRow as k, StyledRowContent as j } from "./styles.js";
+import { Checkbox as H } from "../checkbox/index.js";
+import { Search as R } from "../search/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as i } from "../typography/text/index.js";
+const I = ({
+  counter: v,
+  emptyText: d,
+  items: r,
+  maxHeight: y = "20rem",
+  name: h,
+  onChange: p,
+  searchPlaceholder: g,
+  selected: o
+}) => {
+  const t = L(), [c, S] = C(""), u = x(() => {
+    const e = c.trim().toLowerCase();
+    return r.filter(
+      (a) => a.label.toLowerCase().includes(e)
+    );
+  }, [r, c]), f = r.filter(
+    (e) => o.has(e.value)
+  ).length, b = m(
+    (e) => {
+      S(e.target.value);
+    },
+    []
+  ), w = m(
+    (e) => {
+      const { value: a } = e.target, n = new Set(o);
+      n.has(a) ? n.delete(a) : n.add(a), p(n);
+    },
+    [p, o]
+  );
+  return /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ s(z, { children: [
+      /* @__PURE__ */ l(
+        R,
+        {
+          name: `${h}-search`,
+          onChange: b,
+          placeholder: g,
+          value: c
+        }
+      ),
+      /* @__PURE__ */ l(
+        i,
+        {
+          "aria-live": "polite",
+          color: t.palette.gray[600],
+          display: "inline",
+          size: "md",
+          whiteSpace: "nowrap",
+          children: v(f, r.length)
+        }
+      )
+    ] }),
+    u.length === 0 && d !== void 0 ? /* @__PURE__ */ l(i, { color: t.palette.gray[600], py: 1, size: "md", children: d }) : /* @__PURE__ */ l($, { $maxHeight: y, children: u.map((e) => /* @__PURE__ */ l(k, { children: /* @__PURE__ */ l(
+      H,
+      {
+        "aria-label": e.label,
+        checked: o.has(e.value),
+        label: /* @__PURE__ */ s(j, { children: [
+          /* @__PURE__ */ l(
+            i,
+            {
+              color: t.palette.gray[800],
+              display: "inline",
+              size: "md",
+              children: e.label
+            }
+          ),
+          e.secondary === void 0 ? void 0 : /* @__PURE__ */ l(
+            i,
+            {
+              color: t.palette.gray[600],
+              display: "inline",
+              size: "md",
+              whiteSpace: "nowrap",
+              children: e.secondary
+            }
+          )
+        ] }),
+        name: `${h}-${e.value}`,
+        onChange: w,
+        value: e.value
+      }
+    ) }, e.value)) })
+  ] });
+};
+export {
+  I as SelectableList
+};

package/dist/components/selectable-list/index.stories.d.ts

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

package/dist/components/selectable-list/index.test.d.ts

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

package/dist/components/selectable-list/styles.d.ts

@@ -0,0 +1,9 @@
+declare const StyledListHeader: 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 StyledList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$maxHeight"> & {
+    $maxHeight: string;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$maxHeight"> & {
+    $maxHeight: string;
+}, never>>> & string;
+declare const StyledListRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+declare const StyledRowContent: 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;
+export { StyledList, StyledListHeader, StyledListRow, StyledRowContent };

package/dist/components/selectable-list/styles.js

@@ -0,0 +1,62 @@
+import { styled as e } from "styled-components";
+const n = e.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme: t }) => t.spacing[1]};
+  justify-content: space-between;
+  margin-bottom: ${({ theme: t }) => t.spacing[0.75]};
+
+  & > :first-child {
+    flex: 1;
+    min-width: 0;
+  }
+`, l = e.ul`
+  ${({ theme: t, $maxHeight: i }) => `
+    border-bottom: 1px solid ${t.palette.gray[200]};
+    list-style: none;
+    margin: 0;
+    max-height: ${i};
+    overflow-y: auto;
+    padding: 0;
+  `}
+`, a = e.li`
+  ${({ theme: t }) => `
+    border-bottom: 1px solid ${t.palette.gray[200]};
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: ${t.palette.gray[25]};
+    }
+
+    &:has(input:focus-visible) {
+      outline: 2px solid ${t.palette.gray[800]};
+      outline-offset: -2px;
+    }
+
+    .parent-checkbox {
+      display: flex;
+      width: 100%;
+    }
+
+    .parent-checkbox > label {
+      flex: 1;
+      padding: ${t.spacing[0.75]} ${t.spacing[1]};
+    }
+  `}
+`, s = e.span`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${({ theme: t }) => t.spacing[1]};
+  justify-content: space-between;
+  min-width: 0;
+`;
+export {
+  l as StyledList,
+  n as StyledListHeader,
+  a as StyledListRow,
+  s as StyledRowContent
+};

package/dist/components/selectable-list/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Selectable list item props.
+ * @interface ISelectableListItem
+ * @property { string } label - The row's text, also what the search filters on.
+ * @property { string } [secondary] - Right-aligned detail, such as "5 repositories".
+ * @property { string } value - Unique key stored in the selection.
+ */
+interface ISelectableListItem {
+    label: string;
+    secondary?: string;
+    value: string;
+}
+/**
+ * Selectable list component props.
+ * @interface ISelectableListProps
+ * @property { Function } counter - Formats the header counter from the number of selected items and the number of items, e.g. "2 of 5 groups selected"; both ignore the search.
+ * @property { string } [emptyText] - Shown in place of the rows when the search matches nothing.
+ * @property { ISelectableListItem[] } items - The rows, in display order.
+ * @property { string } [maxHeight] - Height past which the rows scroll inside the list. Defaults to "20rem".
+ * @property { string } name - Prefix for the inputs' names and ids; must be unique on the page.
+ * @property { Function } onChange - Called with the next selection; the owner must write it back to `selected`.
+ * @property { string } [searchPlaceholder] - Placeholder of the search input.
+ * @property { ReadonlySet<string> } selected - Values of the checked items. Values hidden by the search stay selected.
+ */
+interface ISelectableListProps {
+    counter: (selectedCount: number, total: number) => string;
+    emptyText?: string;
+    items: ISelectableListItem[];
+    maxHeight?: string;
+    name: string;
+    onChange: (next: ReadonlySet<string>) => void;
+    searchPlaceholder?: string;
+    selected: ReadonlySet<string>;
+}
+export type { ISelectableListItem, ISelectableListProps };

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

@@ -0,0 +1,4 @@
+import { IStepperProps, IStepperStep } from './types';
+declare const Stepper: ({ completedLabel, currentStep, steps, }: Readonly<IStepperProps>) => JSX.Element;
+export { Stepper };
+export type { IStepperProps, IStepperStep };

package/dist/components/stepper/index.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { Fragment as d } from "react";
+import { VisuallyHidden as a } from "../../node_modules/react-aria/dist/private/visually-hidden/VisuallyHidden.js";
+import { useTheme as s } from "styled-components";
+import { StyledStepRow as h, StyledStepItem as u, StyledStepIndicator as f, StyledStepConnector as g } from "./styles.js";
+import { Icon as S } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as y } from "../typography/text/index.js";
+const $ = (n, e) => n < e ? "completed" : n === e ? "current" : "upcoming", C = ({
+  completedLabel: n = "completed",
+  currentStep: e,
+  steps: c
+}) => {
+  const l = s();
+  return /* @__PURE__ */ m(d, { children: [
+    /* @__PURE__ */ t(h, { children: c.map((r, o) => {
+      const i = $(o, e), p = i === "upcoming";
+      return /* @__PURE__ */ m(
+        u,
+        {
+          "aria-current": i === "current" ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ t(f, { $status: i, children: i === "completed" ? /* @__PURE__ */ t(S, { icon: "check", iconSize: "sm", iconType: "fa-solid" }) : o + 1 }),
+            /* @__PURE__ */ m(
+              y,
+              {
+                color: p ? l.palette.gray[400] : l.palette.gray[800],
+                display: "inline",
+                fontWeight: p ? "regular" : "bold",
+                size: "md",
+                whiteSpace: "nowrap",
+                children: [
+                  r.title,
+                  i === "completed" && /* @__PURE__ */ t(a, { children: ` (${n})` })
+                ]
+              }
+            ),
+            o < c.length - 1 && /* @__PURE__ */ t(g, { "aria-hidden": !0 })
+          ]
+        },
+        r.title
+      );
+    }) }),
+    c.map((r, o) => /* @__PURE__ */ t("div", { hidden: o !== e, children: r.content }, r.title))
+  ] });
+};
+export {
+  C as Stepper
+};

package/dist/components/stepper/index.stories.d.ts

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

package/dist/components/stepper/index.test.d.ts

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

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

@@ -0,0 +1,10 @@
+import { TStepperStatus } from './types';
+declare const StyledStepRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>> & string;
+declare const StyledStepItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+declare const StyledStepIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$status"> & {
+    $status: TStepperStatus;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$status"> & {
+    $status: TStepperStatus;
+}, never>>> & string;
+declare const StyledStepConnector: 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;
+export { StyledStepConnector, StyledStepIndicator, StyledStepItem, StyledStepRow, };

package/dist/components/stepper/styles.js

@@ -0,0 +1,65 @@
+import { styled as i } from "styled-components";
+import { variantBuilder as a } from "../@core/variants/utils.js";
+const { getVariant: n } = a(
+  (t) => ({
+    completed: `
+      background-color: ${t.palette.success[500]};
+      color: ${t.palette.white};
+    `,
+    current: `
+      background-color: ${t.palette.gray[800]};
+      color: ${t.palette.white};
+    `,
+    upcoming: `
+      background-color: ${t.palette.white};
+      border: 1px solid ${t.palette.gray[400]};
+      color: ${t.palette.gray[400]};
+    `
+  })
+), r = i.ol`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme: t }) => t.spacing[0.75]};
+  list-style: none;
+  margin: 0;
+  margin-bottom: ${({ theme: t }) => t.spacing[1.5]};
+  padding: 0;
+`, p = i.li`
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  gap: ${({ theme: t }) => t.spacing[0.75]};
+  min-width: 0;
+
+  &:last-child {
+    flex: 0 0 auto;
+  }
+`, c = i.span`
+  ${({ theme: t, $status: o }) => `
+    align-items: center;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.md};
+    font-weight: ${t.typography.weight.bold};
+    line-height: ${t.spacing[1.25]};
+    height: ${t.spacing[1.5]};
+    justify-content: center;
+    width: ${t.spacing[1.5]};
+
+    ${n(t, o)}
+  `}
+`, g = i.span`
+  background-color: ${({ theme: t }) => t.palette.gray[300]};
+  flex: 1 1 auto;
+  height: 1px;
+  min-width: ${({ theme: t }) => t.spacing[1]};
+`;
+export {
+  g as StyledStepConnector,
+  c as StyledStepIndicator,
+  p as StyledStepItem,
+  r as StyledStepRow
+};

package/dist/components/stepper/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+type TStepperStatus = "completed" | "current" | "upcoming";
+/**
+ * Stepper step props.
+ * @interface IStepperStep
+ * @property { ReactNode } content - The step's panel. It stays mounted while other steps are current, so form fields keep their registration and values.
+ * @property { string } title - The step's label in the progress row; must be unique among the steps.
+ */
+interface IStepperStep {
+    content: ReactNode;
+    title: string;
+}
+/**
+ * Stepper component props.
+ * @interface IStepperProps
+ * @property { string } [completedLabel] - Screen-reader suffix announced after each completed step's title. Defaults to "completed".
+ * @property { number } currentStep - Zero-based index of the current step, owned by the consumer: steps before it render as completed, steps after it as upcoming.
+ * @property { IStepperStep[] } steps - The steps, in order.
+ */
+interface IStepperProps {
+    completedLabel?: string;
+    currentStep: number;
+    steps: IStepperStep[];
+}
+export type { IStepperProps, IStepperStep, TStepperStatus };

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export * from './components/search';
 export * from './components/search-dropdown';
 export * from './components/segmented-control';
 export * from './components/segmented-progress-bar';
+export * from './components/selectable-list';
 export * from './components/severity-badge';
 export * from './components/severity-indicator';
 export * from './components/severity-overview';
@@ -72,6 +73,7 @@ export * from './components/show-on-hover';
 export * from './components/slide-out-menu';
 export * from './components/slider';
 export * from './components/step-lapse';
+export * from './components/stepper';
 export * from './components/summary-card';
 export * from './components/table';
 export * from './components/table-button';

package/dist/index.js

@@ -1,8 +1,8 @@
 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 T } from "./components/@core/utils.js";
+import { getStyledConfig as l, setBorder as u, setDisplay as d, setInteraction as C, setMargin as c, setPadding as g, 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";
@@ -22,12 +22,12 @@ 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 { CollapsibleCard as pr } from "./components/collapsible-card/index.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 { Container as gr } 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";
@@ -48,12 +48,12 @@ import { InputDateRange as Yr } from "./components/inputs/fields/date-range/inde
 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 po } from "./components/inputs/fields/input-file/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 { PhoneInput as co } 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";
@@ -73,13 +73,13 @@ 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 me } from "./components/notification/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 { PremiumFeature as ce } 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";
@@ -93,65 +93,67 @@ 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 mt } 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 kt } from "./components/typography/heading/index.js";
-import { Span as Ot } 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 rm } from "./hooks/use-cloudinary-image.js";
-import { useColumnsModal as em } from "./hooks/use-columns-modal.js";
-import { useDebouncedCallback as mm } from "./hooks/use-debounced-callback.js";
-import { useFiltersValues as fm } from "./hooks/use-filters.js";
-import { useModal as am } from "./hooks/use-modal.js";
-import { useMountEffect as im } from "./hooks/use-mount-effect.js";
-import { useSearch as lm } from "./hooks/use-search.js";
-import { formatDate as dm, formatDateTime as Cm, formatDateTimeInInput as gm } from "./utils/date.js";
-import { EXCLUDE_TOKEN as Sm, analyzeFilterValue as Tm, formatCheckboxesFilterValue as Im, formatIncludeExcludeFilterValue as bm, formatTextFilterValue as Bm, getPreservedValues as hm, normalizeCheckboxesFilterValue as Fm, parseCheckboxesFilterValue as Dm, parseIncludeExcludeFilterValue as Pm, parseTextFilterValue as vm } from "./utils/filters.js";
-import { normalizeDate as Lm, normalizeNumber as Am } from "./utils/normalizers.js";
-import { openUrl as km } from "./utils/open-url.js";
-import { clearStorage as Om, getPathname as Vm, getStorageItem as Em } from "./utils/storage.js";
-import { safeUrl as Wm } from "./utils/url.js";
-import { ActiveFilters as Um } from "./components/filters/active-filters/index.js";
-import { ColumnsModal as Gm } from "./components/modal/columns-modal/index.js";
-import { Controller as Km, useController as Xm, useFieldArray as _m, useFormContext as jm, useWatch as qm } from "./node_modules/react-hook-form/dist/index.esm.js";
-import { InnerForm as Qm } from "./components/form/inner-form/index.js";
-import { ItemContent as Zm } from "./components/table-content/item-content/index.js";
-import { ListItemsWrapper as rp } from "./components/list-item/styles.js";
-import { ModalConfirm as ep } from "./components/modal/modal-confirm/index.js";
-import { ModalFooter as mp } from "./components/modal/footer/index.js";
-import { ProgressStep as fp } from "./components/progress-indicator/step/index.js";
-import { TimeLineCard as ap } from "./components/timeline/card/index.js";
-import { partitionFilters as ip } from "./components/filters/utils.js";
-import { useNumberFormatter as lp } from "./node_modules/react-aria/dist/private/i18n/useNumberFormatter.js";
+import { SelectableList as Ke } from "./components/selectable-list/index.js";
+import { SeverityBadge as _e } from "./components/severity-badge/index.js";
+import { SeverityIndicator as qe } from "./components/severity-indicator/index.js";
+import { SeverityOverview as Qe } from "./components/severity-overview/index.js";
+import { ShowOnHover as Ze } from "./components/show-on-hover/index.js";
+import { SlideOutMenu as rt } from "./components/slide-out-menu/index.js";
+import { Slider as et } from "./components/slider/index.js";
+import { StepLapse as pt } from "./components/step-lapse/index.js";
+import { Stepper as ft } from "./components/stepper/index.js";
+import { SummaryCard as at } from "./components/summary-card/index.js";
+import { Table as it } from "./components/table/index.js";
+import { TableButton as lt } from "./components/table-button/index.js";
+import { TableContent as dt } from "./components/table-content/index.js";
+import { TableOfContents as ct } from "./components/table-of-contents/index.js";
+import { Tabs as St } from "./components/tabs/index.js";
+import { Tag as It } from "./components/tag/index.js";
+import { TimeLine as Bt } from "./components/timeline/index.js";
+import { Toggle as Ft } from "./components/toggle/index.js";
+import { Tooltip as Pt } from "./components/tooltip/index.js";
+import { Tour as yt, baseStep as Lt, defaultOptions as At } from "./components/tour/index.js";
+import { Tree as kt } from "./components/tree/index.js";
+import { TruncatedList as Ot } from "./components/truncated-list/index.js";
+import { Heading as Et } from "./components/typography/heading/index.js";
+import { Span as Wt } from "./components/typography/span/index.js";
+import { Text as Ut } from "./components/typography/text/index.js";
+import { WeaknessesCard as Gt } from "./components/weaknesses-card/index.js";
+import { DesignsContext as Kt } from "./context/react/index.js";
+import { DesignsProvider as _t } from "./globals/designs-provider/index.js";
+import { GlobalTypography as qt } from "./globals/global-typography/index.js";
+import { DesignTokensCss as Qt } from "./globals/design-tokens-css/index.js";
+import { useActiveSection as Zt } from "./hooks/use-active-section.js";
+import { useCarousel as rp } from "./hooks/use-carousel.js";
+import { useClickOutside as ep } from "./hooks/use-click-outside.js";
+import { useCloudinaryImage as pp } from "./hooks/use-cloudinary-image.js";
+import { useColumnsModal as fp } from "./hooks/use-columns-modal.js";
+import { useDebouncedCallback as ap } from "./hooks/use-debounced-callback.js";
+import { useFiltersValues as ip } from "./hooks/use-filters.js";
+import { useModal as lp } from "./hooks/use-modal.js";
+import { useMountEffect as dp } from "./hooks/use-mount-effect.js";
+import { useSearch as cp } from "./hooks/use-search.js";
+import { formatDate as Sp, formatDateTime as Tp, formatDateTimeInInput as Ip } from "./utils/date.js";
+import { EXCLUDE_TOKEN as Bp, analyzeFilterValue as hp, formatCheckboxesFilterValue as Fp, formatIncludeExcludeFilterValue as Dp, formatTextFilterValue as Pp, getPreservedValues as vp, normalizeCheckboxesFilterValue as yp, parseCheckboxesFilterValue as Lp, parseIncludeExcludeFilterValue as Ap, parseTextFilterValue as Mp } from "./utils/filters.js";
+import { normalizeDate as wp, normalizeNumber as Op } from "./utils/normalizers.js";
+import { openUrl as Ep } from "./utils/open-url.js";
+import { clearStorage as Wp, getPathname as Np, getStorageItem as Up } from "./utils/storage.js";
+import { safeUrl as Gp } from "./utils/url.js";
+import { ActiveFilters as Kp } from "./components/filters/active-filters/index.js";
+import { ColumnsModal as _p } from "./components/modal/columns-modal/index.js";
+import { Controller as qp, useController as Jp, useFieldArray as Qp, useFormContext as Yp, useWatch as Zp } from "./node_modules/react-hook-form/dist/index.esm.js";
+import { InnerForm as rm } from "./components/form/inner-form/index.js";
+import { ItemContent as em } from "./components/table-content/item-content/index.js";
+import { ListItemsWrapper as pm } from "./components/list-item/styles.js";
+import { ModalConfirm as fm } from "./components/modal/modal-confirm/index.js";
+import { ModalFooter as am } from "./components/modal/footer/index.js";
+import { ProgressStep as im } from "./components/progress-indicator/step/index.js";
+import { TimeLineCard as lm } from "./components/timeline/card/index.js";
+import { partitionFilters as dm } from "./components/filters/utils.js";
+import { useNumberFormatter as cm } from "./node_modules/react-aria/dist/private/i18n/useNumberFormatter.js";
 export {
   b as Accordion,
-  Um as ActiveFilters,
+  Kp as ActiveFilters,
   h as AdvancedBadge,
   D as AdvisoriesCard,
   v as Alert,
@@ -177,21 +179,21 @@ export {
   or as CloudImage,
   tr as CodeSnippet,
   Oo as Col,
-  pr as CollapsibleCard,
-  Gm as ColumnsModal,
+  mr as CollapsibleCard,
+  _p as ColumnsModal,
   jr as ComboBox,
   sr as ComparisonTable,
-  cr as Container,
-  Km as Controller,
+  gr as Container,
+  qp as Controller,
   Tr as CopyButton,
   xr as CustomThemeProvider,
-  _t as DesignTokensCss,
-  Ut as DesignsContext,
-  Gt as DesignsProvider,
+  Qt as DesignTokensCss,
+  Kt as DesignsContext,
+  _t as DesignsProvider,
   br as Divider,
   hr as Drawer,
   Dr as Dropdown,
-  Sm as EXCLUDE_TOKEN,
+  Bp as EXCLUDE_TOKEN,
   oo as Editable,
   vr as EmptyState,
   Fo as ErrorMessage,
@@ -200,30 +202,30 @@ export {
   wr as Filters,
   Vr as Form,
   Eo as Gap,
-  Kt as GlobalTypography,
+  qt as GlobalTypography,
   Rr as GridContainer,
   Nr as GroupSelector,
-  kt as Heading,
+  Et as Heading,
   zr as Icon,
   Hr as IconButton,
   X as IndicatorCard,
   Xr as IndicatorCardDB,
-  Qm as InnerForm,
+  rm as InnerForm,
   to as InputArray,
   Jr as InputDate,
   Yr as InputDateRange,
   $r as InputDateTime,
-  po as InputFile,
+  mo as InputFile,
   so as InputNumber,
   uo as InputNumberRange,
   xo as InputSection,
   no as InputTags,
   Po as ItemCardDB,
-  Zm as ItemContent,
+  em as ItemContent,
   yo as LanguageSwitcher,
   Uo as Link,
   Go as ListItem,
-  rp as ListItemsWrapper,
+  pm as ListItemsWrapper,
   Ko as LittleFlag,
   _o as Loading,
   qo as Logo,
@@ -231,23 +233,23 @@ export {
   Zo as Menu,
   re as MessageBanner,
   ee as Modal,
-  ep as ModalConfirm,
-  mp as ModalFooter,
-  me as Notification,
+  fm as ModalConfirm,
+  am as ModalFooter,
+  pe as Notification,
   fe as NotificationSign,
   ae as OAuthSelector,
   ie as OptionCard,
   Bo as OutlineContainer,
   le as PackageCard,
   de as PaginatorDb,
-  go as PhoneInput,
+  co as PhoneInput,
   Pe as PopUp,
-  ge as PremiumFeature,
+  ce as PremiumFeature,
   Se as PriorityCards,
   Ie as PriorityScore,
   Be as ProgressBar,
   Fe as ProgressIndicator,
-  fp as ProgressStep,
+  im as ProgressStep,
   ye as RadioButton,
   Ae as RankPosition,
   Wo as Row,
@@ -257,81 +259,83 @@ export {
   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,
-  Ot as Span,
-  et as StepLapse,
-  mt as SummaryCard,
-  ft as Table,
-  at as TableButton,
-  it as TableContent,
-  lt as TableOfContents,
-  dt as Tabs,
-  gt as Tag,
-  Et as Text,
+  Ke as SelectableList,
+  _e as SeverityBadge,
+  qe as SeverityIndicator,
+  Qe as SeverityOverview,
+  Ze as ShowOnHover,
+  rt as SlideOutMenu,
+  et as Slider,
+  Wt as Span,
+  pt as StepLapse,
+  ft as Stepper,
+  at as SummaryCard,
+  it as Table,
+  lt as TableButton,
+  dt as TableContent,
+  ct as TableOfContents,
+  St as Tabs,
+  It as Tag,
+  Ut as Text,
   So as TextArea,
   Io as TextInput,
-  St as TimeLine,
-  ap as TimeLineCard,
-  It as Toggle,
-  Bt as Tooltip,
-  Ft as Tour,
-  yt as Tree,
-  At as TruncatedList,
-  Wt as WeaknessesCard,
-  Tm as analyzeFilterValue,
-  Dt as baseStep,
-  Om as clearStorage,
-  Pt as defaultOptions,
-  Im as formatCheckboxesFilterValue,
-  dm as formatDate,
-  Cm as formatDateTime,
-  gm as formatDateTimeInInput,
-  bm as formatIncludeExcludeFilterValue,
-  Bm as formatTextFilterValue,
-  Vm as getPathname,
-  hm as getPreservedValues,
-  Em as getStorageItem,
+  Bt as TimeLine,
+  lm as TimeLineCard,
+  Ft as Toggle,
+  Pt as Tooltip,
+  yt as Tour,
+  kt as Tree,
+  Ot as TruncatedList,
+  Gt as WeaknessesCard,
+  hp as analyzeFilterValue,
+  Lt as baseStep,
+  Wp as clearStorage,
+  At as defaultOptions,
+  Fp as formatCheckboxesFilterValue,
+  Sp as formatDate,
+  Tp as formatDateTime,
+  Ip as formatDateTimeInInput,
+  Dp as formatIncludeExcludeFilterValue,
+  Pp as formatTextFilterValue,
+  Np as getPathname,
+  vp as getPreservedValues,
+  Up as getStorageItem,
   l as getStyledConfig,
-  p as hiddenProps,
+  m as hiddenProps,
   ar as icons,
-  Fm as normalizeCheckboxesFilterValue,
-  Lm as normalizeDate,
-  Am as normalizeNumber,
-  km as openUrl,
-  Dm as parseCheckboxesFilterValue,
-  Pm as parseIncludeExcludeFilterValue,
-  vm as parseTextFilterValue,
-  ip as partitionFilters,
-  Wm as safeUrl,
+  yp as normalizeCheckboxesFilterValue,
+  wp as normalizeDate,
+  Op as normalizeNumber,
+  Ep as openUrl,
+  Lp as parseCheckboxesFilterValue,
+  Ap as parseIncludeExcludeFilterValue,
+  Mp as parseTextFilterValue,
+  dm as partitionFilters,
+  Gp as safeUrl,
   u as setBorder,
   d as setDisplay,
   C as setInteraction,
-  g as setMargin,
-  c as setPadding,
+  c as setMargin,
+  g as setPadding,
   S as setPosition,
   T as setText,
   nr as theme,
-  qt as useActiveSection,
-  Qt as useCarousel,
-  Zt as useClickOutside,
-  rm as useCloudinaryImage,
-  em as useColumnsModal,
+  Zt as useActiveSection,
+  rp as useCarousel,
+  ep as useClickOutside,
+  pp as useCloudinaryImage,
+  fp as useColumnsModal,
   ur as useConditionsDialog,
   Cr as useConfirmDialog,
-  Xm as useController,
-  mm as useDebouncedCallback,
-  _m as useFieldArray,
-  fm as useFiltersValues,
-  jm as useFormContext,
-  am as useModal,
-  im as useMountEffect,
-  lp as useNumberFormatter,
-  lm as useSearch,
-  qm as useWatch,
+  Jp as useController,
+  ap as useDebouncedCallback,
+  Qp as useFieldArray,
+  ip as useFiltersValues,
+  Yp as useFormContext,
+  lp as useModal,
+  dp as useMountEffect,
+  cm as useNumberFormatter,
+  cp as useSearch,
+  Zp as useWatch,
   t as variantBuilder
 };

package/dist/utils/open-url.test.d.ts

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

package/package.json

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