@blockle/blocks 0.8.0 → 0.8.2

package/dist/index.cjs

@@ -375,12 +375,27 @@ const useLayer = () => {
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = prevValue;
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
     };
   }, [enabled]);
 };
@@ -524,26 +539,10 @@ const Heading = ({
   className,
   level = 1,
   children,
-  align,
-  fontSize,
-  fontWeight = "strong",
-  fontFamily,
   ...restProps
 }) => {
   const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      asChild: true,
-      className: classnames(styles_components_Heading_heading_css_cjs.heading, className),
-      fontFamily,
-      fontWeight,
-      fontSize,
-      textAlign: align,
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { asChild: true, className: classnames(styles_components_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 };
 const justifyContentMap = {
   left: "flex-start",
@@ -660,33 +659,8 @@ const Stack = ({
     }
   );
 };
-const Text = react.forwardRef(function Text2({
-  tag: Tag = "span",
-  asChild,
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  className,
-  ...restProps
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      ref,
-      asChild: true,
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      className: classnames(styles_components_Text_text_css_cjs.text, className),
-      ...restProps,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
-    }
-  );
+const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 });
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;

package/dist/index.mjs

@@ -375,12 +375,27 @@ const useLayer = () => {
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = prevValue;
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
     };
   }, [enabled]);
 };
@@ -524,26 +539,10 @@ const Heading = ({
   className,
   level = 1,
   children,
-  align,
-  fontSize,
-  fontWeight = "strong",
-  fontFamily,
   ...restProps
 }) => {
   const Tag = `h${level}`;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      className: classnames(heading, className),
-      fontFamily,
-      fontWeight,
-      fontSize,
-      textAlign: align,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className: classnames(heading, className), ...restProps, children: /* @__PURE__ */ jsx(Tag, { children }) });
 };
 const justifyContentMap = {
   left: "flex-start",
@@ -660,33 +659,8 @@ const Stack = ({
     }
   );
 };
-const Text = forwardRef(function Text2({
-  tag: Tag = "span",
-  asChild,
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  className,
-  ...restProps
-}, ref) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      asChild: true,
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      className: classnames(text, className),
-      ...restProps,
-      children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
+const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+  return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
 });
 export {
   BlocksProvider,

package/dist/momotaro.chunk.d.ts

@@ -269,7 +269,21 @@ type PaddingAtoms = {
     paddingX?: Atoms['paddingX'];
     paddingY?: Atoms['paddingY'];
 };
-type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
+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'];
+};
 
 type ButtonTheme = {
     base: string;
@@ -839,11 +853,8 @@ type HeadingProps = {
     align?: Atoms['textAlign'];
     children: React.ReactNode;
     className?: string;
-    fontFamily?: Atoms['fontFamily'];
-    fontSize?: Atoms['fontSize'];
-    fontWeight?: Atoms['fontWeight'];
     level: 1 | 2 | 3 | 4 | 5 | 6;
-} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 declare const Heading: React.FC<HeadingProps>;
 
 declare const justifyContentMap: {
@@ -871,7 +882,7 @@ type InlineProps = {
     display?: ResponsiveDisplayFlex;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
-} & MarginAndPaddingAtoms;
+} & MarginAtoms & PaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
 type InputProps = {
@@ -906,240 +917,13 @@ type LinkProps = {
     children?: React.ReactNode;
     underline?: LinkTheme['variants']['underline'];
     variant?: LinkTheme['variants']['variant'];
-} & Atoms & HTMLElementProps<HTMLAnchorElement>;
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
 declare const Link: react.ForwardRefExoticComponent<{
     asChild?: boolean | undefined;
     children?: React.ReactNode;
     underline?: boolean | undefined;
     variant?: "primary" | "secondary" | "inherit" | undefined;
-} & {
-    readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
-    readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
-    readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
-    readonly border?: "none" | undefined;
-    readonly bottom?: 0 | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
-    readonly cursor?: "auto" | "pointer" | undefined;
-    readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
-    readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
-    readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
-    readonly height?: "auto" | "full" | undefined;
-    readonly left?: 0 | undefined;
-    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    readonly maxHeight?: "full" | undefined;
-    readonly maxWidth?: "full" | undefined;
-    readonly opacity?: 0 | 1 | undefined;
-    readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly right?: 0 | undefined;
-    readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
-    readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
-    readonly textWrap?: "balance" | "wrap" | undefined;
-    readonly top?: 0 | undefined;
-    readonly transition?: ("slow" | "normal" | "fast") | undefined;
-    readonly userSelect?: "none" | undefined;
-    readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
-    readonly width?: "auto" | "fit-content" | "full" | undefined;
-    readonly wordBreak?: "break-word" | undefined;
-    readonly wordWrap?: "break-word" | undefined;
-    inset?: 0 | undefined;
-} & {
-    readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
-        mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
-    readonly flex?: (1 | {
-        mobile?: 1 | undefined;
-        tablet?: 1 | undefined;
-        desktop?: 1 | undefined;
-        wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
-    readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
-        mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
-    readonly flexGrow?: (0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
-    readonly flexShrink?: (0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
-    readonly flexWrap?: ("nowrap" | "wrap" | {
-        mobile?: "nowrap" | "wrap" | undefined;
-        tablet?: "nowrap" | "wrap" | undefined;
-        desktop?: "nowrap" | "wrap" | undefined;
-        wide?: "nowrap" | "wrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
-    readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
-        mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly outline?: ("none" | {
-        mobile?: "none" | undefined;
-        tablet?: "none" | undefined;
-        desktop?: "none" | undefined;
-        wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
-    readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
-        mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly textAlign?: ("left" | "right" | "center" | "justify" | {
-        mobile?: "left" | "right" | "center" | "justify" | undefined;
-        tablet?: "left" | "right" | "center" | "justify" | undefined;
-        desktop?: "left" | "right" | "center" | "justify" | undefined;
-        wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    placeItems?: ("center" | "flex-start" | "flex-end" | {
-        mobile?: "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
-} & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 
 type PortalProps = {
     children: React.ReactNode;
@@ -1179,25 +963,14 @@ type StackProps = {
      * Start prop is only valid when tag="ol"
      */
     start?: number;
-} & MarginAndPaddingAtoms;
+} & MarginAtoms & PaddingAtoms;
 declare const Stack: React.FC<StackProps>;
 
 type TextProps = {
     children: React.ReactNode;
     tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
     asChild?: boolean;
-    color?: Atoms['color'];
-    fontSize?: Atoms['fontSize'];
-    fontWeight?: Atoms['fontWeight'];
-    fontFamily?: Atoms['fontFamily'];
-    textAlign?: Atoms['textAlign'];
-    fontStyle?: Atoms['fontStyle'];
-    textDecoration?: Atoms['textDecoration'];
-    lineHeight?: Atoms['lineHeight'];
-    whiteSpace?: Atoms['whiteSpace'];
-    wordWrap?: Atoms['wordWrap'];
-    wordBreak?: Atoms['wordBreak'];
-} & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
 type HTMLElementTags = 'a' | 'article' | 'button' | 'div' | 'p' | 'section' | 'span' | 'strong';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -50,7 +50,6 @@
     "string-width": "^4.2.2"
   },
   "dependencies": {
-    "@changesets/cli": "^2.26.2",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",
@@ -58,6 +57,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.26.2",
     "@crackle/cli": "^0.12.4",
     "@crackle/core": "^0.28.0",
     "@storybook/addon-a11y": "^7.3.1",