@hopper-ui/styled-system 0.3.0 → 1.1.0

package/dist/{chunk-P2EJTPCQ.js → chunk-37HGVAAN.js}

@@ -1,13 +1,12 @@
-import { parseResponsiveSystemValue, ColorExpressionTypes, DefaultBorderWidthAndStyle, BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, TextColorMapping, SimpleMarginMapping, IconColorMapping, FontFamilyMapping, FontSizeMapping, FontWeightMapping, SizingMapping, LineHeightMapping, ComplexMarginMapping, ComplexPaddingMapping, SimplePaddingMapping } from './chunk-T2LQYER5.js';
+import { parseResponsiveSystemValue, ColorExpressionTypes, DefaultBorderWidthAndStyle, SizingMapping, BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, TextColorMapping, SimpleMarginMapping, IconColorMapping, FontFamilyMapping, FontSizeMapping, FontWeightMapping, LineHeightMapping, ComplexMarginMapping, ComplexPaddingMapping, SimplePaddingMapping } from './chunk-DRFY5W7M.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
 import { useBreakpointContext } from './chunk-VBKLISDI.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
-import { UnsafePrefix } from './chunk-I37Y2R7V.js';
+import { UnsafePrefix } from './chunk-QMDDVBCZ.js';
 import { __privateAdd, __publicField, __privateSet, __privateGet } from './chunk-6LX4VMOV.js';
-import { useMemo } from 'react';
 
 // css-module:./UseStyledSystem.module.css#css-module
-var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___0C6gb", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___5R8GS", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___IkHkD", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___jfMkk", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___Fh4KI", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___42wnu", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___d7tJL", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___lIBdy", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___-51b1", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___LgviM", "hop-b-active": "UseStyledSystem-module__hop-b-active___ONrdf", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___G6hdU", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___5Fy9s", "hop-br-active": "UseStyledSystem-module__hop-br-active___sW0IG", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___bZo82", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___JI8Yq", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___zhYwB", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___zE0Q1", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___J0gS8", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___XMm0W", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___wOS0j", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___DNEzP", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___2pd7x", "hop-c-active": "UseStyledSystem-module__hop-c-active___8Iu-1", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___y2yVN", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___D2vmF", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___M1yoY", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___ohVHL", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___44Yka", "hop-o-active": "UseStyledSystem-module__hop-o-active___iOPL6", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___eT2dD" };
+var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___v8kki", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___s6F81", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___tO04m", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___OWDdB", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___vZ-JR", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___eLvPm", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___RQ0ux", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___b4F4D", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___YvZ0-", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___kmT9B", "hop-b-active": "UseStyledSystem-module__hop-b-active___jKktg", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___F9aRL", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___7b6w-", "hop-br-active": "UseStyledSystem-module__hop-br-active___a76LS", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___Y8R5g", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___rjc8F", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___0R4Lu", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___pmKdb", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___-OvG-", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___JiReX", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___Jmvvh", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___YhtkL", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___Aq77N", "hop-c-active": "UseStyledSystem-module__hop-c-active___QQsU9", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___S7jfy", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___5m-9L", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___LLUi6", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___bjLYo", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___eIchf", "hop-o-active": "UseStyledSystem-module__hop-o-active___qCLhG", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___UcPDK" };
 
 // src/useStyledSystem.ts
 function createSystemValueHandler(systemValues) {
@@ -88,6 +87,24 @@ var gridRowSpanHandler = (name, value, context) => {
     context.addStyleValue("gridRow", `span ${parsedValue} / span ${parsedValue}`);
   }
 };
+var gridTemplateDimensionsHandler = (name, value, context) => {
+  let parsedValue = parseResponsiveSystemValue(value, SizingMapping, context.matchedBreakpoints);
+  if (!isNil(parsedValue)) {
+    if (Array.isArray(parsedValue)) {
+      parsedValue = parsedValue.map((x) => parseResponsiveSystemValue(x, SizingMapping, context.matchedBreakpoints)).join(" ");
+    }
+    context.addStyleValue(name, parsedValue);
+  }
+};
+var gridTemplateAreasHandler = (name, value, context) => {
+  let parsedValue = parseResponsiveValue(value, context.matchedBreakpoints);
+  if (!isNil(parsedValue)) {
+    if (Array.isArray(parsedValue)) {
+      parsedValue = parsedValue.map((v) => `"${v}"`).join(" ");
+    }
+    context.addStyleValue("gridTemplateAreas", parsedValue);
+  }
+};
 var PropsHandlers = {
   alignContent: createPassthroughHandler(),
   alignItems: createPassthroughHandler(),
@@ -171,9 +188,9 @@ var PropsHandlers = {
   gridRowSpan: gridRowSpanHandler,
   gridRowStart: createPassthroughHandler(),
   gridTemplate: createPassthroughHandler(),
-  gridTemplateAreas: createPassthroughHandler(),
-  gridTemplateColumns: createSystemValueHandler(SizingMapping),
-  gridTemplateRows: createSystemValueHandler(SizingMapping),
+  gridTemplateAreas: gridTemplateAreasHandler,
+  gridTemplateColumns: gridTemplateDimensionsHandler,
+  gridTemplateRows: gridTemplateDimensionsHandler,
   height: createSystemValueHandler(SizingMapping),
   justifyContent: createPassthroughHandler(),
   justifyItems: createPassthroughHandler(),
@@ -244,7 +261,7 @@ var StylingContext = class {
     __privateAdd(this, _style, void 0);
     __publicField(this, "matchedBreakpoints");
     __privateSet(this, _classes, !isNil(className) ? [className] : []);
-    __privateSet(this, _style, { ...style });
+    __privateSet(this, _style, { ...style != null ? style : {} });
     this.matchedBreakpoints = matchedBreakpoints;
   }
   addClass(className) {
@@ -265,471 +282,32 @@ var StylingContext = class {
 };
 _classes = new WeakMap();
 _style = new WeakMap();
+function convertStyleProps(props, handlers, matchedBreakpoints) {
+  const context = new StylingContext(void 0, void 0, matchedBreakpoints);
+  Object.keys(props).forEach((key) => {
+    const value = props[key];
+    if (!isNil(value)) {
+      const cssProperty = key.toString().replace(UnsafePrefix, "");
+      const handler = handlers[cssProperty];
+      if (!isNil(handler)) {
+        handler(cssProperty, value, context);
+      }
+    }
+  });
+  return context.computeStyling();
+}
+function removeStyledSystemProps(props) {
+  return Object.keys(props).filter((x) => !isStyledSystemProp(x)).reduce((acc, key) => {
+    acc[key] = props[key];
+    return acc;
+  }, {});
+}
 function useStyledSystem(props) {
-  const {
-    alignContent,
-    alignItems,
-    alignSelf,
-    aspectRatio,
-    backgroundColor,
-    backgroundColorActive,
-    backgroundColorFocus,
-    backgroundColorHover,
-    backgroundImage,
-    backgroundPosition,
-    backgroundRepeat,
-    backgroundSize,
-    border,
-    borderActive,
-    borderBottom,
-    borderBottomActive,
-    borderBottomFocus,
-    borderBottomHover,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderFocus,
-    borderHover,
-    borderLeft,
-    borderLeftActive,
-    borderLeftFocus,
-    borderLeftHover,
-    borderRadius,
-    borderRight,
-    borderRightActive,
-    borderRightFocus,
-    borderRightHover,
-    borderTop,
-    borderTopActive,
-    borderTopFocus,
-    borderTopHover,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    bottom,
-    boxShadow,
-    boxShadowActive,
-    boxShadowFocus,
-    boxShadowHover,
-    className,
-    color,
-    colorActive,
-    colorFocus,
-    colorHover,
-    columnGap,
-    content,
-    contentVisibility,
-    cursor,
-    cursorHover,
-    display,
-    fill,
-    fillFocus,
-    fillHover,
-    filter,
-    flex,
-    flexBasis,
-    flexDirection,
-    flexFlow,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    gap,
-    grid,
-    gridArea,
-    gridAutoColumns,
-    gridAutoFlow,
-    gridAutoRows,
-    gridColumn,
-    gridColumnEnd,
-    gridColumnSpan,
-    gridColumnStart,
-    gridRow,
-    gridRowEnd,
-    gridRowSpan,
-    gridRowStart,
-    gridTemplate,
-    gridTemplateAreas,
-    gridTemplateColumns,
-    gridTemplateRows,
-    height,
-    justifyContent,
-    justifyItems,
-    justifySelf,
-    left,
-    letterSpacing,
-    lineHeight,
-    margin,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginTop,
-    marginX,
-    marginY,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-    objectFit,
-    objectPosition,
-    opacity,
-    opacityActive,
-    opacityFocus,
-    opacityHover,
-    order,
-    outline,
-    outlineFocus,
-    overflow,
-    overflowX,
-    overflowY,
-    padding,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingX,
-    paddingY,
-    pointerEvents,
-    position,
-    resize,
-    right,
-    rowGap,
-    stroke,
-    style,
-    textAlign,
-    textDecoration,
-    textOverflow,
-    textTransform,
-    top,
-    transform,
-    transformOrigin,
-    transformStyle,
-    transition,
-    UNSAFE_backgroundColor,
-    UNSAFE_backgroundColorActive,
-    UNSAFE_backgroundColorFocus,
-    UNSAFE_backgroundColorHover,
-    UNSAFE_border,
-    UNSAFE_borderActive,
-    UNSAFE_borderBottom,
-    UNSAFE_borderBottomActive,
-    UNSAFE_borderBottomFocus,
-    UNSAFE_borderBottomHover,
-    UNSAFE_borderBottomLeftRadius,
-    UNSAFE_borderBottomRightRadius,
-    UNSAFE_borderFocus,
-    UNSAFE_borderHover,
-    UNSAFE_borderLeft,
-    UNSAFE_borderLeftActive,
-    UNSAFE_borderLeftFocus,
-    UNSAFE_borderLeftHover,
-    UNSAFE_borderRadius,
-    UNSAFE_borderRight,
-    UNSAFE_borderRightActive,
-    UNSAFE_borderRightFocus,
-    UNSAFE_borderRightHover,
-    UNSAFE_borderTop,
-    UNSAFE_borderTopActive,
-    UNSAFE_borderTopFocus,
-    UNSAFE_borderTopHover,
-    UNSAFE_borderTopLeftRadius,
-    UNSAFE_borderTopRightRadius,
-    UNSAFE_boxShadow,
-    UNSAFE_boxShadowActive,
-    UNSAFE_boxShadowFocus,
-    UNSAFE_boxShadowHover,
-    UNSAFE_color,
-    UNSAFE_colorActive,
-    UNSAFE_colorFocus,
-    UNSAFE_colorHover,
-    UNSAFE_columnGap,
-    UNSAFE_fill,
-    UNSAFE_fillFocus,
-    UNSAFE_fillHover,
-    UNSAFE_fontFamily,
-    UNSAFE_fontSize,
-    UNSAFE_fontWeight,
-    UNSAFE_gap,
-    UNSAFE_gridAutoColumns,
-    UNSAFE_gridAutoRows,
-    UNSAFE_gridColumnSpan,
-    UNSAFE_gridRowSpan,
-    UNSAFE_gridTemplateColumns,
-    UNSAFE_gridTemplateRows,
-    UNSAFE_height,
-    UNSAFE_lineHeight,
-    UNSAFE_margin,
-    UNSAFE_marginBottom,
-    UNSAFE_marginLeft,
-    UNSAFE_marginRight,
-    UNSAFE_marginTop,
-    UNSAFE_marginX,
-    UNSAFE_marginY,
-    UNSAFE_maxHeight,
-    UNSAFE_maxWidth,
-    UNSAFE_minHeight,
-    UNSAFE_minWidth,
-    UNSAFE_padding,
-    UNSAFE_paddingBottom,
-    UNSAFE_paddingLeft,
-    UNSAFE_paddingRight,
-    UNSAFE_paddingTop,
-    UNSAFE_paddingX,
-    UNSAFE_paddingY,
-    UNSAFE_rowGap,
-    UNSAFE_stroke,
-    UNSAFE_width,
-    verticalAlign,
-    visibility,
-    whiteSpace,
-    width,
-    willChange,
-    wordBreak,
-    zIndex,
-    ...rest
-  } = props;
   const { matchedBreakpoints } = useBreakpointContext();
-  const styling = useMemo(() => {
-    const context = new StylingContext(className, style, matchedBreakpoints);
-    Object.keys(props).forEach((key) => {
-      const value = props[key];
-      if (!isNil(value)) {
-        const cssProperty = key.replace(UnsafePrefix, "");
-        const handler = PropsHandlers[cssProperty];
-        if (!isNil(handler)) {
-          handler(cssProperty, value, context);
-        }
-      }
-    });
-    return context.computeStyling();
-  }, [
-    alignContent,
-    alignItems,
-    alignSelf,
-    aspectRatio,
-    backgroundColor,
-    backgroundColorActive,
-    backgroundColorFocus,
-    backgroundColorHover,
-    backgroundImage,
-    backgroundPosition,
-    backgroundRepeat,
-    backgroundSize,
-    border,
-    borderActive,
-    borderBottom,
-    borderBottomActive,
-    borderBottomFocus,
-    borderBottomHover,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderFocus,
-    borderHover,
-    borderLeft,
-    borderLeftActive,
-    borderLeftFocus,
-    borderLeftHover,
-    borderRadius,
-    borderRight,
-    borderRightActive,
-    borderRightFocus,
-    borderRightHover,
-    borderTop,
-    borderTopActive,
-    borderTopFocus,
-    borderTopHover,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    bottom,
-    boxShadow,
-    boxShadowActive,
-    boxShadowFocus,
-    boxShadowHover,
-    className,
-    color,
-    colorActive,
-    colorFocus,
-    colorHover,
-    columnGap,
-    content,
-    contentVisibility,
-    cursor,
-    cursorHover,
-    display,
-    fill,
-    fillFocus,
-    fillHover,
-    filter,
-    flex,
-    flexBasis,
-    flexDirection,
-    flexFlow,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    gap,
-    grid,
-    gridArea,
-    gridAutoColumns,
-    gridAutoFlow,
-    gridAutoRows,
-    gridColumn,
-    gridColumnEnd,
-    gridColumnSpan,
-    gridColumnStart,
-    gridRow,
-    gridRowEnd,
-    gridRowSpan,
-    gridRowStart,
-    gridTemplate,
-    gridTemplateAreas,
-    gridTemplateColumns,
-    gridTemplateRows,
-    height,
-    justifyContent,
-    justifyItems,
-    justifySelf,
-    left,
-    letterSpacing,
-    lineHeight,
-    margin,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginTop,
-    marginX,
-    marginY,
-    matchedBreakpoints,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-    objectFit,
-    objectPosition,
-    opacity,
-    opacityActive,
-    opacityFocus,
-    opacityHover,
-    order,
-    outline,
-    outlineFocus,
-    overflow,
-    overflowX,
-    overflowY,
-    padding,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingX,
-    paddingY,
-    pointerEvents,
-    position,
-    resize,
-    right,
-    rowGap,
-    stroke,
-    style,
-    textAlign,
-    textDecoration,
-    textOverflow,
-    textTransform,
-    top,
-    transform,
-    transformOrigin,
-    transformStyle,
-    transition,
-    UNSAFE_backgroundColor,
-    UNSAFE_backgroundColorActive,
-    UNSAFE_backgroundColorFocus,
-    UNSAFE_backgroundColorHover,
-    UNSAFE_border,
-    UNSAFE_borderActive,
-    UNSAFE_borderBottom,
-    UNSAFE_borderBottomActive,
-    UNSAFE_borderBottomFocus,
-    UNSAFE_borderBottomHover,
-    UNSAFE_borderBottomLeftRadius,
-    UNSAFE_borderBottomRightRadius,
-    UNSAFE_borderFocus,
-    UNSAFE_borderHover,
-    UNSAFE_borderLeft,
-    UNSAFE_borderLeftActive,
-    UNSAFE_borderLeftFocus,
-    UNSAFE_borderLeftHover,
-    UNSAFE_borderRadius,
-    UNSAFE_borderRight,
-    UNSAFE_borderRightActive,
-    UNSAFE_borderRightFocus,
-    UNSAFE_borderRightHover,
-    UNSAFE_borderTop,
-    UNSAFE_borderTopActive,
-    UNSAFE_borderTopFocus,
-    UNSAFE_borderTopHover,
-    UNSAFE_borderTopLeftRadius,
-    UNSAFE_borderTopRightRadius,
-    UNSAFE_boxShadow,
-    UNSAFE_boxShadowActive,
-    UNSAFE_boxShadowFocus,
-    UNSAFE_boxShadowHover,
-    UNSAFE_color,
-    UNSAFE_colorActive,
-    UNSAFE_colorFocus,
-    UNSAFE_colorHover,
-    UNSAFE_columnGap,
-    UNSAFE_fill,
-    UNSAFE_fillFocus,
-    UNSAFE_fillHover,
-    UNSAFE_fontFamily,
-    UNSAFE_fontSize,
-    UNSAFE_fontWeight,
-    UNSAFE_gap,
-    UNSAFE_gridAutoColumns,
-    UNSAFE_gridAutoRows,
-    UNSAFE_gridColumnSpan,
-    UNSAFE_gridRowSpan,
-    UNSAFE_gridTemplateColumns,
-    UNSAFE_gridTemplateRows,
-    UNSAFE_height,
-    UNSAFE_lineHeight,
-    UNSAFE_margin,
-    UNSAFE_marginBottom,
-    UNSAFE_marginLeft,
-    UNSAFE_marginRight,
-    UNSAFE_marginTop,
-    UNSAFE_marginX,
-    UNSAFE_marginY,
-    UNSAFE_maxHeight,
-    UNSAFE_maxWidth,
-    UNSAFE_minHeight,
-    UNSAFE_minWidth,
-    UNSAFE_padding,
-    UNSAFE_paddingBottom,
-    UNSAFE_paddingLeft,
-    UNSAFE_paddingRight,
-    UNSAFE_paddingTop,
-    UNSAFE_paddingX,
-    UNSAFE_paddingY,
-    UNSAFE_rowGap,
-    UNSAFE_stroke,
-    UNSAFE_width,
-    verticalAlign,
-    visibility,
-    whiteSpace,
-    width,
-    willChange,
-    wordBreak,
-    zIndex
-  ]);
+  const stylingProps = convertStyleProps(props, PropsHandlers, matchedBreakpoints);
   return {
-    ...rest,
-    className: styling.className,
-    style: styling.style
+    ...removeStyledSystemProps(props),
+    stylingProps
   };
 }
 

package/dist/{chunk-T2LQYER5.js → chunk-DRFY5W7M.js}

@@ -1,8 +1,8 @@
-import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-PCGVOTW3.js';
+import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-KKVEOD5L.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
-import { isNil } from './chunk-U5R6ZXH3.js';
+import { isNil, isObject } from './chunk-U5R6ZXH3.js';
 
-// src/tokens/token-mappings.ts
+// src/tokens/tokenMappings.ts
 var ColorExpressionTypes = [
   "#",
   "rgb",
@@ -51,7 +51,9 @@ var FontWeightMapping = createMapping(FontWeight);
 var LineHeightMapping = createMapping(LineHeight);
 var FontFamilyMapping = createMapping(FontFamily);
 var BorderRadiusMapping = createMapping(Shape);
-var SpaceMapping = createMapping(CoreSpace);
+var SpaceMapping = {
+  ...createMapping(CoreSpace)
+};
 var SimplePaddingMapping = {
   ...createMapping(SemanticSimplePaddingSpace),
   ...SpaceMapping
@@ -69,22 +71,61 @@ var ComplexMarginMapping = {
   ...createMapping(SemanticComplexMarginSpace)
 };
 var SizingMapping = {
-  ...SpaceMapping
-  // TODO: Sizing scale still missing, only core tokens are available at the moment
+  ...SpaceMapping,
+  // tailwind like values for scaling since we don't have scale tokens
+  "100vw": "100vw",
+  "100svw": "100svw",
+  "100lvw": "100lvw",
+  "100dvw": "100dvw",
+  "100vh": "100vh",
+  "100svh": "100svh",
+  "100lvh": "100lvh",
+  "100dvh": "100dvh",
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%"
 };
 function parseResponsiveSystemValue(value, systemValues, matchedBreakpoints) {
   if (isNil(value)) {
     return value;
   }
-  const systemValue = getSystemValue(value, systemValues);
-  if (!isNil(systemValue)) {
-    return systemValue;
+  if (!isObject(value)) {
+    if (Array.isArray(value)) {
+      const systemValueArray = value.map((x) => getSystemValue(x, systemValues));
+      if (!isNil(systemValueArray) && systemValueArray.every((x) => !isNil(x))) {
+        return systemValueArray;
+      }
+    } else {
+      const systemValue = getSystemValue(value, systemValues);
+      if (!isNil(systemValue)) {
+        return systemValue;
+      }
+    }
   }
   const underlyingValue = parseResponsiveValue(value, matchedBreakpoints);
   if (!isNil(underlyingValue)) {
-    const underlyingSystemValue = getSystemValue(underlyingValue, systemValues);
-    if (!isNil(underlyingSystemValue)) {
-      return underlyingSystemValue;
+    if (Array.isArray(underlyingValue)) {
+      const underlyingSystemValue = underlyingValue.map((x) => getSystemValue(x, systemValues));
+      if (!isNil(underlyingSystemValue) && underlyingSystemValue.every((x) => !isNil(x))) {
+        return underlyingSystemValue;
+      }
+    } else {
+      const underlyingSystemValue = getSystemValue(underlyingValue, systemValues);
+      if (!isNil(underlyingSystemValue)) {
+        return underlyingSystemValue;
+      }
     }
   }
   return underlyingValue;
@@ -92,5 +133,8 @@ function parseResponsiveSystemValue(value, systemValues, matchedBreakpoints) {
 function getSystemValue(value, systemValues) {
   return systemValues[value];
 }
+function getSizingValue(value) {
+  return SizingMapping[value] || value;
+}
 
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue };
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue };