@hopper-ui/styled-system 0.2.1 → 0.2.3

package/dist/chunk-O7PTTVQH.js

@@ -0,0 +1,715 @@
+import { parseResponsiveSystemValue, ColorExpressionTypes, DefaultBorderWidthAndStyle, BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, TextColorMapping, SimpleMarginMapping, IconColorMapping, FontFamilyMapping, FontSizeMapping, FontWeightMapping, SizingMapping, LineHeightMapping, ComplexMarginMapping, ComplexPaddingMapping, SimplePaddingMapping } from './chunk-KUUJ37DW.js';
+import { parseResponsiveValue } from './chunk-GYREQTEK.js';
+import { useBreakpointContext } from './chunk-ZUVKM5DV.js';
+import { isNil } from './chunk-U5R6ZXH3.js';
+import { UnsafePrefix } from './chunk-I37Y2R7V.js';
+import { __privateAdd, __publicField, __privateSet, __privateGet } from './chunk-JFESGV6Z.js';
+import { useMemo } from 'react';
+
+// css-module:./UseStyledSystem.module.css#css-module
+var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___WO7Si", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___J7koW", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___H6X11", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___2ecDN", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___m-WBU", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___k8BIX", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___vY533", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___FMQH5", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___QOQgk", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___PGkY1", "hop-b-active": "UseStyledSystem-module__hop-b-active___XYsR5", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___48kbq", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___49LJt", "hop-br-active": "UseStyledSystem-module__hop-br-active___QGaMg", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___4y2V1", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___dUflJ", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___RAUcc", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___3hBq4", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___iugX-", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___kk-Qr", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___X8-Nt", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___pzags", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___IgZlq", "hop-c-active": "UseStyledSystem-module__hop-c-active___s2HIc", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___q-t-p", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___PS8fe", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___JOUzD", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___NTBNQ", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___odjgO", "hop-o-active": "UseStyledSystem-module__hop-o-active___wrBCC", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___dRdaA" };
+
+// src/useStyledSystem.ts
+function createSystemValueHandler(systemValues) {
+  return (name, value, context) => {
+    const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      context.addStyleValue(name, parsedValue);
+    }
+  };
+}
+function createPassthroughHandler() {
+  return (name, value, context) => {
+    const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      context.addStyleValue(name, parsedValue);
+    }
+  };
+}
+function createAxisHandler(firstPropName, secondPropName, systemValues) {
+  const firstHandler = createSystemValueHandler(systemValues);
+  const secondHandler = createSystemValueHandler(systemValues);
+  return (_, value, context) => {
+    firstHandler(firstPropName, value, context);
+    secondHandler(secondPropName, value, context);
+  };
+}
+function createPseudoHandler(pseudoClassName, pseudoVariable, systemValues) {
+  const systemValueHandler = (name, value, context) => {
+    const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      context.addClass(pseudoClassName);
+      context.addStyleValue(pseudoVariable, parsedValue);
+    }
+  };
+  const passThroughHandler = (name, value, context) => {
+    const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      context.addClass(pseudoClassName);
+      context.addStyleValue(pseudoVariable, parsedValue);
+    }
+  };
+  return !isNil(systemValues) ? systemValueHandler : passThroughHandler;
+}
+function createBorderHandler(systemValues) {
+  return (name, value, context) => {
+    const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      if (typeof parsedValue === "string" && ColorExpressionTypes.some((x) => parsedValue.startsWith(x))) {
+        context.addStyleValue(name, `${DefaultBorderWidthAndStyle} ${parsedValue}`);
+      } else {
+        context.addStyleValue(name, parsedValue);
+      }
+    }
+  };
+}
+function createBorderPseudoHandler(pseudoClassName, pseudoVariable, systemValues) {
+  return (name, value, context) => {
+    const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints);
+    if (!isNil(parsedValue)) {
+      context.addClass(pseudoClassName);
+      if (typeof parsedValue === "string" && ColorExpressionTypes.some((x) => parsedValue.startsWith(x))) {
+        context.addStyleValue(pseudoVariable, `${DefaultBorderWidthAndStyle} ${parsedValue}`);
+      } else {
+        context.addStyleValue(pseudoVariable, parsedValue);
+      }
+    }
+  };
+}
+var gridColumnSpanHandler = (name, value, context) => {
+  const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints);
+  if (!isNil(parsedValue)) {
+    context.addStyleValue("gridColumn", `span ${parsedValue} / span ${parsedValue}`);
+  }
+};
+var gridRowSpanHandler = (name, value, context) => {
+  const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints);
+  if (!isNil(parsedValue)) {
+    context.addStyleValue("gridRow", `span ${parsedValue} / span ${parsedValue}`);
+  }
+};
+var PropsHandlers = {
+  alignContent: createPassthroughHandler(),
+  alignItems: createPassthroughHandler(),
+  alignSelf: createPassthroughHandler(),
+  aspectRatio: createPassthroughHandler(),
+  backgroundColor: createSystemValueHandler(BackgroundColorMapping),
+  backgroundColorActive: createPseudoHandler(UseStyledSystem_module_default["hop-bg-active"], "--hop-bg-active", BackgroundColorMapping),
+  backgroundColorFocus: createPseudoHandler(UseStyledSystem_module_default["hop-bg-focus"], "--hop-bg-focus", BackgroundColorMapping),
+  backgroundColorHover: createPseudoHandler(UseStyledSystem_module_default["hop-bg-hover"], "--hop-bg-hover", BackgroundColorMapping),
+  backgroundImage: createPassthroughHandler(),
+  backgroundPosition: createPassthroughHandler(),
+  backgroundRepeat: createPassthroughHandler(),
+  backgroundSize: createPassthroughHandler(),
+  border: createBorderHandler(BorderMapping),
+  borderBottom: createBorderHandler(BorderMapping),
+  borderBottomActive: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bb-active"], "--hop-bb-active", BorderMapping),
+  borderBottomFocus: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bb-focus"], "--hop-bb-focus", BorderMapping),
+  borderBottomHover: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bb-hover"], "--hop-bb-hover", BorderMapping),
+  borderBottomLeftRadius: createSystemValueHandler(BorderRadiusMapping),
+  borderBottomRightRadius: createSystemValueHandler(BorderRadiusMapping),
+  borderActive: createBorderPseudoHandler(UseStyledSystem_module_default["hop-b-active"], "--hop-b-active", BorderMapping),
+  borderFocus: createBorderPseudoHandler(UseStyledSystem_module_default["hop-b-focus"], "--hop-b-focus", BorderMapping),
+  borderHover: createBorderPseudoHandler(UseStyledSystem_module_default["hop-b-hover"], "--hop-b-hover", BorderMapping),
+  borderLeft: createBorderHandler(BorderMapping),
+  borderLeftActive: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bl-active"], "--hop-bl-active", BorderMapping),
+  borderLeftFocus: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bl-focus"], "--hop-bl-focus", BorderMapping),
+  borderLeftHover: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bl-hover"], "--hop-bl-hover", BorderMapping),
+  borderRadius: createSystemValueHandler(BorderRadiusMapping),
+  borderRight: createBorderHandler(BorderMapping),
+  borderRightActive: createBorderPseudoHandler(UseStyledSystem_module_default["hop-br-active"], "--hop-br-active", BorderMapping),
+  borderRightFocus: createBorderPseudoHandler(UseStyledSystem_module_default["hop-br-focus"], "--hop-br-focus", BorderMapping),
+  borderRightHover: createBorderPseudoHandler(UseStyledSystem_module_default["hop-br-hover"], "--hop-br-hover", BorderMapping),
+  borderTop: createBorderHandler(BorderMapping),
+  borderTopActive: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bt-active"], "--hop-bt-active", BorderMapping),
+  borderTopFocus: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bt-focus"], "--hop-bt-focus", BorderMapping),
+  borderTopHover: createBorderPseudoHandler(UseStyledSystem_module_default["hop-bt-hover"], "--hop-bt-hover", BorderMapping),
+  borderTopLeftRadius: createSystemValueHandler(BorderRadiusMapping),
+  borderTopRightRadius: createSystemValueHandler(BorderRadiusMapping),
+  bottom: createPassthroughHandler(),
+  boxShadow: createSystemValueHandler(BoxShadowMapping),
+  boxShadowActive: createPseudoHandler(UseStyledSystem_module_default["hop-bs-active"], "--hop-bs-active", BoxShadowMapping),
+  boxShadowFocus: createPseudoHandler(UseStyledSystem_module_default["hop-bs-focus"], "--hop-bs-focus", BoxShadowMapping),
+  boxShadowHover: createPseudoHandler(UseStyledSystem_module_default["hop-bs-hover"], "--hop-bs-hover", BoxShadowMapping),
+  color: createSystemValueHandler(TextColorMapping),
+  colorActive: createPseudoHandler(UseStyledSystem_module_default["hop-c-active"], "--hop-c-active", TextColorMapping),
+  colorFocus: createPseudoHandler(UseStyledSystem_module_default["hop-c-focus"], "--hop-c-focus", TextColorMapping),
+  colorHover: createPseudoHandler(UseStyledSystem_module_default["hop-c-hover"], "--hop-c-hover", TextColorMapping),
+  columnGap: createSystemValueHandler(SimpleMarginMapping),
+  content: createPassthroughHandler(),
+  contentVisibility: createPassthroughHandler(),
+  cursor: createPassthroughHandler(),
+  cursorHover: createPseudoHandler(UseStyledSystem_module_default["hop-cs-hover"], "--hop-cs-hover"),
+  display: createPassthroughHandler(),
+  fill: createSystemValueHandler(IconColorMapping),
+  fillFocus: createPseudoHandler(UseStyledSystem_module_default["hop-f-focus"], "--hop-f-focus", IconColorMapping),
+  fillHover: createPseudoHandler(UseStyledSystem_module_default["hop-f-hover"], "--hop-f-hover", IconColorMapping),
+  filter: createPassthroughHandler(),
+  flex: createPassthroughHandler(),
+  flexBasis: createPassthroughHandler(),
+  flexDirection: createPassthroughHandler(),
+  flexFlow: createPassthroughHandler(),
+  flexGrow: createPassthroughHandler(),
+  flexShrink: createPassthroughHandler(),
+  flexWrap: createPassthroughHandler(),
+  fontFamily: createSystemValueHandler(FontFamilyMapping),
+  fontSize: createSystemValueHandler(FontSizeMapping),
+  fontStyle: createPassthroughHandler(),
+  fontWeight: createSystemValueHandler(FontWeightMapping),
+  gap: createSystemValueHandler(SimpleMarginMapping),
+  grid: createPassthroughHandler(),
+  gridArea: createPassthroughHandler(),
+  gridAutoColumns: createSystemValueHandler(SizingMapping),
+  gridAutoFlow: createPassthroughHandler(),
+  gridAutoRows: createSystemValueHandler(SizingMapping),
+  gridColumn: createPassthroughHandler(),
+  gridColumnEnd: createPassthroughHandler(),
+  gridColumnSpan: gridColumnSpanHandler,
+  gridColumnStart: createPassthroughHandler(),
+  gridRow: createPassthroughHandler(),
+  gridRowEnd: createPassthroughHandler(),
+  gridRowSpan: gridRowSpanHandler,
+  gridRowStart: createPassthroughHandler(),
+  gridTemplate: createPassthroughHandler(),
+  gridTemplateAreas: createPassthroughHandler(),
+  gridTemplateColumns: createSystemValueHandler(SizingMapping),
+  gridTemplateRows: createSystemValueHandler(SizingMapping),
+  height: createSystemValueHandler(SizingMapping),
+  justifyContent: createPassthroughHandler(),
+  justifyItems: createPassthroughHandler(),
+  justifySelf: createPassthroughHandler(),
+  left: createPassthroughHandler(),
+  letterSpacing: createPassthroughHandler(),
+  lineHeight: createSystemValueHandler(LineHeightMapping),
+  margin: createSystemValueHandler(ComplexMarginMapping),
+  marginBottom: createSystemValueHandler(SimpleMarginMapping),
+  marginLeft: createSystemValueHandler(SimpleMarginMapping),
+  marginRight: createSystemValueHandler(SimpleMarginMapping),
+  marginTop: createSystemValueHandler(SimpleMarginMapping),
+  marginX: createAxisHandler("marginLeft", "marginRight", SimpleMarginMapping),
+  marginY: createAxisHandler("marginBottom", "marginTop", SimpleMarginMapping),
+  maxHeight: createSystemValueHandler(SizingMapping),
+  maxWidth: createSystemValueHandler(SizingMapping),
+  minHeight: createSystemValueHandler(SizingMapping),
+  minWidth: createSystemValueHandler(SizingMapping),
+  objectFit: createPassthroughHandler(),
+  objectPosition: createPassthroughHandler(),
+  opacity: createPassthroughHandler(),
+  opacityActive: createPseudoHandler(UseStyledSystem_module_default["hop-o-active"], "hop-o-active"),
+  opacityFocus: createPseudoHandler(UseStyledSystem_module_default["hop-o-focus"], "hop-o-focus"),
+  opacityHover: createPseudoHandler(UseStyledSystem_module_default["hop-o-hover"], "hop-o-hover"),
+  order: createPassthroughHandler(),
+  outline: createPassthroughHandler(),
+  outlineFocus: createPseudoHandler(UseStyledSystem_module_default["hop-ol-focus"], "hop-ol-focus"),
+  overflow: createPassthroughHandler(),
+  overflowX: createPassthroughHandler(),
+  overflowY: createPassthroughHandler(),
+  padding: createSystemValueHandler(ComplexPaddingMapping),
+  paddingBottom: createSystemValueHandler(SimplePaddingMapping),
+  paddingLeft: createSystemValueHandler(SimplePaddingMapping),
+  paddingRight: createSystemValueHandler(SimplePaddingMapping),
+  paddingTop: createSystemValueHandler(SimplePaddingMapping),
+  paddingX: createAxisHandler("paddingLeft", "paddingRight", SimplePaddingMapping),
+  paddingY: createAxisHandler("paddingBottom", "paddingTop", SimplePaddingMapping),
+  pointerEvents: createPassthroughHandler(),
+  position: createPassthroughHandler(),
+  resize: createPassthroughHandler(),
+  right: createPassthroughHandler(),
+  rowGap: createSystemValueHandler(SimpleMarginMapping),
+  stroke: createSystemValueHandler(IconColorMapping),
+  textAlign: createPassthroughHandler(),
+  textDecoration: createPassthroughHandler(),
+  textOverflow: createPassthroughHandler(),
+  textTransform: createPassthroughHandler(),
+  top: createPassthroughHandler(),
+  transform: createPassthroughHandler(),
+  transformOrigin: createPassthroughHandler(),
+  transformStyle: createPassthroughHandler(),
+  verticalAlign: createPassthroughHandler(),
+  visibility: createPassthroughHandler(),
+  whiteSpace: createPassthroughHandler(),
+  width: createSystemValueHandler(SizingMapping),
+  willChange: createPassthroughHandler(),
+  wordBreak: createPassthroughHandler(),
+  zIndex: createPassthroughHandler()
+};
+function isStyledSystemProp(name) {
+  return !isNil(PropsHandlers[name]);
+}
+var _classes, _style;
+var StylingContext = class {
+  constructor(className, style, matchedBreakpoints) {
+    __privateAdd(this, _classes, void 0);
+    __privateAdd(this, _style, void 0);
+    __publicField(this, "matchedBreakpoints");
+    __privateSet(this, _classes, !isNil(className) ? [className] : []);
+    __privateSet(this, _style, { ...style });
+    this.matchedBreakpoints = matchedBreakpoints;
+  }
+  addClass(className) {
+    if (!__privateGet(this, _classes).includes(className)) {
+      __privateGet(this, _classes).push(className);
+    }
+    return this;
+  }
+  addStyleValue(name, value) {
+    __privateGet(this, _style)[name] = value;
+    return this;
+  }
+  computeStyling() {
+    const className = __privateGet(this, _classes).length !== 0 ? __privateGet(this, _classes).join(" ") : void 0;
+    const styleValue = Object.keys(__privateGet(this, _style)).length !== 0 ? __privateGet(this, _style) : void 0;
+    return { className, style: styleValue };
+  }
+};
+_classes = new WeakMap();
+_style = new WeakMap();
+function useStyledSystem(props) {
+  const {
+    alignContent,
+    alignItems,
+    alignSelf,
+    aspectRatio,
+    backgroundColor,
+    backgroundColorActive,
+    backgroundColorFocus,
+    backgroundColorHover,
+    backgroundImage,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize,
+    border,
+    borderBottom,
+    borderBottomActive,
+    borderBottomFocus,
+    borderBottomHover,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderFocus,
+    borderHover,
+    borderActive,
+    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,
+    transition,
+    transform,
+    transformOrigin,
+    transformStyle,
+    verticalAlign,
+    visibility,
+    whiteSpace,
+    width,
+    willChange,
+    wordBreak,
+    zIndex,
+    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_color,
+    UNSAFE_columnGap,
+    UNSAFE_fill,
+    UNSAFE_fontFamily,
+    UNSAFE_fontSize,
+    UNSAFE_fontWeight,
+    UNSAFE_gap,
+    UNSAFE_gridAutoColumns,
+    UNSAFE_gridAutoRows,
+    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,
+    ...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,
+    borderBottom,
+    borderBottomActive,
+    borderBottomFocus,
+    borderBottomHover,
+    borderLeft,
+    borderLeftActive,
+    borderLeftFocus,
+    borderLeftHover,
+    borderRight,
+    borderRightActive,
+    borderRightFocus,
+    borderRightHover,
+    borderTop,
+    borderTopActive,
+    borderTopFocus,
+    borderTopHover,
+    borderActive,
+    borderFocus,
+    borderHover,
+    borderRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    boxShadow,
+    boxShadowActive,
+    boxShadowFocus,
+    boxShadowHover,
+    bottom,
+    matchedBreakpoints,
+    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,
+    transition,
+    transform,
+    transformOrigin,
+    transformStyle,
+    verticalAlign,
+    visibility,
+    whiteSpace,
+    width,
+    willChange,
+    wordBreak,
+    zIndex,
+    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_color,
+    UNSAFE_columnGap,
+    UNSAFE_fill,
+    UNSAFE_fontFamily,
+    UNSAFE_fontSize,
+    UNSAFE_fontWeight,
+    UNSAFE_gap,
+    UNSAFE_gridAutoColumns,
+    UNSAFE_gridAutoRows,
+    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
+  ]);
+  return {
+    ...rest,
+    className: styling.className,
+    style: styling.style
+  };
+}
+
+export { isStyledSystemProp, useStyledSystem };