@hopper-ui/styled-system 0.2.0 → 0.2.2

package/dist/chunk-2ITAI3PJ.js

@@ -0,0 +1,270 @@
+// src/tokens/generated/dark-semantic-tokens.ts
+var DarkSemanticTokens = {
+  "--hop-upsell-border-active": "var(--hop-sunken-treasure-500)",
+  "--hop-upsell-text-active": "var(--hop-sunken-treasure-300)",
+  "--hop-upsell-icon-weakest": "var(--hop-sunken-treasure-100)",
+  "--hop-upsell-icon-weak": "var(--hop-sunken-treasure-300)",
+  "--hop-upsell-border": "var(--hop-sunken-treasure-200)",
+  "--hop-upsell-surface-hover": "var(--hop-sunken-treasure-100)",
+  "--hop-upsell-border-disabled": "var(--hop-sunken-treasure-700)",
+  "--hop-upsell-icon-active": "var(--hop-sunken-treasure-300)",
+  "--hop-upsell-surface-weak": "var(--hop-sunken-treasure-800)",
+  "--hop-upsell-surface-disabled": "var(--hop-sunken-treasure-700)",
+  "--hop-upsell-text": "var(--hop-sunken-treasure-900)",
+  "--hop-upsell-icon": "var(--hop-sunken-treasure-900)",
+  "--hop-upsell-text-hover": "var(--hop-sunken-treasure-700)",
+  "--hop-upsell-text-disabled": "var(--hop-sunken-treasure-300)",
+  "--hop-upsell-surface-active": "var(--hop-sunken-treasure-800)",
+  "--hop-upsell-surface": "var(--hop-sunken-treasure-50)",
+  "--hop-danger-border-active": "var(--hop-amanita-400)",
+  "--hop-danger-icon-active": "var(--hop-amanita-300)",
+  "--hop-danger-text-active": "var(--hop-amanita-300)",
+  "--hop-danger-surface": "var(--hop-amanita-200)",
+  "--hop-danger-text-hover": "var(--hop-amanita-200)",
+  "--hop-danger-surface-disabled": "var(--hop-amanita-600)",
+  "--hop-danger-surface-hover": "var(--hop-amanita-200)",
+  "--hop-danger-surface-strong": "var(--hop-amanita-300)",
+  "--hop-danger-surface-strong-hover": "var(--hop-amanita-200)",
+  "--hop-danger-surface-weak": "var(--hop-amanita-900)",
+  "--hop-danger-border-strong": "var(--hop-amanita-300)",
+  "--hop-danger-icon": "var(--hop-amanita-900)",
+  "--hop-danger-icon-weak": "var(--hop-amanita-100)",
+  "--hop-danger-text": "var(--hop-amanita-900)",
+  "--hop-danger-surface-active": "var(--hop-amanita-800)",
+  "--hop-danger-text-weak": "var(--hop-amanita-100)",
+  "--hop-danger-text-strong": "var(--hop-samoyed)",
+  "--hop-danger-text-strong-hover": "var(--hop-samoyed)",
+  "--hop-danger-icon-strong": "var(--hop-samoyed)",
+  "--hop-danger-icon-hover": "var(--hop-amanita-200)",
+  "--hop-danger-text-disabled": "var(--hop-amanita-600)",
+  "--hop-danger-icon-disabled": "var(--hop-amanita-600)",
+  "--hop-danger-border": "var(--hop-amanita-500)",
+  "--hop-primary-icon-active": "var(--hop-sapphire-200)",
+  "--hop-primary-border-active": "var(--hop-sapphire-300)",
+  "--hop-primary-text-active": "var(--hop-sapphire-200)",
+  "--hop-primary-icon-strong": "var(--hop-samoyed)",
+  "--hop-primary-icon-strong-hover": "var(--hop-sapphire-300)",
+  "--hop-primary-icon": "var(--hop-sapphire-200)",
+  "--hop-primary-border-focus": "var(--hop-sapphire-200)",
+  "--hop-primary-border": "var(--hop-sapphire-300)",
+  "--hop-primary-icon-hover": "var(--hop-sapphire-300)",
+  "--hop-primary-icon-disabled": "var(--hop-sapphire-700)",
+  "--hop-primary-surface-disabled": "var(--hop-sapphire-700)",
+  "--hop-primary-surface-focus": "var(--hop-sapphire-900)",
+  "--hop-primary-text-disabled": "var(--hop-sapphire-700)",
+  "--hop-primary-surface": "var(--hop-sapphire-200)",
+  "--hop-primary-surface-weak": "var(--hop-sapphire-800)",
+  "--hop-primary-surface-strong": "var(--hop-sapphire-400)",
+  "--hop-primary-surface-strong-hover": "var(--hop-sapphire-200)",
+  "--hop-primary-surface-strong-active": "var(--hop-sapphire-800)",
+  "--hop-primary-text": "var(--hop-sapphire-200)",
+  "--hop-primary-surface-hover": "var(--hop-sapphire-200)",
+  "--hop-primary-text-strong": "var(--hop-samoyed)",
+  "--hop-primary-text-strong-hover": "var(--hop-sapphire-300)",
+  "--hop-primary-text-hover": "var(--hop-sapphire-300)",
+  "--hop-primary-surface-active": "var(--hop-sapphire-800)",
+  "--hop-decorative-option9-border": "var(--hop-rock-400)",
+  "--hop-decorative-option9-icon": "var(--hop-samoyed)",
+  "--hop-decorative-option9-surface-weakest": "var(--hop-rock-200)",
+  "--hop-decorative-option9-surface-weak": "var(--hop-rock-300)",
+  "--hop-decorative-option9-surface-weak-hover": "var(--hop-rock-400)",
+  "--hop-decorative-option9-surface-strong": "var(--hop-rock-800)",
+  "--hop-decorative-option9-surface-hover": "var(--hop-rock-500)",
+  "--hop-decorative-option9-surface": "var(--hop-rock-400)",
+  "--hop-decorative-option9-text": "var(--hop-samoyed)",
+  "--hop-decorative-option9-text-weak": "var(--hop-rock-300)",
+  "--hop-decorative-option8-border": "var(--hop-amanita-400)",
+  "--hop-decorative-option8-icon": "var(--hop-amanita-900)",
+  "--hop-decorative-option8-surface-weakest": "var(--hop-amanita-25)",
+  "--hop-decorative-option8-surface-weak": "var(--hop-amanita-50)",
+  "--hop-decorative-option8-surface-weak-hover": "var(--hop-amanita-75)",
+  "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)",
+  "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)",
+  "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)",
+  "--hop-decorative-option8-surface": "var(--hop-amanita-75)",
+  "--hop-decorative-option8-text": "var(--hop-amanita-900)",
+  "--hop-decorative-option7-border": "var(--hop-toad-400)",
+  "--hop-decorative-option7-icon": "var(--hop-toad-900)",
+  "--hop-decorative-option7-surface-weakest": "var(--hop-toad-25)",
+  "--hop-decorative-option7-surface-weak": "var(--hop-toad-50)",
+  "--hop-decorative-option7-surface-weak-hover": "var(--hop-toad-75)",
+  "--hop-decorative-option7-surface-strong": "var(--hop-toad-100)",
+  "--hop-decorative-option7-surface-hover": "var(--hop-toad-100)",
+  "--hop-decorative-option7-surface": "var(--hop-toad-50)",
+  "--hop-decorative-option7-text-weak": "var(--hop-toad-500)",
+  "--hop-decorative-option7-text": "var(--hop-toad-900)",
+  "--hop-decorative-option5-text-weak": "var(--hop-coastal-300)",
+  "--hop-decorative-option5-text": "var(--hop-coastal-900)",
+  "--hop-decorative-option5-surface-weakest": "var(--hop-coastal-25)",
+  "--hop-decorative-option5-surface-weak": "var(--hop-coastal-50)",
+  "--hop-decorative-option5-surface-weak-hover": "var(--hop-coastal-75)",
+  "--hop-decorative-option5-surface-strong": "var(--hop-coastal-100)",
+  "--hop-decorative-option5-surface-hover": "var(--hop-coastal-100)",
+  "--hop-decorative-option5-surface": "var(--hop-coastal-75)",
+  "--hop-decorative-option5-border": "var(--hop-coastal-400)",
+  "--hop-decorative-option5-icon": "var(--hop-coastal-900)",
+  "--hop-decorative-option6-surface-weakest": "var(--hop-sunken-treasure-25)",
+  "--hop-decorative-option6-surface-weak": "var(--hop-sunken-treasure-50)",
+  "--hop-decorative-option6-surface-weak-hover": "var(--hop-sunken-treasure-75)",
+  "--hop-decorative-option6-surface-strong": "var(--hop-sunken-treasure-100)",
+  "--hop-decorative-option6-surface-hover": "var(--hop-sunken-treasure-100)",
+  "--hop-decorative-option6-surface": "var(--hop-sunken-treasure-75)",
+  "--hop-decorative-option6-border": "var(--hop-sunken-treasure-400)",
+  "--hop-decorative-option6-icon": "var(--hop-sunken-treasure-900)",
+  "--hop-decorative-option6-text": "var(--hop-sunken-treasure-900)",
+  "--hop-decorative-option6-text-weak": "var(--hop-sunken-treasure-200)",
+  "--hop-decorative-option4-surface-weakest": "var(--hop-moss-25)",
+  "--hop-decorative-option4-surface-weak": "var(--hop-moss-50)",
+  "--hop-decorative-option4-surface-weak-hover": "var(--hop-moss-75)",
+  "--hop-decorative-option4-surface-strong": "var(--hop-moss-100)",
+  "--hop-decorative-option4-surface-hover": "var(--hop-moss-100)",
+  "--hop-decorative-option4-surface": "var(--hop-moss-75)",
+  "--hop-decorative-option4-border": "var(--hop-moss-400)",
+  "--hop-decorative-option4-icon": "var(--hop-moss-900)",
+  "--hop-decorative-option4-text-weak": "var(--hop-moss-400)",
+  "--hop-decorative-option4-text": "var(--hop-moss-900)",
+  "--hop-decorative-option3-surface-strong": "var(--hop-koi-200)",
+  "--hop-decorative-option3-surface-weakest": "var(--hop-koi-25)",
+  "--hop-decorative-option3-surface-weak": "var(--hop-koi-50)",
+  "--hop-decorative-option3-surface-weak-hover": "var(--hop-koi-75)",
+  "--hop-decorative-option3-surface-hover": "var(--hop-koi-200)",
+  "--hop-decorative-option3-surface": "var(--hop-koi-100)",
+  "--hop-decorative-option3-border": "var(--hop-koi-400)",
+  "--hop-decorative-option3-icon": "var(--hop-koi-900)",
+  "--hop-decorative-option3-text": "var(--hop-koi-900)",
+  "--hop-decorative-option3-text-weak": "var(--hop-koi-300)",
+  "--hop-decorative-option2-surface-weakest": "var(--hop-quetzal-25)",
+  "--hop-decorative-option2-surface-weak": "var(--hop-quetzal-50)",
+  "--hop-decorative-option2-surface-weak-hover": "var(--hop-quetzal-75)",
+  "--hop-decorative-option2-surface-strong": "var(--hop-quetzal-100)",
+  "--hop-decorative-option2-surface-hover": "var(--hop-quetzal-100)",
+  "--hop-decorative-option2-surface": "var(--hop-quetzal-75)",
+  "--hop-decorative-option2-text": "var(--hop-quetzal-900)",
+  "--hop-decorative-option2-text-weak": "var(--hop-quetzal-300)",
+  "--hop-decorative-option2-border": "var(--hop-quetzal-400)",
+  "--hop-decorative-option2-icon": "var(--hop-quetzal-900)",
+  "--hop-decorative-option1-surface-strong": "var(--hop-sapphire-200)",
+  "--hop-decorative-option1-surface-weakest": "var(--hop-sapphire-25)",
+  "--hop-decorative-option1-surface-weak": "var(--hop-sapphire-50)",
+  "--hop-decorative-option1-surface-weak-hover": "var(--hop-sapphire-75)",
+  "--hop-decorative-option1-surface-hover": "var(--hop-sapphire-200)",
+  "--hop-decorative-option1-surface": "var(--hop-sapphire-100)",
+  "--hop-decorative-option1-text-weak": "var(--hop-sapphire-300)",
+  "--hop-decorative-option1-border": "var(--hop-sapphire-400)",
+  "--hop-decorative-option1-icon": "var(--hop-sapphire-900)",
+  "--hop-decorative-option1-text": "var(--hop-sapphire-900)",
+  "--hop-neutral-text-hover": "var(--hop-rock-50)",
+  "--hop-neutral-surface-weakest-hover": "var(--hop-rock-800)",
+  "--hop-neutral-text-weak": "var(--hop-rock-200)",
+  "--hop-neutral-surface-disabled": "var(--hop-rock-700)",
+  "--hop-neutral-surface-active": "var(--hop-toad-25)",
+  "--hop-neutral-surface-weak": "var(--hop-rock-800)",
+  "--hop-neutral-surface": "var(--hop-abyss)",
+  "--hop-neutral-text-disabled": "var(--hop-rock-500)",
+  "--hop-neutral-text-active": "var(--hop-rock-900)",
+  "--hop-neutral-text-strong": "var(--hop-rock-900)",
+  "--hop-neutral-text": "var(--hop-rock-25)",
+  "--hop-neutral-text-weakest": "var(--hop-rock-400)",
+  "--hop-neutral-border-disabled": "var(--hop-rock-800)",
+  "--hop-neutral-border-strong-hover": "var(--hop-samoyed)",
+  "--hop-neutral-border-strong": "var(--hop-samoyed)",
+  "--hop-neutral-surface-strong": "var(--hop-samoyed)",
+  "--hop-neutral-surface-hover": "var(--hop-rock-800)",
+  "--hop-neutral-icon-disabled": "var(--hop-rock-500)",
+  "--hop-neutral-icon": "var(--hop-rock-25)",
+  "--hop-neutral-icon-weak": "var(--hop-rock-200)",
+  "--hop-neutral-border": "var(--hop-rock-500)",
+  "--hop-neutral-border-weak": "var(--hop-rock-800)",
+  "--hop-neutral-icon-weakest": "var(--hop-rock-400)",
+  "--hop-neutral-icon-strong": "var(--hop-rock-900)",
+  "--hop-neutral-icon-hover": "var(--hop-rock-50)",
+  "--hop-neutral-icon-active": "var(--hop-rock-900)",
+  "--hop-neutral-border-hover": "var(--hop-rock-300)",
+  "--hop-neutral-border-active": "var(--hop-toad-25)",
+  "--hop-neutral-surface-weak-hover": "var(--hop-rock-700)",
+  "--hop-neutral-border-weakest": "var(--hop-rock-800)",
+  "--hop-neutral-surface-weakest": "var(--hop-rock-900)",
+  "--hop-warning-icon-weakest": "var(--hop-koi-200)",
+  "--hop-warning-icon-weak": "var(--hop-koi-75)",
+  "--hop-warning-text-weak": "var(--hop-koi-75)",
+  "--hop-warning-surface": "var(--hop-koi-75)",
+  "--hop-warning-surface-strong": "var(--hop-koi-300)",
+  "--hop-warning-surface-weak": "var(--hop-koi-800)",
+  "--hop-warning-border": "var(--hop-koi-500)",
+  "--hop-warning-icon": "var(--hop-koi-900)",
+  "--hop-warning-text": "var(--hop-koi-900)",
+  "--hop-success-border": "var(--hop-moss-500)",
+  "--hop-success-icon-weak": "var(--hop-moss-75)",
+  "--hop-success-icon-weakest": "var(--hop-moss-200)",
+  "--hop-success-text-weak": "var(--hop-moss-75)",
+  "--hop-success-surface": "var(--hop-moss-75)",
+  "--hop-success-surface-strong": "var(--hop-moss-300)",
+  "--hop-success-text-hover": "var(--hop-moss-700)",
+  "--hop-success-text": "var(--hop-moss-900)",
+  "--hop-success-icon": "var(--hop-moss-900)",
+  "--hop-success-surface-weak": "var(--hop-moss-800)",
+  "--hop-information-icon-weakest": "var(--hop-coastal-200)",
+  "--hop-information-surface-strong": "var(--hop-coastal-300)",
+  "--hop-information-icon-weak": "var(--hop-coastal-300)",
+  "--hop-information-text": "var(--hop-coastal-900)",
+  "--hop-information-surface": "var(--hop-coastal-75)",
+  "--hop-information-surface-weak": "var(--hop-coastal-800)",
+  "--hop-information-text-weak": "var(--hop-coastal-75)",
+  "--hop-information-icon": "var(--hop-coastal-900)",
+  "--hop-information-border": "var(--hop-coastal-400)",
+  "--hop-status-neutral-surface-strong": "var(--hop-rock-100)",
+  "--hop-status-neutral-text": "var(--hop-rock-25)",
+  "--hop-status-neutral-icon": "var(--hop-rock-25)",
+  "--hop-status-neutral-surface": "var(--hop-abyss)",
+  "--hop-status-progress-surface-strong": "var(--hop-sapphire-200)",
+  "--hop-status-progress-icon": "var(--hop-sapphire-900)",
+  "--hop-status-progress-surface": "var(--hop-sapphire-100)",
+  "--hop-status-progress-text": "var(--hop-sapphire-900)",
+  "--hop-status-option6-surface-strong": "var(--hop-sunken-treasure-100)",
+  "--hop-status-option6-icon": "var(--hop-sunken-treasure-900)",
+  "--hop-status-option6-surface": "var(--hop-sunken-treasure-75)",
+  "--hop-status-option6-text": "var(--hop-sunken-treasure-900)",
+  "--hop-status-option5-surface-strong": "var(--hop-toad-100)",
+  "--hop-status-option5-icon": "var(--hop-toad-900)",
+  "--hop-status-option5-surface": "var(--hop-toad-200)",
+  "--hop-status-option5-text": "var(--hop-toad-900)",
+  "--hop-status-option1-surface-strong": "var(--hop-coastal-100)",
+  "--hop-status-option1-icon": "var(--hop-coastal-900)",
+  "--hop-status-option1-surface": "var(--hop-coastal-200)",
+  "--hop-status-option1-text": "var(--hop-coastal-900)",
+  "--hop-status-option2-surface-strong": "var(--hop-orchid-bloom-100)",
+  "--hop-status-option2-text": "var(--hop-orchid-bloom-900)",
+  "--hop-status-option2-surface": "var(--hop-orchid-bloom-200)",
+  "--hop-status-option2-icon": "var(--hop-orchid-bloom-900)",
+  "--hop-status-option3-surface-strong": "var(--hop-quetzal-100)",
+  "--hop-status-option3-icon": "var(--hop-quetzal-900)",
+  "--hop-status-option3-surface": "var(--hop-quetzal-200)",
+  "--hop-status-option3-text": "var(--hop-quetzal-900)",
+  "--hop-status-option4-surface-strong": "var(--hop-fog-100)",
+  "--hop-status-option4-icon": "var(--hop-fog-900)",
+  "--hop-status-option4-surface": "var(--hop-fog-200)",
+  "--hop-status-option4-text": "var(--hop-fog-900)",
+  "--hop-status-inactive-surface-strong": "var(--hop-rock-100)",
+  "--hop-status-inactive-icon": "var(--hop-rock-800)",
+  "--hop-status-inactive-surface": "var(--hop-rock-75)",
+  "--hop-status-inactive-text": "var(--hop-rock-900)",
+  "--hop-status-caution-surface-strong": "var(--hop-koi-200)",
+  "--hop-status-caution-icon": "var(--hop-koi-900)",
+  "--hop-status-caution-surface": "var(--hop-koi-75)",
+  "--hop-status-caution-text": "var(--hop-koi-900)",
+  "--hop-status-negative-surface-strong": "var(--hop-amanita-200)",
+  "--hop-status-negative-icon": "var(--hop-amanita-900)",
+  "--hop-status-negative-surface": "var(--hop-amanita-75)",
+  "--hop-status-negative-text": "var(--hop-amanita-900)",
+  "--hop-status-positive-icon": "var(--hop-moss-900)",
+  "--hop-status-positive-surface-strong": "var(--hop-moss-200)",
+  "--hop-status-positive-surface": "var(--hop-moss-75)",
+  "--hop-status-positive-text": "var(--hop-moss-900)",
+  "--hop-dataviz-unavailable": "var(--hop-rock-600)",
+  "--hop-dataviz-unavailable-weak": "var(--hop-rock-400)",
+  "--hop-dataviz-unavailable-strong": "var(--hop-rock-700)",
+  "--hop-dataviz-text-onlight": "var(--hop-rock-800)",
+  "--hop-dataviz-text-ondark": "var(--hop-samoyed)"
+};
+
+export { DarkSemanticTokens };

