import { handleBreakpoints, values } from '../breakpoints/breakpoints.mjs';
import style from '../style/style.mjs';
import compose from '../compose/compose.mjs';

function sizingTransform(value) {
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}
const width = style({
  prop: 'width',
  transform: sizingTransform
});
const maxWidth = props => {
  if (props.maxWidth !== undefined && props.maxWidth !== null) {
    const styleFromPropValue = propValue => {
      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values[propValue];
      if (!breakpoint) {
        return {
          maxWidth: sizingTransform(propValue)
        };
      }
      if (props.theme?.breakpoints?.unit !== 'px') {
        return {
          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
        };
      }
      return {
        maxWidth: breakpoint
      };
    };
    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
  }
  return null;
};
maxWidth.filterProps = ['maxWidth'];
const minWidth = style({
  prop: 'minWidth',
  transform: sizingTransform
});
const height = style({
  prop: 'height',
  transform: sizingTransform
});
const maxHeight = style({
  prop: 'maxHeight',
  transform: sizingTransform
});
const minHeight = style({
  prop: 'minHeight',
  transform: sizingTransform
});
style({
  prop: 'size',
  cssProperty: 'width',
  transform: sizingTransform
});
style({
  prop: 'size',
  cssProperty: 'height',
  transform: sizingTransform
});
const boxSizing = style({
  prop: 'boxSizing'
});
compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);

export { boxSizing, height, maxHeight, maxWidth, minHeight, minWidth, sizingTransform, width };
//# sourceMappingURL=sizing.mjs.map
