@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

package/dist/index.cjs

@@ -1,73 +1,73 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_css_atoms_breakpoints_cjs = require("./lib/css/atoms/breakpoints.cjs");
-const lib_css_style_style_cjs = require("./lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("./lib/theme/makeComponentTheme.cjs");
-const lib_theme_makeTheme_cjs = require("./lib/theme/makeTheme.cjs");
-const lib_theme_vars_css_cjs = require("./lib/theme/vars.css.cjs");
-const lib_asChildRenderer_createAsChildTemplate_cjs = require("./lib/asChildRenderer/createAsChildTemplate.cjs");
-const lib_theme_store_theme_cjs = require("./lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("./lib/utils/classnames.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("./lib/css/atoms/sprinkles.css.cjs");
-const components_accessibility_VisuallyHidden_VisuallyHidden_cjs = require("./components/accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const components_display_Divider_Divider_cjs = require("./components/display/Divider/Divider.cjs");
-const components_feedback_Progress_Progress_cjs = require("./components/feedback/Progress/Progress.cjs");
-const components_feedback_Spinner_Spinner_cjs = require("./components/feedback/Spinner/Spinner.cjs");
-const components_form_Button_Button_cjs = require("./components/form/Button/Button.cjs");
-const components_form_Checkbox_Checkbox_cjs = require("./components/form/Checkbox/Checkbox.cjs");
-const components_form_Input_Input_cjs = require("./components/form/Input/Input.cjs");
-const components_form_Label_Label_cjs = require("./components/form/Label/Label.cjs");
-const components_form_Radio_Radio_cjs = require("./components/form/Radio/Radio.cjs");
-const components_form_Select_Select_cjs = require("./components/form/Select/Select.cjs");
-const components_form_Slider_Slider_cjs = require("./components/form/Slider/Slider.cjs");
-const components_form_Switch_Switch_cjs = require("./components/form/Switch/Switch.cjs");
-const components_layout_Box_Box_cjs = require("./components/layout/Box/Box.cjs");
-const components_layout_Inline_Inline_cjs = require("./components/layout/Inline/Inline.cjs");
-const components_layout_Stack_Stack_cjs = require("./components/layout/Stack/Stack.cjs");
-const components_navigation_Link_Link_cjs = require("./components/navigation/Link/Link.cjs");
-const components_other_BlocksProvider_BlocksProvider_cjs = require("./components/other/BlocksProvider/BlocksProvider.cjs");
-const components_other_Portal_Portal_cjs = require("./components/other/Portal/Portal.cjs");
-const components_overlay_Dialog_Dialog_cjs = require("./components/overlay/Dialog/Dialog.cjs");
-const components_overlay_Tooltip_Tooltip_cjs = require("./components/overlay/Tooltip/Tooltip.cjs");
-const components_typography_Heading_Heading_cjs = require("./components/typography/Heading/Heading.cjs");
-const components_typography_Text_Text_cjs = require("./components/typography/Text/Text.cjs");
-const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
-const hooks_useKeyboard_useKeyboard_cjs = require("./hooks/useKeyboard/useKeyboard.cjs");
-const hooks_usePreventBodyScroll_usePreventBodyScroll_cjs = require("./hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
-const hooks_useRootAriaHidden_useRootAriaHidden_cjs = require("./hooks/useRootAriaHidden/useRootAriaHidden.cjs");
-exports.minMediaQuery = lib_css_atoms_breakpoints_cjs.minMediaQuery;
-exports.style = lib_css_style_style_cjs.style;
-exports.makeComponentTheme = lib_theme_makeComponentTheme_cjs.makeComponentTheme;
-exports.makeTheme = lib_theme_makeTheme_cjs.makeTheme;
-exports.vars = lib_theme_vars_css_cjs.vars;
-exports.createAsChildTemplate = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate;
-exports.getTheme = lib_theme_store_theme_cjs.getTheme;
-exports.setTheme = lib_theme_store_theme_cjs.setTheme;
-exports.classnames = lib_utils_classnames_cjs.classnames;
-exports.atoms = lib_css_atoms_sprinkles_css_cjs.atoms;
-exports.VisuallyHidden = components_accessibility_VisuallyHidden_VisuallyHidden_cjs.VisuallyHidden;
-exports.Divider = components_display_Divider_Divider_cjs.Divider;
-exports.Progress = components_feedback_Progress_Progress_cjs.Progress;
-exports.Spinner = components_feedback_Spinner_Spinner_cjs.Spinner;
-exports.Button = components_form_Button_Button_cjs.Button;
-exports.Checkbox = components_form_Checkbox_Checkbox_cjs.Checkbox;
-exports.Input = components_form_Input_Input_cjs.Input;
-exports.Label = components_form_Label_Label_cjs.Label;
-exports.Radio = components_form_Radio_Radio_cjs.Radio;
-exports.Select = components_form_Select_Select_cjs.Select;
-exports.Slider = components_form_Slider_Slider_cjs.Slider;
-exports.Switch = components_form_Switch_Switch_cjs.Switch;
-exports.Box = components_layout_Box_Box_cjs.Box;
-exports.Inline = components_layout_Inline_Inline_cjs.Inline;
-exports.Stack = components_layout_Stack_Stack_cjs.Stack;
-exports.Link = components_navigation_Link_Link_cjs.Link;
-exports.BlocksProvider = components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider;
-exports.Portal = components_other_Portal_Portal_cjs.Portal;
-exports.Dialog = components_overlay_Dialog_Dialog_cjs.Dialog;
-exports.Tooltip = components_overlay_Tooltip_Tooltip_cjs.Tooltip;
-exports.Heading = components_typography_Heading_Heading_cjs.Heading;
-exports.Text = components_typography_Text_Text_cjs.Text;
-exports.useIsomorphicLayoutEffect = hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect;
-exports.useKeyboard = hooks_useKeyboard_useKeyboard_cjs.useKeyboard;
-exports.usePreventBodyScroll = hooks_usePreventBodyScroll_usePreventBodyScroll_cjs.usePreventBodyScroll;
-exports.useRootAriaHidden = hooks_useRootAriaHidden_useRootAriaHidden_cjs.useRootAriaHidden;
+const breakpoints = require("./lib/css/atoms/breakpoints.cjs");
+const style = require("./lib/css/style/style.cjs");
+const makeComponentTheme = require("./lib/theme/makeComponentTheme.cjs");
+const makeTheme = require("./lib/theme/makeTheme.cjs");
+const vars_css = require("./lib/theme/vars.css.cjs");
+const createAsChildTemplate = require("./lib/asChildRenderer/createAsChildTemplate.cjs");
+const theme = require("./lib/theme/store/theme.cjs");
+const classnames = require("./lib/utils/classnames.cjs");
+const sprinkles_css = require("./lib/css/atoms/sprinkles.css.cjs");
+const VisuallyHidden = require("./components/accessibility/VisuallyHidden/VisuallyHidden.cjs");
+const Divider = require("./components/display/Divider/Divider.cjs");
+const Progress = require("./components/feedback/Progress/Progress.cjs");
+const Spinner = require("./components/feedback/Spinner/Spinner.cjs");
+const Button = require("./components/form/Button/Button.cjs");
+const Checkbox = require("./components/form/Checkbox/Checkbox.cjs");
+const Input = require("./components/form/Input/Input.cjs");
+const Label = require("./components/form/Label/Label.cjs");
+const Radio = require("./components/form/Radio/Radio.cjs");
+const Select = require("./components/form/Select/Select.cjs");
+const Slider = require("./components/form/Slider/Slider.cjs");
+const Switch = require("./components/form/Switch/Switch.cjs");
+const Box = require("./components/layout/Box/Box.cjs");
+const Inline = require("./components/layout/Inline/Inline.cjs");
+const Stack = require("./components/layout/Stack/Stack.cjs");
+const Link = require("./components/navigation/Link/Link.cjs");
+const BlocksProvider = require("./components/other/BlocksProvider/BlocksProvider.cjs");
+const Portal = require("./components/other/Portal/Portal.cjs");
+const Dialog = require("./components/overlay/Dialog/Dialog.cjs");
+const Tooltip = require("./components/overlay/Tooltip/Tooltip.cjs");
+const Heading = require("./components/typography/Heading/Heading.cjs");
+const Text = require("./components/typography/Text/Text.cjs");
+const useIsomorphicLayoutEffect = require("./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const useKeyboard = require("./hooks/useKeyboard/useKeyboard.cjs");
+const usePreventBodyScroll = require("./hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
+const useRootAriaHidden = require("./hooks/useRootAriaHidden/useRootAriaHidden.cjs");
+exports.minMediaQuery = breakpoints.minMediaQuery;
+exports.style = style.style;
+exports.makeComponentTheme = makeComponentTheme.makeComponentTheme;
+exports.makeTheme = makeTheme.makeTheme;
+exports.vars = vars_css.vars;
+exports.createAsChildTemplate = createAsChildTemplate.createAsChildTemplate;
+exports.getTheme = theme.getTheme;
+exports.setTheme = theme.setTheme;
+exports.classnames = classnames.classnames;
+exports.sprinkles = sprinkles_css.atoms;
+exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
+exports.Divider = Divider.Divider;
+exports.Progress = Progress.Progress;
+exports.Spinner = Spinner.Spinner;
+exports.Button = Button.Button;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Input = Input.Input;
+exports.Label = Label.Label;
+exports.Radio = Radio.Radio;
+exports.Select = Select.Select;
+exports.Slider = Slider.Slider;
+exports.Switch = Switch.Switch;
+exports.Box = Box.Box;
+exports.Inline = Inline.Inline;
+exports.Stack = Stack.Stack;
+exports.Link = Link.Link;
+exports.BlocksProvider = BlocksProvider.BlocksProvider;
+exports.Portal = Portal.Portal;
+exports.Dialog = Dialog.Dialog;
+exports.Tooltip = Tooltip.Tooltip;
+exports.Heading = Heading.Heading;
+exports.Text = Text.Text;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useKeyboard = useKeyboard.useKeyboard;
+exports.usePreventBodyScroll = usePreventBodyScroll.usePreventBodyScroll;
+exports.useRootAriaHidden = useRootAriaHidden.useRootAriaHidden;

package/dist/index.d.ts

@@ -1 +1,36 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, VisuallyHidden, VisuallyHiddenProps, atoms, classnames, createAsChildTemplate, getTheme, makeComponentTheme, makeTheme, minMediaQuery, setTheme, style, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { atoms as sprinkles } from './lib/css/atoms/atoms';
+export { minMediaQuery } from './lib/css/atoms/breakpoints';
+export { style } from './lib/css/style/style';
+export { makeComponentTheme, type ThemeComponentsStyles, } from './lib/theme/makeComponentTheme';
+export { makeTheme } from './lib/theme/makeTheme';
+export type { ThemeTokens } from './lib/theme/tokensType';
+export { vars } from './lib/theme/vars.css';
+export { VisuallyHidden, type VisuallyHiddenProps, } from './components/accessibility/VisuallyHidden';
+export { Divider, type DividerProps } from './components/display/Divider';
+export { Progress, type ProgressProps } from './components/feedback/Progress';
+export { Spinner, type SpinnerProps } from './components/feedback/Spinner';
+export { Button, type ButtonProps } from './components/form/Button';
+export { Checkbox, type CheckboxProps } from './components/form/Checkbox';
+export { Input, type InputProps } from './components/form/Input';
+export { Label, type LabelProps } from './components/form/Label';
+export { Radio, type RadioProps } from './components/form/Radio';
+export { Select, type SelectProps } from './components/form/Select';
+export { Slider, type SliderProps } from './components/form/Slider';
+export { Switch, type SwitchProps } from './components/form/Switch';
+export { Box, type BoxProps } from './components/layout/Box';
+export { Inline, type InlineProps } from './components/layout/Inline';
+export { Stack, type StackProps } from './components/layout/Stack';
+export { Link, type LinkProps } from './components/navigation/Link';
+export { BlocksProvider, type BlocksProviderProps, } from './components/other/BlocksProvider';
+export { Portal, type PortalProps } from './components/other/Portal';
+export { Dialog, type DialogProps } from './components/overlay/Dialog';
+export { Tooltip, type TooltipProps } from './components/overlay/Tooltip';
+export { Heading, type HeadingProps } from './components/typography/Heading';
+export { Text, type TextProps } from './components/typography/Text';
+export { createAsChildTemplate } from './lib/asChildRenderer/createAsChildTemplate';
+export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect';
+export { useKeyboard } from './hooks/useKeyboard';
+export { usePreventBodyScroll } from './hooks/usePreventBodyScroll';
+export { useRootAriaHidden } from './hooks/useRootAriaHidden';
+export { getTheme, setTheme } from './lib/theme/store/theme';
+export { classnames } from './lib/utils/classnames';

package/dist/index.js

@@ -0,0 +1,73 @@
+import { minMediaQuery } from "./lib/css/atoms/breakpoints.js";
+import { style } from "./lib/css/style/style.js";
+import { makeComponentTheme } from "./lib/theme/makeComponentTheme.js";
+import { makeTheme } from "./lib/theme/makeTheme.js";
+import { vars } from "./lib/theme/vars.css.js";
+import { createAsChildTemplate } from "./lib/asChildRenderer/createAsChildTemplate.js";
+import { getTheme, setTheme } from "./lib/theme/store/theme.js";
+import { classnames } from "./lib/utils/classnames.js";
+import { atoms } from "./lib/css/atoms/sprinkles.css.js";
+import { VisuallyHidden } from "./components/accessibility/VisuallyHidden/VisuallyHidden.js";
+import { Divider } from "./components/display/Divider/Divider.js";
+import { Progress } from "./components/feedback/Progress/Progress.js";
+import { Spinner } from "./components/feedback/Spinner/Spinner.js";
+import { Button } from "./components/form/Button/Button.js";
+import { Checkbox } from "./components/form/Checkbox/Checkbox.js";
+import { Input } from "./components/form/Input/Input.js";
+import { Label } from "./components/form/Label/Label.js";
+import { Radio } from "./components/form/Radio/Radio.js";
+import { Select } from "./components/form/Select/Select.js";
+import { Slider } from "./components/form/Slider/Slider.js";
+import { Switch } from "./components/form/Switch/Switch.js";
+import { Box } from "./components/layout/Box/Box.js";
+import { Inline } from "./components/layout/Inline/Inline.js";
+import { Stack } from "./components/layout/Stack/Stack.js";
+import { Link } from "./components/navigation/Link/Link.js";
+import { BlocksProvider } from "./components/other/BlocksProvider/BlocksProvider.js";
+import { Portal } from "./components/other/Portal/Portal.js";
+import { Dialog } from "./components/overlay/Dialog/Dialog.js";
+import { Tooltip } from "./components/overlay/Tooltip/Tooltip.js";
+import { Heading } from "./components/typography/Heading/Heading.js";
+import { Text } from "./components/typography/Text/Text.js";
+import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "./hooks/useKeyboard/useKeyboard.js";
+import { usePreventBodyScroll } from "./hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useRootAriaHidden } from "./hooks/useRootAriaHidden/useRootAriaHidden.js";
+export {
+  BlocksProvider,
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  Divider,
+  Heading,
+  Inline,
+  Input,
+  Label,
+  Link,
+  Portal,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  Spinner,
+  Stack,
+  Switch,
+  Text,
+  Tooltip,
+  VisuallyHidden,
+  classnames,
+  createAsChildTemplate,
+  getTheme,
+  makeComponentTheme,
+  makeTheme,
+  minMediaQuery,
+  setTheme,
+  atoms as sprinkles,
+  style,
+  useIsomorphicLayoutEffect,
+  useKeyboard,
+  usePreventBodyScroll,
+  useRootAriaHidden,
+  vars
+};

package/dist/lib/asChildRenderer/createAsChildTemplate.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_react_mergeProps_cjs = require("../react/mergeProps.cjs");
+const mergeProps = require("../react/mergeProps.cjs");
 function createAsChildTemplate(defaultElement) {
   const Tag = defaultElement;
   const Template = ({
@@ -48,13 +49,13 @@ function createAsChildTemplate(defaultElement) {
     if (nextChildren.length === 1 && !slot.props.children.props.children) {
       return react.cloneElement(
         slot.props.children,
-        lib_react_mergeProps_cjs.mergeProps(rootProps, slot.props.children.props)
+        mergeProps.mergeProps(rootProps, slot.props.children.props)
       );
     }
     nextChildren[slotIndex] = slot.props.children.props.children;
     return react.cloneElement(
       slot.props.children,
-      lib_react_mergeProps_cjs.mergeProps(rootProps, slot.props.children.props),
+      mergeProps.mergeProps(rootProps, slot.props.children.props),
       nextChildren
     );
   };

package/dist/lib/asChildRenderer/createAsChildTemplate.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { HTMLElementProps } from '../utils/utils';
+type TemplateProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<Element>;
+};
+/**
+ * Create a Template component that can render as a child of another component with asChild prop.
+ *
+ * Example
+ * // Create a Template and Slot components with div as default element
+ * const { Template, Slot } = createAsChildContainer('div');
+ *
+ * const MyComponent = ({ children, asChild, ...restProps }) => {
+ *  return (
+ *   <Template asChild={asChild} {...restProps}>
+ *     <Slot>{childen}</Slot> // Slot is required, will be replaced with children
+ *   </Template>
+ * );
+ * }
+ *
+ * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
+ * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
+ * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
+ */
+export declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
+    Template: React.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
+    Slot: React.FC<SlotProps>;
+};
+type SlotProps = {
+    children: React.ReactNode;
+};
+export {};

package/dist/lib/asChildRenderer/{createAsChildTemplate.mjs → createAsChildTemplate.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Children, isValidElement, cloneElement } from "react";
-import { mergeProps } from "../react/mergeProps.mjs";
+import { mergeProps } from "../react/mergeProps.js";
 function createAsChildTemplate(defaultElement) {
   const Tag = defaultElement;
   const Template = ({

package/dist/lib/asChildRenderer/createAsChildTemplate.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/css/atoms/atomTypes.d.ts

@@ -0,0 +1,37 @@
+import { atoms } from './sprinkles.css';
+export type Atoms = Parameters<typeof atoms>[0];
+export type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
+export type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
+export type MarginAtoms = {
+    margin?: Atoms['margin'];
+    marginBlock?: Atoms['marginBlock'];
+    marginBlockStart?: Atoms['marginBlockStart'];
+    marginBlockEnd?: Atoms['marginBlockEnd'];
+    marginInline?: Atoms['marginInline'];
+    marginInlineStart?: Atoms['marginInlineStart'];
+    marginInlineEnd?: Atoms['marginInlineEnd'];
+};
+export type PaddingAtoms = {
+    padding?: Atoms['padding'];
+    paddingBlock?: Atoms['paddingBlock'];
+    paddingBlockStart?: Atoms['paddingBlockStart'];
+    paddingBlockEnd?: Atoms['paddingBlockEnd'];
+    paddingInline?: Atoms['paddingInline'];
+    paddingInlineStart?: Atoms['paddingInlineStart'];
+    paddingInlineEnd?: Atoms['paddingInlineEnd'];
+};
+export type TextAtoms = {
+    color?: Atoms['color'];
+    fontFamily?: Atoms['fontFamily'];
+    fontSize?: Atoms['fontSize'];
+    fontStyle?: Atoms['fontStyle'];
+    fontWeight?: Atoms['fontWeight'];
+    lineHeight?: Atoms['lineHeight'];
+    textAlign?: Atoms['textAlign'];
+    textDecoration?: Atoms['textDecoration'];
+    textTransform?: Atoms['textTransform'];
+    textWrap?: Atoms['textWrap'];
+    whiteSpace?: Atoms['whiteSpace'];
+    wordBreak?: Atoms['wordBreak'];
+    wordWrap?: Atoms['wordWrap'];
+};

package/dist/lib/css/atoms/atomicProperties.cjs

@@ -1,12 +1,13 @@
 "use strict";
-const lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
-const colorsWithCurrentColor = { ...lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vars_css = require("../../theme/vars.css.cjs");
+const colorsWithCurrentColor = { ...vars_css.vars.color, currentColor: "currentColor" };
 const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
   backgroundColor: colorsWithCurrentColor,
   borderColor: colorsWithCurrentColor,
-  borderRadius: lib_theme_vars_css_cjs.vars.borderRadius,
-  borderWidth: lib_theme_vars_css_cjs.vars.borderWidth,
+  borderRadius: vars_css.vars.borderRadius,
+  borderWidth: vars_css.vars.borderWidth,
   border: ["none"],
   insetBlock: [0],
   insetBlockStart: [0],
@@ -14,13 +15,13 @@ const unresponsiveProperties = {
   insetInline: [0],
   insetInlineStart: [0],
   insetInlineEnd: [0],
-  boxShadow: lib_theme_vars_css_cjs.vars.shadow,
+  boxShadow: vars_css.vars.shadow,
   color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
-  fontFamily: lib_theme_vars_css_cjs.vars.fontFamily,
+  fontFamily: vars_css.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
-  fontWeight: lib_theme_vars_css_cjs.vars.fontWeight,
-  lineHeight: lib_theme_vars_css_cjs.vars.lineHeight,
+  fontWeight: vars_css.vars.fontWeight,
+  lineHeight: vars_css.vars.lineHeight,
   blockSize: size,
   maxBlockSize: size,
   inlineSize: size,
@@ -33,18 +34,18 @@ const unresponsiveProperties = {
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  transition: lib_theme_vars_css_cjs.vars.transition,
+  transition: vars_css.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
-const marginSpace = { auto: "auto", ...lib_theme_vars_css_cjs.vars.space };
+const marginSpace = { auto: "auto", ...vars_css.vars.space };
 const responsiveProperties = {
   alignContent: ["stretch", "center", "flex-start", "flex-end"],
   alignItems: ["stretch", "center", "flex-start", "flex-end"],
   alignSelf: ["stretch", "center", "flex-start", "flex-end"],
-  columnGap: lib_theme_vars_css_cjs.vars.space,
+  columnGap: vars_css.vars.space,
   display: [
     "none",
     "flex",
@@ -60,8 +61,8 @@ const responsiveProperties = {
   flexGrow: [0, 1],
   flexShrink: [0, 1],
   flexWrap: ["nowrap", "wrap"],
-  fontSize: lib_theme_vars_css_cjs.vars.fontSize,
-  gap: lib_theme_vars_css_cjs.vars.space,
+  fontSize: vars_css.vars.fontSize,
+  gap: vars_css.vars.space,
   justifyContent: [
     "flex-start",
     "flex-end",
@@ -74,15 +75,15 @@ const responsiveProperties = {
   marginInlineStart: marginSpace,
   marginInlineEnd: marginSpace,
   outline: ["none"],
-  padding: lib_theme_vars_css_cjs.vars.space,
-  paddingBlock: lib_theme_vars_css_cjs.vars.space,
-  paddingBlockStart: lib_theme_vars_css_cjs.vars.space,
-  paddingBlockEnd: lib_theme_vars_css_cjs.vars.space,
-  paddingInline: lib_theme_vars_css_cjs.vars.space,
-  paddingInlineStart: lib_theme_vars_css_cjs.vars.space,
-  paddingInlineEnd: lib_theme_vars_css_cjs.vars.space,
+  padding: vars_css.vars.space,
+  paddingBlock: vars_css.vars.space,
+  paddingBlockStart: vars_css.vars.space,
+  paddingBlockEnd: vars_css.vars.space,
+  paddingInline: vars_css.vars.space,
+  paddingInlineStart: vars_css.vars.space,
+  paddingInlineEnd: vars_css.vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
-  rowGap: lib_theme_vars_css_cjs.vars.space,
+  rowGap: vars_css.vars.space,
   textAlign: ["center", "left", "right", "justify"]
 };
 exports.responsiveProperties = responsiveProperties;