@hashicorp/mds-react 0.9.3 → 0.9.4

package/components/code-block/code-lines/utils/split-jsx-into-lines.js

@@ -0,0 +1,31 @@
+import { Children as f } from "react";
+function h(u) {
+  const i = f.toArray(u).map((e) => typeof e == "object" && "props" in e && e.props.className?.includes("empty-line") ? `
+` : e);
+  return i.reduce(
+    (e, n, o) => {
+      const s = o === i.length - 1, t = n === `
+`, r = n !== `
+`;
+      t && e.consecutiveNewlines++;
+      const p = t && s, N = e.consecutiveNewlines > 0;
+      if ((r || p) && N) {
+        e.currentLine.length > 0 && (e.lines.push(e.currentLine), e.currentLine = []);
+        for (let l = 1; l < e.consecutiveNewlines; l++)
+          e.lines.push("");
+        e.consecutiveNewlines = 0;
+      }
+      return r && (e.currentLine.push(n), s && e.lines.push(e.currentLine)), e;
+    },
+    {
+      lines: [],
+      currentLine: [],
+      consecutiveNewlines: 1
+      // Start at 1 to handle leading newlines
+    }
+  ).lines;
+}
+export {
+  h as default
+};
+//# sourceMappingURL=split-jsx-into-lines.js.map

package/components/code-block/code-lines/utils/split-jsx-into-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-jsx-into-lines.js","sources":["../../../../../src/components/code-block/code-lines/utils/split-jsx-into-lines.ts"],"sourcesContent":["import { Children, type ReactNode } from 'react'\n\n/**\n * Given an array of React children,\n * split the array on newlines, grouping consecutive\n * non-newline tokens in individual line elements,\n * and return an array of React <span> elements,\n * each of which will contain a single line.\n *\n * Note that JSX tokens should not be multi-line,\n * ie, all newline characters should be surfaced\n * to the top level rather than nested in syntax\n * highlighting tokens (otherwise the line-by-line\n * markup we render would be invalid). We have\n * a rehype plugin we include with our markdown defaults\n * to ensure newlines are surfaced in this way.\n *\n * @param {*} codeJsx Array of JSX elements, some of which may be newline strings\n * @returns Array of JSX <span> elements representing individual lines\n */\nfunction splitJsxIntoLines(codeJsx: React.ReactNode | React.ReactNode[]) {\n\tconst linesArray = Children.toArray(codeJsx)\n\t/**\n\t * Many newlines take the form of a literal newline string, `\\n`.\n\t * However, some newlines take different forms. We expect these to be tagged\n\t * with an `empty-line` className by our rehype code plugins.\n\t * Here we detect the latter types of newline, and convert them to the former.\n\t */\n\tconst withNormalizedNewlines = linesArray.map((token) => {\n\t\t// If our token has an `empty-line` className, use a literal newline\n\t\t// rather than the token itself (which would render, but with zero height)\n\t\tif (typeof token === 'object' && 'props' in token) {\n\t\t\tif (token.props.className?.includes('empty-line')) {\n\t\t\t\treturn '\\n'\n\t\t\t}\n\t\t}\n\t\t// Otherwise, return the token unmodified\n\t\treturn token\n\t})\n\t// Filter out any surfaces newlines, that are \"in between\"\n\t// other lines of code. Special exceptions should be made for:\n\t// 1. newlines at start or end of array - should be rendered as blank lines\n\t// 2. consecutive newlines - \"n\" consecutive newlines should be rendered\n\t//    as \"n - 1\" blank lines.\n\tconst accumulatedLines = withNormalizedNewlines.reduce(\n\t\t(acc, token, idx) => {\n\t\t\tconst isLastLine = idx === withNormalizedNewlines.length - 1\n\t\t\tconst isNewline = token === '\\n'\n\t\t\tconst isInlineToken = token !== '\\n'\n\t\t\t// For newlines, increment the consecutive newline counter\n\t\t\tif (isNewline) acc.consecutiveNewlines++\n\t\t\t// If this token is an inline token, and we have\n\t\t\t// pending newlines, then start a new line,\n\t\t\t// adding blank lines for consecutive newlines as needed\n\t\t\tconst isFinalNewline = isNewline && isLastLine\n\t\t\tconst hasNewlines = acc.consecutiveNewlines > 0\n\t\t\tconst needsNewlines = (isInlineToken || isFinalNewline) && hasNewlines\n\t\t\tif (needsNewlines) {\n\t\t\t\t// If there are any tokens in the current line, add them as a new line\n\t\t\t\tif (acc.currentLine.length > 0) {\n\t\t\t\t\tacc.lines.push(acc.currentLine)\n\t\t\t\t\tacc.currentLine = []\n\t\t\t\t}\n\t\t\t\t// Add blank lines for each consecutive newline, then reset the counter\n\t\t\t\tfor (let i = 1; i < acc.consecutiveNewlines; i++) {\n\t\t\t\t\tacc.lines.push('')\n\t\t\t\t}\n\t\t\t\tacc.consecutiveNewlines = 0\n\t\t\t}\n\t\t\t// If this token is an inline token,\n\t\t\t// append it to the current line\n\t\t\tif (isInlineToken) {\n\t\t\t\tacc.currentLine.push(token)\n\t\t\t\t// If this is the last line,\n\t\t\t\t// then ensure the current line\n\t\t\t\t// has been pushed to the lines array\n\t\t\t\tif (isLastLine) acc.lines.push(acc.currentLine)\n\t\t\t}\n\t\t\treturn acc\n\t\t},\n\t\t{\n\t\t\tlines: [] as ReactNode[],\n\t\t\tcurrentLine: [] as ReactNode[],\n\t\t\tconsecutiveNewlines: 1, // Start at 1 to handle leading newlines\n\t\t}\n\t)\n\treturn accumulatedLines.lines\n}\n\nexport default splitJsxIntoLines\n"],"names":["splitJsxIntoLines","codeJsx","withNormalizedNewlines","Children","token","acc","idx","isLastLine","isNewline","isInlineToken","isFinalNewline","hasNewlines","i"],"mappings":";AAoBA,SAASA,EAAkBC,GAA8C;AAQxE,QAAMC,IAPaC,EAAS,QAAQF,CAAO,EAOD,IAAI,CAACG,MAG1C,OAAOA,KAAU,YAAY,WAAWA,KACvCA,EAAM,MAAM,WAAW,SAAS,YAAY,IACxC;AAAA,IAIFA,CACP;AAgDD,SA1CyBF,EAAuB;AAAA,IAC/C,CAACG,GAAKD,GAAOE,MAAQ;AACpB,YAAMC,IAAaD,MAAQJ,EAAuB,SAAS,GACrDM,IAAYJ,MAAU;AAAA,GACtBK,IAAgBL,MAAU;AAAA;AAEhC,MAAII,KAAWH,EAAI;AAInB,YAAMK,IAAiBF,KAAaD,GAC9BI,IAAcN,EAAI,sBAAsB;AAE9C,WADuBI,KAAiBC,MAAmBC,GACxC;AAElB,QAAIN,EAAI,YAAY,SAAS,MAC5BA,EAAI,MAAM,KAAKA,EAAI,WAAW,GAC9BA,EAAI,cAAc,CAAA;AAGnB,iBAASO,IAAI,GAAGA,IAAIP,EAAI,qBAAqBO;AAC5C,UAAAP,EAAI,MAAM,KAAK,EAAE;AAElB,QAAAA,EAAI,sBAAsB;AAAA,MAC3B;AAGA,aAAII,MACHJ,EAAI,YAAY,KAAKD,CAAK,GAItBG,KAAYF,EAAI,MAAM,KAAKA,EAAI,WAAW,IAExCA;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO,CAAA;AAAA,MACP,aAAa,CAAA;AAAA,MACb,qBAAqB;AAAA;AAAA,IAAA;AAAA,EACtB,EAEuB;AACzB;"}

package/components/code-block/hidden-copy-content/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as s, useState as i, useEffect as l } from "react";
+const f = ({ code: e }, n) => {
+  const [r, o] = i(!1);
+  return l(() => {
+    o(!0);
+  }, []), r ? /* @__PURE__ */ t("pre", { ref: n, style: { display: "none" }, children: typeof e == "string" ? /* @__PURE__ */ t("span", { dangerouslySetInnerHTML: { __html: e } }) : e }) : null;
+}, C = s(f);
+export {
+  C as HiddenCopyContent
+};
+//# sourceMappingURL=index.js.map

package/components/code-block/hidden-copy-content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/code-block/hidden-copy-content/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useState, type ReactNode } from 'react'\n\n/**\n * This hidden element acts solely as a container\n * that we can fetch textContent to copy to clipboard.\n * This allows to ignore the \"how will we copy this cleanly\"\n * concern when splitting code into lines, and adding\n * line numbers and so on in other parts of code-block.\n */\nconst HiddenCopyContentComponent = (\n\t{ code }: { code: ReactNode },\n\tcopyRef: React.ForwardedRef<HTMLPreElement>\n) => {\n\tconst [isClient, setIsClient] = useState(false)\n\n\tuseEffect(() => {\n\t\tsetIsClient(true)\n\t}, [])\n\n\t/**\n\t * We are avoiding SSR here as this component is only used for the copy-to-clipboard interaction, and so rendering\n\t * the text content of the code introduces duplicate markup and some difficult-to-debug hydration mismatches.\n\t * By the time someone interacts with the copy-to-clipboard functionality, this should be rendered.\n\t */\n\tif (!isClient) return null\n\n\treturn (\n\t\t<pre ref={copyRef} style={{ display: 'none' }}>\n\t\t\t{typeof code === 'string' ? (\n\t\t\t\t<span dangerouslySetInnerHTML={{ __html: code }} />\n\t\t\t) : (\n\t\t\t\tcode\n\t\t\t)}\n\t\t</pre>\n\t)\n}\n\nconst HiddenCopyContent = forwardRef(HiddenCopyContentComponent)\n\nexport { HiddenCopyContent }\n"],"names":["HiddenCopyContentComponent","code","copyRef","isClient","setIsClient","useState","useEffect","jsx"],"mappings":";;;AAeC,MAAAA,IAAgC,CAAA,EAAA,MAAAC,EAAS,GAAAC,MAAK;AAE9C,QAAA,CAAAC,GAAgBC,CAAA,IAAAC,EAAA,EAAA;AAWhB,SAVCC,EAAA,MAAY;AACb,IAAAF,EAAK,EAAA;AAAA,EAOL,GAAA,CAAI,CAAC,OAWN,gBAAAG,EAAA,OAAA,EAAA,KAAAL,GAAA,OAAA,EAAA,SAAA,OAAA,GAAA,UAAA,OAAAD,KAAA,WAAA,gBAAAM,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAAN,EAAA,EAAA,CAAA,IAAAA,EAAA,CAAA;AAEA;"}

package/components/code-block/index.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useRef as h, useId as x } from "react";
+import N from "classnames";
+import { Text as a } from "../text/index.js";
+import { CodeLines as b } from "./code-lines/index.js";
+import { HiddenCopyContent as k } from "./hidden-copy-content/index.js";
+import B from "./utils/process-snippet.js";
+import { CopyButton as g } from "../../patterns/copy-button/index.js";
+import e from "./code-block.module.scss.js";
+const w = ({
+  title: r,
+  description: s,
+  language: c,
+  value: i,
+  isStandalone: p = !0,
+  hasCopyButton: f,
+  hasLineNumbers: n = !0,
+  highlightLines: u,
+  maxHeight: y = "auto",
+  className: C
+}) => {
+  const d = h(null), l = x();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: N(
+        e["code-block"],
+        e.dark,
+        {
+          [e[`language-${c}`]]: c,
+          [e["is-standalone"]]: p,
+          [e["line-numbers"]]: n
+        },
+        C
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: e.header, children: [
+          r && /* @__PURE__ */ o(
+            a.HDSBody,
+            {
+              size: "200",
+              tag: "p",
+              weight: "semibold",
+              className: e.title,
+              children: r
+            }
+          ),
+          s && /* @__PURE__ */ o(a.HDSBody, { tag: "p", size: "100", className: e.description, children: s })
+        ] }),
+        /* @__PURE__ */ t("div", { className: e.body, children: [
+          /* @__PURE__ */ o(k, { code: i, ref: d }),
+          /* @__PURE__ */ o("pre", { className: e.code, id: l, style: { maxHeight: y }, children: /* @__PURE__ */ o("code", { children: /* @__PURE__ */ o(
+            b,
+            {
+              value: i,
+              highlightLines: u,
+              hasLineNumbers: n
+            }
+          ) }) }),
+          f && /* @__PURE__ */ o(
+            g,
+            {
+              className: e["copy-button"],
+              "aria-describedby": l,
+              getTextFn: () => {
+                const m = d.current?.textContent;
+                if (!m)
+                  throw new Error(
+                    "`code-block` - Couldn't find text content to copy."
+                  );
+                return B(m);
+              },
+              text: "Copy",
+              isIconOnly: !0,
+              size: "small"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+w.displayName = "CodeBlock";
+export {
+  w as CodeBlock
+};
+//# sourceMappingURL=index.js.map

package/components/code-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/code-block/index.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useRef, type ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Text } from '../text'\nimport { CodeLines } from './code-lines'\nimport { HiddenCopyContent } from './hidden-copy-content'\nimport processSnippet from './utils/process-snippet'\nimport { CopyButton } from '../../patterns/copy-button'\nimport s from './code-block.module.scss'\n\n/**\n * ALERT: This component is a combination of logic from the official HashiCorp\n * Design System CodeBlock component and the CodeBlock component written by the\n * Web Presence Team. The official component relies on client-side rendering\n * for the calculation of line-heights for line numbers, but this is something\n * we want to be able to achieve without client-side rendering.\n */\n\ninterface CodeBlockProps {\n\t/**\n\t * The text/code content for the CodeBlock. The component encodes this\n\t * argument before displaying it. Should be a pre-highlighted string\n\t * generated by Prism.js or Shiki.\n\t */\n\tvalue: ReactNode\n\n\t/**\n\t * The coding language to use for syntax highlighting. If you need\n\t * additional languages contact the Design Systems Team.\n\t */\n\tlanguage?: string\n\n\t/**\n\t * Applies rounded borders to the component. When used within another\n\t * component or when the context requires it, you can turn it off.\n\t */\n\tisStandalone?: boolean\n\n\t/**\n\t * Used to control whether a copy button for copying the code/text content\n\t * will be displayed.\n\t */\n\thasCopyButton?: boolean\n\n\t/**\n\t * Used to control display of line numbers.\n\t */\n\thasLineNumbers?: boolean\n\n\t/**\n\t * Accepts a list or range of line numbers to highlight.\n\t * (Examples: `2, 4`,`6-10`)\n\t */\n\thighlightLines?: string\n\n\t/**\n\t * Accepts any valid CSS unit. If the CodeBlock content exceeds the maximum\n\t * height a vertical scrollbar is enabled. This value applies to the code\n\t * content only and does not include the header element (title and/or description).\n\t */\n\tmaxHeight?: string\n\ttitle?: ReactNode\n\tdescription?: ReactNode\n\tclassName?: string\n}\n\nconst CodeBlock = ({\n\ttitle,\n\tdescription,\n\tlanguage,\n\tvalue,\n\tisStandalone = true,\n\thasCopyButton,\n\thasLineNumbers = true,\n\thighlightLines,\n\tmaxHeight = 'auto',\n\tclassName,\n}: CodeBlockProps) => {\n\tconst copyRef = useRef<HTMLPreElement>(null)\n\tconst preCodeId = useId()\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts['code-block'],\n\t\t\t\ts.dark,\n\t\t\t\t{\n\t\t\t\t\t[s[`language-${language}`]]: language,\n\t\t\t\t\t[s['is-standalone']]: isStandalone,\n\t\t\t\t\t[s['line-numbers']]: hasLineNumbers,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div className={s.header}>\n\t\t\t\t{title && (\n\t\t\t\t\t<Text.HDSBody\n\t\t\t\t\t\tsize=\"200\"\n\t\t\t\t\t\ttag=\"p\"\n\t\t\t\t\t\tweight=\"semibold\"\n\t\t\t\t\t\tclassName={s.title}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Text.HDSBody>\n\t\t\t\t)}\n\t\t\t\t{description && (\n\t\t\t\t\t<Text.HDSBody tag=\"p\" size=\"100\" className={s.description}>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Text.HDSBody>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className={s.body}>\n\t\t\t\t{/**\n\t\t\t\t * NOTE: ideally we'd keep the markup of this component in lockstep\n\t\t\t\t * with the markup of the Helios code block. However, we also need\n\t\t\t\t * to support \"clever\" copying of snippets, parsing out shell\n\t\t\t\t * prompt characters like `$` from output, as this is a common\n\t\t\t\t * practice in our tutorial and documentation content. So, this\n\t\t\t\t * HiddenCopyContent component is one divergence from the markup\n\t\t\t\t * of the Helios code block.\n\t\t\t\t */}\n\t\t\t\t<HiddenCopyContent code={value} ref={copyRef} />\n\t\t\t\t<pre className={s.code} id={preCodeId} style={{ maxHeight }}>\n\t\t\t\t\t<code>\n\t\t\t\t\t\t<CodeLines\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\thighlightLines={highlightLines}\n\t\t\t\t\t\t\thasLineNumbers={hasLineNumbers}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</code>\n\t\t\t\t</pre>\n\t\t\t\t{hasCopyButton && (\n\t\t\t\t\t<CopyButton\n\t\t\t\t\t\tclassName={s['copy-button']}\n\t\t\t\t\t\taria-describedby={preCodeId}\n\t\t\t\t\t\tgetTextFn={() => {\n\t\t\t\t\t\t\tconst rawSnippet = copyRef.current?.textContent\n\t\t\t\t\t\t\tif (!rawSnippet) {\n\t\t\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t\t\t\"`code-block` - Couldn't find text content to copy.\"\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn processSnippet(rawSnippet)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttext=\"Copy\"\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nCodeBlock.displayName = 'CodeBlock'\n\nexport type { CodeBlockProps }\nexport { CodeBlock }\n"],"names":["CodeBlock","title","description","language","value","isStandalone","hasCopyButton","hasLineNumbers","highlightLines","maxHeight","className","copyRef","jsxs","classNames","s","jsx","Text","HiddenCopyContent","preCodeId","CodeLines","CopyButton","rawSnippet","processSnippet"],"mappings":";;;;;;;;;;AAmEmB,MAClBA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC,IAAA;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAA;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAA;AAAA,EACD,WAAAC;AACC;AACA,QAAMC,MAAY,IAAM,SAGvB;AAAA,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE,YAAA;AAAA,QACFA,EAAA;AAAA,QAAA;AAAA,UAEC,CAACA,EAAE,YAAAX,CAAmB,EAAA,CAAA,GAAAA;AAAA,UACtB,CAACW,EAAE,eAAe,CAAA,GAAGT;AAAA,UACtB,CAAAS,EAAA,cAAA,CAAA,GAAAP;AAAA,QACA;AAAA,QACDG;AAAA,MAEA;AAAA,MAAA,UAAA;AAAA,iCAEE,EAAA,WAAAI,EAAA,QAAA,UAAA;AAAA,UAAAb,KAAM,gBAAAc;AAAA,YAALC,EAAA;AAAA,YAAA;AAAA,cAEA,MAAI;AAAA,cACJ,KAAA;AAAA,cACA,QAAA;AAAA,cAEC,WAAAF,EAAA;AAAA,cAAA,UAAAb;AAAA,YACF;AAAA,UAEA;AAAA,eAKF,gBAAAc,EAAAC,EAAA,SAAA,EAAA,KAAA,KAAA,MAAA,OAAA,WAAAF,EAAA,aAAA,UAAAZ,EAAA,CAAA;AAAA,QAAA,EAAA,CAAA;AAAA,QAWC,gBAAAU,EAAA,OAAC,EAAA,WAAAE,EAAkB,MAAM,UAAO;AAAA,UAChC,gBAAAC,EAACE,GAAI,EAAW,MAAEb,GAAU,KAAAO,EAAW,CAAA;AAAA,UAEpC,gBAAAI,EAAA,OAAA,EAAA,WAAAD,EAAA,MAAA,IAAAI,GAAA,OAAA,EAAA,WAAAT,EAAA,GAAA,UAAA,gBAAAM,EAAA,QAAA,EAAA,UAAA,gBAAAA;AAAA,YAAAI;AAAA,YAAA;AAAA,cAEA,OAAAf;AAAA,cACA,gBAAAI;AAAA,cAAA,gBAAAD;AAAA;UAIF,EAAA,CAAA,EAAA,CAAA;AAAA,UACAD,KAAC,gBAAAS;AAAA,YAAAK;AAAA,YAAA;AAAA,cAEA,WAAAN,EAAA,aAAkB;AAAA,cAClB,oBAAiBI;AAAA,cAChB,WAAM,MAAA;AACN,sBAAKG,IAAYV,EAAA,SAAA;AAChB,oBAAA,CAAAU;AAAU,wBACT,IAAA;AAAA,oBACD;AAAA,kBACD;AAED,uBAAAC,EAAAD,CAAA;AAAA,cACA;AAAA,cACA,MAAA;AAAA,cACA,YAAK;AAAA,cAAA,MAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAEF,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;AAEA;;"}

package/components/code-block/utils/parse-highlighted-lines.js

@@ -0,0 +1,39 @@
+function g(e) {
+  if (typeof e > "u" || e === !1 || e === "")
+    return [];
+  if (typeof e != "string")
+    throw new Error(
+      `The highlight prop must be a string. Received a value of type "${typeof e}" instead.`
+    );
+  if (!/^[-,0-9\s]+$/.test(e))
+    throw new Error(
+      `The highlight prop must be a comma-separated list of single integers or ranges with a single dash between two integers. Found invalid characters: "${e}".`
+    );
+  return e.split(",").reduce((t, r) => t.concat(i(r)), []);
+}
+function i(e) {
+  const s = e.split("-");
+  if (s.length > 2)
+    throw new Error(
+      `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value with multiple dashes: "${e}".`
+    );
+  if (s.length == 1) {
+    const a = parseInt(e);
+    if (a !== a)
+      throw new Error(
+        `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value that parsed to NaN: "${e === "" ? "<empty string>" : e}".`
+      );
+    return [a];
+  }
+  const [t, r] = s.map((a) => parseInt(a));
+  if (t !== t || r !== r)
+    throw new Error(
+      `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a range that produced a NaN: "${e}".`
+    );
+  const h = r - t + 1;
+  return [...Array(h).keys()].map((a) => a + t);
+}
+export {
+  g as default
+};
+//# sourceMappingURL=parse-highlighted-lines.js.map

package/components/code-block/utils/parse-highlighted-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-highlighted-lines.js","sources":["../../../../src/components/code-block/utils/parse-highlighted-lines.ts"],"sourcesContent":["function parseHighlightedLines(string?: string | boolean) {\n\tif (typeof string == 'undefined' || string === false || string === '') {\n\t\treturn []\n\t}\n\n\tif (typeof string !== 'string') {\n\t\tthrow new Error(\n\t\t\t`The highlight prop must be a string. Received a value of type \"${typeof string}\" instead.`\n\t\t)\n\t}\n\n\tconst hasValidChars = /^[-,0-9\\s]+$/.test(string)\n\tif (!hasValidChars) {\n\t\tthrow new Error(\n\t\t\t`The highlight prop must be a comma-separated list of single integers or ranges with a single dash between two integers. Found invalid characters: \"${string}\".`\n\t\t)\n\t}\n\n\tconst parts = string.split(',')\n\treturn parts.reduce((acc, part) => {\n\t\treturn acc.concat(parsePart(part))\n\t}, [] as number[])\n}\n\nfunction parsePart(string: string): number[] {\n\tconst dashParts = string.split('-')\n\tif (dashParts.length > 2) {\n\t\tthrow new Error(\n\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value with multiple dashes: \"${string}\".`\n\t\t)\n\t}\n\t// Single integers are easy, just parse and return\n\tconst isSingle = dashParts.length == 1\n\tif (isSingle) {\n\t\tconst parsedInt = parseInt(string)\n\t\tconst isNaN = parsedInt !== parsedInt\n\t\tif (isNaN) {\n\t\t\tthrow new Error(\n\t\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value that parsed to NaN: \"${\n\t\t\t\t\tstring === '' ? '<empty string>' : string\n\t\t\t\t}\".`\n\t\t\t)\n\t\t}\n\t\treturn [parsedInt]\n\t}\n\t// Ranges require a little more logic\n\tconst [startVal, endVal] = dashParts.map((v) => parseInt(v))\n\tconst hasNaNStart = startVal !== startVal\n\tconst hasNaNEnd = endVal !== endVal\n\tif (hasNaNStart || hasNaNEnd) {\n\t\tthrow new Error(\n\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a range that produced a NaN: \"${string}\".`\n\t\t)\n\t}\n\tconst length = endVal - startVal + 1\n\tconst values = [...Array(length).keys()].map((int) => int + startVal)\n\treturn values\n}\n\nexport default parseHighlightedLines\n"],"names":["parseHighlightedLines","string","acc","part","parsePart","dashParts","parsedInt","startVal","endVal","v","length","int"],"mappings":"AAAA,SAASA,EAAsBC,GAA2B;AACzD,MAAI,OAAOA,IAAU,OAAeA,MAAW,MAASA,MAAW;AAClE,WAAO,CAAA;AAGR,MAAI,OAAOA,KAAW;AACrB,UAAM,IAAI;AAAA,MACT,kEAAkE,OAAOA,CAAM;AAAA,IAAA;AAKjF,MAAI,CADkB,eAAe,KAAKA,CAAM;AAE/C,UAAM,IAAI;AAAA,MACT,sJAAsJA,CAAM;AAAA,IAAA;AAK9J,SADcA,EAAO,MAAM,GAAG,EACjB,OAAO,CAACC,GAAKC,MAClBD,EAAI,OAAOE,EAAUD,CAAI,CAAC,GAC/B,CAAA,CAAc;AAClB;AAEA,SAASC,EAAUH,GAA0B;AAC5C,QAAMI,IAAYJ,EAAO,MAAM,GAAG;AAClC,MAAII,EAAU,SAAS;AACtB,UAAM,IAAI;AAAA,MACT,8KAA8KJ,CAAM;AAAA,IAAA;AAKtL,MADiBI,EAAU,UAAU,GACvB;AACb,UAAMC,IAAY,SAASL,CAAM;AAEjC,QADcK,MAAcA;AAE3B,YAAM,IAAI;AAAA,QACT,4KACCL,MAAW,KAAK,mBAAmBA,CACpC;AAAA,MAAA;AAGF,WAAO,CAACK,CAAS;AAAA,EAClB;AAEA,QAAM,CAACC,GAAUC,CAAM,IAAIH,EAAU,IAAI,CAACI,MAAM,SAASA,CAAC,CAAC;AAG3D,MAFoBF,MAAaA,KACfC,MAAWA;AAE5B,UAAM,IAAI;AAAA,MACT,6KAA6KP,CAAM;AAAA,IAAA;AAGrL,QAAMS,IAASF,IAASD,IAAW;AAEnC,SADe,CAAC,GAAG,MAAMG,CAAM,EAAE,MAAM,EAAE,IAAI,CAACC,MAAQA,IAAMJ,CAAQ;AAErE;"}

package/components/code-block/utils/process-snippet.js

@@ -0,0 +1,20 @@
+import { escape as l, split as o } from "./shellwords.js";
+function m(t) {
+  return t.split(`
+`)[0].startsWith("$ ") ? r(t) : t;
+}
+function r(t) {
+  const e = t.split(`
+`), i = e[0];
+  if (i.endsWith("\\") || i.endsWith("EOF")) {
+    const n = l(t).replace("\\$\\", "");
+    return o(n).join(" ");
+  }
+  const s = /^\$ /;
+  return e.filter((n) => n.match(s)).map((n) => n.replace(s, "")).join(`
+`);
+}
+export {
+  m as default
+};
+//# sourceMappingURL=process-snippet.js.map

package/components/code-block/utils/process-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-snippet.js","sources":["../../../../src/components/code-block/utils/process-snippet.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { escape, split } from './shellwords'\n\n/**\n * Given a snippet of code,\n * process it based on the detected language,\n * returning a modified snippet that has is\n * more suited to direct execution.\n */\nfunction processSnippet(snippet: string): string {\n\tconst isShell = snippet.split('\\n')[0].startsWith('$ ')\n\treturn isShell ? parseShellSnippet(snippet) : snippet\n}\n\n/**\n * Given a snippet of shell code that begins with `$ `,\n * return the snippet with all non-executable shell-symbols removed\n */\nfunction parseShellSnippet(snippet: string): string {\n\tconst lines = snippet.split('\\n')\n\t/**\n\t * Handle multi-line snippets.\n\t *\n\t * TODO: ideally we would detect many multi-line commands throughout\n\t * a snippet. We could potentially build some complex string-based logic to\n\t * do this... but it might be more efficient and effective to instead\n\t * process the `code` passed to `HiddenCopyContent`:\n\t * - We have incoming highlighted HTML or JSX, so we might be able to use\n\t *   the highlight token classes (eg \"shell-symbol\") to only copy commands.\n\t * - However, our highlighter currently doesn't distinguish between\n\t *   \"commands\" and \"output\" tokens for the \"shell-session\" language...\n\t *   So maybe complex string-based logic would be the way to go if\n\t *   we want to support multiple multi-line commands in a single snippet?\n\t * - Or maybe just need to look into `shellwords` use here?\n\t *   (Full disclosure, I didn't set it up, so am not familiar.\n\t *   it seems like it could be part of some solution?)\n\t *\n\t * ref: https://github.com/jimmycuadra/shellwords (really light on docs)\n\t * ref: https://ruby-doc.org/stdlib-1.9.3/libdoc/shellwords/rdoc/Shellwords.html\n\t *      (ruby module of same name, seems to have better docs)\n\t *\n\t * Related task:\n\t * https://app.asana.com/0/1100423001970639/1199504357822173/f\n\t *\n\t */\n\tconst firstLine = lines[0]\n\tconst isMultiLineCommand =\n\t\tfirstLine.endsWith('\\\\') || firstLine.endsWith('EOF')\n\tif (isMultiLineCommand) {\n\t\t/**\n\t\t * If this is a multi-line snippet, return it formatted with\n\t\t * shellwords escape & split\n\t\t */\n\t\tconst multiLineFmt = escape(snippet).replace('\\\\$\\\\', '')\n\t\treturn split(multiLineFmt).join(' ')\n\t}\n\t/**\n\t * Otherwise, we return only lines of the shell snippet that start with `$`.\n\t * We remove the `$ ` at the start of each line.\n\t * We lines that don't start with `$ ` - these are assumed to be output lines.\n\t */\n\tconst commandRegex = /^\\$ /\n\treturn lines\n\t\t.filter((line) => line.match(commandRegex))\n\t\t.map((line) => line.replace(commandRegex, ''))\n\t\t.join('\\n')\n}\n\nexport default processSnippet\n"],"names":["processSnippet","snippet","parseShellSnippet","lines","firstLine","multiLineFmt","escape","split","commandRegex","line"],"mappings":";AAaA,SAASA,EAAeC,GAAyB;AAEhD,SADgBA,EAAQ,MAAM;AAAA,CAAI,EAAE,CAAC,EAAE,WAAW,IAAI,IACrCC,EAAkBD,CAAO,IAAIA;AAC/C;AAMA,SAASC,EAAkBD,GAAyB;AACnD,QAAME,IAAQF,EAAQ,MAAM;AAAA,CAAI,GA0B1BG,IAAYD,EAAM,CAAC;AAGzB,MADCC,EAAU,SAAS,IAAI,KAAKA,EAAU,SAAS,KAAK,GAC7B;AAKvB,UAAMC,IAAeC,EAAOL,CAAO,EAAE,QAAQ,SAAS,EAAE;AACxD,WAAOM,EAAMF,CAAY,EAAE,KAAK,GAAG;AAAA,EACpC;AAMA,QAAMG,IAAe;AACrB,SAAOL,EACL,OAAO,CAACM,MAASA,EAAK,MAAMD,CAAY,CAAC,EACzC,IAAI,CAACC,MAASA,EAAK,QAAQD,GAAc,EAAE,CAAC,EAC5C,KAAK;AAAA,CAAI;AACZ;"}

package/components/code-block/utils/shellwords.js

@@ -0,0 +1,33 @@
+const f = (e, t, l) => {
+  let n = "";
+  for (; e.length > 0; ) {
+    const s = e.match(t);
+    s && s.index != null && s[0] != null ? (n += e.slice(0, s.index), n += l(s), e = e.slice(s.index + s[0].length)) : (n += e, e = "");
+  }
+  return n;
+}, p = (e = "") => {
+  const t = [];
+  let l = "";
+  return f(
+    e,
+    /\s*(?:([^\s\\'"]+)|'((?:[^'\\]|\\.)*)'|"((?:[^"\\]|\\.)*)"|(\\.?)|(\S))(\s|$)?/,
+    (n) => {
+      const [s, a, r, o, i, u, d] = n;
+      if (u != null)
+        throw new Error(`Unmatched quote: ${e}`);
+      if (a)
+        l += a;
+      else {
+        let c;
+        r ? c = r : o ? c = o : i && (c = i), c && (l += c.replace(/\\(?=.)/, ""));
+      }
+      d != null && (t.push(l), l = "");
+    }
+  ), l && t.push(l), t;
+}, h = (e = "") => e.replace(/([^A-Za-z0-9_\-.,:/@\n])/g, "\\$1").replace(/\n/g, `'
+'`);
+export {
+  h as escape,
+  p as split
+};
+//# sourceMappingURL=shellwords.js.map

package/components/code-block/utils/shellwords.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shellwords.js","sources":["../../../../src/components/code-block/utils/shellwords.ts"],"sourcesContent":["const scan = (\n\tstring: string,\n\tpattern: RegExp,\n\tcallback: (match: RegExpMatchArray) => void\n) => {\n\tlet result = ''\n\n\twhile (string.length > 0) {\n\t\tconst match = string.match(pattern)\n\n\t\tif (match && match.index != null && match[0] != null) {\n\t\t\tresult += string.slice(0, match.index)\n\t\t\tresult += callback(match)\n\t\t\tstring = string.slice(match.index + match[0].length)\n\t\t} else {\n\t\t\tresult += string\n\t\t\tstring = ''\n\t\t}\n\t}\n\n\treturn result\n}\n\n/**\n * Splits a string into an array of tokens in the same way the UNIX Bourne shell does.\n *\n * @param line A string to split.\n * @returns An array of the split tokens.\n */\nexport const split = (line = '') => {\n\tconst words: string[] = []\n\tlet field = ''\n\tscan(\n\t\tline,\n\t\t/\\s*(?:([^\\s\\\\'\"]+)|'((?:[^'\\\\]|\\\\.)*)'|\"((?:[^\"\\\\]|\\\\.)*)\"|(\\\\.?)|(\\S))(\\s|$)?/,\n\t\t(match) => {\n\t\t\tconst [_raw, word, sq, dq, escape, garbage, separator] = match\n\n\t\t\tif (garbage != null) {\n\t\t\t\tthrow new Error(`Unmatched quote: ${line}`)\n\t\t\t}\n\n\t\t\tif (word) {\n\t\t\t\tfield += word\n\t\t\t} else {\n\t\t\t\tlet addition\n\n\t\t\t\tif (sq) {\n\t\t\t\t\taddition = sq\n\t\t\t\t} else if (dq) {\n\t\t\t\t\taddition = dq\n\t\t\t\t} else if (escape) {\n\t\t\t\t\taddition = escape\n\t\t\t\t}\n\n\t\t\t\tif (addition) {\n\t\t\t\t\tfield += addition.replace(/\\\\(?=.)/, '')\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (separator != null) {\n\t\t\t\twords.push(field)\n\t\t\t\tfield = ''\n\t\t\t}\n\t\t}\n\t)\n\n\tif (field) {\n\t\twords.push(field)\n\t}\n\n\treturn words\n}\n\n/**\n * Escapes a string so that it can be safely used in a Bourne shell command line.\n *\n * @param str A string to escape.\n * @returns The escaped string.\n */\nexport const escape = (str = '') => {\n\treturn str.replace(/([^A-Za-z0-9_\\-.,:/@\\n])/g, '\\\\$1').replace(/\\n/g, \"'\\n'\")\n}\n"],"names":["scan","string","pattern","callback","result","match","split","line","words","field","_raw","word","sq","dq","escape","garbage","separator","addition","str"],"mappings":"AAAA,MAAMA,IAAO,CACZC,GACAC,GACAC,MACI;AACJ,MAAIC,IAAS;AAEb,SAAOH,EAAO,SAAS,KAAG;AACzB,UAAMI,IAAQJ,EAAO,MAAMC,CAAO;AAElC,IAAIG,KAASA,EAAM,SAAS,QAAQA,EAAM,CAAC,KAAK,QAC/CD,KAAUH,EAAO,MAAM,GAAGI,EAAM,KAAK,GACrCD,KAAUD,EAASE,CAAK,GACxBJ,IAASA,EAAO,MAAMI,EAAM,QAAQA,EAAM,CAAC,EAAE,MAAM,MAEnDD,KAAUH,GACVA,IAAS;AAAA,EAEX;AAEA,SAAOG;AACR,GAQaE,IAAQ,CAACC,IAAO,OAAO;AACnC,QAAMC,IAAkB,CAAA;AACxB,MAAIC,IAAQ;AACZ,SAAAT;AAAA,IACCO;AAAA,IACA;AAAA,IACA,CAACF,MAAU;AACV,YAAM,CAACK,GAAMC,GAAMC,GAAIC,GAAIC,GAAQC,GAASC,CAAS,IAAIX;AAEzD,UAAIU,KAAW;AACd,cAAM,IAAI,MAAM,oBAAoBR,CAAI,EAAE;AAG3C,UAAII;AACH,QAAAF,KAASE;AAAA,WACH;AACN,YAAIM;AAEJ,QAAIL,IACHK,IAAWL,IACDC,IACVI,IAAWJ,IACDC,MACVG,IAAWH,IAGRG,MACHR,KAASQ,EAAS,QAAQ,WAAW,EAAE;AAAA,MAEzC;AAEA,MAAID,KAAa,SAChBR,EAAM,KAAKC,CAAK,GAChBA,IAAQ;AAAA,IAEV;AAAA,EAAA,GAGGA,KACHD,EAAM,KAAKC,CAAK,GAGVD;AACR,GAQaM,IAAS,CAACI,IAAM,OACrBA,EAAI,QAAQ,6BAA6B,MAAM,EAAE,QAAQ,OAAO;AAAA,EAAM;"}

package/components/combo-box-primitive/index.js

@@ -0,0 +1,302 @@
+"use client";
+import { jsx as b, Fragment as X } from "react/jsx-runtime";
+import { useId as F, useEffect as V, useRef as B, useState as R, useCallback as p, createContext as Y, useContext as Z } from "react";
+import { TextInputBase as ee } from "../form/text-input/index.js";
+const E = (s, t) => `${s}__${t}`, x = -1;
+function te(s) {
+  const t = /* @__PURE__ */ new Map();
+  for (const [o, r] of Object.entries(s)) {
+    if (!r) continue;
+    const l = t.get(r) || [];
+    t.set(r, [...l, o]);
+  }
+  for (const [o, r] of t)
+    if (r.length > 1)
+      throw new Error(
+        `ComboBox: id '${o}' is duplicated in ${r.join(", ")}`
+      );
+}
+const U = Y(null), y = () => {
+  const s = Z(U);
+  if (!s)
+    throw new Error("useComboBox must be used within a ComboBoxProvider");
+  return s;
+}, oe = ({
+  children: s,
+  keyboardFocusLoop: t = !0,
+  ids: o = {},
+  onChangeVFocusedOption: r,
+  onChangeSelectedOption: l
+}) => {
+  te(o);
+  const n = B([]), c = B(/* @__PURE__ */ new Set()), [f, m] = R(null), [a, w] = R(x), h = B(null), u = B(null), [g, I] = R(!1), K = B(null), _ = E("hashi-combo-box-toggle", F()), j = E("hashi-combo-box-popover", F()), M = E("hashi-combo-box-listbox", F()), T = p(
+    (e) => {
+      m(e), l?.(e);
+    },
+    [l]
+  ), v = p(
+    (e) => {
+      w(e), r?.(n.current[e]);
+    },
+    [r]
+  ), q = B({
+    toggle: o.toggle ?? _,
+    popover: o.popover ?? j,
+    listbox: o.listbox ?? M
+  }), C = p(
+    (e) => {
+      v(e);
+    },
+    [v]
+  ), A = p(() => {
+    const e = n.current;
+    if (a === x) return 0;
+    const i = a + 1, d = i >= e.length;
+    let k;
+    d && t ? (k = x, I(!1)) : k = d ? a : i, C(k);
+  }, [t, a, C]), D = p(() => {
+    if (a === x) return 0;
+    const e = a - 1, i = e < 0;
+    let d;
+    i && t ? (d = x, I(!1)) : d = i ? a : e, C(d);
+  }, [t, a, C]), W = p(
+    (e) => {
+      const i = n.current.findIndex((d) => d.id === e.id);
+      if (i === -1) {
+        console.error("ComboBox: Item not found", e);
+        return;
+      }
+      v(i);
+    },
+    [v]
+  ), P = p(() => a === x ? null : n.current[a] || null, [a]), $ = p(
+    (e) => {
+      if (n.current.findIndex((d) => d.id === e.id) === -1) {
+        console.error(
+          "ComboBox: Item not found, Selected item not updated",
+          e
+        );
+        return;
+      }
+      T(e), I(!1);
+    },
+    [T]
+  ), L = p(() => f, [f]), z = p((e) => {
+    if (c.current.has(e.id)) {
+      const i = n.current.find((S) => S.id === e.id), N = `Each ComboBox.Item must have a unique id.
+ Found items with duplicate ids: ${JSON.stringify({
+        existing: i,
+        attemptedToAdd: e
+      })}`;
+      throw Error(N);
+    }
+    c.current.add(e.id), n.current.push(e);
+  }, []), G = p(() => n.current, []), H = p((e) => {
+    c.current.delete(e.id), n.current = n.current.filter((i) => i.id !== e.id);
+  }, []);
+  V(() => {
+    g && u.current?.focus();
+  }, [g, u, h]), V(() => {
+    const e = P(), i = K.current;
+    e && i && i.querySelector(
+      `[data-combo-box-item-id="${e.id}"]`
+    )?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [P]);
+  const O = p(() => {
+    I(!1), v(x);
+  }, [v]), J = p(() => {
+    I(!0);
+  }, []), Q = (e) => {
+    const i = e.key === "ArrowDown" || e.key === "ArrowUp", d = e.key === " ", k = u.current !== null;
+    switch ((i || d && !k) && e.preventDefault(), e.key) {
+      case "Escape": {
+        O();
+        break;
+      }
+      case "ArrowDown": {
+        const S = P() === null;
+        g && S ? C(0) : A();
+        break;
+      }
+      case "ArrowUp": {
+        D();
+        break;
+      }
+      case "Enter": {
+        const S = P();
+        S && $(S), O();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ b(
+    U.Provider,
+    {
+      value: {
+        addItem: z,
+        selectItem: $,
+        vFocus: W,
+        vFocusByIdx: C,
+        vFocusNext: A,
+        vFocusPrev: D,
+        getSelectedItem: L,
+        getVFocusedItem: P,
+        getItems: G,
+        removeItem: H,
+        searchInputRef: u,
+        toggleRef: h,
+        listRef: K,
+        isOpen: g,
+        closePopover: O,
+        openPopover: J,
+        ids: q,
+        handleVFocusKeyboardControls: Q
+      },
+      children: s
+    }
+  );
+}, ne = ({
+  id: s,
+  value: t,
+  label: o,
+  children: r,
+  ...l
+}) => {
+  const n = E("hashi-combo-box-item", F()), c = s ?? n, { addItem: f, removeItem: m, getVFocusedItem: a, vFocus: w, selectItem: h } = y();
+  V(() => (f({ id: c, value: t, label: o }), () => m({ id: c, value: t, label: o })), [f, c, m, t, o]);
+  const u = a()?.id === c;
+  return /* @__PURE__ */ b(
+    "li",
+    {
+      "data-combo-box-item-id": c,
+      role: "option",
+      "aria-selected": u,
+      "data-vfocused": u,
+      onClick: () => h({ id: c, value: t, label: o }),
+      onMouseEnter: () => w({ id: c, value: t, label: o }),
+      ...l,
+      children: r
+    }
+  );
+}, se = ({ children: s, className: t }) => {
+  const {
+    toggleRef: o,
+    openPopover: r,
+    closePopover: l,
+    isOpen: n,
+    ids: c,
+    handleVFocusKeyboardControls: f,
+    searchInputRef: m
+  } = y(), a = (u) => {
+    u.stopPropagation(), n ? l() : r();
+  }, w = (u) => {
+    if ((u.key === "Enter" || u.key === "ArrowDown" || u.key === " ") && n === !1) {
+      u.preventDefault(), r();
+      return;
+    }
+    !(m.current !== null) && n && f(u);
+  }, h = () => (u) => {
+    if (u.relatedTarget?.closest("[data-combo-box-popover]")) return;
+    m.current !== null || l();
+  };
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      role: "combobox",
+      onClick: a,
+      onKeyDown: w,
+      tabIndex: 0,
+      ref: o,
+      "aria-haspopup": "listbox",
+      "aria-expanded": n,
+      "aria-controls": c.current.popover,
+      className: t,
+      onBlur: h(),
+      children: s
+    }
+  );
+}, re = ({
+  placeholder: s = "Select an option"
+}) => {
+  const { getSelectedItem: t } = y();
+  return /* @__PURE__ */ b(X, { children: t()?.label ?? s });
+}, ce = ({ children: s, className: t }) => {
+  const { isOpen: o, ids: r, closePopover: l } = y();
+  return V(() => {
+    const n = (c) => {
+      !o || c.target.closest("[data-combo-box-popover]") || l();
+    };
+    return document.addEventListener("click", n), () => {
+      document.removeEventListener("click", n);
+    };
+  }, [o, l]), o ? /* @__PURE__ */ b("div", { id: r.current.popover, "data-combo-box-popover": !0, className: t, children: s }) : null;
+}, ie = ({
+  label: s,
+  children: t,
+  className: o = "",
+  maxHeight: r,
+  onScroll: l
+}) => {
+  const { ids: n, listRef: c } = y();
+  return /* @__PURE__ */ b(
+    "ul",
+    {
+      id: n.current.listbox,
+      "aria-label": s,
+      role: "listbox",
+      tabIndex: -1,
+      ref: c,
+      className: o,
+      style: { maxHeight: r },
+      onScroll: l,
+      children: t
+    }
+  );
+}, ue = ({
+  placeholder: s = "Search",
+  value: t,
+  onChange: o,
+  onBlur: r
+}) => {
+  const {
+    searchInputRef: l,
+    getVFocusedItem: n,
+    handleVFocusKeyboardControls: c,
+    closePopover: f
+  } = y();
+  return /* @__PURE__ */ b(
+    ee,
+    {
+      field: {
+        type: "search",
+        ref: l,
+        autoComplete: "off",
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        role: "combobox",
+        "aria-activedescendant": n()?.id ?? "",
+        placeholder: s,
+        value: t,
+        onChange: o,
+        onKeyDown: c,
+        onBlur: (m) => {
+          m.stopPropagation(), !m.relatedTarget?.closest(
+            "[data-combo-box-popover]"
+          ) && (f(), r?.());
+        }
+      }
+    }
+  );
+}, pe = Object.freeze({
+  Root: oe,
+  Trigger: se,
+  Popover: ce,
+  SearchInput: ue,
+  List: ie,
+  Item: ne,
+  Value: re
+});
+export {
+  pe as ComboBox
+};
+//# sourceMappingURL=index.js.map