@clickhouse/click-ui 0.0.176 → 0.0.178

package/dist/click-ui.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import styled$1, { keyframes, styled, useTheme, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
+import { keyframes, styled, useTheme, css as css$1, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
 import * as React from "react";
 import React__default, { forwardRef, useCallback, createContext, useMemo, createElement as createElement$1, useContext, useRef, useEffect, useState, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useReducer, useId, PureComponent, Component, memo } from "react";
 import * as ReactDOM from "react-dom";
@@ -294,6 +294,17 @@ const LightBulb = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3
   /* @__PURE__ */ jsx("rect", { width: 18.008, height: 18.008, x: 2.996, y: 2.997, stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, rx: 5 }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15.386 13.316a4.251 4.251 0 1 0-6.772 0" })
 ] });
+const LightBulbOn = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 15.1899H9", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.54094 14.8962C6.76494 13.6412 5.69994 11.4502 6.07494 9.03819C6.48094 6.43119 8.65394 4.35019 11.2749 4.04319C14.9129 3.61619 17.9999 6.44819 17.9999 10.0002C17.9999 12.0252 16.9939 13.8122 15.4569 14.8982C15.1809 15.0932 14.9999 15.3952 14.9999 15.7332V18.5002C14.9999 19.8812 13.8809 21.0002 12.4999 21.0002H11.4999C10.1189 21.0002 8.99994 19.8812 8.99994 18.5002V15.7372C8.99994 15.3962 8.81794 15.0922 8.54094 14.8962Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M20 5.00006L21.19 3.81006", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.99957 15L2.80957 16.19", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4.99957 4.00006L3.80957 2.81006", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M20 15L21.19 16.19", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 10H22.69", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M1.30957 10H2.99957", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 18H14.87", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
 const Lightening = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13 8-3 3 4 2-3 3" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2Z", clipRule: "evenodd" })
@@ -332,6 +343,7 @@ const MetricsAlt = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17 21H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4Z", clipRule: "evenodd" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m3 15 7-5 4 4 7-5" })
 ] });
+const Moon = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3945 13.0269C18.7245 12.8719 19.0765 13.1969 18.9845 13.5499C18.6705 14.7519 18.0535 15.8959 17.1035 16.8459C14.2825 19.6669 9.76953 19.7259 7.02153 16.9779C4.27353 14.2299 4.33353 9.71589 7.15453 6.89489C8.10453 5.94489 9.24753 5.32789 10.4505 5.01389C10.8035 4.92189 11.1275 5.27389 10.9735 5.60389C9.97153 7.74289 10.3005 10.3049 11.9975 12.0019C13.6935 13.6999 16.2555 14.0289 18.3945 13.0269V13.0269Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const Pause = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("rect", { x: "5.75", y: "3.75", width: "3.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" }),
   /* @__PURE__ */ jsx("rect", { x: "14.75", y: "3.75", width: "3.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" })
@@ -761,6 +773,7 @@ const ICONS_MAP = {
   keys: Keys,
   lifebuoy: Lifebuoy,
   "light-bulb": LightBulb,
+  "light-bulb-on": LightBulbOn,
   lightening: Lightening,
   "line-in-circle": LineInCircle,
   loading: LoadingFlipped,
@@ -769,6 +782,7 @@ const ICONS_MAP = {
   metrics: Metrics,
   "metrics-alt": MetricsAlt,
   minus: Minus,
+  moon: Moon,
   "no-cloud": NoCloud,
   pause: Pause,
   payment: Payment,
@@ -13533,6 +13547,634 @@ function requireSql() {
   sql_1 = sql2;
   return sql_1;
 }
+var typescript_1;
+var hasRequiredTypescript;
+function requireTypescript() {
+  if (hasRequiredTypescript)
+    return typescript_1;
+  hasRequiredTypescript = 1;
+  const IDENT_RE2 = "[A-Za-z$_][0-9A-Za-z$_]*";
+  const KEYWORDS = [
+    "as",
+    // for exports
+    "in",
+    "of",
+    "if",
+    "for",
+    "while",
+    "finally",
+    "var",
+    "new",
+    "function",
+    "do",
+    "return",
+    "void",
+    "else",
+    "break",
+    "catch",
+    "instanceof",
+    "with",
+    "throw",
+    "case",
+    "default",
+    "try",
+    "switch",
+    "continue",
+    "typeof",
+    "delete",
+    "let",
+    "yield",
+    "const",
+    "class",
+    // JS handles these with a special rule
+    // "get",
+    // "set",
+    "debugger",
+    "async",
+    "await",
+    "static",
+    "import",
+    "from",
+    "export",
+    "extends"
+  ];
+  const LITERALS = [
+    "true",
+    "false",
+    "null",
+    "undefined",
+    "NaN",
+    "Infinity"
+  ];
+  const TYPES = [
+    "Intl",
+    "DataView",
+    "Number",
+    "Math",
+    "Date",
+    "String",
+    "RegExp",
+    "Object",
+    "Function",
+    "Boolean",
+    "Error",
+    "Symbol",
+    "Set",
+    "Map",
+    "WeakSet",
+    "WeakMap",
+    "Proxy",
+    "Reflect",
+    "JSON",
+    "Promise",
+    "Float64Array",
+    "Int16Array",
+    "Int32Array",
+    "Int8Array",
+    "Uint16Array",
+    "Uint32Array",
+    "Float32Array",
+    "Array",
+    "Uint8Array",
+    "Uint8ClampedArray",
+    "ArrayBuffer",
+    "BigInt64Array",
+    "BigUint64Array",
+    "BigInt"
+  ];
+  const ERROR_TYPES = [
+    "EvalError",
+    "InternalError",
+    "RangeError",
+    "ReferenceError",
+    "SyntaxError",
+    "TypeError",
+    "URIError"
+  ];
+  const BUILT_IN_GLOBALS = [
+    "setInterval",
+    "setTimeout",
+    "clearInterval",
+    "clearTimeout",
+    "require",
+    "exports",
+    "eval",
+    "isFinite",
+    "isNaN",
+    "parseFloat",
+    "parseInt",
+    "decodeURI",
+    "decodeURIComponent",
+    "encodeURI",
+    "encodeURIComponent",
+    "escape",
+    "unescape"
+  ];
+  const BUILT_IN_VARIABLES = [
+    "arguments",
+    "this",
+    "super",
+    "console",
+    "window",
+    "document",
+    "localStorage",
+    "module",
+    "global"
+    // Node.js
+  ];
+  const BUILT_INS = [].concat(
+    BUILT_IN_GLOBALS,
+    BUILT_IN_VARIABLES,
+    TYPES,
+    ERROR_TYPES
+  );
+  function source2(re) {
+    if (!re)
+      return null;
+    if (typeof re === "string")
+      return re;
+    return re.source;
+  }
+  function lookahead(re) {
+    return concat2("(?=", re, ")");
+  }
+  function concat2(...args) {
+    const joined = args.map((x) => source2(x)).join("");
+    return joined;
+  }
+  function javascript(hljs) {
+    const hasClosingTag = (match, { after }) => {
+      const tag2 = "</" + match[0].slice(1);
+      const pos = match.input.indexOf(tag2, after);
+      return pos !== -1;
+    };
+    const IDENT_RE$1 = IDENT_RE2;
+    const FRAGMENT = {
+      begin: "<>",
+      end: "</>"
+    };
+    const XML_TAG = {
+      begin: /<[A-Za-z0-9\\._:-]+/,
+      end: /\/[A-Za-z0-9\\._:-]+>|\/>/,
+      /**
+       * @param {RegExpMatchArray} match
+       * @param {CallbackResponse} response
+       */
+      isTrulyOpeningTag: (match, response) => {
+        const afterMatchIndex = match[0].length + match.index;
+        const nextChar = match.input[afterMatchIndex];
+        if (nextChar === "<") {
+          response.ignoreMatch();
+          return;
+        }
+        if (nextChar === ">") {
+          if (!hasClosingTag(match, { after: afterMatchIndex })) {
+            response.ignoreMatch();
+          }
+        }
+      }
+    };
+    const KEYWORDS$1 = {
+      $pattern: IDENT_RE2,
+      keyword: KEYWORDS,
+      literal: LITERALS,
+      built_in: BUILT_INS
+    };
+    const decimalDigits = "[0-9](_?[0-9])*";
+    const frac = `\\.(${decimalDigits})`;
+    const decimalInteger = `0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*`;
+    const NUMBER = {
+      className: "number",
+      variants: [
+        // DecimalLiteral
+        { begin: `(\\b(${decimalInteger})((${frac})|\\.)?|(${frac}))[eE][+-]?(${decimalDigits})\\b` },
+        { begin: `\\b(${decimalInteger})\\b((${frac})\\b|\\.)?|(${frac})\\b` },
+        // DecimalBigIntegerLiteral
+        { begin: `\\b(0|[1-9](_?[0-9])*)n\\b` },
+        // NonDecimalIntegerLiteral
+        { begin: "\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b" },
+        { begin: "\\b0[bB][0-1](_?[0-1])*n?\\b" },
+        { begin: "\\b0[oO][0-7](_?[0-7])*n?\\b" },
+        // LegacyOctalIntegerLiteral (does not include underscore separators)
+        // https://tc39.es/ecma262/#sec-additional-syntax-numeric-literals
+        { begin: "\\b0[0-7]+n?\\b" }
+      ],
+      relevance: 0
+    };
+    const SUBST = {
+      className: "subst",
+      begin: "\\$\\{",
+      end: "\\}",
+      keywords: KEYWORDS$1,
+      contains: []
+      // defined later
+    };
+    const HTML_TEMPLATE = {
+      begin: "html`",
+      end: "",
+      starts: {
+        end: "`",
+        returnEnd: false,
+        contains: [
+          hljs.BACKSLASH_ESCAPE,
+          SUBST
+        ],
+        subLanguage: "xml"
+      }
+    };
+    const CSS_TEMPLATE = {
+      begin: "css`",
+      end: "",
+      starts: {
+        end: "`",
+        returnEnd: false,
+        contains: [
+          hljs.BACKSLASH_ESCAPE,
+          SUBST
+        ],
+        subLanguage: "css"
+      }
+    };
+    const TEMPLATE_STRING = {
+      className: "string",
+      begin: "`",
+      end: "`",
+      contains: [
+        hljs.BACKSLASH_ESCAPE,
+        SUBST
+      ]
+    };
+    const JSDOC_COMMENT = hljs.COMMENT(
+      /\/\*\*(?!\/)/,
+      "\\*/",
+      {
+        relevance: 0,
+        contains: [
+          {
+            className: "doctag",
+            begin: "@[A-Za-z]+",
+            contains: [
+              {
+                className: "type",
+                begin: "\\{",
+                end: "\\}",
+                relevance: 0
+              },
+              {
+                className: "variable",
+                begin: IDENT_RE$1 + "(?=\\s*(-)|$)",
+                endsParent: true,
+                relevance: 0
+              },
+              // eat spaces (not newlines) so we can find
+              // types or variables
+              {
+                begin: /(?=[^\n])\s/,
+                relevance: 0
+              }
+            ]
+          }
+        ]
+      }
+    );
+    const COMMENT2 = {
+      className: "comment",
+      variants: [
+        JSDOC_COMMENT,
+        hljs.C_BLOCK_COMMENT_MODE,
+        hljs.C_LINE_COMMENT_MODE
+      ]
+    };
+    const SUBST_INTERNALS = [
+      hljs.APOS_STRING_MODE,
+      hljs.QUOTE_STRING_MODE,
+      HTML_TEMPLATE,
+      CSS_TEMPLATE,
+      TEMPLATE_STRING,
+      NUMBER,
+      hljs.REGEXP_MODE
+    ];
+    SUBST.contains = SUBST_INTERNALS.concat({
+      // we need to pair up {} inside our subst to prevent
+      // it from ending too early by matching another }
+      begin: /\{/,
+      end: /\}/,
+      keywords: KEYWORDS$1,
+      contains: [
+        "self"
+      ].concat(SUBST_INTERNALS)
+    });
+    const SUBST_AND_COMMENTS = [].concat(COMMENT2, SUBST.contains);
+    const PARAMS_CONTAINS = SUBST_AND_COMMENTS.concat([
+      // eat recursive parens in sub expressions
+      {
+        begin: /\(/,
+        end: /\)/,
+        keywords: KEYWORDS$1,
+        contains: ["self"].concat(SUBST_AND_COMMENTS)
+      }
+    ]);
+    const PARAMS = {
+      className: "params",
+      begin: /\(/,
+      end: /\)/,
+      excludeBegin: true,
+      excludeEnd: true,
+      keywords: KEYWORDS$1,
+      contains: PARAMS_CONTAINS
+    };
+    return {
+      name: "Javascript",
+      aliases: ["js", "jsx", "mjs", "cjs"],
+      keywords: KEYWORDS$1,
+      // this will be extended by TypeScript
+      exports: { PARAMS_CONTAINS },
+      illegal: /#(?![$_A-z])/,
+      contains: [
+        hljs.SHEBANG({
+          label: "shebang",
+          binary: "node",
+          relevance: 5
+        }),
+        {
+          label: "use_strict",
+          className: "meta",
+          relevance: 10,
+          begin: /^\s*['"]use (strict|asm)['"]/
+        },
+        hljs.APOS_STRING_MODE,
+        hljs.QUOTE_STRING_MODE,
+        HTML_TEMPLATE,
+        CSS_TEMPLATE,
+        TEMPLATE_STRING,
+        COMMENT2,
+        NUMBER,
+        {
+          // object attr container
+          begin: concat2(
+            /[{,\n]\s*/,
+            // we need to look ahead to make sure that we actually have an
+            // attribute coming up so we don't steal a comma from a potential
+            // "value" container
+            //
+            // NOTE: this might not work how you think.  We don't actually always
+            // enter this mode and stay.  Instead it might merely match `,
+            // <comments up next>` and then immediately end after the , because it
+            // fails to find any actual attrs. But this still does the job because
+            // it prevents the value contain rule from grabbing this instead and
+            // prevening this rule from firing when we actually DO have keys.
+            lookahead(concat2(
+              // we also need to allow for multiple possible comments inbetween
+              // the first key:value pairing
+              /(((\/\/.*$)|(\/\*(\*[^/]|[^*])*\*\/))\s*)*/,
+              IDENT_RE$1 + "\\s*:"
+            ))
+          ),
+          relevance: 0,
+          contains: [
+            {
+              className: "attr",
+              begin: IDENT_RE$1 + lookahead("\\s*:"),
+              relevance: 0
+            }
+          ]
+        },
+        {
+          // "value" container
+          begin: "(" + hljs.RE_STARTERS_RE + "|\\b(case|return|throw)\\b)\\s*",
+          keywords: "return throw case",
+          contains: [
+            COMMENT2,
+            hljs.REGEXP_MODE,
+            {
+              className: "function",
+              // we have to count the parens to make sure we actually have the
+              // correct bounding ( ) before the =>.  There could be any number of
+              // sub-expressions inside also surrounded by parens.
+              begin: "(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|" + hljs.UNDERSCORE_IDENT_RE + ")\\s*=>",
+              returnBegin: true,
+              end: "\\s*=>",
+              contains: [
+                {
+                  className: "params",
+                  variants: [
+                    {
+                      begin: hljs.UNDERSCORE_IDENT_RE,
+                      relevance: 0
+                    },
+                    {
+                      className: null,
+                      begin: /\(\s*\)/,
+                      skip: true
+                    },
+                    {
+                      begin: /\(/,
+                      end: /\)/,
+                      excludeBegin: true,
+                      excludeEnd: true,
+                      keywords: KEYWORDS$1,
+                      contains: PARAMS_CONTAINS
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              // could be a comma delimited list of params to a function call
+              begin: /,/,
+              relevance: 0
+            },
+            {
+              className: "",
+              begin: /\s/,
+              end: /\s*/,
+              skip: true
+            },
+            {
+              // JSX
+              variants: [
+                { begin: FRAGMENT.begin, end: FRAGMENT.end },
+                {
+                  begin: XML_TAG.begin,
+                  // we carefully check the opening tag to see if it truly
+                  // is a tag and not a false positive
+                  "on:begin": XML_TAG.isTrulyOpeningTag,
+                  end: XML_TAG.end
+                }
+              ],
+              subLanguage: "xml",
+              contains: [
+                {
+                  begin: XML_TAG.begin,
+                  end: XML_TAG.end,
+                  skip: true,
+                  contains: ["self"]
+                }
+              ]
+            }
+          ],
+          relevance: 0
+        },
+        {
+          className: "function",
+          beginKeywords: "function",
+          end: /[{;]/,
+          excludeEnd: true,
+          keywords: KEYWORDS$1,
+          contains: [
+            "self",
+            hljs.inherit(hljs.TITLE_MODE, { begin: IDENT_RE$1 }),
+            PARAMS
+          ],
+          illegal: /%/
+        },
+        {
+          // prevent this from getting swallowed up by function
+          // since they appear "function like"
+          beginKeywords: "while if switch catch for"
+        },
+        {
+          className: "function",
+          // we have to count the parens to make sure we actually have the correct
+          // bounding ( ).  There could be any number of sub-expressions inside
+          // also surrounded by parens.
+          begin: hljs.UNDERSCORE_IDENT_RE + "\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+          // end parens
+          returnBegin: true,
+          contains: [
+            PARAMS,
+            hljs.inherit(hljs.TITLE_MODE, { begin: IDENT_RE$1 })
+          ]
+        },
+        // hack: prevents detection of keywords in some circumstances
+        // .keyword()
+        // $keyword = x
+        {
+          variants: [
+            { begin: "\\." + IDENT_RE$1 },
+            { begin: "\\$" + IDENT_RE$1 }
+          ],
+          relevance: 0
+        },
+        {
+          // ES6 class
+          className: "class",
+          beginKeywords: "class",
+          end: /[{;=]/,
+          excludeEnd: true,
+          illegal: /[:"[\]]/,
+          contains: [
+            { beginKeywords: "extends" },
+            hljs.UNDERSCORE_TITLE_MODE
+          ]
+        },
+        {
+          begin: /\b(?=constructor)/,
+          end: /[{;]/,
+          excludeEnd: true,
+          contains: [
+            hljs.inherit(hljs.TITLE_MODE, { begin: IDENT_RE$1 }),
+            "self",
+            PARAMS
+          ]
+        },
+        {
+          begin: "(get|set)\\s+(?=" + IDENT_RE$1 + "\\()",
+          end: /\{/,
+          keywords: "get set",
+          contains: [
+            hljs.inherit(hljs.TITLE_MODE, { begin: IDENT_RE$1 }),
+            { begin: /\(\)/ },
+            // eat to avoid empty params
+            PARAMS
+          ]
+        },
+        {
+          begin: /\$[(.]/
+          // relevance booster for a pattern common to JS libs: `$(something)` and `$.something`
+        }
+      ]
+    };
+  }
+  function typescript2(hljs) {
+    const IDENT_RE$1 = IDENT_RE2;
+    const NAMESPACE = {
+      beginKeywords: "namespace",
+      end: /\{/,
+      excludeEnd: true
+    };
+    const INTERFACE = {
+      beginKeywords: "interface",
+      end: /\{/,
+      excludeEnd: true,
+      keywords: "interface extends"
+    };
+    const USE_STRICT = {
+      className: "meta",
+      relevance: 10,
+      begin: /^\s*['"]use strict['"]/
+    };
+    const TYPES2 = [
+      "any",
+      "void",
+      "number",
+      "boolean",
+      "string",
+      "object",
+      "never",
+      "enum"
+    ];
+    const TS_SPECIFIC_KEYWORDS = [
+      "type",
+      "namespace",
+      "typedef",
+      "interface",
+      "public",
+      "private",
+      "protected",
+      "implements",
+      "declare",
+      "abstract",
+      "readonly"
+    ];
+    const KEYWORDS$1 = {
+      $pattern: IDENT_RE2,
+      keyword: KEYWORDS.concat(TS_SPECIFIC_KEYWORDS),
+      literal: LITERALS,
+      built_in: BUILT_INS.concat(TYPES2)
+    };
+    const DECORATOR = {
+      className: "meta",
+      begin: "@" + IDENT_RE$1
+    };
+    const swapMode = (mode, label, replacement) => {
+      const indx = mode.contains.findIndex((m) => m.label === label);
+      if (indx === -1) {
+        throw new Error("can not find mode to replace");
+      }
+      mode.contains.splice(indx, 1, replacement);
+    };
+    const tsLanguage = javascript(hljs);
+    Object.assign(tsLanguage.keywords, KEYWORDS$1);
+    tsLanguage.exports.PARAMS_CONTAINS.push(DECORATOR);
+    tsLanguage.contains = tsLanguage.contains.concat([
+      DECORATOR,
+      NAMESPACE,
+      INTERFACE
+    ]);
+    swapMode(tsLanguage, "shebang", hljs.SHEBANG());
+    swapMode(tsLanguage, "use_strict", USE_STRICT);
+    const functionDeclaration = tsLanguage.contains.find((m) => m.className === "function");
+    functionDeclaration.relevance = 0;
+    Object.assign(tsLanguage, {
+      name: "TypeScript",
+      aliases: ["ts", "tsx"]
+    });
+    return tsLanguage;
+  }
+  typescript_1 = typescript2;
+  return typescript_1;
+}
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
     o2.__proto__ = p2;
@@ -13713,9 +14355,22 @@ var json$1 = {};
   exports["default"] = _default2;
 })(json$1);
 const json = /* @__PURE__ */ getDefaultExportFromCjs(json$1);
+var typescript = {};
+(function(exports) {
+  var _interopRequireDefault = interopRequireDefaultExports;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = void 0;
+  var _typescript = _interopRequireDefault(requireTypescript());
+  var _default2 = _typescript["default"];
+  exports["default"] = _default2;
+})(typescript);
+const tsx = /* @__PURE__ */ getDefaultExportFromCjs(typescript);
 SyntaxHighlighter.registerLanguage("sql", sql);
 SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("json", json);
+SyntaxHighlighter.registerLanguage("tsx", tsx);
 const CodeBlockContainer = styled.div.withConfig({
   componentId: "sc-18gnqgi-0"
 })(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;position:relative;cursor:pointer;", ""], ({
@@ -14428,7 +15083,7 @@ const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   year: "numeric"
 });
 const explicitWidth = "250px";
-const HighlightedInputWrapper = styled$1(InputWrapper).withConfig({
+const HighlightedInputWrapper = styled(InputWrapper).withConfig({
   componentId: "sc-1kfphgn-0"
 })(["", " width:", ";}"], ({
   $isActive,
@@ -14436,12 +15091,12 @@ const HighlightedInputWrapper = styled$1(InputWrapper).withConfig({
 }) => {
   return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
 }, explicitWidth);
-const DatePickerContainer = styled$1(Container).withConfig({
+const DatePickerContainer = styled(Container).withConfig({
   componentId: "sc-1kfphgn-1"
 })(["background:", ";"], ({
   theme: theme2
 }) => theme2.click.datePicker.dateOption.color.background.default);
-const UnselectableTitle = styled$1.h2.withConfig({
+const UnselectableTitle = styled.h2.withConfig({
   componentId: "sc-1kfphgn-2"
 })(["", " user-select:none;"], ({
   theme: theme2
@@ -14449,7 +15104,7 @@ const UnselectableTitle = styled$1.h2.withConfig({
     color: ${theme2.click.datePicker.color.title.default};
     font: ${theme2.click.datePicker.typography.title.default};
   `);
-const DateTable = styled$1.table.withConfig({
+const DateTable = styled.table.withConfig({
   componentId: "sc-1kfphgn-3"
 })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
   theme: theme2
@@ -14458,7 +15113,7 @@ const DateTable = styled$1.table.withConfig({
 }) => theme2.click.datePicker.dateOption.size.height, ({
   theme: theme2
 }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
-const DateTableHeader = styled$1.th.withConfig({
+const DateTableHeader = styled.th.withConfig({
   componentId: "sc-1kfphgn-4"
 })(["", " width:14%;"], ({
   theme: theme2
@@ -14466,7 +15121,7 @@ const DateTableHeader = styled$1.th.withConfig({
     color: ${theme2.click.datePicker.color.daytitle.default};
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
-const DateTableCell = styled$1.td.withConfig({
+const DateTableCell = styled.td.withConfig({
   componentId: "sc-1kfphgn-5"
 })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
   theme: theme2
@@ -32625,9 +33280,7 @@ const HoverCardContent = ({
 };
 HoverCardContent.displayName = "HoverCardContent";
 HoverCard.Content = HoverCardContent;
-const CuiLink = styled.a.withConfig({
-  componentId: "sc-1bwz77u-0"
-})(["font:", ";color:", ";margin:0;text-decoration:none;display:inline-flex;gap:", ";margin-right:", ";align-items:center;&:hover,&:focus{color:", ";transition:", ";text-decoration:underline;cursor:pointer;}&:visited{color:", ";}"], ({
+const linkStyles = css$1(["font:", ";color:", ";margin:0;text-decoration:none;display:inline-flex;gap:", ";margin-right:", ";align-items:center;&:hover,&:focus{color:", ";transition:", ";text-decoration:underline;cursor:pointer;}&:visited{color:", ";}"], ({
   $size,
   $weight = "normal",
   theme: theme2
@@ -32646,6 +33299,9 @@ const CuiLink = styled.a.withConfig({
 }) => theme2.transition.default, ({
   theme: theme2
 }) => theme2.click.global.color.text.link.default);
+const CuiLink = styled.a.withConfig({
+  componentId: "sc-1bwz77u-0"
+})(["", ""], linkStyles);
 const IconWrapper$1 = styled.span.withConfig({
   componentId: "sc-1bwz77u-1"
 })([".external-icon{height:", ";width:", ";}"], ({
@@ -32877,24 +33533,25 @@ const Pagination = ({
   ] });
 };
 const Panel = ({
-  hasBorder,
-  hasShadow,
+  alignItems = "center",
+  children,
   color,
-  padding,
+  cursor,
+  fillHeight,
+  fillWidth,
   gap,
-  children,
+  hasBorder,
+  hasShadow,
+  height,
   orientation = "horizontal",
-  width,
+  padding,
   radii = "sm",
-  fillWidth,
-  height,
-  fillHeight,
-  alignItems = "center",
+  width,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper$2, { $hasBorder: hasBorder, $hasShadow: hasShadow, $color: color, $padding: padding, $gap: gap, $width: width, $radii: radii, $orientation: orientation, $fillWidth: fillWidth, $height: height, $fillHeight: fillHeight, $alignItems: alignItems, ...props, children });
+}) => /* @__PURE__ */ jsx(Wrapper$2, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
 const Wrapper$2 = styled.div.withConfig({
   componentId: "sc-1q78udp-0"
-})(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";"], ({
+})(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
   $orientation = "horizontal"
 }) => $orientation === "horizontal" ? "row wrap" : "column", ({
   $alignItems = "center"
@@ -32922,7 +33579,9 @@ const Wrapper$2 = styled.div.withConfig({
 }) => $hasShadow ? theme2.shadow[1] : "none", ({
   $gap = "sm",
   theme: theme2
-}) => theme2.click.panel.space.gap[$gap]);
+}) => theme2.click.panel.space.gap[$gap], ({
+  $cursor
+}) => $cursor && `cursor: ${$cursor}`);
 const ProgressContainer = styled.div.withConfig({
   componentId: "sc-16gr3cg-0"
 })(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;min-height:2px;", ";"], ({
@@ -49445,6 +50104,7 @@ export {
   VerticalStepper,
   WarningAlert,
   createToast,
+  linkStyles,
   themes,
   useCUITheme,
   useToast