@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/standalone-link/styles.module.scss

@@ -0,0 +1,164 @@
+@use 'styles/mixins/focus-ring' as *;
+
+$standalone-link-border-width: 1px;
+$standalone-link-focus-border-radius: 5px;
+
+// this is how much the focus is visually "shifted" from the bounding box of the
+// notice: you have to take in account also the inset shadow of the focus (see Figma file and also "focus-ring" mixin)
+$standalone-link-focus-shift: 4px;
+
+.standalone-link {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+	justify-content: center;
+	width: fit-content;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
+	background-color: transparent; // needs to exist for a11y
+	border: $standalone-link-border-width solid transparent; // needs to exist AND be transparent for a11y
+	// notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
+	text-decoration-color: transparent;
+	cursor: pointer;
+
+	// the position absolute of an element is computed from the inside of the border of the container
+	// so we have to take in account the border width of the pseudo-element container itself
+	$shift: $standalone-link-focus-shift + $standalone-link-border-width;
+	// for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
+	$shift-extra: $shift + 2px;
+
+	// notice: this is used not only for the focus, but also to increase the clickable area
+	@include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $standalone-link-focus-border-radius);
+
+	// we need to override a couple of values for better visual alignment
+	&.icon-position-leading::before {
+		right: -$shift-extra;
+	}
+
+	&.icon-position-trailing::before {
+		left: -$shift-extra;
+	}
+
+	& svg {
+		transition: color 0.15s ease-in;
+	}
+}
+
+.text {
+	flex: 1 0 0;
+	text-decoration: underline;
+	text-decoration-color: transparent;
+	transition:
+		text-decoration-color 0.15s ease-in,
+		color 0.15s ease-in;
+}
+
+.size-small {
+	& .text {
+		font-size: var(--mds-typography-body-100-font-size);
+		line-height: var(--mds-typography-body-100-line-height);
+	}
+}
+
+.size-medium {
+	& .text {
+		font-size: var(--mds-typography-body-200-font-size);
+		line-height: var(--mds-typography-body-200-line-height);
+	}
+}
+
+.size-large {
+	& .text {
+		font-size: var(--mds-typography-body-300-font-size);
+		line-height: var(--mds-typography-body-300-line-height);
+	}
+}
+
+.color-primary {
+	color: var(--mds-color-foreground-action);
+
+	&:hover {
+		color: var(--mds-color-foreground-action-hover);
+
+		.text {
+			text-decoration-color: #4e81e8; // custom color by design
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-action-active);
+
+		.text {
+			text-decoration-color: #396ed6; // custom color by design
+		}
+
+		&::before {
+			background-color: var(--mds-color-surface-action);
+		}
+	}
+}
+
+.color-secondary {
+	color: var(--mds-color-foreground-strong);
+
+	&:hover {
+		.text {
+			text-decoration-color: #4d4d4f; // custom color by design
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-primary);
+
+		.text {
+			text-decoration-color: #6e7075; // custom color by design
+		}
+
+		&::before {
+			background-color: var(--mds-color-surface-interactive-active);
+		}
+	}
+}
+
+:global(.mds-dark-mode),
+:global([data-theme='dark']) {
+	& .color-secondary {
+		&:hover {
+			.text {
+				text-decoration-color: var(--mds-color-foreground-strong);
+			}
+		}
+
+		&:active {
+			.text {
+				text-decoration-color: var(--mds-color-foreground-strong);
+			}
+		}
+	}
+}
+
+.color-secondary-inverted {
+	color: var(--mds-color-palette-neutral-50);
+
+	&:hover {
+		color: var(--mds-color-palette-neutral-300);
+
+		.text {
+			text-decoration-color: var(--mds-color-palette-neutral-300);
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-palette-neutral-300);
+
+		.text {
+			text-decoration-color: var(--mds-color-palette-neutral-300);
+		}
+
+		&::before {
+			background-color: var(--mds-color-palette-neutral-600);
+		}
+	}
+}

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

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Density, type VerticalAlignment } from './utils';
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /**
+     * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.
+     */
+    isStriped?: boolean;
+    /**
+     * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.
+     */
+    isFixedLayout?: boolean;
+    /**
+     * If set, determines the density (height) of the table body’s rows.
+     */
+    density?: Density;
+    /**
+     * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.
+     */
+    valign?: VerticalAlignment;
+    /**
+     * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.
+     */
+    caption?: string;
+}
+declare function Root({ caption, density, valign, isStriped, isFixedLayout, children, className, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+declare function THead({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace THead {
+    var displayName: string;
+}
+declare function TBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace TBody {
+    var displayName: string;
+}
+declare const Table: {
+    Root: typeof Root;
+    TR: {
+        ({ children, className, ...rest }: import("./tr").TRProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    THead: typeof THead;
+    TH: {
+        ({ align, width, scope, tooltip, isVisuallyHidden, children, className, ...rest }: import("./th").THProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    TBody: typeof TBody;
+    TD: {
+        ({ align, children, className, ...rest }: import("./td").TDProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Table };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAGN,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,MAAM,SAAS,CAAA;AAGhB,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACnE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,IAAI,CAAC,EACb,OAAO,EACP,OAAyB,EACzB,MAAmC,EACnC,SAAS,EACT,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACP,EAAE,UAAU,2CAmBZ;kBA5BQ,IAAI;;;AA+Bb,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAEnD;kBAFQ,KAAK;;;AAKd,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAEnD;kBAFQ,KAAK;;;AAKd,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAAqC,CAAA;AAEhD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { TD } from './td'\nimport { TH } from './th'\nimport { TR } from './tr'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport {\n\tDEFAULT_DENSITY,\n\tDEFAULT_VERTICAL_ALIGNMENT,\n\ttype Density,\n\ttype VerticalAlignment,\n} from './utils'\nimport s from './table.module.scss'\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n\t/**\n\t * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.\n\t */\n\tisStriped?: boolean\n\t/**\n\t * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.\n\t */\n\tisFixedLayout?: boolean\n\t/**\n\t * If set, determines the density (height) of the table body’s rows.\n\t */\n\tdensity?: Density\n\t/**\n\t * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.\n\t */\n\tvalign?: VerticalAlignment\n\t/**\n\t * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.\n\t */\n\tcaption?: string\n}\n\nfunction Root({\n\tcaption,\n\tdensity = DEFAULT_DENSITY,\n\tvalign = DEFAULT_VERTICAL_ALIGNMENT,\n\tisStriped,\n\tisFixedLayout,\n\tchildren,\n\tclassName,\n\t...rest\n}: TableProps) {\n\treturn (\n\t\t<table\n\t\t\tclassName={classNames(\n\t\t\t\ts.table,\n\t\t\t\ts[`density-${density}`],\n\t\t\t\ts[`valign-${valign}`],\n\t\t\t\t{\n\t\t\t\t\t[s.striped]: isStriped,\n\t\t\t\t\t[s['layout-fixed']]: isFixedLayout,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{caption && <caption className=\"sr-only\">{caption}</caption>}\n\t\t\t{children}\n\t\t</table>\n\t)\n}\nRoot.displayName = 'Table'\n\nfunction THead({ children }: { children: ReactNode }) {\n\treturn <thead className={s.thead}>{children}</thead>\n}\nTHead.displayName = 'T.Head'\n\nfunction TBody({ children }: { children: ReactNode }) {\n\treturn <tbody className={s.tbody}>{children}</tbody>\n}\nTBody.displayName = 'T.Body'\n\nconst Table = { Root, TR, THead, TH, TBody, TD }\n\nexport { Table }\n"],"names":["Root","caption","density","DEFAULT_DENSITY","valign","DEFAULT_VERTICAL_ALIGNMENT","isStriped","isFixedLayout","children","className","rest","jsxs","classNames","s","jsx","THead","TBody","Table","TR","TH","TD"],"mappings":";;;;;;;AAoCA,SAASA,EAAK;AAAA,EACb,SAAAC;AAAA,EACA,SAAAC,IAAUC;AAAA,EACV,QAAAC,IAASC;AAAA,EACT,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAe;AACd,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACVC,EAAE;AAAA,QACFA,EAAE,WAAWX,CAAO,EAAE;AAAA,QACtBW,EAAE,UAAUT,CAAM,EAAE;AAAA,QACpB;AAAA,UACC,CAACS,EAAE,OAAO,GAAGP;AAAA,UACb,CAACO,EAAE,cAAc,CAAC,GAAGN;AAAA,QAAA;AAAA,QAEtBE;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAT,KAAW,gBAAAa,EAAC,WAAA,EAAQ,WAAU,WAAW,UAAAb,GAAQ;AAAA,QACjDO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AACAR,EAAK,cAAc;AAEnB,SAASe,EAAM,EAAE,UAAAP,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAO,EAAM,cAAc;AAEpB,SAASC,EAAM,EAAE,UAAAR,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAQ,EAAM,cAAc;AAEpB,MAAMC,IAAQ,EAAE,MAAAjB,GAAM,IAAAkB,GAAI,OAAAH,GAAO,IAAAI,GAAI,OAAAH,GAAO,IAAAI,EAAA;"}

package/dist/components/table/td.d.ts

@@ -0,0 +1,18 @@
+import { type HorizontalAlignment } from './utils';
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TDProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).
+     */
+    align?: HorizontalAlignment;
+    /**
+     * Elements passed as children are yielded as inner content of a <td> HTML element.
+     */
+    children: ReactNode;
+}
+declare const TD: {
+    ({ align, children, className, ...rest }: TDProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TD };
+//# sourceMappingURL=td.d.ts.map

package/dist/components/table/td.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"td.d.ts","sourceRoot":"","sources":["../../../src/components/table/td.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,WAAW,OAAQ,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,EAAE;8CAKL,OAAO;;CAeT,CAAA;AAID,OAAO,EAAE,EAAE,EAAE,CAAA"}

package/dist/components/table/td.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"td.js","sources":["../../../src/components/table/td.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, type HorizontalAlignment } from './utils'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './table.module.scss'\n\nexport interface TDProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * Elements passed as children are yielded as inner content of a <td> HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TD = ({\n\talign = DEFAULT_ALIGNMENT,\n\tchildren,\n\tclassName,\n\t...rest\n}: TDProps) => {\n\treturn (\n\t\t<td\n\t\t\tclassName={classNames(\n\t\t\t\ts.td,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-regular',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className={s.content}>{children}</div>\n\t\t</td>\n\t)\n}\n\nTD.displayName = 'B.Td'\n\nexport { TD }\n"],"names":["TD","align","DEFAULT_ALIGNMENT","children","className","rest","jsx","classNames","s"],"mappings":";;;;AAgBA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,SAASP,CAAK,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,MACAG;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA;AAKxCH,EAAG,cAAc;"}

package/dist/components/table/th-button-tooltip.d.ts

@@ -0,0 +1,7 @@
+interface TooltipProps {
+    tooltip: string;
+    labelId: string;
+}
+export declare const ThButtonTooltip: ({ tooltip, labelId }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=th-button-tooltip.d.ts.map

package/dist/components/table/th-button-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-button-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/table/th-button-tooltip.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,eAAe,GAAI,sBAAsB,YAAY,4CAiBjE,CAAA"}

package/dist/components/table/th.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { HorizontalAlignment, Scope } from './utils';
+export interface THProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.
+     */
+    align?: HorizontalAlignment;
+    /**
+     * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.
+     */
+    scope?: Scope;
+    /**
+     * Any valid CSS
+     * If set, determines the column’s width.
+     */
+    width?: string;
+    /**
+     * Text string which will appear in the tooltip. May contain basic HTML tags for formatting text such as strong and em tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The placement and offset are automatically set and can’t be overwritten.
+     */
+    tooltip?: string;
+    /**
+     * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).
+     */
+    isVisuallyHidden?: boolean;
+    /**
+     * Elements passed as children are yielded as inner content of a `<th>` HTML element.
+     */
+    children: ReactNode;
+}
+declare const TH: {
+    ({ align, width, scope, tooltip, isVisuallyHidden, children, className, ...rest }: THProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TH };
+//# sourceMappingURL=th.d.ts.map

package/dist/components/table/th.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/components/table/th.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGzD,MAAM,WAAW,OAAQ,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,EAAE;uFASL,OAAO;;CAiCT,CAAA;AAID,OAAO,EAAE,EAAE,EAAE,CAAA"}

package/dist/components/table/th.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th.js","sources":["../../../src/components/table/th.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, DEFAULT_SCOPE } from './utils'\nimport { useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { ThButtonTooltip } from './th-button-tooltip'\nimport type { HorizontalAlignment, Scope } from './utils'\nimport s from './table.module.scss'\n\nexport interface THProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.\n\t */\n\tscope?: Scope\n\t/**\n\t * Any valid CSS\n\t * If set, determines the column’s width.\n\t */\n\twidth?: string\n\t/**\n\t * Text string which will appear in the tooltip. May contain basic HTML tags for formatting text such as strong and em tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The placement and offset are automatically set and can’t be overwritten.\n\t */\n\ttooltip?: string\n\t/**\n\t * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).\n\t */\n\tisVisuallyHidden?: boolean\n\t/**\n\t * Elements passed as children are yielded as inner content of a `<th>` HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TH = ({\n\talign = DEFAULT_ALIGNMENT,\n\twidth,\n\tscope = DEFAULT_SCOPE,\n\ttooltip,\n\tisVisuallyHidden,\n\tchildren,\n\tclassName,\n\t...rest\n}: THProps) => {\n\tconst labelId = useId()\n\tlet content: React.ReactNode\n\n\tif (isVisuallyHidden) {\n\t\tcontent = <span className=\"sr-only\">{children}</span>\n\t} else if (tooltip) {\n\t\tcontent = (\n\t\t\t<div className={s.content}>\n\t\t\t\t<span id={labelId}>{children}</span>\n\t\t\t\t<ThButtonTooltip tooltip={tooltip} labelId={labelId} />\n\t\t\t</div>\n\t\t)\n\t} else {\n\t\tcontent = <div className={s.content}>{children}</div>\n\t}\n\n\treturn (\n\t\t<th\n\t\t\tclassName={classNames(\n\t\t\t\ts.th,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-semibold',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={width ? { width, minWidth: width } : {}}\n\t\t\t{...rest}\n\t\t\tscope={scope}\n\t\t>\n\t\t\t{content}\n\t\t</th>\n\t)\n}\n\nTH.displayName = 'H.TH'\n\nexport { TH }\n"],"names":["TH","align","DEFAULT_ALIGNMENT","width","scope","DEFAULT_SCOPE","tooltip","isVisuallyHidden","children","className","rest","labelId","useId","content","jsx","jsxs","s","ThButtonTooltip","classNames"],"mappings":";;;;;;AAmCA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQC;AAAA,EACR,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAe;AACd,QAAMC,IAAUC,EAAA;AAChB,MAAIC;AAEJ,SAAIN,IACHM,IAAU,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAS,IACpCF,IACVO,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAE,SACjB,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAA,EAAK,IAAIH,GAAU,UAAAH,EAAA,CAAS;AAAA,IAC7B,gBAAAM,EAACG,GAAA,EAAgB,SAAAX,GAAkB,SAAAK,EAAA,CAAkB;AAAA,EAAA,GACtD,IAGDE,IAAU,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAR,GAAS,GAI/C,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVF,EAAE;AAAA,QACFA,EAAE,SAASf,CAAK,EAAE;AAAA,QAClB;AAAA,QACA;AAAA,QACAQ;AAAA,MAAA;AAAA,MAED,OAAON,IAAQ,EAAE,OAAAA,GAAO,UAAUA,EAAA,IAAU,CAAA;AAAA,MAC3C,GAAGO;AAAA,MACJ,OAAAN;AAAA,MAEC,UAAAS;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEAb,EAAG,cAAc;"}

package/dist/components/table/tr.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TRProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Elements passed as children are yielded as inner content of a `<tr>` HTML element.
+     */
+    children: ReactNode;
+}
+declare const TR: {
+    ({ children, className, ...rest }: TRProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TR };
+//# sourceMappingURL=tr.d.ts.map

package/dist/components/table/tr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../src/components/table/tr.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,WAAW,OAAQ,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACnE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,EAAE;uCAAsC,OAAO;;CAMpD,CAAA;AAID,OAAO,EAAE,EAAE,EAAE,CAAA"}

package/dist/components/table/utils.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_DENSITY = "medium";
+export declare const DENSITIES: readonly ["default", "medium", "short", "tall"];
+export type Density = (typeof DENSITIES)[number];
+export declare const getDensity: (densityStr: string) => Density;
+export declare const DEFAULT_VERTICAL_ALIGNMENT = "top";
+export declare const VERTICAL_ALIGNMENTS: readonly ["baseline", "middle", "top"];
+export type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number];
+export declare const getVerticalAlignment: (valignStr: string) => VerticalAlignment;
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const ALIGNMENTS: readonly ["left", "center", "right"];
+export type HorizontalAlignment = (typeof ALIGNMENTS)[number];
+export declare const getHorizontalAlignment: (alignStr: string) => HorizontalAlignment;
+export declare const DEFAULT_SCOPE = "col";
+export declare const SCOPES: readonly ["col", "row"];
+export type Scope = (typeof SCOPES)[number];
+export declare const getScope: (scopeStr: string) => Scope;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/table/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/table/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,WAAW,CAAA;AACvC,eAAO,MAAM,SAAS,iDAAkD,CAAA;AACxE,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAChD,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,KAAG,OAG/C,CAAA;AAED,eAAO,MAAM,0BAA0B,QAAQ,CAAA;AAC/C,eAAO,MAAM,mBAAmB,wCAAyC,CAAA;AACzE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AACpE,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,KAAG,iBAKxD,CAAA;AAED,eAAO,MAAM,iBAAiB,SAAS,CAAA;AACvC,eAAO,MAAM,UAAU,sCAAuC,CAAA;AAC9D,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,eAAO,MAAM,sBAAsB,GAClC,UAAU,MAAM,KACd,mBAGF,CAAA;AAED,eAAO,MAAM,aAAa,QAAQ,CAAA;AAClC,eAAO,MAAM,MAAM,yBAA0B,CAAA;AAC7C,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3C,eAAO,MAAM,QAAQ,GAAI,UAAU,MAAM,KAAG,KAG3C,CAAA"}

package/dist/components/table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/table/utils.ts"],"sourcesContent":["export const DEFAULT_DENSITY = 'medium'\nexport const DENSITIES = ['default', 'medium', 'short', 'tall'] as const\nexport type Density = (typeof DENSITIES)[number]\nexport const getDensity = (densityStr: string): Density => {\n\tconst density = densityStr as Density\n\treturn DENSITIES.includes(density) ? density : DEFAULT_DENSITY\n}\n\nexport const DEFAULT_VERTICAL_ALIGNMENT = 'top'\nexport const VERTICAL_ALIGNMENTS = ['baseline', 'middle', 'top'] as const\nexport type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number]\nexport const getVerticalAlignment = (valignStr: string): VerticalAlignment => {\n\tconst valign = valignStr as VerticalAlignment\n\treturn VERTICAL_ALIGNMENTS.includes(valign)\n\t\t? valign\n\t\t: DEFAULT_VERTICAL_ALIGNMENT\n}\n\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const ALIGNMENTS = ['left', 'center', 'right'] as const\nexport type HorizontalAlignment = (typeof ALIGNMENTS)[number]\nexport const getHorizontalAlignment = (\n\talignStr: string,\n): HorizontalAlignment => {\n\tconst align = alignStr as HorizontalAlignment\n\treturn ALIGNMENTS.includes(align) ? align : DEFAULT_ALIGNMENT\n}\n\nexport const DEFAULT_SCOPE = 'col'\nexport const SCOPES = ['col', 'row'] as const\nexport type Scope = (typeof SCOPES)[number]\nexport const getScope = (scopeStr: string): Scope => {\n\tconst scope = scopeStr as Scope\n\treturn SCOPES.includes(scope) ? scope : DEFAULT_SCOPE\n}\n"],"names":["DEFAULT_DENSITY","DENSITIES","getDensity","densityStr","density","DEFAULT_VERTICAL_ALIGNMENT","VERTICAL_ALIGNMENTS","getVerticalAlignment","valignStr","valign","DEFAULT_ALIGNMENT","ALIGNMENTS","getHorizontalAlignment","alignStr","align","DEFAULT_SCOPE","SCOPES","getScope","scopeStr","scope"],"mappings":"AAAO,MAAMA,IAAkB,UAClBC,IAAY,CAAC,WAAW,UAAU,SAAS,MAAM,GAEjDC,IAAa,CAACC,MAAgC;AAC1D,QAAMC,IAAUD;AAChB,SAAOF,EAAU,SAASG,CAAO,IAAIA,IAAUJ;AAChD,GAEaK,IAA6B,OAC7BC,IAAsB,CAAC,YAAY,UAAU,KAAK,GAElDC,IAAuB,CAACC,MAAyC;AAC7E,QAAMC,IAASD;AACf,SAAOF,EAAoB,SAASG,CAAM,IACvCA,IACAJ;AACJ,GAEaK,IAAoB,QACpBC,IAAa,CAAC,QAAQ,UAAU,OAAO,GAEvCC,IAAyB,CACrCC,MACyB;AACzB,QAAMC,IAAQD;AACd,SAAOF,EAAW,SAASG,CAAK,IAAIA,IAAQJ;AAC7C,GAEaK,IAAgB,OAChBC,IAAS,CAAC,OAAO,KAAK,GAEtBC,IAAW,CAACC,MAA4B;AACpD,QAAMC,IAAQD;AACd,SAAOF,EAAO,SAASG,CAAK,IAAIA,IAAQJ;AACzC;"}

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

@@ -0,0 +1,22 @@
+import { type ReactNode, type HTMLAttributes, type MouseEvent } from 'react';
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    onClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void;
+    initialSelectedTabIndex?: number;
+    size?: 'medium' | 'large';
+}
+interface TabsListProps {
+    /**
+     * `<Tabs.Tab />` as children
+     */
+    children: ReactNode;
+    className?: string;
+}
+declare const Tabs: {
+    Provider: ({ children, onClickTab, initialSelectedTabIndex, size, className, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+    TabList: ({ children, className }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...rest }: import("./tab-panel").TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ count, icon, isSelected: isInitialTab, children, className, trackingKey, tabIndicatorTheme, ...rest }: import("./tab").TabProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type { TabsListProps };
+export { Tabs };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,KAAK,SAAS,EACd,KAAK,cAAc,EAEnB,KAAK,UAAU,EAMf,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7E,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CACzB;AA4JD,UAAU,aAAa;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAcD,QAAA,MAAM,IAAI;4FAvKP,SAAS;uCA2J8B,aAAa;;;CAYC,CAAA;AAExD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex,\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tconsole.error('Only one tab may use isSelected argument')\n\t\t}\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView],\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[],\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length],\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t],\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","selectedCount","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":";;;;;;;;AAyBkB,MACjBA,IAAA,CAAA;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,yBAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC;AAAgD,QAC/C,CAAAC,GAAAC,CAAA,IAAAC;AAAA,IACDN;AAAA,EACA,GACMO,IAAAC,EAAa,CAAA,CAA8B,GAC3CC,IAASD,EAAS,CAAA,CAAI,GACtB,CAACE,GAAAC,CAAU,IAAWL,EAAI,CAAA,CAAA,GAC1B,CAACM,GAAAC,CAAgB,IAAAP,EAAiB,CAAA,CAAA,GAClC,CAACQ,GAAAC,CAAuB,IAAAT,EAAA,CAAwB,GAChD,CAAAU,IAAkD,IAAAV,EAAA,CAAA,GAElDW,IAAAT,SAELU,IAAmBC,SAChB;AACH,cAAgBZ,EAAA,QAAAa,CAAA,GAAA;AACf,IAAAC,KAA0BA,iBACf;AAAA,MACV,UAAO;AAAA,MACP,OAAA;AAAA,MACA,QAAA;AAAA,IACF,CAAA;AAAA,EAGD,GAAA,CAAA,CAAA;AACC,EAAAC,EAAA,MAAA;AACD,IAAAjB,EAAIL,CAAwB;AAAA,EAE5B,GAAA,CAAAA,CAAgB,CAAA,GACfsB,EAAM,MAAA;AACN,UAAIC,IAAWhB,EAAA,SAAqB,GAAA;AACnC,QAAAgB,KAAMN,EAAa,SAAQ;AAC3B,YAAMO,IAAWD,EAAQ,YACzBE,IAAAF,EAAyB;AACzB,MAAAG,EAAkBF,CAAQ,GAC1BT,EAAYU,IAAiBR,EACtB,QAAA,SAAA;AAAA,QACN;QACA,UAAA;AAAA,MACF,CAAA;AAAA;EAGD,GAAA,CAAAV,GAAUH,GAAMc,GAAAD,CAAA,CAAA,GACfK,EAAA,MAAU;AAEV,IAAAX,EAAIJ,EAAA,QAAgB,IAAA,CAAAoB,MAAAA,EAAA,EAAA,CAAA;AAEpB,QAAAC;AACC,IAAArB,EAAI,QAAW,eAAa;AAC3B,QAAA,aAAA,kBAAA,KACDqB;AAAA,IAGD,CAAA,GACCA,SACD,QAAA,MAAA,0CAAA;AAAA,EAGD,GAAA,CAAArB,CAAU,CAAA,GACTe,EAAA,MAAY;AACb,IAAAT,EAAcJ,EAAC,QAAA,IAAA,CAAAkB,MAAAA,EAAA,EAAA,CAAA;AAAA,EAEf,GAAA,CAAAlB,CAAM,CAAA;AAAU,QACdoB,IAAkBV;AAAA,IAClB,CAAAC,GAAAU,MAAA;AAEA,MAAAzB,EAAee,CAAQ,GAGvBF,EAAWE,IACV,OAAArB,mBACDA,EAAA+B,GAAAV,CAAA;AAAA,IAED;AAAA,IACD,CAAArB,GAAAmB,CAAA;AAAA,EAGA,GACEa,IAAkBZ;AAAA,IAClB,CAAAC,GAAE,MAAA;AACF,QAAA,eAAiB,GAClBb,EAAA,QAAAa,CAAA,EAAA,MAAA;AAAA,IACA;AAAA,IACD,CAAA;AAAA,EAEA,GACEY,IAAkBb;AAAA,IAClB,CAAAC,GAAM,MAAA;AACN,YAAMa,IAAA,aACAC,IAAW,cACXC,IAAW,SAEXC;AACL,UAAA,EAAA,QAAMF,GAAgB;AACtB,cAAAG,SAAwB,KAAA3B,EAAA;UACd2B;MACV,WAAM,EAAA,QAAAJ,GAAgB;AACtB,cAAAK,SAAwB5B,EAAA,SAAA,KAAAA,EAAA;UACd4B,GAAU,CAAA;AAAA,MACpB,MAAA,EAAA,EAAA,QAAAH,KAA4B,EAAA,QAAAC,MAC7B/B,EAAAe,CAAA;AAAA,IAED;AAAA,IACD,CAAAW,GAAArB,EAAA,MAAA;AAAA,EAEA,GACC6B,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,UAAAjC;AAAA,MACA,QAAAG;AAAA,MACA,YAAAD;AAAA,MACA,UAAAG;AAAA,MACA,kBAAAR;AAAA,MACA,SAAAyB;AAAA,MACA,SAAAG;AAAA,MACA,MAAA/B;AAAA,MACD,aAAAgB;AAAA,IACA;AAAA,IAAA;AAAA,MAECV;AAAA,MACAG;AAAA,MACAD;AAAA,MACAG;AAAA,MACAR;AAAA,MACAyB;AAAA,MACAG;AAAA,MACA/B;AAAA,MAAAgB;AAAA,IAEF;AAAA,EAEA;AAEE,SAAC,gBAAAwB,EAAAC,EAAA,UAAA,EAAA,OAAAH,GAAA,UAAA,gBAAAE;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGE,EAAAC,EAAA,MAAA1C,CAAA;AAAA,MACJ;MAAO;QAEL,wBAAmC,GAAAc,CAAc;AAAA,QACnD,qBAAA,GAAAF,CAAA;AAAA,MAEC;AAAA,MAAA,UAAAhB;AAAA;EAIL,EAAA,CAAA;AAUA,OACS,CAAA,EAAA,UAAAA,sBAA+B;AACvC;AAGI,SAAA,gBAAA2C,EAAA,OAAA,EAAA,WAAAE,EAAAC,EAAA,iBAAA,GAAA1C,CAAA,GAAA,UAAA,gBAAA2C,EAAA,MAAA,EAAA,WAAAD,EAAA,SAAA,MAAA,WAAA,KAAA3B,GAAA,UAAA;AAAA,IAAAnB;AAAA,IAGH,gBAAA2C,EAAA,MAAA,EAAA,WAAAG,EAAA,WAAA,MAAA,eAAA,CAAA;AAAA,EAEF,EAAA,CAAA,EAAA,CAAA;AAEA;"}

package/dist/components/tabs/tab-panel.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes } from 'react';
+type TabPanelProps = HTMLAttributes<HTMLDivElement>;
+declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export type { TabPanelProps };
+export { TabPanel };
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tabs/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3D,KAAK,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEnD,QAAA,MAAM,QAAQ,GAAI,kCAAkC,aAAa,4CAgChE,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/tabs/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId],\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex],\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex],\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from 'react';
+import type { FlightIconName } from '../flight-icon';
+interface TabProps extends HTMLAttributes<HTMLLIElement> {
+    tabIndicatorTheme?: 'primary' | 'secondary';
+    /**
+     * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)
+     */
+    count?: string;
+    /**
+     * Displays an icon in the tab. (optional)
+     */
+    icon?: FlightIconName;
+    /**
+     * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)
+     */
+    isSelected?: boolean;
+    /**
+     * Used to append analytics and tracking related data attributes to any interactive element internal to this component.
+     */
+    trackingKey?: string;
+}
+declare const Tab: ({ count, icon, isSelected: isInitialTab, children, className, trackingKey, tabIndicatorTheme, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export type { TabProps };
+export { Tab };
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,cAAc,EAAW,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAIpD,UAAU,QAAS,SAAQ,cAAc,CAAC,aAAa,CAAC;IACvD,iBAAiB,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,QAAA,MAAM,GAAG,GAAI,yGASV,QAAQ,4CAqDV,CAAA;AAED,YAAY,EAAE,QAAQ,EAAE,CAAA;AACxB,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/components/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex],\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}

package/dist/components/tabs/tabs.module.scss

@@ -0,0 +1,120 @@
+@use 'styles/mixins/focus-ring' as *;
+
+.tablist-wrapper {
+	position: relative;
+
+	// bottom gray border:
+	&::before {
+		position: absolute;
+		right: 0;
+		bottom: calc((var(--mds-tabs-indicator-height) - var(--mds-tabs-divider-height)) / 2);
+		left: 0;
+		display: block;
+		border-top: var(--mds-tabs-divider-height) solid var(--mds-color-border-primary);
+		content: '';
+	}
+}
+
+.tablist {
+	position: relative;
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.tab {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--mds-tabs-tab-height-medium);
+	margin: 0;
+	padding: var(--mds-tabs-tab-padding-vertical) var(--mds-tabs-tab-padding-horizontal-medium);
+	white-space: nowrap;
+	text-decoration: none;
+	list-style: none;
+
+	&.primary {
+		color: var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-primary));
+
+		&:hover {
+			color: var(--mds-accent-tab-color-foreground-hover, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action)));
+		}
+
+		&.selected {
+			color: var(--mds-accent-tab-selected-color-foreground, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action)));
+
+			&:hover {
+				color: var(--mds-accent-tab-selected-color-foreground-hover, var(--mds-accent-tab-selected-color-foreground, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action-hover))));
+
+				& ~ .indicator {
+					background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-action-hover));
+				}
+			}
+		}
+	}
+
+	&.secondary {
+		color: var(--mds-color-foreground-faint);
+
+		&:hover {
+			color: var(--mds-color-foreground-strong);
+		}
+
+		&.selected {
+			color: var(--mds-color-foreground-strong);
+		}
+
+		& ~ .indicator {
+			background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-strong));
+		}
+	}
+}
+
+.tab-button {
+	@include hds-focus-ring-with-pseudo-element($top: var(--mds-tabs-tab-focus-inset), $right: var(--mds-tabs-tab-focus-inset), $bottom: var(--mds-tabs-tab-focus-inset), $left: var(--mds-tabs-tab-focus-inset));
+	position: static;
+	display: flex;
+	gap: var(--mds-tabs-tab-gutter);
+	align-items: center;
+	padding: 0;
+	color: inherit;
+	background-color: transparent;
+	border: none;
+	border-radius: var(--mds-tabs-tab-border-radius);
+	cursor: pointer;
+
+	// Expand click target area
+	&::after {
+		position: absolute;
+		content: '';
+		inset: 0;
+	}
+}
+
+.indicator {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	// notice: this custom prop is set dynamically via JavaScript
+	left: var(--indicator-left-pos);
+	z-index: 10;
+	display: block;
+	// notice: this custom prop is set dynamically via JavaScript
+	width: var(--indicator-width);
+	height: var(--mds-tabs-indicator-height);
+	background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-action));
+	border-radius: var(--mds-tabs-indicator-height);
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition-timing-function: var(--mds-tabs-indicator-transition-function);
+		transition-duration: var(--mds-tabs-indicator-transition-duration);
+		transition-property: left, width;
+	}
+}
+
+// Prevent consumers from accidentally overriding default styling of HTML “hidden” attribute
+.panel[hidden] {
+	display: none;
+}

package/dist/components/tabs/use-tabs-context.d.ts

@@ -0,0 +1,16 @@
+import { type MutableRefObject, type MouseEvent, type KeyboardEvent } from 'react';
+interface TabsContextState {
+    tabNodes: MutableRefObject<Array<HTMLButtonElement>>;
+    panelNodes: MutableRefObject<Array<HTMLDivElement>>;
+    tabIds: Array<string>;
+    panelIds: Array<string>;
+    selectedTabIndex: number;
+    onClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void;
+    size: 'medium' | 'large';
+    tabsListRef: MutableRefObject<HTMLUListElement | null>;
+}
+export declare const TabsContext: import("react").Context<TabsContextState | undefined>;
+export declare function useTabsContext(): TabsContextState;
+export {};
+//# sourceMappingURL=use-tabs-context.d.ts.map

package/dist/components/tabs/use-tabs-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-context.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/use-tabs-context.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,aAAa,EAGlB,MAAM,OAAO,CAAA;AAEd,UAAU,gBAAgB;IACzB,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACpD,UAAU,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAA;IACnD,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC5E,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,WAAW,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CACtD;AAED,eAAO,MAAM,WAAW,uDAEvB,CAAA;AAED,wBAAgB,cAAc,IAAI,gBAAgB,CAMjD"}