@hopper-ui/styled-system 0.2.0 → 0.2.2

package/dist/chunk-U5R6ZXH3.js

@@ -0,0 +1,46 @@
+// src/utils/assertion.ts
+function isNull(value) {
+  return value == null;
+}
+function isUndefined(value) {
+  return typeof value === "undefined" || value === void 0;
+}
+function isDefined(value) {
+  return typeof value !== "undefined" && value !== void 0;
+}
+function isNil(value) {
+  return isNull(value) || isUndefined(value);
+}
+function isNilOrEmpty(value) {
+  return isNil(value) || value === "";
+}
+function isString(value) {
+  return Object.prototype.toString.call(value) === "[object String]";
+}
+function isNumber(value) {
+  return typeof value === "number";
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function isEmptyArray(value) {
+  return isArray(value) && value.length === 0;
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isObject(value) {
+  return typeof value === "object" && !Array.isArray(value) && value != null;
+}
+function isPlainObject(value) {
+  if (Object.prototype.toString.call(value) !== "[object Object]") {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === null || prototype === Object.prototype;
+}
+function isPromise(value) {
+  return !isNil(value) && !isNil(value.then);
+}
+
+export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined };

package/dist/chunk-V7X6ANEM.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+// src/color-scheme/ColorSchemeContext.ts
+var ColorSchemeContext = createContext({
+  colorScheme: "light",
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setColorScheme: () => {
+  }
+});
+function useColorSchemeContext() {
+  return useContext(ColorSchemeContext);
+}
+
+export { ColorSchemeContext, useColorSchemeContext };

package/dist/chunk-X5OXC6DN.js

@@ -0,0 +1,9 @@
+import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
+
+// src/color-scheme/useColorSchemeValue.ts
+function useColorSchemeValue(lightColor, darkColor) {
+  const { colorScheme } = useColorSchemeContext();
+  return colorScheme === "dark" ? darkColor : lightColor;
+}
+
+export { useColorSchemeValue };

package/dist/chunk-XUHDFZZL.js

@@ -0,0 +1,10 @@
+// src/responsive/Breakpoints.ts
+var Breakpoints = {
+  xs: 640,
+  sm: 768,
+  md: 1024,
+  lg: 1280,
+  xl: 1440
+};
+
+export { Breakpoints };

package/dist/chunk-YPIK2HRL.js

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

package/dist/chunk-ZO3DYLQJ.js

@@ -0,0 +1,32 @@
+import { Tokens } from './chunk-IK6W4ZXH.js';
+import { useInsertStyleElement } from './chunk-JBWKRDVA.js';
+import { StyledSystemRootCssClass } from './chunk-ZQUJDDQL.js';
+
+// src/tokens/TokenProvider.tsx
+function TokenProvider() {
+  useInsertStyleElement(
+    `hop-tokens-${StyledSystemRootCssClass}`,
+    tokensToCssString(`.hop.${StyledSystemRootCssClass}`, Tokens.Core),
+    false
+  );
+  useInsertStyleElement(
+    `hop-tokens-semantic-${StyledSystemRootCssClass}`,
+    tokensToCssString(`.hop.${StyledSystemRootCssClass}`, Tokens.Semantic),
+    false
+  );
+  useInsertStyleElement(
+    `hop-tokens-semantic-dark-${StyledSystemRootCssClass}`,
+    tokensToCssString(`.hop.${StyledSystemRootCssClass}.${StyledSystemRootCssClass}-dark`, Tokens.DarkSemantic),
+    false
+  );
+  return null;
+}
+function tokensToCssString(selector, tokens) {
+  const cssValues = Object.entries(tokens).reduce((acc, [key, value]) => {
+    return `${acc} ${key}: ${value};`;
+  }, "");
+  return `${selector} {${cssValues}
+}`;
+}
+
+export { TokenProvider };

package/dist/chunk-ZQUJDDQL.js

@@ -0,0 +1,84 @@
+// package.json
+var package_default = {
+  name: "@hopper-ui/styled-system",
+  author: "Workleap",
+  version: "0.2.2",
+  description: "The styled-system package.",
+  license: "Apache-2.0",
+  repository: {
+    type: "git",
+    url: "git+https://github.com/gsoft-inc/wl-hopper.git",
+    directory: "packages/styled-system"
+  },
+  publishConfig: {
+    access: "public",
+    provenance: true
+  },
+  type: "module",
+  sideEffects: [
+    "*.css"
+  ],
+  main: "dist/index.js",
+  types: "dist/index.d.ts",
+  style: "dist/index.css",
+  exports: {
+    ".": {
+      import: "./dist/index.js",
+      types: "./dist/index.d.ts",
+      default: "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  files: [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  scripts: {
+    dev: "tsup --config ./tsup.dev.ts",
+    build: "tsup --config ./tsup.build.ts",
+    test: "jest"
+  },
+  peerDependencies: {
+    react: "*",
+    "react-dom": "*"
+  },
+  dependencies: {
+    clsx: "2.0.0",
+    "react-aria": "3.30.0"
+  },
+  devDependencies: {
+    "@hopper-ui/tokens": "workspace:*",
+    "@swc/core": "1.3.96",
+    "@swc/helpers": "0.5.3",
+    "@swc/jest": "0.2.29",
+    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/react": "14.1.0",
+    "@types/jest": "29.5.8",
+    "@types/react-dom": "18.2.17",
+    "@types/react-test-renderer": "18.0.6",
+    "@types/react": "18.2.38",
+    "@workleap/eslint-plugin": "3.0.0",
+    "@workleap/swc-configs": "2.1.2",
+    "@workleap/tsup-configs": "3.0.1",
+    "@workleap/typescript-configs": "3.0.2",
+    "identity-obj-proxy": "3.0.0",
+    "jest-environment-jsdom": "29.7.0",
+    jest: "29.7.0",
+    "postcss-modules": "6.0.0",
+    postcss: "8.4.31",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
+    react: "18.2.0",
+    "ts-jest": "29.1.1",
+    tsup: "7.2.0",
+    "type-fest": "4.7.1",
+    typescript: "5.2.2"
+  }
+};
+
+// src/styled-system-root-css-class.ts
+var HopperRootCssClass = "hop";
+var StyledSystemRootCssClass = `${HopperRootCssClass}-${package_default.version.replaceAll(".", "-")}`;
+
+export { HopperRootCssClass, StyledSystemRootCssClass };

package/dist/chunk-ZUVKM5DV.js

@@ -0,0 +1,13 @@
+import { isNil } from './chunk-U5R6ZXH3.js';
+import { createContext, useContext } from 'react';
+
+var BreakpointContext = createContext(void 0);
+function useBreakpointContext() {
+  const context = useContext(BreakpointContext);
+  if (isNil(context)) {
+    throw new Error("useBreakpointContext must be used within a BreakpointProvider");
+  }
+  return context;
+}
+
+export { BreakpointContext, useBreakpointContext };

package/dist/color-scheme/ColorSchemeContext.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+type ColorScheme = "light" | "dark";
+type ColorSchemeOrSystem = ColorScheme | "system";
+interface ColorSchemeContextType {
+    colorScheme: ColorScheme;
+    setColorScheme: (newColorScheme: ColorScheme) => void;
+}
+declare const ColorSchemeContext: react.Context<ColorSchemeContextType>;
+declare function useColorSchemeContext(): ColorSchemeContextType;
+
+export { ColorScheme, ColorSchemeContext, ColorSchemeContextType, ColorSchemeOrSystem, useColorSchemeContext };

package/dist/color-scheme/ColorSchemeContext.js

@@ -0,0 +1 @@
+export { ColorSchemeContext, useColorSchemeContext } from '../chunk-V7X6ANEM.js';

package/dist/color-scheme/useColorScheme.d.ts

@@ -0,0 +1,6 @@
+import { ColorSchemeOrSystem, ColorScheme } from './ColorSchemeContext.js';
+import 'react';
+
+declare function useColorScheme(colorScheme: ColorSchemeOrSystem, defaultColorScheme: ColorScheme): ColorScheme;
+
+export { useColorScheme };

package/dist/color-scheme/useColorScheme.js

@@ -0,0 +1,2 @@
+export { useColorScheme } from '../chunk-IP7TYBR3.js';
+import '../chunk-STEDL5VQ.js';

package/dist/color-scheme/useColorSchemeValue.d.ts

@@ -0,0 +1,3 @@
+declare function useColorSchemeValue(lightColor: string, darkColor: string): string;
+
+export { useColorSchemeValue };

package/dist/color-scheme/useColorSchemeValue.js

@@ -0,0 +1,2 @@
+export { useColorSchemeValue } from '../chunk-X5OXC6DN.js';
+import '../chunk-V7X6ANEM.js';

package/dist/global-styles/BodyStyleProvider.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function BodyStyleProvider(): react_jsx_runtime.JSX.Element;
+
+export { BodyStyleProvider };

package/dist/global-styles/BodyStyleProvider.js

@@ -0,0 +1,8 @@
+export { BodyStyleProvider } from '../chunk-OHW5NUAW.js';
+import '../chunk-3YM73BQP.js';
+import '../chunk-JQBON2KA.js';
+import '../chunk-JBWKRDVA.js';
+import '../chunk-YPIK2HRL.js';
+import '../chunk-ZQUJDDQL.js';
+import '../chunk-U5R6ZXH3.js';
+import '../chunk-V7X6ANEM.js';

package/dist/html-wrappers/html.css

@@ -0,0 +1,132 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
+.UseStyledSystem-module__hop-b-hover___J4CU8:hover {
+  --hop-b-hover: initial;
+  border: var(--hop-b-hover) !important;
+}
+.UseStyledSystem-module__hop-bb-hover___kSFWj:hover {
+  --hop-bb-hover: initial;
+  border-bottom: var(--hop-bb-hover) !important;
+}
+.UseStyledSystem-module__hop-bl-hover___1Cezh:hover {
+  --hop-bl-hover: initial;
+  border-left: var(--hop-bl-hover) !important;
+}
+.UseStyledSystem-module__hop-br-hover___6QimZ:hover {
+  --hop-br-hover: initial;
+  border-right: var(--hop-br-hover) !important;
+}
+.UseStyledSystem-module__hop-bt-hover___t7jJb:hover {
+  --hop-bt-hover: initial;
+  border-top: var(--hop-bt-hover) !important;
+}
+.UseStyledSystem-module__hop-b-focus___GAcvC:focus-visible {
+  --hop-b-focus: initial;
+  border: var(--hop-b-focus) !important;
+}
+.UseStyledSystem-module__hop-bb-focus___tRcZ7:focus-visible {
+  --hop-bb-focus: initial;
+  border-bottom: var(--hop-bb-focus) !important;
+}
+.UseStyledSystem-module__hop-bl-focus___tHmqH:focus-visible {
+  --hop-bl-focus: initial;
+  border-left: var(--hop-bl-focus) !important;
+}
+.UseStyledSystem-module__hop-br-focus___o38Ur:focus-visible {
+  --hop-br-focus: initial;
+  border-right: var(--hop-br-focus) !important;
+}
+.UseStyledSystem-module__hop-bt-focus___Iuh-n:focus-visible {
+  --hop-bt-focus: initial;
+  border-top: var(--hop-bt-focus) !important;
+}
+.UseStyledSystem-module__hop-b-active___T6lcA:active {
+  --hop-b-active: initial;
+  border: var(--hop-b-active) !important;
+}
+.UseStyledSystem-module__hop-bb-active___GMekS:active {
+  --hop-bb-active: initial;
+  border-bottom: var(--hop-bb-active) !important;
+}
+.UseStyledSystem-module__hop-bl-active___yAT0P:active {
+  --hop-bl-active: initial;
+  border-left: var(--hop-bl-active) !important;
+}
+.UseStyledSystem-module__hop-br-active___gjJ1X:active {
+  --hop-br-active: initial;
+  border-right: var(--hop-br-active) !important;
+}
+.UseStyledSystem-module__hop-bt-active___-jY1M:active {
+  --hop-bt-active: initial;
+  border-top: var(--hop-bt-active) !important;
+}
+.UseStyledSystem-module__hop-bg-hover___YImIc:hover {
+  --hop-bg-hover: initial;
+  background-color: var(--hop-bg-hover) !important;
+}
+.UseStyledSystem-module__hop-bg-focus___Cop9n:focus-visible {
+  --hop-bg-focus: initial;
+  background-color: var(--hop-bg-focus) !important;
+}
+.UseStyledSystem-module__hop-bg-active___5O85P:active {
+  --hop-bg-active: initial;
+  background-color: var(--hop-bg-active) !important;
+}
+.UseStyledSystem-module__hop-bs-hover___8Oj0h:hover {
+  --hop-bs-hover: initial;
+  box-shadow: var(--hop-bs-hover) !important;
+}
+.UseStyledSystem-module__hop-bs-focus___r9l2R:focus-visible {
+  --hop-bs-focus: initial;
+  box-shadow: var(--hop-bs-focus) !important;
+}
+.UseStyledSystem-module__hop-bs-active___XyHmm:active {
+  --hop-bs-active: initial;
+  box-shadow: var(--hop-bs-active) !important;
+}
+.UseStyledSystem-module__hop-c-hover___yYnaZ:hover {
+  --hop-c-hover: initial;
+  color: var(--hop-c-hover) !important;
+}
+.UseStyledSystem-module__hop-c-focus___Z9ASb:focus-visible {
+  --hop-c-focus: initial;
+  color: var(--hop-c-focus) !important;
+}
+.UseStyledSystem-module__hop-c-active___zk1Gb:active {
+  --hop-c-active: initial;
+  color: var(--hop-c-active) !important;
+}
+.UseStyledSystem-module__hop-cs-hover___jOiBf:hover {
+  --hop-cs-hover: initial;
+  cursor: var(--hop-cs-hover) !important;
+}
+.UseStyledSystem-module__hop-f-hover___huyDo:hover {
+  --hop-f-hover: initial;
+  fill: var(--hop-f-hover) !important;
+}
+.UseStyledSystem-module__hop-f-focus___5-VRH:focus-visible {
+  --hop-f-focus: initial;
+  fill: var(--hop-f-focus) !important;
+}
+.UseStyledSystem-module__hop-o-hover___Ntq4o:hover {
+  --hop-o-hover: initial;
+  opacity: var(--hop-o-hover) !important;
+}
+.UseStyledSystem-module__hop-o-focus___Xxebb:focus-visible {
+  --hop-o-focus: initial;
+  opacity: var(--hop-o-focus) !important;
+}
+.UseStyledSystem-module__hop-o-active___uJ6oe:active {
+  --hop-o-active: initial;
+  opacity: var(--hop-o-active) !important;
+}
+.UseStyledSystem-module__hop-ol-focus___iZ2fp:focus-visible {
+  --hop-ol-focus: initial;
+  color: var(--hop-ol-focus) !important;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
+:where(.htmlElement-module__html-element___xmRSa),
+:where(.htmlElement-module__html-element___xmRSa::after),
+:where(.htmlElement-module__html-element___xmRSa::before) {
+  box-sizing: border-box;
+}

package/dist/{StyledSystemProvider-173b78af.d.ts → html-wrappers/html.d.ts}

@@ -1,19 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ElementRef, ComponentProps, ReactNode } from 'react';
-import { aB as StyledComponentProps, B as Breakpoint } from './styled-system-props-1c231c50.js';
-
-type ColorScheme = "light" | "dark";
-type ColorSchemeOrSystem = ColorScheme | "system";
-interface ColorSchemeContextType {
-    colorScheme: ColorScheme;
-    setColorScheme: (newColorScheme: ColorScheme) => void;
-}
-declare const ColorSchemeContext: react.Context<ColorSchemeContextType>;
-declare function useColorSchemeContext(): ColorSchemeContextType;
-
-type HtmlElementProps<T extends keyof JSX.IntrinsicElements> = StyledComponentProps<T>;
-declare function htmlElement<T extends keyof JSX.IntrinsicElements>(elementType: T): react.ForwardRefExoticComponent<react.PropsWithoutRef<HtmlElementProps<T>> & react.RefAttributes<ElementRef<T>>>;
+import { ComponentProps } from 'react';
+import { HtmlElementProps } from './htmlElement.js';
+import '../styled-system-props.js';
+import 'csstype';
+import '../responsive/useResponsiveValue.js';
+import '../responsive/Breakpoints.js';
+import '../tokens/token-mappings.js';
 
 /**
  * A specialized wrapping component for HTML `address` element that allows style props.
@@ -186,41 +178,4 @@ type HtmlInputProps = ComponentProps<typeof HtmlInput>;
 type HtmlLabelProps = ComponentProps<typeof HtmlLabel>;
 type HtmlTextAreaProps = ComponentProps<typeof HtmlTextArea>;
 
-declare const DefaultUnsupportedMatchMediaBreakpoint: Breakpoint;
-interface BreakpointProviderProps {
-    children: ReactNode;
-    unsupportedMatchMediaBreakpoint?: Breakpoint;
-}
-declare function BreakpointProvider({ children, unsupportedMatchMediaBreakpoint }: BreakpointProviderProps): react_jsx_runtime.JSX.Element;
-
-interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
-    /** The children of the component */
-    children: ReactNode;
-    /**
-     * Determines whether the styles should be added to the document's body
-     * By default, it is set to `false`. If set to `true`, it will apply additional styling to the document's body.
-    */
-    withBodyStyle?: boolean;
-    /**
-     * The color scheme to use.
-     */
-    colorScheme: ColorSchemeOrSystem;
-    /**
-     * Default color scheme to use when a user preferred color scheme (system) is not available.
-     */
-    defaultColorScheme?: ColorScheme;
-    /**
-     * Determines whether token CSS variables should be added to the document's head
-     * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files
-    */
-    withCssVariables?: boolean;
-}
-/**
- * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for:
- * - Adding CSS variables to the document
- * - Managing color scheme (light, dark, auto)
- * - Optionally adding body styles to the document
- */
-declare function StyledSystemProvider({ children, withBodyStyle, withCssVariables, colorScheme, defaultColorScheme, unsupportedMatchMediaBreakpoint, className, ...rest }: StyledSystemProviderProps): react_jsx_runtime.JSX.Element;
-
-export { TH as $, Address as A, NavProps as B, ColorSchemeOrSystem as C, HtmlSectionProps as D, Div as E, HtmlParagraph as F, DivProps as G, HtmlFooter as H, HtmlParagraphProps as I, OLProps as J, ULProps as K, LI as L, Main as M, Nav as N, OL as O, LIProps as P, A as Q, AProps as R, Span as S, SpanProps as T, UL as U, Img as V, ImgProps as W, Table as X, THead as Y, TBody as Z, TFoot as _, ColorScheme as a, TR as a0, TD as a1, TableProps as a2, THeadProps as a3, TBodyProps as a4, TFootProps as a5, THProps as a6, TRProps as a7, TDProps as a8, HtmlButton as a9, HtmlForm as aa, HtmlInput as ab, HtmlLabel as ac, HtmlTextArea as ad, HtmlButtonProps as ae, HtmlFormProps as af, HtmlInputProps as ag, HtmlLabelProps as ah, HtmlTextAreaProps as ai, HtmlElementProps as aj, htmlElement as ak, DefaultUnsupportedMatchMediaBreakpoint as al, BreakpointProviderProps as am, BreakpointProvider as an, StyledSystemProviderProps as ao, StyledSystemProvider as ap, ColorSchemeContextType as b, ColorSchemeContext as c, Article as d, Aside as e, HtmlH1 as f, HtmlH2 as g, HtmlH3 as h, HtmlH4 as i, HtmlH5 as j, HtmlH6 as k, HtmlHeader as l, HtmlSection as m, AddressProps as n, ArticleProps as o, AsideProps as p, HtmlFooterProps as q, HtmlH1Props as r, HtmlH2Props as s, HtmlH3Props as t, useColorSchemeContext as u, HtmlH4Props as v, HtmlH5Props as w, HtmlH6Props as x, HtmlHeaderProps as y, MainProps as z };
+export { A, AProps, Address, AddressProps, Article, ArticleProps, Aside, AsideProps, Div, DivProps, HtmlButton, HtmlButtonProps, HtmlFooter, HtmlFooterProps, HtmlForm, HtmlFormProps, HtmlH1, HtmlH1Props, HtmlH2, HtmlH2Props, HtmlH3, HtmlH3Props, HtmlH4, HtmlH4Props, HtmlH5, HtmlH5Props, HtmlH6, HtmlH6Props, HtmlHeader, HtmlHeaderProps, HtmlInput, HtmlInputProps, HtmlLabel, HtmlLabelProps, HtmlParagraph, HtmlParagraphProps, HtmlSection, HtmlSectionProps, HtmlTextArea, HtmlTextAreaProps, Img, ImgProps, LI, LIProps, Main, MainProps, Nav, NavProps, OL, OLProps, Span, SpanProps, TBody, TBodyProps, TD, TDProps, TFoot, TFootProps, TH, THProps, THead, THeadProps, TR, TRProps, Table, TableProps, UL, ULProps };

package/dist/html-wrappers/html.js

@@ -0,0 +1,10 @@
+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 } from '../chunk-FYKLSVLR.js';
+import '../chunk-35LDZFKX.js';
+import '../chunk-RIR7BXVF.js';
+import '../chunk-KUUJ37DW.js';
+import '../chunk-U3SI5QXV.js';
+import '../chunk-GYREQTEK.js';
+import '../chunk-ZUVKM5DV.js';
+import '../chunk-XUHDFZZL.js';
+import '../chunk-U5R6ZXH3.js';
+import '../chunk-I37Y2R7V.js';

package/dist/html-wrappers/htmlElement.css

@@ -0,0 +1,132 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
+.UseStyledSystem-module__hop-b-hover___J4CU8:hover {
+  --hop-b-hover: initial;
+  border: var(--hop-b-hover) !important;
+}
+.UseStyledSystem-module__hop-bb-hover___kSFWj:hover {
+  --hop-bb-hover: initial;
+  border-bottom: var(--hop-bb-hover) !important;
+}
+.UseStyledSystem-module__hop-bl-hover___1Cezh:hover {
+  --hop-bl-hover: initial;
+  border-left: var(--hop-bl-hover) !important;
+}
+.UseStyledSystem-module__hop-br-hover___6QimZ:hover {
+  --hop-br-hover: initial;
+  border-right: var(--hop-br-hover) !important;
+}
+.UseStyledSystem-module__hop-bt-hover___t7jJb:hover {
+  --hop-bt-hover: initial;
+  border-top: var(--hop-bt-hover) !important;
+}
+.UseStyledSystem-module__hop-b-focus___GAcvC:focus-visible {
+  --hop-b-focus: initial;
+  border: var(--hop-b-focus) !important;
+}
+.UseStyledSystem-module__hop-bb-focus___tRcZ7:focus-visible {
+  --hop-bb-focus: initial;
+  border-bottom: var(--hop-bb-focus) !important;
+}
+.UseStyledSystem-module__hop-bl-focus___tHmqH:focus-visible {
+  --hop-bl-focus: initial;
+  border-left: var(--hop-bl-focus) !important;
+}
+.UseStyledSystem-module__hop-br-focus___o38Ur:focus-visible {
+  --hop-br-focus: initial;
+  border-right: var(--hop-br-focus) !important;
+}
+.UseStyledSystem-module__hop-bt-focus___Iuh-n:focus-visible {
+  --hop-bt-focus: initial;
+  border-top: var(--hop-bt-focus) !important;
+}
+.UseStyledSystem-module__hop-b-active___T6lcA:active {
+  --hop-b-active: initial;
+  border: var(--hop-b-active) !important;
+}
+.UseStyledSystem-module__hop-bb-active___GMekS:active {
+  --hop-bb-active: initial;
+  border-bottom: var(--hop-bb-active) !important;
+}
+.UseStyledSystem-module__hop-bl-active___yAT0P:active {
+  --hop-bl-active: initial;
+  border-left: var(--hop-bl-active) !important;
+}
+.UseStyledSystem-module__hop-br-active___gjJ1X:active {
+  --hop-br-active: initial;
+  border-right: var(--hop-br-active) !important;
+}
+.UseStyledSystem-module__hop-bt-active___-jY1M:active {
+  --hop-bt-active: initial;
+  border-top: var(--hop-bt-active) !important;
+}
+.UseStyledSystem-module__hop-bg-hover___YImIc:hover {
+  --hop-bg-hover: initial;
+  background-color: var(--hop-bg-hover) !important;
+}
+.UseStyledSystem-module__hop-bg-focus___Cop9n:focus-visible {
+  --hop-bg-focus: initial;
+  background-color: var(--hop-bg-focus) !important;
+}
+.UseStyledSystem-module__hop-bg-active___5O85P:active {
+  --hop-bg-active: initial;
+  background-color: var(--hop-bg-active) !important;
+}
+.UseStyledSystem-module__hop-bs-hover___8Oj0h:hover {
+  --hop-bs-hover: initial;
+  box-shadow: var(--hop-bs-hover) !important;
+}
+.UseStyledSystem-module__hop-bs-focus___r9l2R:focus-visible {
+  --hop-bs-focus: initial;
+  box-shadow: var(--hop-bs-focus) !important;
+}
+.UseStyledSystem-module__hop-bs-active___XyHmm:active {
+  --hop-bs-active: initial;
+  box-shadow: var(--hop-bs-active) !important;
+}
+.UseStyledSystem-module__hop-c-hover___yYnaZ:hover {
+  --hop-c-hover: initial;
+  color: var(--hop-c-hover) !important;
+}
+.UseStyledSystem-module__hop-c-focus___Z9ASb:focus-visible {
+  --hop-c-focus: initial;
+  color: var(--hop-c-focus) !important;
+}
+.UseStyledSystem-module__hop-c-active___zk1Gb:active {
+  --hop-c-active: initial;
+  color: var(--hop-c-active) !important;
+}
+.UseStyledSystem-module__hop-cs-hover___jOiBf:hover {
+  --hop-cs-hover: initial;
+  cursor: var(--hop-cs-hover) !important;
+}
+.UseStyledSystem-module__hop-f-hover___huyDo:hover {
+  --hop-f-hover: initial;
+  fill: var(--hop-f-hover) !important;
+}
+.UseStyledSystem-module__hop-f-focus___5-VRH:focus-visible {
+  --hop-f-focus: initial;
+  fill: var(--hop-f-focus) !important;
+}
+.UseStyledSystem-module__hop-o-hover___Ntq4o:hover {
+  --hop-o-hover: initial;
+  opacity: var(--hop-o-hover) !important;
+}
+.UseStyledSystem-module__hop-o-focus___Xxebb:focus-visible {
+  --hop-o-focus: initial;
+  opacity: var(--hop-o-focus) !important;
+}
+.UseStyledSystem-module__hop-o-active___uJ6oe:active {
+  --hop-o-active: initial;
+  opacity: var(--hop-o-active) !important;
+}
+.UseStyledSystem-module__hop-ol-focus___iZ2fp:focus-visible {
+  --hop-ol-focus: initial;
+  color: var(--hop-ol-focus) !important;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
+:where(.htmlElement-module__html-element___xmRSa),
+:where(.htmlElement-module__html-element___xmRSa::after),
+:where(.htmlElement-module__html-element___xmRSa::before) {
+  box-sizing: border-box;
+}

package/dist/html-wrappers/htmlElement.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ElementRef } from 'react';
+import { StyledComponentProps } from '../styled-system-props.js';
+import 'csstype';
+import '../responsive/useResponsiveValue.js';
+import '../responsive/Breakpoints.js';
+import '../tokens/token-mappings.js';
+
+type HtmlElementProps<T extends keyof JSX.IntrinsicElements> = StyledComponentProps<T>;
+declare function htmlElement<T extends keyof JSX.IntrinsicElements>(elementType: T): react.ForwardRefExoticComponent<react.PropsWithoutRef<HtmlElementProps<T>> & react.RefAttributes<ElementRef<T>>>;
+
+export { HtmlElementProps, htmlElement };

package/dist/html-wrappers/htmlElement.js

@@ -0,0 +1,9 @@
+export { htmlElement } from '../chunk-35LDZFKX.js';
+import '../chunk-RIR7BXVF.js';
+import '../chunk-KUUJ37DW.js';
+import '../chunk-U3SI5QXV.js';
+import '../chunk-GYREQTEK.js';
+import '../chunk-ZUVKM5DV.js';
+import '../chunk-XUHDFZZL.js';
+import '../chunk-U5R6ZXH3.js';
+import '../chunk-I37Y2R7V.js';