@fluidattacks/design 8.3.1 → 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/components/tag/index.d.ts

@@ -1,4 +1,4 @@
 import { ITagProps, TTagVariant } from './types';
-declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
+declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, fullWidth, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
 export type { ITagProps, TTagVariant };
 export { Tag };

package/dist/components/tag/index.js

@@ -1,40 +1,41 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { l as b } from "../../_virtual/lodash.js";
-import { StyledTag as k, StyledTagContent as E, StyledDot as j } from "./styles.js";
-import { Icon as K } from "../icon/index.js";
-import { IconButton as P } from "../icon-button/index.js";
+import { l as k } from "../../_virtual/lodash.js";
+import { StyledTag as E, StyledTagContent as j, StyledDot as K } from "./styles.js";
+import { Icon as P } from "../icon/index.js";
+import { IconButton as W } from "../icon-button/index.js";
 import { Link as C } from "../link/index.js";
 import "../typography/heading/index.js";
-import { Span as W } from "../typography/span/index.js";
+import { Span as q } from "../typography/span/index.js";
 import "../typography/text/index.js";
-const R = ({
+const U = ({
   disabled: f,
   dot: h = !1,
-  icon: c,
+  icon: d,
   iconColor: u = "inherit",
   iconType: v = "fa-light",
   id: g = "close-tag",
   filterId: x = "",
-  filterValues: d = "",
+  filterValues: c = "",
   fontSize: y,
+  fullWidth: S = !1,
   href: r,
-  linkLabel: S,
+  linkLabel: $,
   onBodyClick: i,
   onClose: n,
-  priority: $ = "default",
+  priority: T = "default",
   selected: a,
   tagTitle: p = "",
-  tagLabel: s,
-  truncate: T = !0,
-  variant: w = "default"
+  tagLabel: l,
+  truncate: w = !0,
+  variant: z = "default"
 }) => {
-  const z = s.length > 25 && T && b.isEmpty(p + d), D = `${s.slice(0, 25)}...`, I = (t) => {
+  const D = l.length > 25 && w && k.isEmpty(p + c), I = `${l.slice(0, 25)}...`, N = (t) => {
     t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i?.());
-  }, N = (t) => {
+  }, b = (t) => {
     t.stopPropagation(), n?.();
-  }, l = i !== void 0, m = l && typeof a == "boolean";
+  }, s = i !== void 0, m = s && typeof a == "boolean";
   return /* @__PURE__ */ e(
-    W,
+    q,
     {
       className: "gap-0.5",
       color: "inherit",
@@ -42,42 +43,43 @@ const R = ({
       size: "md",
       children: [
         /* @__PURE__ */ e(
-          k,
+          E,
           {
             $fontSize: y,
-            $interactive: l,
+            $fullWidth: S,
+            $interactive: s,
             $selectable: m,
             $selected: a === !0,
-            $variant: w,
-            className: $,
+            $variant: z,
+            className: T,
             "data-testid": x,
-            ...l && {
+            ...s && {
               ...m ? { "aria-pressed": a } : {},
               onClick: i,
-              onKeyDown: I,
+              onKeyDown: N,
               role: "button",
               tabIndex: 0
             },
             children: [
-              /* @__PURE__ */ e(E, { children: [
-                c ? /* @__PURE__ */ o(
-                  K,
+              /* @__PURE__ */ e(j, { children: [
+                d ? /* @__PURE__ */ o(
+                  P,
                   {
-                    icon: c,
+                    icon: d,
                     iconColor: u,
                     iconSize: "sm",
                     iconType: v
                   }
                 ) : void 0,
-                h ? /* @__PURE__ */ o(j, { "data-testid": "tag-dot" }) : void 0,
+                h ? /* @__PURE__ */ o(K, { "data-testid": "tag-dot" }) : void 0,
                 /* @__PURE__ */ e("span", { className: "w-full", children: [
                   /* @__PURE__ */ o("strong", { children: p }),
-                  /* @__PURE__ */ o("span", { children: z ? D : s }),
-                  /* @__PURE__ */ o("strong", { className: "w-full", children: d })
+                  /* @__PURE__ */ o("span", { children: D ? I : l }),
+                  /* @__PURE__ */ o("strong", { className: "w-full", children: c })
                 ] })
               ] }),
               n ? /* @__PURE__ */ o(
-                P,
+                W,
                 {
                   disabled: f,
                   icon: "xmark",
@@ -85,7 +87,7 @@ const R = ({
                   iconSize: "xs",
                   iconType: "fa-light",
                   id: g,
-                  onClick: i !== void 0 ? N : n,
+                  onClick: i !== void 0 ? b : n,
                   px: 0.125,
                   py: 0.125,
                   variant: "ghost"
@@ -94,11 +96,11 @@ const R = ({
             ]
           }
         ),
-        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: S })
+        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: $ })
       ]
     }
   );
 };
 export {
-  R as Tag
+  U as Tag
 };

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

@@ -1,6 +1,7 @@
 import { TTagVariant } from './types';
 interface IStyledTag {
     $fontSize?: string;
+    $fullWidth?: boolean;
     $interactive?: boolean;
     $selectable?: boolean;
     $selected?: boolean;

package/dist/components/tag/styles.js

@@ -1,11 +1,24 @@
 import { styled as a } from "styled-components";
 import { variantBuilder as i } from "../@core/variants/utils.js";
-const { getVariant: p } = i(
+const { getVariant: g } = i(
   (o) => ({
     complementary: `
       background-color: ${o.palette.complementary[300]};
       color: ${o.palette.white};
     `,
+    cwe: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[50]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      a:hover & {
+        text-decoration: underline;
+      }
+    `,
     default: `
       background-color: ${o.palette.gray[100]};
       color: ${o.palette.gray[600]};
@@ -47,6 +60,21 @@ const { getVariant: p } = i(
         color: ${o.palette.info[50]};
       }
     `,
+    overflow: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[300]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      &[role="button"]:hover {
+        background-color: ${o.palette.gray[500]};
+        border-color: ${o.palette.gray[500]};
+        color: ${o.palette.gray[25]};
+      }
+    `,
     reachable: `
       background-color: ${o.palette.gray[50]};
       color: ${o.palette.gray[800]};
@@ -106,14 +134,15 @@ const { getVariant: p } = i(
   &:hover {
     background-color: ${r ? o.palette.gray[800] : o.palette.gray[100]};
   }
-`, d = a.span`
+`, $ = a.span`
   ${({
   theme: o,
   $fontSize: r = o.typography.text.sm,
+  $fullWidth: t = !1,
   $variant: l,
-  $interactive: c = !1,
-  $selectable: t = !1,
-  $selected: n = !1
+  $interactive: n = !1,
+  $selectable: c = !1,
+  $selected: p = !1
 }) => `
     align-items: center;
     border-radius: ${o.spacing[l === "technique" ? 1 : 0.25]};
@@ -127,8 +156,8 @@ const { getVariant: p } = i(
     line-height: 18px;
     padding: var(--tag-padding-y) var(--tag-padding-x);
     white-space: nowrap;
-    width: max-content;
-    ${c && !t ? "cursor: pointer;" : ""}
+    width: ${t ? "100%" : "max-content"};
+    ${n && !c ? "cursor: pointer;" : ""}
 
     ~ a {
       font-size: ${o.typography.text.xs};
@@ -148,17 +177,17 @@ const { getVariant: p } = i(
       }
     }
 
-    ${p(o, l)}
-    ${t ? e(o, n) : ""}
+    ${g(o, l)}
+    ${c ? e(o, p) : ""}
   `}
-`, $ = a.span`
+`, u = a.span`
   ${({ theme: o }) => `
     align-items: center;
     display: inline-flex;
     gap: ${o.spacing[0.25]};
     min-width: 0;
   `}
-`, u = a.span`
+`, y = a.span`
   background-color: currentColor;
   border-radius: 50%;
   flex-shrink: 0;
@@ -166,7 +195,7 @@ const { getVariant: p } = i(
   width: 6px;
 `;
 export {
-  u as StyledDot,
-  d as StyledTag,
-  $ as StyledTagContent
+  y as StyledDot,
+  $ as StyledTag,
+  u as StyledTagContent
 };

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

@@ -1,5 +1,5 @@
 import { IIconModifiable } from '../@core';
-type TTagVariant = "complementary" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
+type TTagVariant = "complementary" | "cwe" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "overflow" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
 type TTagPriority = "default" | "high" | "low" | "medium";
 /**
  * Tag component props.
@@ -10,6 +10,8 @@ type TTagPriority = "default" | "high" | "low" | "medium";
  * @property { boolean } [dot] - Whether to render a status dot before the label.
  * @property { string } [filterValues] - The filter values for the tag.
  * @property { string } [fontSize] - The font size for the tag.
+ * @property { boolean } [fullWidth] - Whether the tag fills the width of its
+ *   container instead of fitting its content.
  * @property { string } [href] - The href for the tag.
  * @property { string } [linkLabel] - The link label for the tag.
  * @property { Function } [onClose] - Function handler for close button click.
@@ -29,6 +31,7 @@ interface ITagProps extends Partial<Pick<IIconModifiable, "icon" | "iconColor" |
     filterValues?: string;
     filterId?: string;
     fontSize?: string;
+    fullWidth?: boolean;
     href?: string;
     linkLabel?: string;
     onBodyClick?: () => void;

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';