package/dist/chunk-35LDZFKX.js

@@ -0,0 +1,29 @@
+import { useStyledSystem } from './chunk-RIR7BXVF.js';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./htmlElement.module.css#css-module
+var htmlElement_module_default = { "html-element": "htmlElement-module__html-element___xmRSa" };
+function htmlElement(elementType) {
+  return forwardRef((props, ref) => {
+    const { className, children, ...rest } = useStyledSystem(props);
+    const As = elementType;
+    const classNames = clsx(
+      className,
+      htmlElement_module_default["html-element"],
+      `hop-html-${elementType}`
+      // this selector is not used, but could be used as a selector for the element type wrapper
+    );
+    return (
+      // It's too hard for typescript, a generic elementType, with generic props.
+      // Basically, the interface is HTMLProps of the elementType + styled system props.
+      // useStyledSystem removes the styled system props, so what is remaining is valid for the elementType.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ jsx(As, { ref, className: classNames, ...rest, children })
+    );
+  });
+}
+
+export { htmlElement };

package/dist/chunk-3YM73BQP.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+// src/utils/useIsomorphicLayoutEffect.ts
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

package/dist/chunk-7HCELIKZ.js

@@ -0,0 +1,41 @@
+import { BodyStyleProvider } from './chunk-OHW5NUAW.js';
+import { Div } from './chunk-FYKLSVLR.js';
+import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-LU33LZMJ.js';
+import { TokenProvider } from './chunk-ZO3DYLQJ.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZQUJDDQL.js';
+import { useColorScheme } from './chunk-IP7TYBR3.js';
+import { ColorSchemeContext } from './chunk-V7X6ANEM.js';
+import clsx from 'clsx';
+import { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function StyledSystemProvider({ children, withBodyStyle = false, withCssVariables = true, colorScheme = "light", defaultColorScheme = "light", unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint, className, ...rest }) {
+  const [remoteColorScheme, setRemoteColorScheme] = useState();
+  const computedColorScheme = useColorScheme(remoteColorScheme ?? colorScheme, defaultColorScheme);
+  const setColorScheme = useCallback((newColorScheme) => {
+    setRemoteColorScheme(newColorScheme);
+  }, [setRemoteColorScheme]);
+  const classNames = clsx(
+    HopperRootCssClass,
+    `${HopperRootCssClass}-${computedColorScheme}`,
+    StyledSystemRootCssClass,
+    `${StyledSystemRootCssClass}-${computedColorScheme}`,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    ColorSchemeContext.Provider,
+    {
+      value: {
+        colorScheme: computedColorScheme,
+        setColorScheme
+      },
+      children: /* @__PURE__ */ jsx(BreakpointProvider, { unsupportedMatchMediaBreakpoint, children: /* @__PURE__ */ jsxs(Div, { className: classNames, ...rest, children: [
+        withBodyStyle && /* @__PURE__ */ jsx(BodyStyleProvider, {}),
+        withCssVariables && /* @__PURE__ */ jsx(TokenProvider, {}),
+        children
+      ] }) })
+    }
+  );
+}
+
+export { StyledSystemProvider };

package/dist/chunk-FYKLSVLR.js

@@ -0,0 +1,39 @@
+import { htmlElement } from './chunk-35LDZFKX.js';
+
+// src/html-wrappers/html.ts
+var Address = htmlElement("address");
+var Article = htmlElement("article");
+var Aside = htmlElement("aside");
+var HtmlFooter = htmlElement("footer");
+var HtmlH1 = htmlElement("h1");
+var HtmlH2 = htmlElement("h2");
+var HtmlH3 = htmlElement("h3");
+var HtmlH4 = htmlElement("h4");
+var HtmlH5 = htmlElement("h5");
+var HtmlH6 = htmlElement("h6");
+var HtmlHeader = htmlElement("header");
+var Main = htmlElement("main");
+var Nav = htmlElement("nav");
+var HtmlSection = htmlElement("section");
+var Div = htmlElement("div");
+var HtmlParagraph = htmlElement("p");
+var OL = htmlElement("ol");
+var UL = htmlElement("ul");
+var LI = htmlElement("li");
+var A = htmlElement("a");
+var Span = htmlElement("span");
+var Img = htmlElement("img");
+var Table = htmlElement("table");
+var THead = htmlElement("thead");
+var TBody = htmlElement("tbody");
+var TFoot = htmlElement("tfoot");
+var TH = htmlElement("th");
+var TR = htmlElement("tr");
+var TD = htmlElement("td");
+var HtmlButton = htmlElement("button");
+var HtmlForm = htmlElement("form");
+var HtmlInput = htmlElement("input");
+var HtmlLabel = htmlElement("label");
+var HtmlTextArea = htmlElement("textarea");
+
+export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL };

package/dist/chunk-GYREQTEK.js

@@ -0,0 +1,30 @@
+import { useBreakpointContext } from './chunk-ZUVKM5DV.js';
+import { Breakpoints } from './chunk-XUHDFZZL.js';
+import { isObject, isNil } from './chunk-U5R6ZXH3.js';
+
+// src/responsive/useResponsiveValue.tsx
+var ResponsiveKeys = [...Object.keys(Breakpoints), "base"];
+function isResponsiveObject(obj) {
+  if (!isObject(obj)) {
+    return false;
+  }
+  return Object.keys(obj).every((key) => ResponsiveKeys.includes(key));
+}
+function parseResponsiveValue(value, matchedBreakpoints) {
+  if (isResponsiveObject(value)) {
+    for (let i = 0; i < matchedBreakpoints.length; i++) {
+      const responsiveValue = value[matchedBreakpoints[i]];
+      if (!isNil(responsiveValue)) {
+        return responsiveValue;
+      }
+    }
+    return value["base"];
+  }
+  return value;
+}
+function useResponsiveValue(value) {
+  const { matchedBreakpoints } = useBreakpointContext();
+  return parseResponsiveValue(value, matchedBreakpoints);
+}
+
+export { isResponsiveObject, parseResponsiveValue, useResponsiveValue };

