@kuma-ui/system - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

dist/generator.d.ts

@@ -1,4 +0,4 @@
-import { StyledProps } from './compose.js';
+import { StyledProps } from './consumeStyleProps.js';
 import { PseudoProps } from './pseudo.js';
-import './animation.js';
+import './props/animation.js';
 import './keys.js';
@@ -8,20 +8,20 @@ import './types.js';
 import '@kuma-ui/sheet';
-import './space.js';
-import './typography.js';
-import './layout.js';
-import './color.js';
-import './flex.js';
-import './border.js';
-import './outline.js';
-import './position.js';
-import './shadow.js';
-import './grid.js';
-import './list.js';
-import './effect.js';
-import './text.js';
-import './font.js';
-import './mask.js';
-import './column.js';
-import './background.js';
-import './filter.js';
+import './props/space.js';
+import './props/typography.js';
+import './props/layout.js';
+import './props/color.js';
+import './props/flex.js';
+import './props/border.js';
+import './props/outline.js';
+import './props/position.js';
+import './props/shadow.js';
+import './props/grid.js';
+import './props/list.js';
+import './props/effect.js';
+import './props/text.js';
+import './props/font.js';
+import './props/mask.js';
+import './props/column.js';
+import './props/background.js';
+import './props/filter.js';
 
@@ -28,0 +28,0 @@ declare class StyleGenerator {

dist/generator.js

@@ -352,22 +352,3 @@ "use strict";
 
-// src/responsive.ts
-var import_sheet = require("@kuma-ui/sheet");
-var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const { breakpoints } = import_sheet.theme.getUserTheme();
-  const media = {};
-  if (Array.isArray(cssValues)) {
-    const baseValue = convertFn(cssValues[0]);
-    cssValues.slice(1).map((value, index) => {
-      if (breakpoints) {
-        const breakpoint = Object.keys(breakpoints)[index];
-        const breakpointValue = breakpoints[breakpoint];
-        media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
-      }
-    });
-    return { base: `${cssProperty}: ${baseValue};`, media };
-  }
-  return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
-};
-
-// src/animation.ts
+// src/props/animation.ts
 var animationMappings = {
@@ -386,25 +367,3 @@ animation: "animation",
 };
-var animation = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in animationMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = animationMappings[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        void 0
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var animationConverters = {};
 
@@ -419,3 +378,3 @@ // src/toCSS.ts
 
-// src/space.ts
+// src/props/space.ts
 var spaceMappings = {
@@ -451,35 +410,5 @@ margin: "margin",
 };
-var space = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in spaceMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const properties = spaceMappings[key].split(",");
-      for (const property of properties) {
-        const responsiveStyles = applyResponsiveStyles(
-          property,
-          cssValue,
-          toCssUnit
-        );
-        baseStyles += responsiveStyles.base;
-        for (const [breakpoint, css] of Object.entries(
-          responsiveStyles.media
-        )) {
-          if (mediaStyles[breakpoint]) {
-            mediaStyles[breakpoint] += css;
-          } else {
-            mediaStyles[breakpoint] = css;
-          }
-        }
-      }
-    }
-  }
-  return {
-    base: baseStyles,
-    media: mediaStyles
-  };
-};
+var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 
-// src/typography.ts
+// src/props/typography.ts
 var typographyMappings = {
@@ -503,33 +432,8 @@ hyphenateCharacter: "hyphenate-character",
 };
-var typography = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in typographyMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = typographyMappings[key];
-      const converter = (value) => {
-        if (property === "word-spacing" || property === "letter-spacing") {
-          return toCssUnit(value);
-        }
-        return value;
-      };
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var typographyConverters = {
+  wordSpacing: toCssUnit,
+  letterSpacing: toCssUnit
 };
 
-// src/layout.ts
+// src/props/layout.ts
 var layoutMappings = {
@@ -559,3 +463,3 @@ width: "width",
 };
-var converters = {
+var layoutConverters = {
   width: toCssUnit,
@@ -569,28 +473,4 @@ minWidth: toCssUnit,
 };
-var layout = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in layoutMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = layoutMappings[key];
-      const converter = converters[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/color.ts
+// src/props/color.ts
 var colorMappings = {
@@ -609,23 +489,5 @@ background: "background",
 };
-var color = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in colorMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = colorMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var colorConverters = {};
 
-// src/flex.ts
+// src/props/flex.ts
 var flexMappings = {
@@ -651,32 +513,8 @@ flexDirection: "flex-direction",
 };
-var converters2 = {
+var flexConverters = {
   gap: toCssUnit,
   flexBasis: toCssUnit
 };
-var flex = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in flexMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = flexMappings[key];
-      const converter = converters2[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/border.ts
+// src/props/border.ts
 var borderMappings = {
@@ -714,3 +552,3 @@ border: "border",
 };
-var converters3 = {
+var borderConverters = {
   border: toCssUnit,
@@ -740,36 +578,4 @@ borderTop: toCssUnit,
 };
-var border = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in borderMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const properties = borderMappings[key].split(",");
-      for (const property of properties) {
-        const converter = converters3[key];
-        const responsiveStyles = applyResponsiveStyles(
-          property,
-          cssValue,
-          converter
-        );
-        baseStyles += responsiveStyles.base;
-        for (const [breakpoint, css] of Object.entries(
-          responsiveStyles.media
-        )) {
-          if (mediaStyles[breakpoint]) {
-            mediaStyles[breakpoint] += css;
-          } else {
-            mediaStyles[breakpoint] = css;
-          }
-        }
-      }
-    }
-  }
-  return {
-    base: baseStyles,
-    media: mediaStyles
-  };
-};
 
-// src/outline.ts
+// src/props/outline.ts
 var outlineMappings = {
@@ -781,31 +587,8 @@ outline: "outline",
 };
-var outline = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in outlineMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = outlineMappings[key];
-      const converter = [
-        outlineMappings.outlineWidth,
-        outlineMappings.outlineOffset
-      ].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var outlineConverters = {
+  outlineWidth: toCssUnit,
+  outlineOffset: toCssUnit
 };
 
-// src/position.ts
+// src/props/position.ts
 var positionMappings = {
@@ -818,27 +601,7 @@ top: "top",
 };
-var position = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in positionMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = positionMappings[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        toCssUnit
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var positionConverters = Object.fromEntries(
+  Object.keys(positionMappings).map((key) => [key, toCssUnit])
+);
 
-// src/shadow.ts
+// src/props/shadow.ts
 var shadowMappings = {
@@ -848,27 +611,8 @@ boxShadow: "box-shadow",
 };
-var shadow = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in shadowMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = shadowMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var shadowConverters = {};
 
-// src/compose.ts
+// src/consumeStyleProps.ts
 var import_sheet2 = require("@kuma-ui/sheet");
 
-// src/grid.ts
-var gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"];
+// src/props/grid.ts
 var gridMappings = {
@@ -894,28 +638,9 @@ grid: "grid",
 };
-var grid = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in gridMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = gridMappings[key];
-      const converter = gapKeys.includes(key) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var gridConverters = {
+  gridGap: toCssUnit,
+  gridColumnGap: toCssUnit,
+  gridRowGap: toCssUnit
 };
 
-// src/list.ts
+// src/props/list.ts
 var listMappings = {
@@ -927,23 +652,5 @@ listStyle: "list-style",
 };
-var list = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in listMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = listMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var listConverters = {};
 
-// src/effect.ts
+// src/props/effect.ts
 var effectMappings = {
@@ -961,23 +668,5 @@ transition: "transition",
 };
-var effect = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in effectMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = effectMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var effectConverters = {};
 
-// src/text.ts
+// src/props/text.ts
 var textMappings = {
@@ -1007,28 +696,7 @@ textAlign: "text-align",
 };
-var text = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in textMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = textMappings[key];
-      const converter = [textMappings.textIndent].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var textConverters = {
+  textIndent: toCssUnit
 };
 
-// src/font.ts
+// src/props/font.ts
 var fontMappings = {
@@ -1058,33 +726,7 @@ font: "font",
 };
-var font = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in fontMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = fontMappings[key];
-      const converter = (value) => {
-        if (property === "font-size") {
-          return toCssUnit(value);
-        }
-        return value;
-      };
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var fontConverters = {
+  fontSize: toCssUnit
 };
 
-// src/mask.ts
+// src/props/mask.ts
 var maskMappings = {
@@ -1109,28 +751,7 @@ mask: "mask",
 };
-var mask = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in maskMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = maskMappings[key];
-      const converter = [maskMappings.maskSize].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var maskConverters = {
+  maskSize: toCssUnit
 };
 
-// src/column.ts
+// src/props/column.ts
 var columnMappings = {
@@ -1148,3 +769,3 @@ columnCount: "column-count",
 };
-var converters4 = {
+var columnConverters = {
   columnGap: toCssUnit,
@@ -1154,28 +775,4 @@ columnRuleWidth: toCssUnit,
 };
-var column = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in columnMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = columnMappings[key];
-      const converter = converters4[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/background.ts
+// src/props/background.ts
 var backgroundMappings = {
@@ -1203,32 +800,9 @@ backgroundImage: "background-image",
 };
-var background = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in backgroundMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = backgroundMappings[key];
-      const converter = [
-        backgroundMappings.bgPositionX,
-        backgroundMappings.bgPositionY,
-        backgroundMappings.bgSize
-      ].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var backgroundConverters = {
+  bgPositionX: toCssUnit,
+  bgPositionY: toCssUnit,
+  bgSize: toCssUnit
 };
 
-// src/filter.ts
+// src/props/filter.ts
 var filterMappings = {
@@ -1238,23 +812,24 @@ filter: "filter",
 };
-var filter = (props) => {
-  let base = "";
+var filterConverters = {};
+
+// src/responsive.ts
+var import_sheet = require("@kuma-ui/sheet");
+var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
-  for (const key in filterMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = filterMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
+  if (Array.isArray(cssValues)) {
+    const baseValue = convertFn(cssValues[0]);
+    cssValues.slice(1).map((value, index) => {
+      if (breakpoints) {
+        const breakpoint = Object.keys(breakpoints)[index];
+        const breakpointValue = breakpoints[breakpoint];
+        media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
       }
-    }
+    });
+    return { base: `${cssProperty}: ${baseValue};`, media };
   }
-  return { base, media };
+  return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
 };
 
-// src/compose.ts
+// src/consumeStyleProps.ts
 var styleMappings = Object.assign(
@@ -1282,61 +857,61 @@ {},
 );
-var compose = (...styleFunctions) => {
-  return (props) => {
-    const cacheKey = JSON.stringify(props);
-    let outputProps = { ...props };
-    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
-    if (cachedStyles) {
-      return cachedStyles;
+var styleConverters = Object.assign(
+  {},
+  animationConverters,
+  spaceConverters,
+  typographyConverters,
+  layoutConverters,
+  colorConverters,
+  flexConverters,
+  borderConverters,
+  outlineConverters,
+  positionConverters,
+  shadowConverters,
+  gridConverters,
+  listConverters,
+  effectConverters,
+  textConverters,
+  fontConverters,
+  maskConverters,
+  columnConverters,
+  backgroundConverters,
+  filterConverters
+);
+var consumeStyleProps = (props) => {
+  const cacheKey = JSON.stringify(props);
+  const cachedStyles = import_sheet2.styleCache.get(cacheKey);
+  if (cachedStyles) {
+    return cachedStyles;
+  }
+  let base = "";
+  const media = {};
+  for (const key in props) {
+    const cssValue = props[key];
+    if (cssValue == null)
+      continue;
+    const converter = styleConverters[key];
+    const properties = styleMappings[key]?.split(",") ?? [];
+    for (const property of properties) {
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      base += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (media[breakpoint]) {
+          media[breakpoint] += css;
+        } else {
+          media[breakpoint] = css;
+        }
+      }
     }
-    const combinedStyles = styleFunctions.reduce(
-      (styles, styleFunction) => {
-        const newStyles = styleFunction(outputProps);
-        styles.base += newStyles.base;
-        for (const [breakpoint, css] of Object.entries(newStyles.media)) {
-          if (styles.media[breakpoint]) {
-            styles.media[breakpoint] += css;
-          } else {
-            styles.media[breakpoint] = css;
-          }
-        }
-        const processedProps = Object.keys(outputProps).filter(
-          (key) => newStyles.base.includes(`${styleMappings[key]}:`)
-        );
-        outputProps = Object.keys(outputProps).reduce((remainingProps, key) => {
-          if (!processedProps.includes(key)) {
-            remainingProps[key] = outputProps[key];
-          }
-          return remainingProps;
-        }, {});
-        return styles;
-      },
-      { base: "", media: {} }
-    );
-    import_sheet2.styleCache.set(cacheKey, combinedStyles);
-    return combinedStyles;
-  };
+  }
+  const combinedStyles = { base, media };
+  import_sheet2.styleCache.set(cacheKey, combinedStyles);
+  return combinedStyles;
 };
 
 // src/index.ts
-var all = compose(
-  animation,
-  space,
-  typography,
-  layout,
-  color,
-  flex,
-  border,
-  outline,
-  position,
-  shadow,
-  grid,
-  list,
-  column,
-  effect,
-  text,
-  font,
-  mask,
-  background,
-  filter
-);
+var all = consumeStyleProps;
 
@@ -1367,3 +942,3 @@ // src/generator.ts
     for (const [propName, propValue] of Object.entries(props)) {
-      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue)) {
+      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue) && !/^\w+\(.*\)$/.test(propValue)) {
         const customStyle = findCustomStyle(propValue);
@@ -1370,0 +945,0 @@ if (customStyle !== void 0) {

dist/index.d.ts

@@ -1,24 +0,24 @@
-import { StyleFunction } from './compose.js';
-export { StyledProps } from './compose.js';
-export { AnimationProps } from './animation.js';
-export { SpaceProps } from './space.js';
-export { TypographyProps } from './typography.js';
-export { LayoutProps } from './layout.js';
-export { ColorProps } from './color.js';
-export { FlexProps } from './flex.js';
-export { BorderProps } from './border.js';
-export { OutlineProps } from './outline.js';
-export { PositionProps } from './position.js';
-export { ShadowProps } from './shadow.js';
-export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping, ValueConverter } from './types.js';
+import { ThemeSystemType, ResponsiveStyle } from './types.js';
+export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, SystemStyle, UtilityCSSMapping, ValueConverter } from './types.js';
+export { AnimationProps } from './props/animation.js';
+export { SpaceProps } from './props/space.js';
+export { TypographyProps } from './props/typography.js';
+export { LayoutProps } from './props/layout.js';
+export { ColorProps } from './props/color.js';
+export { FlexProps } from './props/flex.js';
+export { BorderProps } from './props/border.js';
+export { OutlineProps } from './props/outline.js';
+export { PositionProps } from './props/position.js';
+export { ShadowProps } from './props/shadow.js';
+import { StyledProps } from './consumeStyleProps.js';
 export { PseudoProps, isPseudoProps, normalizePseudo } from './pseudo.js';
-export { GridProps } from './grid.js';
-export { ListProps } from './list.js';
-export { EffectProps } from './effect.js';
-export { TextProps } from './text.js';
-export { FontProps } from './font.js';
-export { MaskProps } from './mask.js';
-export { ColumnProps } from './column.js';
-export { BackgroundProps } from './background.js';
-export { FilterProps } from './filter.js';
+export { GridProps } from './props/grid.js';
+export { ListProps } from './props/list.js';
+export { EffectProps } from './props/effect.js';
+export { TextProps } from './props/text.js';
+export { FontProps } from './props/font.js';
+export { MaskProps } from './props/mask.js';
+export { ColumnProps } from './props/column.js';
+export { BackgroundProps } from './props/background.js';
+export { FilterProps } from './props/filter.js';
 export { StyledKeyType, isStyledProp } from './keys.js';
@@ -30,4 +30,4 @@ export { StyleGenerator } from './generator.js';
 
-declare const all: StyleFunction;
+declare const all: (props: StyledProps<ThemeSystemType>) => ResponsiveStyle;
 
-export { all };
+export { ResponsiveStyle, StyledProps, ThemeSystemType, all };

dist/index.js

@@ -32,22 +32,3 @@ "use strict";
 
-// src/responsive.ts
-var import_sheet = require("@kuma-ui/sheet");
-var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const { breakpoints } = import_sheet.theme.getUserTheme();
-  const media = {};
-  if (Array.isArray(cssValues)) {
-    const baseValue = convertFn(cssValues[0]);
-    cssValues.slice(1).map((value, index) => {
-      if (breakpoints) {
-        const breakpoint = Object.keys(breakpoints)[index];
-        const breakpointValue = breakpoints[breakpoint];
-        media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
-      }
-    });
-    return { base: `${cssProperty}: ${baseValue};`, media };
-  }
-  return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
-};
-
-// src/animation.ts
+// src/props/animation.ts
 var animationMappings = {
@@ -66,25 +47,3 @@ animation: "animation",
 };
-var animation = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in animationMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = animationMappings[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        void 0
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var animationConverters = {};
 
@@ -99,3 +58,3 @@ // src/toCSS.ts
 
-// src/space.ts
+// src/props/space.ts
 var spaceMappings = {
@@ -131,35 +90,5 @@ margin: "margin",
 };
-var space = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in spaceMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const properties = spaceMappings[key].split(",");
-      for (const property of properties) {
-        const responsiveStyles = applyResponsiveStyles(
-          property,
-          cssValue,
-          toCssUnit
-        );
-        baseStyles += responsiveStyles.base;
-        for (const [breakpoint, css] of Object.entries(
-          responsiveStyles.media
-        )) {
-          if (mediaStyles[breakpoint]) {
-            mediaStyles[breakpoint] += css;
-          } else {
-            mediaStyles[breakpoint] = css;
-          }
-        }
-      }
-    }
-  }
-  return {
-    base: baseStyles,
-    media: mediaStyles
-  };
-};
+var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 
-// src/typography.ts
+// src/props/typography.ts
 var typographyMappings = {
@@ -183,33 +112,8 @@ hyphenateCharacter: "hyphenate-character",
 };
-var typography = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in typographyMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = typographyMappings[key];
-      const converter = (value) => {
-        if (property === "word-spacing" || property === "letter-spacing") {
-          return toCssUnit(value);
-        }
-        return value;
-      };
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var typographyConverters = {
+  wordSpacing: toCssUnit,
+  letterSpacing: toCssUnit
 };
 
-// src/layout.ts
+// src/props/layout.ts
 var layoutMappings = {
@@ -239,3 +143,3 @@ width: "width",
 };
-var converters = {
+var layoutConverters = {
   width: toCssUnit,
@@ -249,28 +153,4 @@ minWidth: toCssUnit,
 };
-var layout = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in layoutMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = layoutMappings[key];
-      const converter = converters[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/color.ts
+// src/props/color.ts
 var colorMappings = {
@@ -289,23 +169,5 @@ background: "background",
 };
-var color = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in colorMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = colorMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var colorConverters = {};
 
-// src/flex.ts
+// src/props/flex.ts
 var flexMappings = {
@@ -331,32 +193,8 @@ flexDirection: "flex-direction",
 };
-var converters2 = {
+var flexConverters = {
   gap: toCssUnit,
   flexBasis: toCssUnit
 };
-var flex = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in flexMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = flexMappings[key];
-      const converter = converters2[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/border.ts
+// src/props/border.ts
 var borderMappings = {
@@ -394,3 +232,3 @@ border: "border",
 };
-var converters3 = {
+var borderConverters = {
   border: toCssUnit,
@@ -420,36 +258,4 @@ borderTop: toCssUnit,
 };
-var border = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in borderMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const properties = borderMappings[key].split(",");
-      for (const property of properties) {
-        const converter = converters3[key];
-        const responsiveStyles = applyResponsiveStyles(
-          property,
-          cssValue,
-          converter
-        );
-        baseStyles += responsiveStyles.base;
-        for (const [breakpoint, css] of Object.entries(
-          responsiveStyles.media
-        )) {
-          if (mediaStyles[breakpoint]) {
-            mediaStyles[breakpoint] += css;
-          } else {
-            mediaStyles[breakpoint] = css;
-          }
-        }
-      }
-    }
-  }
-  return {
-    base: baseStyles,
-    media: mediaStyles
-  };
-};
 
-// src/outline.ts
+// src/props/outline.ts
 var outlineMappings = {
@@ -461,31 +267,8 @@ outline: "outline",
 };
-var outline = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in outlineMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = outlineMappings[key];
-      const converter = [
-        outlineMappings.outlineWidth,
-        outlineMappings.outlineOffset
-      ].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var outlineConverters = {
+  outlineWidth: toCssUnit,
+  outlineOffset: toCssUnit
 };
 
-// src/position.ts
+// src/props/position.ts
 var positionMappings = {
@@ -498,27 +281,7 @@ top: "top",
 };
-var position = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in positionMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = positionMappings[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        toCssUnit
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var positionConverters = Object.fromEntries(
+  Object.keys(positionMappings).map((key) => [key, toCssUnit])
+);
 
-// src/shadow.ts
+// src/props/shadow.ts
 var shadowMappings = {
@@ -528,27 +291,8 @@ boxShadow: "box-shadow",
 };
-var shadow = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in shadowMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = shadowMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var shadowConverters = {};
 
-// src/compose.ts
+// src/consumeStyleProps.ts
 var import_sheet2 = require("@kuma-ui/sheet");
 
-// src/grid.ts
-var gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"];
+// src/props/grid.ts
 var gridMappings = {
@@ -574,28 +318,9 @@ grid: "grid",
 };
-var grid = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in gridMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = gridMappings[key];
-      const converter = gapKeys.includes(key) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var gridConverters = {
+  gridGap: toCssUnit,
+  gridColumnGap: toCssUnit,
+  gridRowGap: toCssUnit
 };
 
-// src/list.ts
+// src/props/list.ts
 var listMappings = {
@@ -607,23 +332,5 @@ listStyle: "list-style",
 };
-var list = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in listMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = listMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var listConverters = {};
 
-// src/effect.ts
+// src/props/effect.ts
 var effectMappings = {
@@ -641,23 +348,5 @@ transition: "transition",
 };
-var effect = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in effectMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = effectMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
+var effectConverters = {};
 
-// src/text.ts
+// src/props/text.ts
 var textMappings = {
@@ -687,28 +376,7 @@ textAlign: "text-align",
 };
-var text = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in textMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = textMappings[key];
-      const converter = [textMappings.textIndent].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var textConverters = {
+  textIndent: toCssUnit
 };
 
-// src/font.ts
+// src/props/font.ts
 var fontMappings = {
@@ -738,33 +406,7 @@ font: "font",
 };
-var font = (props) => {
-  let baseStyles = "";
-  const mediaStyles = {};
-  for (const key in fontMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = fontMappings[key];
-      const converter = (value) => {
-        if (property === "font-size") {
-          return toCssUnit(value);
-        }
-        return value;
-      };
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      baseStyles += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (mediaStyles[breakpoint])
-          mediaStyles[breakpoint] += css;
-        else
-          mediaStyles[breakpoint] = css;
-      }
-    }
-  }
-  return { base: baseStyles, media: mediaStyles };
+var fontConverters = {
+  fontSize: toCssUnit
 };
 
-// src/mask.ts
+// src/props/mask.ts
 var maskMappings = {
@@ -789,28 +431,7 @@ mask: "mask",
 };
-var mask = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in maskMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = maskMappings[key];
-      const converter = [maskMappings.maskSize].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var maskConverters = {
+  maskSize: toCssUnit
 };
 
-// src/column.ts
+// src/props/column.ts
 var columnMappings = {
@@ -828,3 +449,3 @@ columnCount: "column-count",
 };
-var converters4 = {
+var columnConverters = {
   columnGap: toCssUnit,
@@ -834,28 +455,4 @@ columnRuleWidth: toCssUnit,
 };
-var column = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in columnMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = columnMappings[key];
-      const converter = converters4[key];
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
-};
 
-// src/background.ts
+// src/props/background.ts
 var backgroundMappings = {
@@ -883,32 +480,9 @@ backgroundImage: "background-image",
 };
-var background = (props) => {
-  let base = "";
-  const media = {};
-  for (const key in backgroundMappings) {
-    const cssValue = props[key];
-    if (cssValue) {
-      const property = backgroundMappings[key];
-      const converter = [
-        backgroundMappings.bgPositionX,
-        backgroundMappings.bgPositionY,
-        backgroundMappings.bgSize
-      ].includes(property) ? toCssUnit : void 0;
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
-      }
-    }
-  }
-  return { base, media };
+var backgroundConverters = {
+  bgPositionX: toCssUnit,
+  bgPositionY: toCssUnit,
+  bgSize: toCssUnit
 };
 
-// src/filter.ts
+// src/props/filter.ts
 var filterMappings = {
@@ -918,23 +492,24 @@ filter: "filter",
 };
-var filter = (props) => {
-  let base = "";
+var filterConverters = {};
+
+// src/responsive.ts
+var import_sheet = require("@kuma-ui/sheet");
+var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
-  for (const key in filterMappings) {
-    const cssValue = props[key];
-    if (cssValue != void 0) {
-      const property = filterMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
-      base += responsiveStyles.base;
-      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
-        if (media[breakpoint])
-          media[breakpoint] += css;
-        else
-          media[breakpoint] = css;
+  if (Array.isArray(cssValues)) {
+    const baseValue = convertFn(cssValues[0]);
+    cssValues.slice(1).map((value, index) => {
+      if (breakpoints) {
+        const breakpoint = Object.keys(breakpoints)[index];
+        const breakpointValue = breakpoints[breakpoint];
+        media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
       }
-    }
+    });
+    return { base: `${cssProperty}: ${baseValue};`, media };
   }
-  return { base, media };
+  return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
 };
 
-// src/compose.ts
+// src/consumeStyleProps.ts
 var styleMappings = Object.assign(
@@ -962,37 +537,57 @@ {},
 );
-var compose = (...styleFunctions) => {
-  return (props) => {
-    const cacheKey = JSON.stringify(props);
-    let outputProps = { ...props };
-    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
-    if (cachedStyles) {
-      return cachedStyles;
+var styleConverters = Object.assign(
+  {},
+  animationConverters,
+  spaceConverters,
+  typographyConverters,
+  layoutConverters,
+  colorConverters,
+  flexConverters,
+  borderConverters,
+  outlineConverters,
+  positionConverters,
+  shadowConverters,
+  gridConverters,
+  listConverters,
+  effectConverters,
+  textConverters,
+  fontConverters,
+  maskConverters,
+  columnConverters,
+  backgroundConverters,
+  filterConverters
+);
+var consumeStyleProps = (props) => {
+  const cacheKey = JSON.stringify(props);
+  const cachedStyles = import_sheet2.styleCache.get(cacheKey);
+  if (cachedStyles) {
+    return cachedStyles;
+  }
+  let base = "";
+  const media = {};
+  for (const key in props) {
+    const cssValue = props[key];
+    if (cssValue == null)
+      continue;
+    const converter = styleConverters[key];
+    const properties = styleMappings[key]?.split(",") ?? [];
+    for (const property of properties) {
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      base += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (media[breakpoint]) {
+          media[breakpoint] += css;
+        } else {
+          media[breakpoint] = css;
+        }
+      }
     }
-    const combinedStyles = styleFunctions.reduce(
-      (styles, styleFunction) => {
-        const newStyles = styleFunction(outputProps);
-        styles.base += newStyles.base;
-        for (const [breakpoint, css] of Object.entries(newStyles.media)) {
-          if (styles.media[breakpoint]) {
-            styles.media[breakpoint] += css;
-          } else {
-            styles.media[breakpoint] = css;
-          }
-        }
-        const processedProps = Object.keys(outputProps).filter(
-          (key) => newStyles.base.includes(`${styleMappings[key]}:`)
-        );
-        outputProps = Object.keys(outputProps).reduce((remainingProps, key) => {
-          if (!processedProps.includes(key)) {
-            remainingProps[key] = outputProps[key];
-          }
-          return remainingProps;
-        }, {});
-        return styles;
-      },
-      { base: "", media: {} }
-    );
-    import_sheet2.styleCache.set(cacheKey, combinedStyles);
-    return combinedStyles;
-  };
+  }
+  const combinedStyles = { base, media };
+  import_sheet2.styleCache.set(cacheKey, combinedStyles);
+  return combinedStyles;
 };
@@ -1349,3 +944,3 @@
     for (const [propName, propValue] of Object.entries(props)) {
-      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue)) {
+      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue) && !/^\w+\(.*\)$/.test(propValue)) {
         const customStyle = findCustomStyle(propValue);
@@ -1419,23 +1014,3 @@ if (customStyle !== void 0) {
 // src/index.ts
-var all = compose(
-  animation,
-  space,
-  typography,
-  layout,
-  color,
-  flex,
-  border,
-  outline,
-  position,
-  shadow,
-  grid,
-  list,
-  column,
-  effect,
-  text,
-  font,
-  mask,
-  background,
-  filter
-);
+var all = consumeStyleProps;
 // Annotate the CommonJS export names for ESM import in node:
@@ -1442,0 +1017,0 @@ 0 && (module.exports = {

dist/pseudo.d.ts

@@ -1,24 +0,24 @@
-import { StyledProps } from './compose.js';
+import { StyledProps } from './consumeStyleProps.js';
 import { ThemeSystemType, ExcludeHyphen, RemoveColon } from './types.js';
 import { Pseudos } from 'csstype';
-import './animation.js';
+import './props/animation.js';
 import './keys.js';
-import './space.js';
-import './typography.js';
-import './layout.js';
-import './color.js';
-import './flex.js';
-import './border.js';
-import './outline.js';
-import './position.js';
-import './shadow.js';
-import './grid.js';
-import './list.js';
-import './effect.js';
-import './text.js';
-import './font.js';
-import './mask.js';
-import './column.js';
-import './background.js';
-import './filter.js';
+import './props/space.js';
+import './props/typography.js';
+import './props/layout.js';
+import './props/color.js';
+import './props/flex.js';
+import './props/border.js';
+import './props/outline.js';
+import './props/position.js';
+import './props/shadow.js';
+import './props/grid.js';
+import './props/list.js';
+import './props/effect.js';
+import './props/text.js';
+import './props/font.js';
+import './props/mask.js';
+import './props/column.js';
+import './props/background.js';
+import './props/filter.js';
 import '@kuma-ui/sheet';
@@ -30,4 +30,4 @@
 declare const normalizePseudo: (props: string) => string;
-declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_paused" | "_default" | "_first" | "_grammar-error" | "_spelling-error" | "_read-only" | "_read-write" | "_after" | "_active" | "_disabled" | "_enabled" | "_cue" | "_cue-region" | "_part" | "_slotted" | "_view-transition-group" | "_view-transition-image-pair" | "_view-transition-new" | "_view-transition-old" | "_dir" | "_has" | "_host" | "_host-context" | "_is" | "_lang" | "_matches()" | "_not" | "_nth-child" | "_nth-last-child" | "_nth-last-of-type" | "_nth-of-type" | "_where" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_placeholder" | "_selection" | "_target-text" | "_view-transition" | "_any-link" | "_blank" | "_checked" | "_current" | "_defined" | "_empty" | "_first-child" | "_first-of-type" | "_focus" | "_focus-visible" | "_focus-within" | "_fullscreen" | "_future" | "_hover" | "_in-range" | "_indeterminate" | "_invalid" | "_last-child" | "_last-of-type" | "_link" | "_local-link" | "_nth-col" | "_nth-last-col" | "_only-child" | "_only-of-type" | "_optional" | "_out-of-range" | "_past" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
+declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_first" | "_paused" | "_default" | "_grammar-error" | "_spelling-error" | "_read-only" | "_read-write" | "_after" | "_active" | "_disabled" | "_enabled" | "_cue" | "_cue-region" | "_part" | "_slotted" | "_view-transition-group" | "_view-transition-image-pair" | "_view-transition-new" | "_view-transition-old" | "_dir" | "_has" | "_host" | "_host-context" | "_is" | "_lang" | "_matches()" | "_not" | "_nth-child" | "_nth-last-child" | "_nth-last-of-type" | "_nth-of-type" | "_where" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_placeholder" | "_selection" | "_target-text" | "_view-transition" | "_any-link" | "_blank" | "_checked" | "_current" | "_defined" | "_empty" | "_first-child" | "_first-of-type" | "_focus" | "_focus-visible" | "_focus-within" | "_fullscreen" | "_future" | "_hover" | "_in-range" | "_indeterminate" | "_invalid" | "_last-child" | "_last-of-type" | "_link" | "_local-link" | "_nth-col" | "_nth-last-col" | "_only-child" | "_only-of-type" | "_optional" | "_out-of-range" | "_past" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
 
 export { PseudoProps, isPseudoProps, normalizePseudo };

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

185122

decreased by-24.26%

Lines of code

6042

decreased by-25.32%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes