@hashicorp/mds-react 0.9.0

package/dist/components/dismiss-button/styles.module.scss

@@ -0,0 +1,31 @@
+@use 'styles/mixins/focus-ring' as *;
+
+.dismiss-button {
+	display: flex;
+	padding: 0;
+	color: var(--mds-color-foreground-faint);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+
+	&:hover {
+		&::before {
+			/* we re-use the pseudo-element created by the "focus-ring" mixin */
+			background-color: var(--mds-color-palette-alpha-100);
+		}
+	}
+
+	&:active {
+		&::before {
+			background-color: var(--mds-color-palette-alpha-200);
+		}
+	}
+
+	/* notice: this is used not only for the focus, but also to increase the clickable area */
+	@include hds-focus-ring-with-pseudo-element(
+		$top: -4px,
+		$right: -4px,
+		$bottom: -4px,
+		$left: -4px
+	);
+}

package/dist/components/dismiss-button/styles.module.scss.js

@@ -0,0 +1,7 @@
+const s = {
+  "dismiss-button": "dismiss-button__Asa3H"
+};
+export {
+  s as default
+};
+//# sourceMappingURL=styles.module.scss.js.map

package/dist/components/dismiss-button/styles.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

@@ -0,0 +1,72 @@
+import { DropdownToggleButtonProps } from './toggle-button';
+import { HTMLAttributes, ReactNode } from 'react';
+interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, container is given full width styles. (Added by web presence team)
+     */
+    isFullWidth?: boolean;
+    /**
+     * Callback function invoked when the Dropdown is closed, if provided.
+     */
+    onClose?: () => void;
+}
+interface DropdownContentProps {
+    listPosition?: 'right' | 'left' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    width?: `${number}px` | `${number}em` | `${number}%`;
+    /**
+     * If a height prop is provided then the list will have a fixed height.
+     */
+    height?: `${number}px` | `${number}em`;
+    children: ReactNode;
+}
+interface DropdownHeaderFooterProps extends HTMLAttributes<HTMLDivElement> {
+    hasDivider?: boolean;
+}
+declare const Dropdown: {
+    Root: {
+        ({ isFullWidth, onClose, children, className, ...rest }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToggleButton: {
+        ({ text, color, size, icon, isFullWidth, count, badge, badgeIcon, disabled, ...rest }: DropdownToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ listPosition, width, height, children, }: DropdownContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ children }: {
+            children: ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ hasDivider, children, ...rest }: DropdownHeaderFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ hasDivider, children, ...rest }: DropdownHeaderFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ListItem: {
+        Interactive: {
+            ({ text, color, icon, isLoading, trailingIcon, ...rest }: import('./list-item/interactive').ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Title: {
+            ({ text, ...rest }: import('./list-item/title').ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Separator: {
+            (props: import('./list-item/separator').ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Custom: {
+            ({ children }: import('./list-item/custom').ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export type { DropdownProps, DropdownContentProps, DropdownHeaderFooterProps, DropdownToggleButtonProps, };
+export { Dropdown };

package/dist/components/dropdown/index.js

@@ -0,0 +1,79 @@
+import { jsx as n } from "react/jsx-runtime";
+import s from "classnames";
+import { Content as N, Provider as f } from "../menu-primitive/index.js";
+import { ToggleButton as w } from "./toggle-button/index.js";
+import { ListItem as u } from "./list-item/index.js";
+import t from "./styles.module.css.js";
+const a = ({
+  isFullWidth: o,
+  onClose: e,
+  children: r,
+  className: i,
+  ...l
+}) => /* @__PURE__ */ n(
+  f,
+  {
+    className: s(
+      {
+        [t["width-full"]]: o
+      },
+      i
+    ),
+    onClose: e,
+    isFullWidth: o,
+    ...l,
+    children: r
+  }
+), d = ({
+  listPosition: o = "bottom-right",
+  width: e,
+  height: r,
+  children: i
+}) => /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(
+  "div",
+  {
+    className: s(
+      t.content,
+      t[`content-position-${o}`],
+      { [t["content-fixed-width"]]: !!e }
+    ),
+    style: { width: e, height: r },
+    children: i
+  }
+) }), m = ({ children: o }) => /* @__PURE__ */ n("ul", { className: t.list, children: o }), p = ({
+  hasDivider: o,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: s(t.header, {
+      [t["header-with-divider"]]: o
+    }),
+    ...r,
+    children: e
+  }
+), c = ({
+  hasDivider: o,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: s(t.footer, {
+      [t["footer-with-divider"]]: o
+    }),
+    ...r,
+    children: e
+  }
+);
+a.displayName = "Dropdown.Root";
+d.displayName = "Dropdown.Content";
+m.displayName = "Dropdown.List";
+p.displayName = "Dropdown.Header";
+c.displayName = "Dropdown.Footer";
+const x = { Root: a, ToggleButton: w, Content: d, List: m, Header: p, Footer: c, ListItem: u };
+export {
+  x as Dropdown
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { ToggleButton } from './toggle-button'\nimport type { DropdownToggleButtonProps } from './toggle-button'\nimport { ListItem } from './list-item'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * If true, container is given full width styles. (Added by web presence team)\n\t */\n\tisFullWidth?: boolean\n\t/**\n\t * Callback function invoked when the Dropdown is closed, if provided.\n\t */\n\tonClose?: () => void\n}\n\nconst Root = ({\n\tisFullWidth,\n\tonClose,\n\tchildren,\n\tclassName,\n\t...rest\n}: DropdownProps) => {\n\treturn (\n\t\t<MenuPrimitive.Provider\n\t\t\tclassName={classNames(\n\t\t\t\t{\n\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClose={onClose}\n\t\t\tisFullWidth={isFullWidth}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</MenuPrimitive.Provider>\n\t)\n}\n\ninterface DropdownContentProps {\n\tlistPosition?:\n\t\t| 'right'\n\t\t| 'left'\n\t\t| 'bottom-left'\n\t\t| 'bottom-right'\n\t\t| 'top-left'\n\t\t| 'top-right'\n\twidth?: `${number}px` | `${number}em` | `${number}%`\n\t/**\n\t * If a height prop is provided then the list will have a fixed height.\n\t */\n\theight?: `${number}px` | `${number}em`\n\tchildren: ReactNode\n}\n\nconst Content = ({\n\tlistPosition = 'bottom-right',\n\twidth,\n\theight,\n\tchildren,\n}: DropdownContentProps) => {\n\treturn (\n\t\t<MenuPrimitive.Content>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.content,\n\t\t\t\t\ts[`content-position-${listPosition}`],\n\t\t\t\t\t{ [s['content-fixed-width']]: !!width }\n\t\t\t\t)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</MenuPrimitive.Content>\n\t)\n}\n\nconst List = ({ children }: { children: ReactNode }) => {\n\treturn <ul className={s.list}>{children}</ul>\n}\n\ninterface DropdownHeaderFooterProps extends HTMLAttributes<HTMLDivElement> {\n\thasDivider?: boolean\n}\n\nconst Header = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.header, {\n\t\t\t\t[s['header-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nconst Footer = ({\n\thasDivider,\n\tchildren,\n\t...rest\n}: DropdownHeaderFooterProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.footer, {\n\t\t\t\t[s['footer-with-divider']]: hasDivider,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nRoot.displayName = 'Dropdown.Root'\nContent.displayName = 'Dropdown.Content'\nList.displayName = 'Dropdown.List'\nHeader.displayName = 'Dropdown.Header'\nFooter.displayName = 'Dropdown.Footer'\n\nconst Dropdown = { Root, ToggleButton, Content, List, Header, Footer, ListItem }\n\nexport type {\n\tDropdownProps,\n\tDropdownContentProps,\n\tDropdownHeaderFooterProps,\n\tDropdownToggleButtonProps,\n}\nexport { Dropdown }\n"],"names":["Root","isFullWidth","onClose","children","className","rest","jsx","MenuPrimitive.Provider","classNames","s","Content","listPosition","width","height","MenuPrimitive.Content","List","Header","hasDivider","Footer","Dropdown","ToggleButton","ListItem"],"mappings":";;;;;;AAmBA,MAAMA,IAAO,CAAC;AAAA,EACb,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACV;AAAA,QACC,CAACC,EAAE,YAAY,CAAC,GAAGR;AAAA,MAAA;AAAA,MAEpBG;AAAA,IAAA;AAAA,IAED,SAAAF;AAAA,IACA,aAAAD;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAqBEO,IAAU,CAAC;AAAA,EAChB,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAV;AACD,MAEE,gBAAAG,EAACQ,GAAA,EACA,UAAA,gBAAAR;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,oBAAoBE,CAAY,EAAE;AAAA,MACpC,EAAE,CAACF,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAACG,EAAA;AAAA,IAAM;AAAA,IAEvC,OAAO,EAAE,OAAAA,GAAO,QAAAC,EAAA;AAAA,IAEf,UAAAV;AAAA,EAAA;AAAA,GAEH,GAIIY,IAAO,CAAC,EAAE,UAAAZ,QACR,gBAAAG,EAAC,MAAA,EAAG,WAAWG,EAAE,MAAO,UAAAN,GAAS,GAOnCa,IAAS,CAAC;AAAA,EACf,YAAAC;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,GAKEe,IAAS,CAAC;AAAA,EACf,YAAAD;AAAA,EACA,UAAAd;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWE,EAAWC,EAAE,QAAQ;AAAA,MAC/B,CAACA,EAAE,qBAAqB,CAAC,GAAGQ;AAAA,IAAA,CAC5B;AAAA,IACA,GAAGZ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKJH,EAAK,cAAc;AACnBU,EAAQ,cAAc;AACtBK,EAAK,cAAc;AACnBC,EAAO,cAAc;AACrBE,EAAO,cAAc;AAErB,MAAMC,IAAW,EAAE,MAAAnB,GAAM,cAAAoB,GAAc,SAAAV,GAAS,MAAAK,GAAM,QAAAC,GAAQ,QAAAE,GAAQ,UAAAG,EAAA;"}

package/dist/components/dropdown/list-item/custom.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface ListItemCustomProps {
+    children: ReactNode;
+}
+declare const ListItemCustom: {
+    ({ children }: ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemCustomProps };
+export { ListItemCustom };

package/dist/components/dropdown/list-item/custom.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "classnames";
+import m from "./styles.module.css.js";
+const r = ({ children: s }) => /* @__PURE__ */ t("li", { className: o(m["list-item"], m.custom), children: s });
+r.displayName = "Dropdown.ListItem.Custom";
+export {
+  r as ListItemCustom
+};
+//# sourceMappingURL=custom.js.map

package/dist/components/dropdown/list-item/custom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom.js","sources":["../../../../src/components/dropdown/list-item/custom.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport s from './styles.module.css'\n\ninterface ListItemCustomProps {\n\tchildren: ReactNode\n}\n\nconst ListItemCustom = ({ children }: ListItemCustomProps) => {\n\treturn <li className={classNames(s['list-item'], s.custom)}>{children}</li>\n}\n\nListItemCustom.displayName = 'Dropdown.ListItem.Custom'\n\nexport type { ListItemCustomProps }\nexport { ListItemCustom }\n"],"names":["ListItemCustom","children","jsx","classNames","s"],"mappings":";;;AAQA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,QAClB,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,MAAM,GAAI,UAAAH,EAAA,CAAS;AAGvED,EAAe,cAAc;"}

package/dist/components/dropdown/list-item/index.d.ts

@@ -0,0 +1,19 @@
+declare const ListItem: {
+    Interactive: {
+        ({ text, color, icon, isLoading, trailingIcon, ...rest }: import('./interactive').ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ text, ...rest }: import('./title').ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (props: import('./separator').ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Custom: {
+        ({ children }: import('./custom').ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { ListItem };

package/dist/components/dropdown/list-item/index.js

@@ -0,0 +1,14 @@
+import { ListItemInteractive as t } from "./interactive.js";
+import { ListItemTitle as m } from "./title.js";
+import { ListItemSeparator as r } from "./separator.js";
+import { ListItemCustom as e } from "./custom.js";
+const I = {
+  Interactive: t,
+  Title: m,
+  Separator: r,
+  Custom: e
+};
+export {
+  I as ListItem
+};
+//# sourceMappingURL=index.js.map

package/dist/components/dropdown/list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/list-item/index.tsx"],"sourcesContent":["import { ListItemInteractive } from './interactive'\nimport { ListItemTitle } from './title'\nimport { ListItemSeparator } from './separator'\nimport { ListItemCustom } from './custom'\n\nconst ListItem = {\n\tInteractive: ListItemInteractive,\n\tTitle: ListItemTitle,\n\tSeparator: ListItemSeparator,\n\tCustom: ListItemCustom,\n}\n\nexport { ListItem }\n"],"names":["ListItem","ListItemInteractive","ListItemTitle","ListItemSeparator","ListItemCustom"],"mappings":";;;;AAKA,MAAMA,IAAW;AAAA,EAChB,aAAaC;AAAA,EACb,OAAOC;AAAA,EACP,WAAWC;AAAA,EACX,QAAQC;AACT;"}

package/dist/components/dropdown/list-item/interactive.d.ts

@@ -0,0 +1,29 @@
+import { InteractiveProps } from '../../interactive';
+interface ListItemInteractiveProps extends Omit<InteractiveProps, 'children'> {
+    /**
+     * Text to be used in the item. If no text value is defined, an error will be thrown.
+     */
+    text: string;
+    /**
+     * Color applied to the text and (optional) icons.
+     */
+    color?: 'action' | 'critical';
+    /**
+     * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    icon?: string;
+    /**
+     * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    trailingIcon?: string;
+    /**
+     * Controls if the item is in “loading” state. When in this state, the item is not actually interactive, but you can pass the other expected arguments for the item (they’re simply ignored).
+     */
+    isLoading?: boolean;
+}
+declare const ListItemInteractive: {
+    ({ text, color, icon, isLoading, trailingIcon, ...rest }: ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemInteractiveProps };
+export { ListItemInteractive };

package/dist/components/dropdown/list-item/interactive.js

@@ -0,0 +1,49 @@
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import t from "classnames";
+import { FlightIcon as a } from "../../flight-icon/index.js";
+import { Interactive as d } from "../../interactive/index.js";
+import e from "./styles.module.css.js";
+const v = ({
+  text: r,
+  color: m = "action",
+  icon: c,
+  isLoading: l,
+  trailingIcon: n,
+  ...o
+}) => /* @__PURE__ */ i(
+  "li",
+  {
+    className: t(e["list-item"], e.interactive, e[`color-${m}`]),
+    children: l ? /* @__PURE__ */ s("div", { className: e["loading-wrapper"], children: [
+      /* @__PURE__ */ i(
+        a,
+        {
+          name: "loading",
+          className: t(e["interactive-icon"], e.leading)
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: t(e["interactive-text"], e["text-regular"]), children: r })
+    ] }) : /* @__PURE__ */ s(d, { ...o, children: [
+      c && /* @__PURE__ */ i(
+        a,
+        {
+          name: c,
+          className: t(e["interactive-icon"], e.leading)
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: t(e["interactive-text"], e["text-large"]), children: r }),
+      n && /* @__PURE__ */ i(
+        a,
+        {
+          name: n,
+          className: t(e["interactive-icon"], e.trailing)
+        }
+      )
+    ] })
+  }
+);
+v.displayName = "Dropdown.ListItem.Interactive";
+export {
+  v as ListItemInteractive
+};
+//# sourceMappingURL=interactive.js.map

package/dist/components/dropdown/list-item/interactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.js","sources":["../../../../src/components/dropdown/list-item/interactive.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { FlightIcon } from '../../flight-icon'\nimport { Interactive, type InteractiveProps } from '../../interactive'\nimport s from './styles.module.css'\n\ninterface ListItemInteractiveProps extends Omit<InteractiveProps, 'children'> {\n\t/**\n\t * Text to be used in the item. If no text value is defined, an error will be thrown.\n\t */\n\ttext: string\n\t/**\n\t * Color applied to the text and (optional) icons.\n\t */\n\tcolor?: 'action' | 'critical'\n\t/**\n\t * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ticon?: string\n\t/**\n\t * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ttrailingIcon?: string\n\t/**\n\t * Controls if the item is in “loading” state. When in this state, the item is not actually interactive, but you can pass the other expected arguments for the item (they’re simply ignored).\n\t */\n\tisLoading?: boolean\n}\n\nconst ListItemInteractive = ({\n\ttext,\n\tcolor = 'action',\n\ticon,\n\tisLoading,\n\ttrailingIcon,\n\t...rest\n}: ListItemInteractiveProps) => {\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(s['list-item'], s.interactive, s[`color-${color}`])}\n\t\t>\n\t\t\t{isLoading ? (\n\t\t\t\t<div className={s['loading-wrapper']}>\n\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\tname=\"loading\"\n\t\t\t\t\t\tclassName={classNames(s['interactive-icon'], s.leading)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className={classNames(s['interactive-text'], s['text-regular'])}>\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<Interactive {...rest}>\n\t\t\t\t\t{icon && (\n\t\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\t\tname={icon}\n\t\t\t\t\t\t\tclassName={classNames(s['interactive-icon'], s.leading)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className={classNames(s['interactive-text'], s['text-large'])}>\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</div>\n\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\t\tname={trailingIcon}\n\t\t\t\t\t\t\tclassName={classNames(s['interactive-icon'], s.trailing)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</Interactive>\n\t\t\t)}\n\t\t</li>\n\t)\n}\n\nListItemInteractive.displayName = 'Dropdown.ListItem.Interactive'\n\nexport type { ListItemInteractiveProps }\nexport { ListItemInteractive }\n"],"names":["ListItemInteractive","text","color","icon","isLoading","trailingIcon","rest","jsx","classNames","s","jsxs","FlightIcon","Interactive"],"mappings":";;;;;AA4BA,MAAMA,IAAsB,CAAC;AAAA,EAC5B,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,aAAaA,EAAE,SAASP,CAAK,EAAE,CAAC;AAAA,IAEvE,cACA,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAE,iBAAiB,GAClC,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,WAAWH,EAAWC,EAAE,kBAAkB,GAAGA,EAAE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvD,gBAAAF,EAAC,OAAA,EAAI,WAAWC,EAAWC,EAAE,kBAAkB,GAAGA,EAAE,cAAc,CAAC,GACjE,UAAAR,EAAA,CACF;AAAA,IAAA,EAAA,CACD,IAEA,gBAAAS,EAACE,GAAA,EAAa,GAAGN,GACf,UAAA;AAAA,MAAAH,KACA,gBAAAI;AAAA,QAACI;AAAA,QAAA;AAAA,UACA,MAAMR;AAAA,UACN,WAAWK,EAAWC,EAAE,kBAAkB,GAAGA,EAAE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAGxD,gBAAAF,EAAC,OAAA,EAAI,WAAWC,EAAWC,EAAE,kBAAkB,GAAGA,EAAE,YAAY,CAAC,GAC/D,UAAAR,EAAA,CACF;AAAA,MACCI,KACA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACA,MAAMN;AAAA,UACN,WAAWG,EAAWC,EAAE,kBAAkB,GAAGA,EAAE,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACxD,EAAA,CAEF;AAAA,EAAA;AAAA;AAMJT,EAAoB,cAAc;"}

package/dist/components/dropdown/list-item/separator.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+type ListItemSeparatorProps = Omit<HTMLAttributes<HTMLLIElement>, 'className' | 'aria-hidden' | 'role'>;
+declare const ListItemSeparator: {
+    (props: ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemSeparatorProps };
+export { ListItemSeparator };

package/dist/components/dropdown/list-item/separator.js

@@ -0,0 +1,17 @@
+import { jsx as a } from "react/jsx-runtime";
+import e from "classnames";
+import r from "./styles.module.css.js";
+const o = (t) => /* @__PURE__ */ a(
+  "li",
+  {
+    className: e(r["list-item"], r.separator),
+    "aria-hidden": "true",
+    role: "separator",
+    ...t
+  }
+);
+o.displayName = "Dropdown.ListItem.Separator";
+export {
+  o as ListItemSeparator
+};
+//# sourceMappingURL=separator.js.map

package/dist/components/dropdown/list-item/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sources":["../../../../src/components/dropdown/list-item/separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ntype ListItemSeparatorProps = Omit<\n\tHTMLAttributes<HTMLLIElement>,\n\t'className' | 'aria-hidden' | 'role'\n>\n\nconst ListItemSeparator = (props: ListItemSeparatorProps) => {\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(s['list-item'], s.separator)}\n\t\t\taria-hidden=\"true\"\n\t\t\trole=\"separator\"\n\t\t\t{...props}\n\t\t></li>\n\t)\n}\n\nListItemSeparator.displayName = 'Dropdown.ListItem.Separator'\n\nexport type { ListItemSeparatorProps }\nexport { ListItemSeparator }\n"],"names":["ListItemSeparator","props","jsx","classNames","s"],"mappings":";;;AASA,MAAMA,IAAoB,CAACC,MAEzB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,SAAS;AAAA,IACjD,eAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAGH;AAAA,EAAA;AAAA;AAKPD,EAAkB,cAAc;"}

package/dist/components/dropdown/list-item/styles.module.css

@@ -0,0 +1,222 @@
+.list-item[disabled],
+.list-item[disabled]:hover {
+	color: var(--mds-color-foreground-disabled);
+	cursor: not-allowed;
+}
+
+.interactive {
+	position: relative;
+	min-height: 36px;
+	isolation: isolate; /* used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container) */
+
+	/* need to reset a few extra things to make the button visually appear the same as the link */
+	& button {
+		width: 100%;
+		background-color: transparent;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+
+	/* shared styles for links and buttons */
+	& a,
+	& button {
+		display: flex;
+		align-items: flex-start;
+		padding: 7px 9px 7px 15px; /* notice: we're subtracting 1px because of the transparent border */
+		text-decoration: none;
+		border: 1px solid transparent; /* because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height */
+		outline-style: solid; /* used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656) */
+		outline-color: transparent;
+
+		/* this is used for the left "hover" indicator */
+		&::before {
+			position: absolute;
+			top: 6px;
+			bottom: 6px;
+			left: 4px;
+			z-index: -1;
+			width: 2px;
+			border-radius: 1px;
+			content: '';
+		}
+
+		/* Notice: this is used for the active/focus states which have very specific positions
+		and also has a background color, so we can't use the existing focus-ring mixins */
+		&::after {
+			position: absolute;
+			top: 0;
+			right: 4px;
+			bottom: 0;
+			left: 10px;
+			z-index: -1;
+			border-radius: 5px;
+			content: '';
+		}
+
+		/* Notice: to avoid too much duplication we define two local CSS variables
+	  and define their values in the color variants below */
+
+		&:hover {
+			color: var(--current-color-hover);
+
+			&::before {
+				background-color: currentColor;
+			}
+		}
+
+		/* default focus for browsers that still rely on ":focus" */
+		&:focus {
+			color: var(--current-color-focus);
+
+			&::after {
+				left: 4px;
+				box-shadow: var(--current-focus-ring-box-shadow);
+			}
+		}
+
+		/* undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles */
+		&:focus:not(:focus-visible) {
+			&::after {
+				background-color: transparent;
+				box-shadow: none;
+			}
+		}
+
+		/* set focus for browsers that support ":focus-visible" */
+		&:focus-visible {
+			color: var(--current-color-focus);
+
+			&::after {
+				left: 4px;
+				box-shadow: var(--current-focus-ring-box-shadow);
+			}
+		}
+
+		/* remove the focus ring on "active + focused" state (by design) */
+		&:focus:active,
+		&:focus-visible:active {
+			&::after {
+				left: 10px;
+				background-color: var(--current-background-color);
+				box-shadow: none;
+			}
+		}
+
+		&:active {
+			color: var(--current-color-active);
+
+			&::before {
+				background-color: currentColor;
+			}
+		}
+	}
+}
+
+.color-action {
+	& a,
+	& button {
+		color: var(--mds-color-foreground-primary);
+
+		/* assign the values to the local CSS variables used above */
+		--current-color-hover: var(--mds-color-foreground-action-hover);
+		--current-color-focus: var(--mds-color-foreground-action-active);
+		--current-color-active: var(--mds-color-foreground-action-active);
+
+		&::after {
+			--current-focus-ring-box-shadow: var(
+				--mds-focus-ring-action-box-shadow
+			);
+		}
+	}
+}
+
+.color-critical {
+	& a,
+	& button {
+		color: var(--mds-color-foreground-critical);
+
+		/* assign the values to the local CSS variables used above */
+		--current-color-hover: var(--mds-color-palette-red-300);
+		--current-color-focus: var(--mds-color-palette-red-400);
+		--current-color-active: var(--mds-color-palette-red-400);
+
+		&::after {
+			--current-background-color: var(--mds-color-surface-critical);
+			--current-focus-ring-box-shadow: var(
+				--mds-focus-ring-critical-box-shadow
+			);
+		}
+	}
+}
+
+.custom {
+	display: flex;
+	align-items: flex-start;
+	padding: 7px 9px 7px 15px;
+}
+
+.interactive-icon {
+	display: block;
+	margin-top: 2px;
+
+	&.leading {
+		margin-right: 8px;
+	}
+
+	&.trailing {
+		margin-left: 8px;
+	}
+}
+
+.interactive-text {
+	flex: 1;
+	text-align: left;
+}
+
+.loading-wrapper {
+	display: flex;
+	align-items: center;
+	padding: 8px 10px 8px 16px;
+
+	& .interactive-text {
+		color: var(--mds-color-foreground-faint);
+	}
+
+	& .interactive-icon {
+		color: var(--mds-color-foreground-primary);
+	}
+}
+
+.text-regular {
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-regular from global;
+}
+
+.text-large {
+	composes: mds-typography-legacy-body-200 from global;
+	composes: mds-typography-font-weight-medium from global;
+}
+
+.separator {
+	position: relative;
+	width: 100%;
+	height: 4px;
+
+	&::before {
+		position: absolute;
+		right: 6px;
+		bottom: 0;
+		left: 6px;
+		border-bottom: 1px solid var(--mds-color-border-primary);
+		content: '';
+	}
+}
+
+.title {
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-semibold from global;
+	padding: 10px 16px 4px;
+	color: var(--mds-color-foreground-strong);
+}

package/dist/components/dropdown/list-item/styles.module.css.js

@@ -0,0 +1,26 @@
+const t = "interactive__IkSoP", e = "custom__lrM-c", i = "leading__uGWjP", a = "trailing__46J03", o = "separator__cop56", r = "title__XkdBJ mds-typography-legacy-body-100 mds-typography-font-weight-semibold", c = {
+  "list-item": "list-item__p6gnG",
+  interactive: t,
+  "color-action": "color-action__zG8cO",
+  "color-critical": "color-critical__3USEd",
+  custom: e,
+  "interactive-icon": "interactive-icon__2sVuv",
+  leading: i,
+  trailing: a,
+  "interactive-text": "interactive-text__9tKHU",
+  "loading-wrapper": "loading-wrapper__RMG87",
+  "text-regular": "text-regular__nmwqr mds-typography-legacy-body-100 mds-typography-font-weight-regular",
+  "text-large": "text-large__gU2cx mds-typography-legacy-body-200 mds-typography-font-weight-medium",
+  separator: o,
+  title: r
+};
+export {
+  e as custom,
+  c as default,
+  t as interactive,
+  i as leading,
+  o as separator,
+  r as title,
+  a as trailing
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/dropdown/list-item/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/dropdown/list-item/title.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+interface ListItemTitleProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    text: string;
+}
+declare const ListItemTitle: {
+    ({ text, ...rest }: ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemTitleProps };
+export { ListItemTitle };

package/dist/components/dropdown/list-item/title.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import s from "classnames";
+import t from "./styles.module.css.js";
+const r = ({ text: i, ...e }) => /* @__PURE__ */ m("li", { className: s(t["list-item"], t.title), ...e, children: i });
+r.displayName = "Dropdown.ListItem.Title";
+export {
+  r as ListItemTitle
+};
+//# sourceMappingURL=title.js.map