package/dist/chunk-I37Y2R7V.js

@@ -0,0 +1,4 @@
+// src/styled-system-props.ts
+var UnsafePrefix = "UNSAFE_";
+
+export { UnsafePrefix };

package/dist/chunk-IK6W4ZXH.js

@@ -0,0 +1,11 @@
+import { DarkSemanticTokens } from './chunk-2ITAI3PJ.js';
+import { CoreTokens, SemanticTokens } from './chunk-Q3NLRNZN.js';
+
+// src/tokens/tokens.ts
+var Tokens = {
+  Core: CoreTokens,
+  Semantic: SemanticTokens,
+  DarkSemantic: DarkSemanticTokens
+};
+
+export { Tokens };

package/dist/chunk-IP7TYBR3.js

@@ -0,0 +1,19 @@
+import { useMediaQuery } from './chunk-STEDL5VQ.js';
+
+// src/color-scheme/useColorScheme.ts
+function useColorScheme(colorScheme, defaultColorScheme) {
+  const matchesLight = useMediaQuery("(prefers-color-scheme: light)");
+  const matchesDark = useMediaQuery("(prefers-color-scheme: dark)");
+  if (colorScheme === "system") {
+    if (matchesLight) {
+      return "light";
+    }
+    if (matchesDark) {
+      return "dark";
+    }
+    return defaultColorScheme ?? "light";
+  }
+  return colorScheme;
+}
+
+export { useColorScheme };

package/dist/chunk-JBWKRDVA.js

@@ -0,0 +1,27 @@
+import { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
+import { isNil } from './chunk-U5R6ZXH3.js';
+
+// src/utils/useInsertStyleElement.ts
+function useInsertStyleElement(elementId, cssContent, allowUpdates = true) {
+  useIsomorphicInsertionEffect(() => {
+    let element = document.getElementById(elementId);
+    if (isNil(element)) {
+      if (!isNil(cssContent)) {
+        element = document.createElement("style");
+        element.id = elementId;
+        document.head.appendChild(element);
+        element.innerText = formatInlineCss(cssContent);
+        return () => {
+          element?.remove();
+        };
+      }
+    } else if (allowUpdates) {
+      element.innerText = formatInlineCss(cssContent);
+    }
+  }, [elementId, cssContent]);
+}
+function formatInlineCss(str) {
+  return str?.replace(/(\r\n|\n|\r|\s\s)/gm, "") ?? "";
+}
+
+export { useInsertStyleElement };

package/dist/chunk-JQBON2KA.js

@@ -0,0 +1,23 @@
+import { isNil } from './chunk-U5R6ZXH3.js';
+
+// src/utils/useThemeComputedStyle.ts
+var ThemeComputedStyle = class {
+  #componentRef;
+  #scope;
+  constructor(componentRef, scope) {
+    this.#componentRef = componentRef;
+    this.#scope = scope;
+  }
+  getThemeElement() {
+    const themeElement = this.#componentRef.current?.closest(this.#scope);
+    if (isNil(themeElement)) {
+      throw new Error("Cannot find a theme element, is the scope assigned to a DOM element?");
+    }
+    return themeElement;
+  }
+  getPropertyValue(name) {
+    return window.getComputedStyle(this.getThemeElement()).getPropertyValue(name);
+  }
+};
+
+export { ThemeComputedStyle };

package/dist/chunk-KUUJ37DW.js

@@ -0,0 +1,96 @@
+import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-U3SI5QXV.js';
+import { parseResponsiveValue } from './chunk-GYREQTEK.js';
+import { isNil } from './chunk-U5R6ZXH3.js';
+
+// src/tokens/token-mappings.ts
+var ColorExpressionTypes = [
+  "#",
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla"
+];
+var DefaultBorderWidthAndStyle = "1px solid";
+function createMapping(mappings, template = createValueTemplate) {
+  return Object.entries(mappings).reduce((acc, [key, value]) => {
+    acc[key] = template(value);
+    return acc;
+  }, {});
+}
+function createValueTemplate(value) {
+  return `var(${`${HopperVariablePrefix}-${value}`})`;
+}
+function createBorderValueTemplate(value) {
+  return `${DefaultBorderWidthAndStyle} ${createValueTemplate(value)}`;
+}
+var ColorMapping = createMapping(HopperColors);
+var DataVizColorMapping = createMapping(DataVizColors);
+var BackgroundColorMapping = {
+  ...createMapping(BackgroundColors),
+  ...ColorMapping,
+  ...DataVizColorMapping
+};
+var BorderMapping = {
+  ...createMapping(BackgroundColors, createBorderValueTemplate),
+  ...createMapping(HopperColors, createBorderValueTemplate),
+  ...createMapping(DataVizColors, createBorderValueTemplate)
+};
+var TextColorMapping = {
+  ...createMapping(TextColors),
+  ...ColorMapping,
+  ...DataVizColorMapping
+};
+var IconColorMapping = {
+  ...createMapping(IconColors),
+  ...ColorMapping,
+  ...DataVizColorMapping
+};
+var BoxShadowMapping = createMapping(Elevation);
+var FontSizeMapping = createMapping(FontSize);
+var FontWeightMapping = createMapping(FontWeight);
+var LineHeightMapping = createMapping(LineHeight);
+var FontFamilyMapping = createMapping(FontFamily);
+var BorderRadiusMapping = createMapping(Shape);
+var SpaceMapping = createMapping(CoreSpace);
+var SimplePaddingMapping = {
+  ...createMapping(SemanticSimplePaddingSpace),
+  ...SpaceMapping
+};
+var ComplexPaddingMapping = {
+  ...SimplePaddingMapping,
+  ...createMapping(SemanticComplexPaddingSpace)
+};
+var SimpleMarginMapping = {
+  ...createMapping(SemanticSimpleMarginSpace),
+  ...SpaceMapping
+};
+var ComplexMarginMapping = {
+  ...SimpleMarginMapping,
+  ...createMapping(SemanticComplexMarginSpace)
+};
+var SizingMapping = {
+  ...SpaceMapping
+  // TODO: Sizing scale still missing, only core tokens are available at the moment
+};
+function parseResponsiveSystemValue(value, systemValues, matchedBreakpoints) {
+  if (isNil(value)) {
+    return value;
+  }
+  const systemValue = getSystemValue(value, systemValues);
+  if (!isNil(systemValue)) {
+    return systemValue;
+  }
+  const underlyingValue = parseResponsiveValue(value, matchedBreakpoints);
+  if (!isNil(underlyingValue)) {
+    const underlyingSystemValue = getSystemValue(underlyingValue, systemValues);
+    if (!isNil(underlyingSystemValue)) {
+      return underlyingSystemValue;
+    }
+  }
+  return underlyingValue;
+}
+function getSystemValue(value, systemValues) {
+  return systemValues[value];
+}
+
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue };