@kuma-ui/system - npm Package Compare versions

Comparing version 1.7.1 to 1.7.2

dist/consumeStyleProps.js

@@ -41,12 +41,3 @@ "use strict";
 };
-var animationConverters = {};
 
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
 // src/props/space.ts
@@ -83,3 +74,2 @@ var spaceMappings = {
 };
-var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 
@@ -105,6 +95,2 @@ // src/props/typography.ts
 };
-var typographyConverters = {
-  wordSpacing: toCssUnit,
-  letterSpacing: toCssUnit
-};
 
@@ -136,11 +122,2 @@ // src/props/layout.ts
 };
-var layoutConverters = {
-  width: toCssUnit,
-  minWidth: toCssUnit,
-  maxWidth: toCssUnit,
-  height: toCssUnit,
-  minHeight: toCssUnit,
-  maxHeight: toCssUnit,
-  zIndex: (t) => t
-};
 
@@ -161,3 +138,2 @@ // src/props/color.ts
 };
-var colorConverters = {};
 
@@ -185,6 +161,2 @@ // src/props/flex.ts
 };
-var flexConverters = {
-  gap: toCssUnit,
-  flexBasis: toCssUnit
-};
 
@@ -224,27 +196,2 @@ // src/props/border.ts
 };
-var borderConverters = {
-  border: toCssUnit,
-  borderTop: toCssUnit,
-  borderRight: toCssUnit,
-  borderLeft: toCssUnit,
-  borderBottom: toCssUnit,
-  borderX: toCssUnit,
-  borderY: toCssUnit,
-  borderRadius: toCssUnit,
-  borderTopLeftRadius: toCssUnit,
-  borderTopRightRadius: toCssUnit,
-  borderBottomLeftRadius: toCssUnit,
-  borderBottomRightRadius: toCssUnit,
-  borderWidth: toCssUnit,
-  borderTopWidth: toCssUnit,
-  borderBottomWidth: toCssUnit,
-  borderLeftWidth: toCssUnit,
-  borderRightWidth: toCssUnit,
-  borderStart: toCssUnit,
-  borderEnd: toCssUnit,
-  borderStartWidth: toCssUnit,
-  borderEndWidth: toCssUnit,
-  borderStartRadius: toCssUnit,
-  borderEndRadius: toCssUnit
-};
 
@@ -258,6 +205,2 @@ // src/props/outline.ts
 };
-var outlineConverters = {
-  outlineWidth: toCssUnit,
-  outlineOffset: toCssUnit
-};
 
@@ -272,5 +215,2 @@ // src/props/position.ts
 };
-var positionConverters = Object.fromEntries(
-  Object.keys(positionMappings).map((key) => [key, toCssUnit])
-);
 
@@ -282,3 +222,2 @@ // src/props/shadow.ts
 };
-var shadowConverters = {};
 
@@ -309,7 +248,2 @@ // src/consumeStyleProps.ts
 };
-var gridConverters = {
-  gridGap: toCssUnit,
-  gridColumnGap: toCssUnit,
-  gridRowGap: toCssUnit
-};
 
@@ -323,3 +257,2 @@ // src/props/list.ts
 };
-var listConverters = {};
 
@@ -339,3 +272,2 @@ // src/props/effect.ts
 };
-var effectConverters = {};
 
@@ -367,5 +299,2 @@ // src/props/text.ts
 };
-var textConverters = {
-  textIndent: toCssUnit
-};
 
@@ -397,5 +326,2 @@ // src/props/font.ts
 };
-var fontConverters = {
-  fontSize: toCssUnit
-};
 
@@ -422,5 +348,2 @@ // src/props/mask.ts
 };
-var maskConverters = {
-  maskSize: toCssUnit
-};
 
@@ -440,7 +363,2 @@ // src/props/column.ts
 };
-var columnConverters = {
-  columnGap: toCssUnit,
-  columnRuleWidth: toCssUnit,
-  columnWidth: toCssUnit
-};
 
@@ -470,7 +388,2 @@ // src/props/background.ts
 };
-var backgroundConverters = {
-  bgPositionX: toCssUnit,
-  bgPositionY: toCssUnit,
-  bgSize: toCssUnit
-};
 
@@ -482,3 +395,2 @@ // src/props/filter.ts
 };
-var filterConverters = {};
 
@@ -504,2 +416,59 @@ // src/responsive.ts
 
+// src/toCSS.ts
+var unitless = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+function toCssUnit(propertyName, value) {
+  if (typeof value === "number") {
+    return `${value}${!(propertyName in unitless) ? "px" : ""}`;
+  }
+  return value;
+}
+
 // src/consumeStyleProps.ts
@@ -528,24 +497,2 @@ var styleMappings = Object.assign(
 );
-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) => {
@@ -563,3 +510,2 @@ const cacheKey = JSON.stringify(props);
       continue;
-    const converter = styleConverters[key];
     const properties = styleMappings[key]?.split(",") ?? [];
@@ -570,3 +516,3 @@ for (const property of properties) {
         cssValue,
-        converter
+        (value) => toCssUnit(key, value)
       );
@@ -573,0 +519,0 @@ base += responsiveStyles.base;

dist/generator.js

@@ -366,12 +366,3 @@ "use strict";
 };
-var animationConverters = {};
 
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
 // src/props/space.ts
@@ -408,3 +399,2 @@ var spaceMappings = {
 };
-var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 
@@ -430,6 +420,2 @@ // src/props/typography.ts
 };
-var typographyConverters = {
-  wordSpacing: toCssUnit,
-  letterSpacing: toCssUnit
-};
 
@@ -461,11 +447,2 @@ // src/props/layout.ts
 };
-var layoutConverters = {
-  width: toCssUnit,
-  minWidth: toCssUnit,
-  maxWidth: toCssUnit,
-  height: toCssUnit,
-  minHeight: toCssUnit,
-  maxHeight: toCssUnit,
-  zIndex: (t) => t
-};
 
@@ -486,3 +463,2 @@ // src/props/color.ts
 };
-var colorConverters = {};
 
@@ -510,6 +486,2 @@ // src/props/flex.ts
 };
-var flexConverters = {
-  gap: toCssUnit,
-  flexBasis: toCssUnit
-};
 
@@ -549,27 +521,2 @@ // src/props/border.ts
 };
-var borderConverters = {
-  border: toCssUnit,
-  borderTop: toCssUnit,
-  borderRight: toCssUnit,
-  borderLeft: toCssUnit,
-  borderBottom: toCssUnit,
-  borderX: toCssUnit,
-  borderY: toCssUnit,
-  borderRadius: toCssUnit,
-  borderTopLeftRadius: toCssUnit,
-  borderTopRightRadius: toCssUnit,
-  borderBottomLeftRadius: toCssUnit,
-  borderBottomRightRadius: toCssUnit,
-  borderWidth: toCssUnit,
-  borderTopWidth: toCssUnit,
-  borderBottomWidth: toCssUnit,
-  borderLeftWidth: toCssUnit,
-  borderRightWidth: toCssUnit,
-  borderStart: toCssUnit,
-  borderEnd: toCssUnit,
-  borderStartWidth: toCssUnit,
-  borderEndWidth: toCssUnit,
-  borderStartRadius: toCssUnit,
-  borderEndRadius: toCssUnit
-};
 
@@ -583,6 +530,2 @@ // src/props/outline.ts
 };
-var outlineConverters = {
-  outlineWidth: toCssUnit,
-  outlineOffset: toCssUnit
-};
 
@@ -597,5 +540,2 @@ // src/props/position.ts
 };
-var positionConverters = Object.fromEntries(
-  Object.keys(positionMappings).map((key) => [key, toCssUnit])
-);
 
@@ -607,3 +547,2 @@ // src/props/shadow.ts
 };
-var shadowConverters = {};
 
@@ -634,7 +573,2 @@ // src/consumeStyleProps.ts
 };
-var gridConverters = {
-  gridGap: toCssUnit,
-  gridColumnGap: toCssUnit,
-  gridRowGap: toCssUnit
-};
 
@@ -648,3 +582,2 @@ // src/props/list.ts
 };
-var listConverters = {};
 
@@ -664,3 +597,2 @@ // src/props/effect.ts
 };
-var effectConverters = {};
 
@@ -692,5 +624,2 @@ // src/props/text.ts
 };
-var textConverters = {
-  textIndent: toCssUnit
-};
 
@@ -722,5 +651,2 @@ // src/props/font.ts
 };
-var fontConverters = {
-  fontSize: toCssUnit
-};
 
@@ -747,5 +673,2 @@ // src/props/mask.ts
 };
-var maskConverters = {
-  maskSize: toCssUnit
-};
 
@@ -765,7 +688,2 @@ // src/props/column.ts
 };
-var columnConverters = {
-  columnGap: toCssUnit,
-  columnRuleWidth: toCssUnit,
-  columnWidth: toCssUnit
-};
 
@@ -795,7 +713,2 @@ // src/props/background.ts
 };
-var backgroundConverters = {
-  bgPositionX: toCssUnit,
-  bgPositionY: toCssUnit,
-  bgSize: toCssUnit
-};
 
@@ -807,3 +720,2 @@ // src/props/filter.ts
 };
-var filterConverters = {};
 
@@ -829,2 +741,59 @@ // src/responsive.ts
 
+// src/toCSS.ts
+var unitless = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+function toCssUnit(propertyName, value) {
+  if (typeof value === "number") {
+    return `${value}${!(propertyName in unitless) ? "px" : ""}`;
+  }
+  return value;
+}
+
 // src/consumeStyleProps.ts
@@ -853,24 +822,2 @@ var styleMappings = Object.assign(
 );
-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) => {
@@ -888,3 +835,2 @@ const cacheKey = JSON.stringify(props);
       continue;
-    const converter = styleConverters[key];
     const properties = styleMappings[key]?.split(",") ?? [];
@@ -895,3 +841,3 @@ for (const property of properties) {
         cssValue,
-        converter
+        (value) => toCssUnit(key, value)
       );
@@ -942,7 +888,7 @@ base += responsiveStyles.base;
     };
-    for (const [propName, propValue] of Object.entries(props)) {
-      if (Array.isArray(propValue)) {
-        styledProps[propName] = propValue.map((value) => {
-          if (isThemeStyle(value)) {
-            const customStyle = findThemeStyle(value);
+    const convertStyle = (name, value) => {
+      if (Array.isArray(value)) {
+        return value.map((v) => {
+          if (isThemeStyle(v)) {
+            const customStyle = findThemeStyle(v);
             if (customStyle !== void 0) {
@@ -952,23 +898,26 @@ return customStyle;
           }
-          return value;
+          return v;
         });
-      } else if (isThemeStyle(propValue)) {
-        const customStyle = findThemeStyle(propValue);
+      } else if (isThemeStyle(value)) {
+        const customStyle = findThemeStyle(value);
         if (customStyle !== void 0) {
-          styledProps[propName] = customStyle;
+          return customStyle;
         }
-      } else if (isStyledProp(propName)) {
-        styledProps[propName] = propValue;
-      } else if (isPseudoProps(propName)) {
+      } else if (isStyledProp(name)) {
+        return value;
+      }
+      return value;
+    };
+    for (const [propName, propValue] of Object.entries(props)) {
+      if (isPseudoProps(propName)) {
         pseudoProps[propName] = propValue;
         for (const [name, value] of Object.entries(propValue)) {
-          if (isThemeStyle(value)) {
-            const customStyle = findThemeStyle(value);
-            if (customStyle !== void 0) {
-              pseudoProps[propName] = {
-                [name]: customStyle
-              };
-            }
-          }
+          pseudoProps[propName] = {
+            ...pseudoProps[propName],
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- FIXME
+            [name]: convertStyle(name, value)
+          };
         }
+      } else {
+        styledProps[propName] = convertStyle(propName, propValue);
       }
@@ -975,0 +924,0 @@ }

dist/index.d.ts

 import { ThemeSystemType, ResponsiveStyle } from './types.js';
-export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, SystemStyle, UtilityCSSMapping, ValueConverter } from './types.js';
+export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, SystemStyle, UtilityCSSMapping } from './types.js';
 export { AnimationProps } from './props/animation.js';
@@ -4,0 +4,0 @@ export { SpaceProps } from './props/space.js';

dist/index.js

@@ -46,12 +46,3 @@ "use strict";
 };
-var animationConverters = {};
 
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
 // src/props/space.ts
@@ -88,3 +79,2 @@ var spaceMappings = {
 };
-var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 
@@ -110,6 +100,2 @@ // src/props/typography.ts
 };
-var typographyConverters = {
-  wordSpacing: toCssUnit,
-  letterSpacing: toCssUnit
-};
 
@@ -141,11 +127,2 @@ // src/props/layout.ts
 };
-var layoutConverters = {
-  width: toCssUnit,
-  minWidth: toCssUnit,
-  maxWidth: toCssUnit,
-  height: toCssUnit,
-  minHeight: toCssUnit,
-  maxHeight: toCssUnit,
-  zIndex: (t) => t
-};
 
@@ -166,3 +143,2 @@ // src/props/color.ts
 };
-var colorConverters = {};
 
@@ -190,6 +166,2 @@ // src/props/flex.ts
 };
-var flexConverters = {
-  gap: toCssUnit,
-  flexBasis: toCssUnit
-};
 
@@ -229,27 +201,2 @@ // src/props/border.ts
 };
-var borderConverters = {
-  border: toCssUnit,
-  borderTop: toCssUnit,
-  borderRight: toCssUnit,
-  borderLeft: toCssUnit,
-  borderBottom: toCssUnit,
-  borderX: toCssUnit,
-  borderY: toCssUnit,
-  borderRadius: toCssUnit,
-  borderTopLeftRadius: toCssUnit,
-  borderTopRightRadius: toCssUnit,
-  borderBottomLeftRadius: toCssUnit,
-  borderBottomRightRadius: toCssUnit,
-  borderWidth: toCssUnit,
-  borderTopWidth: toCssUnit,
-  borderBottomWidth: toCssUnit,
-  borderLeftWidth: toCssUnit,
-  borderRightWidth: toCssUnit,
-  borderStart: toCssUnit,
-  borderEnd: toCssUnit,
-  borderStartWidth: toCssUnit,
-  borderEndWidth: toCssUnit,
-  borderStartRadius: toCssUnit,
-  borderEndRadius: toCssUnit
-};
 
@@ -263,6 +210,2 @@ // src/props/outline.ts
 };
-var outlineConverters = {
-  outlineWidth: toCssUnit,
-  outlineOffset: toCssUnit
-};
 
@@ -277,5 +220,2 @@ // src/props/position.ts
 };
-var positionConverters = Object.fromEntries(
-  Object.keys(positionMappings).map((key) => [key, toCssUnit])
-);
 
@@ -287,3 +227,2 @@ // src/props/shadow.ts
 };
-var shadowConverters = {};
 
@@ -314,7 +253,2 @@ // src/consumeStyleProps.ts
 };
-var gridConverters = {
-  gridGap: toCssUnit,
-  gridColumnGap: toCssUnit,
-  gridRowGap: toCssUnit
-};
 
@@ -328,3 +262,2 @@ // src/props/list.ts
 };
-var listConverters = {};
 
@@ -344,3 +277,2 @@ // src/props/effect.ts
 };
-var effectConverters = {};
 
@@ -372,5 +304,2 @@ // src/props/text.ts
 };
-var textConverters = {
-  textIndent: toCssUnit
-};
 
@@ -402,5 +331,2 @@ // src/props/font.ts
 };
-var fontConverters = {
-  fontSize: toCssUnit
-};
 
@@ -427,5 +353,2 @@ // src/props/mask.ts
 };
-var maskConverters = {
-  maskSize: toCssUnit
-};
 
@@ -445,7 +368,2 @@ // src/props/column.ts
 };
-var columnConverters = {
-  columnGap: toCssUnit,
-  columnRuleWidth: toCssUnit,
-  columnWidth: toCssUnit
-};
 
@@ -475,7 +393,2 @@ // src/props/background.ts
 };
-var backgroundConverters = {
-  bgPositionX: toCssUnit,
-  bgPositionY: toCssUnit,
-  bgSize: toCssUnit
-};
 
@@ -487,3 +400,2 @@ // src/props/filter.ts
 };
-var filterConverters = {};
 
@@ -509,2 +421,59 @@ // src/responsive.ts
 
+// src/toCSS.ts
+var unitless = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+function toCssUnit(propertyName, value) {
+  if (typeof value === "number") {
+    return `${value}${!(propertyName in unitless) ? "px" : ""}`;
+  }
+  return value;
+}
+
 // src/consumeStyleProps.ts
@@ -533,24 +502,2 @@ var styleMappings = Object.assign(
 );
-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) => {
@@ -568,3 +515,2 @@ const cacheKey = JSON.stringify(props);
       continue;
-    const converter = styleConverters[key];
     const properties = styleMappings[key]?.split(",") ?? [];
@@ -575,3 +521,3 @@ for (const property of properties) {
         cssValue,
-        converter
+        (value) => toCssUnit(key, value)
       );
@@ -944,7 +890,7 @@ base += responsiveStyles.base;
     };
-    for (const [propName, propValue] of Object.entries(props)) {
-      if (Array.isArray(propValue)) {
-        styledProps[propName] = propValue.map((value) => {
-          if (isThemeStyle(value)) {
-            const customStyle = findThemeStyle(value);
+    const convertStyle = (name, value) => {
+      if (Array.isArray(value)) {
+        return value.map((v) => {
+          if (isThemeStyle(v)) {
+            const customStyle = findThemeStyle(v);
             if (customStyle !== void 0) {
@@ -954,23 +900,26 @@ return customStyle;
           }
-          return value;
+          return v;
         });
-      } else if (isThemeStyle(propValue)) {
-        const customStyle = findThemeStyle(propValue);
+      } else if (isThemeStyle(value)) {
+        const customStyle = findThemeStyle(value);
         if (customStyle !== void 0) {
-          styledProps[propName] = customStyle;
+          return customStyle;
         }
-      } else if (isStyledProp(propName)) {
-        styledProps[propName] = propValue;
-      } else if (isPseudoProps(propName)) {
+      } else if (isStyledProp(name)) {
+        return value;
+      }
+      return value;
+    };
+    for (const [propName, propValue] of Object.entries(props)) {
+      if (isPseudoProps(propName)) {
         pseudoProps[propName] = propValue;
         for (const [name, value] of Object.entries(propValue)) {
-          if (isThemeStyle(value)) {
-            const customStyle = findThemeStyle(value);
-            if (customStyle !== void 0) {
-              pseudoProps[propName] = {
-                [name]: customStyle
-              };
-            }
-          }
+          pseudoProps[propName] = {
+            ...pseudoProps[propName],
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- FIXME
+            [name]: convertStyle(name, value)
+          };
         }
+      } else {
+        styledProps[propName] = convertStyle(propName, propValue);
       }
@@ -977,0 +926,0 @@ }

dist/props/animation.d.ts

 import { AnimationKeys } from '../keys.js';
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const animationMappings: Record<AnimationKeys, string>;
-declare const animationConverters: Partial<Record<AnimationKeys, ValueConverter>>;
 
-export { AnimationProps, animationConverters, animationMappings };
+export { AnimationProps, animationMappings };

dist/props/animation.js

@@ -23,3 +23,2 @@ "use strict";
 __export(animation_exports, {
-  animationConverters: () => animationConverters,
   animationMappings: () => animationMappings
@@ -41,7 +40,5 @@ });
 };
-var animationConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  animationConverters,
   animationMappings
 });

dist/props/background.d.ts

 import { BackgroundKeys } from '../keys.js';
-import { AddProperty, CSSProperties, CSSValue, ValueConverter } from '../types.js';
+import { AddProperty, CSSProperties, CSSValue } from '../types.js';
 import 'csstype';
@@ -49,4 +49,3 @@ import '@kuma-ui/sheet';
 declare const backgroundMappings: Record<BackgroundKeys, string>;
-declare const backgroundConverters: Partial<Record<BackgroundKeys, ValueConverter>>;
 
-export { BackgroundProps, backgroundConverters, backgroundMappings };
+export { BackgroundProps, backgroundMappings };

dist/props/background.js

@@ -23,16 +23,5 @@ "use strict";
 __export(background_exports, {
-  backgroundConverters: () => backgroundConverters,
   backgroundMappings: () => backgroundMappings
 });
 module.exports = __toCommonJS(background_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/background.ts
 var backgroundMappings = {
@@ -60,11 +49,5 @@ backgroundImage: "background-image",
 };
-var backgroundConverters = {
-  bgPositionX: toCssUnit,
-  bgPositionY: toCssUnit,
-  bgSize: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  backgroundConverters,
   backgroundMappings
 });

dist/props/border.d.ts

 import { BorderKeys } from '../keys.js';
-import { ThemeSystemType, CSSValue, AddProperty, CSSProperties, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSValue, AddProperty, CSSProperties } from '../types.js';
 import 'csstype';
@@ -54,4 +54,3 @@ import '@kuma-ui/sheet';
 declare const borderMappings: Record<BorderKeys, string>;
-declare const borderConverters: Partial<Record<BorderKeys, ValueConverter>>;
 
-export { BorderProps, borderConverters, borderMappings };
+export { BorderProps, borderMappings };

dist/props/border.js

@@ -23,16 +23,5 @@ "use strict";
 __export(border_exports, {
-  borderConverters: () => borderConverters,
   borderMappings: () => borderMappings
 });
 module.exports = __toCommonJS(border_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/border.ts
 var borderMappings = {
@@ -70,31 +59,5 @@ border: "border",
 };
-var borderConverters = {
-  border: toCssUnit,
-  borderTop: toCssUnit,
-  borderRight: toCssUnit,
-  borderLeft: toCssUnit,
-  borderBottom: toCssUnit,
-  borderX: toCssUnit,
-  borderY: toCssUnit,
-  borderRadius: toCssUnit,
-  borderTopLeftRadius: toCssUnit,
-  borderTopRightRadius: toCssUnit,
-  borderBottomLeftRadius: toCssUnit,
-  borderBottomRightRadius: toCssUnit,
-  borderWidth: toCssUnit,
-  borderTopWidth: toCssUnit,
-  borderBottomWidth: toCssUnit,
-  borderLeftWidth: toCssUnit,
-  borderRightWidth: toCssUnit,
-  borderStart: toCssUnit,
-  borderEnd: toCssUnit,
-  borderStartWidth: toCssUnit,
-  borderEndWidth: toCssUnit,
-  borderStartRadius: toCssUnit,
-  borderEndRadius: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  borderConverters,
   borderMappings
 });

dist/props/color.d.ts

 import { ColorKeys } from '../keys.js';
-import { ThemeSystemType, AddProperty, CSSValue, CSSProperties, ValueConverter } from '../types.js';
+import { ThemeSystemType, AddProperty, CSSValue, CSSProperties } from '../types.js';
 import 'csstype';
@@ -17,4 +17,3 @@ import '@kuma-ui/sheet';
 declare const colorMappings: Record<ColorKeys, string>;
-declare const colorConverters: Partial<Record<ColorKeys, ValueConverter>>;
 
-export { ColorProps, colorConverters, colorMappings };
+export { ColorProps, colorMappings };

dist/props/color.js

@@ -23,3 +23,2 @@ "use strict";
 __export(color_exports, {
-  colorConverters: () => colorConverters,
   colorMappings: () => colorMappings
@@ -41,7 +40,5 @@ });
 };
-var colorConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  colorConverters,
   colorMappings
 });

dist/props/column.d.ts

@@ -1,2 +0,2 @@
-import { ThemeSystemType, CSSProperties, AddProperty, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSProperties, AddProperty } from '../types.js';
 import { ColumnKeys } from '../keys.js';
@@ -8,4 +8,3 @@ import 'csstype';
 declare const columnMappings: Record<ColumnKeys, string>;
-declare const columnConverters: Partial<Record<ColumnKeys, ValueConverter>>;
 
-export { ColumnProps, columnConverters, columnMappings };
+export { ColumnProps, columnMappings };

dist/props/column.js

@@ -23,16 +23,5 @@ "use strict";
 __export(column_exports, {
-  columnConverters: () => columnConverters,
   columnMappings: () => columnMappings
 });
 module.exports = __toCommonJS(column_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/column.ts
 var columnMappings = {
@@ -50,11 +39,5 @@ columnCount: "column-count",
 };
-var columnConverters = {
-  columnGap: toCssUnit,
-  columnRuleWidth: toCssUnit,
-  columnWidth: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  columnConverters,
   columnMappings
 });

dist/props/effect.d.ts

 import { EffectKeys } from '../keys.js';
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const effectMappings: Record<EffectKeys, string>;
-declare const effectConverters: Partial<Record<EffectKeys, ValueConverter>>;
 
-export { EffectProps, effectConverters, effectMappings };
+export { EffectProps, effectMappings };

dist/props/effect.js

@@ -23,3 +23,2 @@ "use strict";
 __export(effect_exports, {
-  effectConverters: () => effectConverters,
   effectMappings: () => effectMappings
@@ -40,7 +39,5 @@ });
 };
-var effectConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  effectConverters,
   effectMappings
 });

dist/props/filter.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import { FilterKeys } from '../keys.js';
@@ -8,4 +8,3 @@ import 'csstype';
 declare const filterMappings: Record<FilterKeys, string>;
-declare const filterConverters: Partial<Record<FilterKeys, ValueConverter>>;
 
-export { FilterProps, filterConverters, filterMappings };
+export { FilterProps, filterMappings };

dist/props/filter.js

@@ -23,3 +23,2 @@ "use strict";
 __export(filter_exports, {
-  filterConverters: () => filterConverters,
   filterMappings: () => filterMappings
@@ -32,7 +31,5 @@ });
 };
-var filterConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  filterConverters,
   filterMappings
 });

dist/props/flex.d.ts

 import { FlexKeys } from '../keys.js';
-import { ThemeSystemType, CSSValue, CSSProperties, AddProperty, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSValue, CSSProperties, AddProperty } from '../types.js';
 import 'csstype';
@@ -18,4 +18,3 @@ import '@kuma-ui/sheet';
 declare const flexMappings: Record<FlexKeys, string>;
-declare const flexConverters: Partial<Record<FlexKeys, ValueConverter>>;
 
-export { FlexProps, flexConverters, flexMappings };
+export { FlexProps, flexMappings };

dist/props/flex.js

@@ -23,16 +23,5 @@ "use strict";
 __export(flex_exports, {
-  flexConverters: () => flexConverters,
   flexMappings: () => flexMappings
 });
 module.exports = __toCommonJS(flex_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/flex.ts
 var flexMappings = {
@@ -58,10 +47,5 @@ flexDirection: "flex-direction",
 };
-var flexConverters = {
-  gap: toCssUnit,
-  flexBasis: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  flexConverters,
   flexMappings
 });

dist/props/font.d.ts

 import { FontKeys } from '../keys.js';
-import { ThemeSystemType, CSSProperties, AddProperty, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSProperties, AddProperty } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const fontMappings: Record<FontKeys, string>;
-declare const fontConverters: Partial<Record<FontKeys, ValueConverter>>;
 
-export { FontProps, fontConverters, fontMappings };
+export { FontProps, fontMappings };

dist/props/font.js

@@ -23,16 +23,5 @@ "use strict";
 __export(font_exports, {
-  fontConverters: () => fontConverters,
   fontMappings: () => fontMappings
 });
 module.exports = __toCommonJS(font_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/font.ts
 var fontMappings = {
@@ -62,9 +51,5 @@ font: "font",
 };
-var fontConverters = {
-  fontSize: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  fontConverters,
   fontMappings
 });

dist/props/grid.d.ts

 import { GridKeys } from '../keys.js';
-import { ThemeSystemType, CSSProperties, AddProperty, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSProperties, AddProperty } from '../types.js';
 import 'csstype';
@@ -10,4 +10,3 @@ import '@kuma-ui/sheet';
 declare const gridMappings: Record<GridKeys, string>;
-declare const gridConverters: Partial<Record<GridKeys, ValueConverter>>;
 
-export { GridProps, gridConverters, gridMappings };
+export { GridProps, gridMappings };

dist/props/grid.js

@@ -23,16 +23,5 @@ "use strict";
 __export(grid_exports, {
-  gridConverters: () => gridConverters,
   gridMappings: () => gridMappings
 });
 module.exports = __toCommonJS(grid_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/grid.ts
 var gridMappings = {
@@ -58,11 +47,5 @@ grid: "grid",
 };
-var gridConverters = {
-  gridGap: toCssUnit,
-  gridColumnGap: toCssUnit,
-  gridRowGap: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  gridConverters,
   gridMappings
 });

dist/props/layout.d.ts

 import { LayoutKeys } from '../keys.js';
-import { ThemeSystemType, AddProperty, CSSProperties, ValueConverter } from '../types.js';
+import { ThemeSystemType, AddProperty, CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const layoutMappings: Record<LayoutKeys, string>;
-declare const layoutConverters: Partial<Record<LayoutKeys, ValueConverter>>;
 
-export { LayoutProps, layoutConverters, layoutMappings };
+export { LayoutProps, layoutMappings };

dist/props/layout.js

@@ -23,16 +23,5 @@ "use strict";
 __export(layout_exports, {
-  layoutConverters: () => layoutConverters,
   layoutMappings: () => layoutMappings
 });
 module.exports = __toCommonJS(layout_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/layout.ts
 var layoutMappings = {
@@ -62,15 +51,5 @@ width: "width",
 };
-var layoutConverters = {
-  width: toCssUnit,
-  minWidth: toCssUnit,
-  maxWidth: toCssUnit,
-  height: toCssUnit,
-  minHeight: toCssUnit,
-  maxHeight: toCssUnit,
-  zIndex: (t) => t
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  layoutConverters,
   layoutMappings
 });

dist/props/list.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import { ListKeys } from '../keys.js';
@@ -8,4 +8,3 @@ import 'csstype';
 declare const listMappings: Record<ListKeys, string>;
-declare const listConverters: Partial<Record<ListKeys, ValueConverter>>;
 
-export { ListProps, listConverters, listMappings };
+export { ListProps, listMappings };

dist/props/list.js

@@ -23,3 +23,2 @@ "use strict";
 __export(list_exports, {
-  listConverters: () => listConverters,
   listMappings: () => listMappings
@@ -34,7 +33,5 @@ });
 };
-var listConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  listConverters,
   listMappings
 });

dist/props/mask.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import { MaskKeys } from '../keys.js';
@@ -8,4 +8,3 @@ import 'csstype';
 declare const maskMappings: Record<MaskKeys, string>;
-declare const maskConverters: Partial<Record<MaskKeys, ValueConverter>>;
 
-export { MaskProps, maskConverters, maskMappings };
+export { MaskProps, maskMappings };

dist/props/mask.js

@@ -23,16 +23,5 @@ "use strict";
 __export(mask_exports, {
-  maskConverters: () => maskConverters,
   maskMappings: () => maskMappings
 });
 module.exports = __toCommonJS(mask_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/mask.ts
 var maskMappings = {
@@ -57,9 +46,5 @@ mask: "mask",
 };
-var maskConverters = {
-  maskSize: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  maskConverters,
   maskMappings
 });

dist/props/outline.d.ts

 import { OutlineKeys } from '../keys.js';
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const outlineMappings: Record<OutlineKeys, string>;
-declare const outlineConverters: Partial<Record<OutlineKeys, ValueConverter>>;
 
-export { OutlineProps, outlineConverters, outlineMappings };
+export { OutlineProps, outlineMappings };

dist/props/outline.js

@@ -23,16 +23,5 @@ "use strict";
 __export(outline_exports, {
-  outlineConverters: () => outlineConverters,
   outlineMappings: () => outlineMappings
 });
 module.exports = __toCommonJS(outline_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/outline.ts
 var outlineMappings = {
@@ -44,10 +33,5 @@ outline: "outline",
 };
-var outlineConverters = {
-  outlineWidth: toCssUnit,
-  outlineOffset: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  outlineConverters,
   outlineMappings
 });

dist/props/position.d.ts

 import { PositionKeys } from '../keys.js';
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const positionMappings: Record<PositionKeys, string>;
-declare const positionConverters: Partial<Record<PositionKeys, ValueConverter>>;
 
-export { PositionProps, positionConverters, positionMappings };
+export { PositionProps, positionMappings };

dist/props/position.js

@@ -23,16 +23,5 @@ "use strict";
 __export(position_exports, {
-  positionConverters: () => positionConverters,
   positionMappings: () => positionMappings
 });
 module.exports = __toCommonJS(position_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/position.ts
 var positionMappings = {
@@ -45,9 +34,5 @@ top: "top",
 };
-var positionConverters = Object.fromEntries(
-  Object.keys(positionMappings).map((key) => [key, toCssUnit])
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  positionConverters,
   positionMappings
 });

dist/props/shadow.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import { ShadowKeys } from '../keys.js';
@@ -8,4 +8,3 @@ import 'csstype';
 declare const shadowMappings: Record<ShadowKeys, string>;
-declare const shadowConverters: Partial<Record<ShadowKeys, ValueConverter>>;
 
-export { ShadowProps, shadowConverters, shadowMappings };
+export { ShadowProps, shadowMappings };

dist/props/shadow.js

@@ -23,3 +23,2 @@ "use strict";
 __export(shadow_exports, {
-  shadowConverters: () => shadowConverters,
   shadowMappings: () => shadowMappings
@@ -32,7 +31,5 @@ });
 };
-var shadowConverters = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  shadowConverters,
   shadowMappings
 });

dist/props/space.d.ts

 import { SpaceKeys } from '../keys.js';
-import { ThemeSystemType, AddProperty, CSSProperties, CSSValue, ValueConverter } from '../types.js';
+import { ThemeSystemType, AddProperty, CSSProperties, CSSValue } from '../types.js';
 import 'csstype';
@@ -89,4 +89,3 @@ import '@kuma-ui/sheet';
 declare const spaceMappings: Record<SpaceKeys, string>;
-declare const spaceConverters: Partial<Record<SpaceKeys, ValueConverter>>;
 
-export { SpaceProps, spaceConverters, spaceMappings };
+export { SpaceProps, spaceMappings };

dist/props/space.js

@@ -23,16 +23,5 @@ "use strict";
 __export(space_exports, {
-  spaceConverters: () => spaceConverters,
   spaceMappings: () => spaceMappings
 });
 module.exports = __toCommonJS(space_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/space.ts
 var spaceMappings = {
@@ -68,7 +57,5 @@ margin: "margin",
 };
-var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  spaceConverters,
   spaceMappings
 });

dist/props/text.d.ts

 import { TextKeys } from '../keys.js';
-import { CSSProperties, ValueConverter } from '../types.js';
+import { CSSProperties } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const textMappings: Record<TextKeys, string>;
-declare const textConverters: Partial<Record<TextKeys, ValueConverter>>;
 
-export { TextProps, textConverters, textMappings };
+export { TextProps, textMappings };

dist/props/text.js

@@ -23,16 +23,5 @@ "use strict";
 __export(text_exports, {
-  textConverters: () => textConverters,
   textMappings: () => textMappings
 });
 module.exports = __toCommonJS(text_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/text.ts
 var textMappings = {
@@ -62,9 +51,5 @@ textAlign: "text-align",
 };
-var textConverters = {
-  textIndent: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  textConverters,
   textMappings
 });

dist/props/typography.d.ts

 import { TypographyKeys } from '../keys.js';
-import { ThemeSystemType, CSSProperties, AddProperty, ValueConverter } from '../types.js';
+import { ThemeSystemType, CSSProperties, AddProperty } from '../types.js';
 import 'csstype';
@@ -8,4 +8,3 @@ import '@kuma-ui/sheet';
 declare const typographyMappings: Record<TypographyKeys, string>;
-declare const typographyConverters: Partial<Record<TypographyKeys, ValueConverter>>;
 
-export { TypographyProps, typographyConverters, typographyMappings };
+export { TypographyProps, typographyMappings };

dist/props/typography.js

@@ -23,16 +23,5 @@ "use strict";
 __export(typography_exports, {
-  typographyConverters: () => typographyConverters,
   typographyMappings: () => typographyMappings
 });
 module.exports = __toCommonJS(typography_exports);
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/props/typography.ts
 var typographyMappings = {
@@ -56,10 +45,5 @@ hyphenateCharacter: "hyphenate-character",
 };
-var typographyConverters = {
-  wordSpacing: toCssUnit,
-  letterSpacing: toCssUnit
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  typographyConverters,
   typographyMappings
 });

dist/pseudo.d.ts

@@ -30,4 +30,4 @@ import { StyledProps } from './consumeStyleProps.js';
 declare const normalizePseudo: (props: string) => string;
-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";
+declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_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" | "_after" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_grammar-error" | "_placeholder" | "_selection" | "_spelling-error" | "_target-text" | "_view-transition" | "_active" | "_any-link" | "_blank" | "_checked" | "_current" | "_default" | "_defined" | "_disabled" | "_empty" | "_enabled" | "_first" | "_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" | "_paused" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_read-only" | "_read-write" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
 
 export { PseudoProps, isPseudoProps, normalizePseudo };

dist/toCSS.d.ts

@@ -1,3 +0,3 @@
-declare const toCssUnit: (token: string | number) => string;
+declare function toCssUnit(propertyName: string, value: string | number): string;
 
 export { toCssUnit };

dist/toCSS.js

@@ -26,8 +26,57 @@ "use strict";
 module.exports = __toCommonJS(toCSS_exports);
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
+var unitless = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
 };
+function toCssUnit(propertyName, value) {
+  if (typeof value === "number") {
+    return `${value}${!(propertyName in unitless) ? "px" : ""}`;
+  }
+  return value;
+}
 // Annotate the CommonJS export names for ESM import in node:
@@ -34,0 +83,0 @@ 0 && (module.exports = {

dist/types.d.ts

@@ -33,4 +33,3 @@ import * as CSS from 'csstype';
 };
-type ValueConverter = (value: string | number) => string | number;
 
-export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping, ValueConverter };
+export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping };

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "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

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

171538

decreased by-7.89%

Lines of code

5556

decreased by-8.63%

No dependency changes