@makeswift/runtime 0.0.20 → 0.1.0-next.0

package/dist/controls.cjs.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 var textInput = require("./text-input.cjs.js");
-var image = require("./image.cjs.js");
+var color = require("./color.cjs.js");
 var shape = require("./shape.cjs.js");
+var image = require("./image.cjs.js");
 var style = require("./style.cjs.js");
 exports.Checkbox = textInput.Checkbox;
 exports.CheckboxControlType = textInput.CheckboxControlType;
@@ -14,16 +15,17 @@ exports.TextArea = textInput.TextArea;
 exports.TextAreaControlType = textInput.TextAreaControlType;
 exports.TextInput = textInput.TextInput;
 exports.TextInputControlType = textInput.TextInputControlType;
-exports.Color = image.Color;
-exports.ColorControlType = image.ColorControlType;
-exports.Image = image.Image;
-exports.ImageControlType = image.ImageControlType;
+exports.Color = color.Color;
+exports.ColorControlType = color.ColorControlType;
 exports.Combobox = shape.Combobox;
 exports.ComboboxControlType = shape.ComboboxControlType;
 exports.List = shape.List;
 exports.ListControlType = shape.ListControlType;
 exports.Shape = shape.Shape;
 exports.ShapeControlType = shape.ShapeControlType;
+exports.Image = image.Image;
+exports.ImageControlType = image.ImageControlType;
+exports.ImageControlValueFormat = image.ImageControlValueFormat;
 exports.Style = style.Style;
 exports.StyleControlProperty = style.StyleControlProperty;
 exports.StyleControlType = style.StyleControlType;

package/dist/controls.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"controls.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/controls.es.js

@@ -1,5 +1,6 @@
 export { b as Checkbox, C as CheckboxControlType, c as Number, N as NumberControlType, d as Select, S as SelectControlType, e as TextArea, T as TextAreaControlType, f as TextInput, a as TextInputControlType } from "./text-input.es.js";
-export { a as Color, C as ColorControlType, b as Image, I as ImageControlType } from "./image.es.js";
+export { a as Color, C as ColorControlType } from "./color.es.js";
 export { a as Combobox, C as ComboboxControlType, b as List, L as ListControlType, c as Shape, S as ShapeControlType } from "./shape.es.js";
+export { b as Image, I as ImageControlType, a as ImageControlValueFormat } from "./image.es.js";
 export { b as Style, a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
 //# sourceMappingURL=controls.es.js.map

package/dist/controls.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"controls.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cssMediaRules.cjs.js

@@ -0,0 +1,222 @@
+"use strict";
+var styled = require("styled-components");
+var next = require("./index.cjs.js");
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function cssMediaRules(responsiveValues, join, strategy) {
+  return (props) => next.join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join, strategy).reduce((acc, { deviceId, value }) => {
+    const device = next.getDevice(deviceId);
+    const mediaQuery = next.getDeviceMediaQuery(device);
+    return styled.css`
+        ${acc}${mediaQuery} {
+          ${value}
+        }
+      `;
+  }, styled.css``);
+}
+function cssWidth(defaultValue = "100%") {
+  return (props) => styled.css`
+    max-width: 100%;
+    ${cssMediaRules([props.width], ([width = defaultValue]) => styled.css`
+        width: ${typeof width === "object" ? `${width.value}${width.unit}` : width};
+      `)}
+  `;
+}
+function getMarginSide(marginSide) {
+  return typeof marginSide === "object" ? `${marginSide.value}${marginSide.unit}` : marginSide;
+}
+function cssMargin(defaultValue = {}) {
+  const defaultMarginTop = defaultValue.marginTop === void 0 ? 0 : defaultValue.marginTop;
+  const defaultMarginRight = defaultValue.marginRight === void 0 ? "auto" : defaultValue.marginRight;
+  const defaultMarginBottom = defaultValue.marginBottom === void 0 ? 0 : defaultValue.marginBottom;
+  const defaultMarginLeft = defaultValue.marginLeft === void 0 ? "auto" : defaultValue.marginLeft;
+  return (props) => styled.css`
+    ${cssMediaRules([props.margin], ([
+    {
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft
+    } = {}
+  ]) => styled.css`
+        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};
+        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};
+        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};
+        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};
+      `)}
+  `;
+}
+function getPaddingSide(paddingSide) {
+  return typeof paddingSide === "object" ? `${paddingSide.value}${paddingSide.unit}` : paddingSide;
+}
+function cssPadding(defaultValue = {}) {
+  const defaultPaddingTop = defaultValue.paddingTop === void 0 ? 0 : defaultValue.paddingTop;
+  const defaultPaddingRight = defaultValue.paddingRight === void 0 ? 0 : defaultValue.paddingRight;
+  const defaultPaddingBottom = defaultValue.paddingBottom === void 0 ? 0 : defaultValue.paddingBottom;
+  const defaultPaddingLeft = defaultValue.paddingLeft === void 0 ? 0 : defaultValue.paddingLeft;
+  return (props) => styled.css`
+    ${cssMediaRules([props.padding], ([
+    {
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft
+    } = {}
+  ]) => styled.css`
+        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};
+        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};
+        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};
+        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};
+      `)}
+  `;
+}
+const defaultBorderSide = { width: 0, style: "solid", color: null };
+const getBorderSide = ({ width, style, color }) => `${width != null ? width : 0}px ${style} ${color != null ? next.colorToString(color) : "black"}`;
+function cssBorder(defaultValue = {}) {
+  const defaultBorderTop = defaultValue.borderTop === void 0 ? defaultBorderSide : defaultValue.borderTop;
+  const defaultBorderRight = defaultValue.borderRight === void 0 ? defaultBorderSide : defaultValue.borderRight;
+  const defaultBorderBottom = defaultValue.borderBottom === void 0 ? defaultBorderSide : defaultValue.borderBottom;
+  const defaultBorderLeft = defaultValue.borderLeft === void 0 ? defaultBorderSide : defaultValue.borderLeft;
+  return (props) => styled.css`
+    ${cssMediaRules([props.border], ([
+    {
+      borderTop,
+      borderRight,
+      borderBottom,
+      borderLeft
+    } = {}
+  ]) => styled.css`
+        border-top: ${getBorderSide(borderTop || defaultBorderTop)};
+        border-right: ${getBorderSide(borderRight || defaultBorderRight)};
+        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};
+        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};
+      `)}
+  `;
+}
+function getBorderRadiusCorner(borderRadiusCorner) {
+  return typeof borderRadiusCorner === "object" ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}` : borderRadiusCorner;
+}
+function cssBorderRadius(defaultValue = {}) {
+  const defaultBorderTopLeftRadius = defaultValue.borderTopLeftRadius === void 0 ? 0 : defaultValue.borderTopLeftRadius;
+  const defaultBorderTopRightRadius = defaultValue.borderTopRightRadius === void 0 ? 0 : defaultValue.borderTopRightRadius;
+  const defaultPaddingBottom = defaultValue.borderBottomLeftRadius === void 0 ? 0 : defaultValue.borderBottomLeftRadius;
+  const defaultPaddingLeft = defaultValue.borderBottomRightRadius === void 0 ? 0 : defaultValue.borderBottomRightRadius;
+  return (props) => styled.css`
+    ${cssMediaRules([props.borderRadius], ([
+    {
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius
+    } = {}
+  ]) => styled.css`
+        border-top-left-radius: ${getBorderRadiusCorner(borderTopLeftRadius || defaultBorderTopLeftRadius)};
+        border-top-right-radius: ${getBorderRadiusCorner(borderTopRightRadius || defaultBorderTopRightRadius)};
+        border-bottom-left-radius: ${getBorderRadiusCorner(borderBottomLeftRadius || defaultPaddingBottom)};
+        border-bottom-right-radius: ${getBorderRadiusCorner(borderBottomRightRadius || defaultPaddingLeft)};
+      `)}
+  `;
+}
+const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? next.colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
+function cssBoxShadow(defaultValue = []) {
+  return (props) => styled.css`
+    ${cssMediaRules([props.boxShadow], ([boxShadow = defaultValue]) => styled.css`
+        box-shadow: ${getBoxShadow(boxShadow)};
+      `)}
+  `;
+}
+const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
+function cssGridItem() {
+  return (props) => styled.css`
+    display: flex;
+
+    /* TODO: A default span of 12 won't work once the column count is modifiable. */
+    ${cssMediaRules([props.grid, props.columnGap, props.rowGap], ([
+    { spans, count } = { spans: [[12]], count: 12 },
+    columnGap = { value: 0, unit: "px" },
+    rowGap = { value: 0, unit: "px" }
+  ]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+    const firstCol = columnIndex === 0;
+    const lastCol = columnIndex === spans[rowIndex].length - 1;
+    const span = spans[rowIndex][columnIndex];
+    const fraction = floor(5)(span / count);
+    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
+    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
+    const iePrecisionError = "0.01px";
+    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
+    const firstRow = rowIndex === 0;
+    const lastRow = rowIndex === spans.length - 1;
+    return span === 0 ? { display: "none" } : {
+      flexBasis,
+      minWidth: flexBasis,
+      maxWidth: flexBasis,
+      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
+      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
+    };
+  })}
+  `;
+}
+function cssTextStyle(defaultValue = {
+  fontFamily: null,
+  letterSpacing: null,
+  fontSize: null,
+  fontWeight: null,
+  textTransform: [],
+  fontStyle: []
+}) {
+  return (props) => styled.css`
+    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {
+    const {
+      fontSize,
+      fontWeight,
+      fontStyle = [],
+      textTransform = [],
+      letterSpacing,
+      fontFamily
+    } = textStyle;
+    return styled.css`
+        ${fontFamily != null ? styled.css`
+              font-family: '${fontFamily}';
+            ` : ""};
+        ${fontWeight != null ? styled.css`
+              font-weight: ${fontWeight};
+            ` : ""};
+        ${letterSpacing != null ? styled.css`
+              letter-spacing: ${letterSpacing}px;
+            ` : ""};
+        ${fontSize != null ? styled.css`
+              font-size: ${`${fontSize.value}${fontSize.unit}`};
+            ` : ""};
+        ${textTransform.includes("uppercase") ? styled.css`
+              text-transform: uppercase;
+            ` : ""};
+        ${fontStyle.includes("italic") ? styled.css`
+              font-style: italic;
+            ` : ""};
+      `;
+  })}
+  `;
+}
+exports.cssBorder = cssBorder;
+exports.cssBorderRadius = cssBorderRadius;
+exports.cssBoxShadow = cssBoxShadow;
+exports.cssGridItem = cssGridItem;
+exports.cssMargin = cssMargin;
+exports.cssMediaRules = cssMediaRules;
+exports.cssPadding = cssPadding;
+exports.cssTextStyle = cssTextStyle;
+exports.cssWidth = cssWidth;
+//# sourceMappingURL=cssMediaRules.cjs.js.map

package/dist/cssMediaRules.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssMediaRules.cjs.js","sources":["../src/components/utils/columns.ts","../src/components/utils/cssMediaRules.ts"],"sourcesContent":["export const getIndexes = (spans: Array<Array<number>>, index: number): [number, number] => {\n  const flattened = spans.reduce((a, s) => a.concat(s), [])\n\n  if (index < 0 || index > flattened.length) throw new RangeError()\n\n  let remainder = index\n  let rowIndex = 0\n\n  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {\n    remainder -= spans[rowIndex].length\n    rowIndex += 1\n  }\n\n  return [rowIndex, remainder]\n}\n","import { css, CSSObject } from 'styled-components'\nimport {\n  WidthProperty,\n  MarginProperty,\n  MarginTopProperty,\n  MarginRightProperty,\n  MarginBottomProperty,\n  MarginLeftProperty,\n  PaddingProperty,\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n  BorderRadiusProperty,\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n  BorderBottomRightRadiusProperty,\n} from 'csstype'\n\nimport {\n  ResponsiveValue,\n  ResponsiveValueType as ExtractResponsiveValue,\n  Length as LengthValue,\n} from '../../prop-controllers'\nimport {\n  FallbackStrategy,\n  getDevice,\n  getDeviceMediaQuery,\n  join as joinResponsiveValues,\n} from './devices'\nimport { getIndexes } from './columns'\nimport {\n  BorderRadiusValue,\n  MarginValue,\n  PaddingValue,\n  TextStyleValue,\n  WidthValue,\n} from '../../prop-controllers/descriptors'\nimport { colorToString } from './colorToString'\nimport {\n  BorderSide,\n  BorderPropControllerData,\n  BoxShadowData,\n  BoxShadowPropControllerData,\n} from '../hooks'\n\ntype CSSRules = ReturnType<typeof css>\n\nexport function cssMediaRules<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, P>(\n  responsiveValues: A | ((props: P) => A),\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) =>\n    | CSSRules\n    | CSSObject,\n  strategy?: FallbackStrategy<V>,\n): (props: P) => CSSRules {\n  return props =>\n    joinResponsiveValues(\n      typeof responsiveValues === 'function' ? responsiveValues(props) : responsiveValues,\n      join,\n      strategy,\n    ).reduce((acc, { deviceId, value }) => {\n      const device = getDevice(deviceId)\n      const mediaQuery = getDeviceMediaQuery(device)\n\n      return css`\n        ${acc}${mediaQuery} {\n          ${value}\n        }\n      `\n    }, css`` as CSSRules)\n}\n\nexport function cssWidth(\n  defaultValue: LengthValue | WidthProperty<string | number> = '100%',\n): (props: { width?: WidthValue }) => CSSRules {\n  return props => css`\n    max-width: 100%;\n    ${cssMediaRules(\n      [props.width] as const,\n      ([width = defaultValue]) => css`\n        width: ${typeof width === 'object' ? `${width.value}${width.unit}` : width};\n      `,\n    )}\n  `\n}\n\nfunction getMarginSide(marginSide: LengthValue | MarginProperty<string | number>) {\n  return typeof marginSide === 'object' ? `${marginSide.value}${marginSide.unit}` : marginSide\n}\n\nexport function cssMargin(\n  defaultValue: {\n    marginTop?: LengthValue | MarginTopProperty<string | number>\n    marginRight?: LengthValue | MarginRightProperty<string | number>\n    marginBottom?: LengthValue | MarginBottomProperty<string | number>\n    marginLeft?: LengthValue | MarginLeftProperty<string | number>\n  } = {},\n): (props: { margin?: MarginValue }) => CSSRules {\n  const defaultMarginTop = defaultValue.marginTop === undefined ? 0 : defaultValue.marginTop\n  const defaultMarginRight =\n    defaultValue.marginRight === undefined ? 'auto' : defaultValue.marginRight\n  const defaultMarginBottom =\n    defaultValue.marginBottom === undefined ? 0 : defaultValue.marginBottom\n  const defaultMarginLeft = defaultValue.marginLeft === undefined ? 'auto' : defaultValue.marginLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.margin] as const,\n      ([\n        {\n          marginTop,\n          marginRight,\n          marginBottom,\n          marginLeft,\n        } = {} as ExtractResponsiveValue<MarginValue>,\n      ]) => css`\n        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};\n        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};\n        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};\n        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getPaddingSide(paddingSide: LengthValue | PaddingProperty<string | number>) {\n  return typeof paddingSide === 'object' ? `${paddingSide.value}${paddingSide.unit}` : paddingSide\n}\n\nexport function cssPadding(\n  defaultValue: {\n    paddingTop?: LengthValue | PaddingTopProperty<string | number>\n    paddingRight?: LengthValue | PaddingRightProperty<string | number>\n    paddingBottom?: LengthValue | PaddingBottomProperty<string | number>\n    paddingLeft?: LengthValue | PaddingLeftProperty<string | number>\n  } = {},\n): (props: { padding?: PaddingValue }) => CSSRules {\n  const defaultPaddingTop = defaultValue.paddingTop === undefined ? 0 : defaultValue.paddingTop\n  const defaultPaddingRight =\n    defaultValue.paddingRight === undefined ? 0 : defaultValue.paddingRight\n  const defaultPaddingBottom =\n    defaultValue.paddingBottom === undefined ? 0 : defaultValue.paddingBottom\n  const defaultPaddingLeft = defaultValue.paddingLeft === undefined ? 0 : defaultValue.paddingLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.padding] as const,\n      ([\n        {\n          paddingTop,\n          paddingRight,\n          paddingBottom,\n          paddingLeft,\n        } = {} as ExtractResponsiveValue<PaddingValue>,\n      ]) => css`\n        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};\n        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};\n        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};\n        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};\n      `,\n    )}\n  `\n}\n\nconst defaultBorderSide = { width: 0, style: 'solid', color: null }\n\nconst getBorderSide = ({ width, style, color }: BorderSide) =>\n  `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n\nexport function cssBorder(\n  defaultValue: {\n    borderTop?: BorderSide\n    borderRight?: BorderSide\n    borderBottom?: BorderSide\n    borderLeft?: BorderSide\n  } = {},\n): (props: { border?: BorderPropControllerData | null | undefined }) => CSSRules {\n  const defaultBorderTop =\n    defaultValue.borderTop === undefined ? defaultBorderSide : defaultValue.borderTop\n  const defaultBorderRight =\n    defaultValue.borderRight === undefined ? defaultBorderSide : defaultValue.borderRight\n  const defaultBorderBottom =\n    defaultValue.borderBottom === undefined ? defaultBorderSide : defaultValue.borderBottom\n  const defaultBorderLeft =\n    defaultValue.borderLeft === undefined ? defaultBorderSide : defaultValue.borderLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.border] as const,\n      ([\n        {\n          borderTop,\n          borderRight,\n          borderBottom,\n          borderLeft,\n        } = {} as ExtractResponsiveValue<BorderPropControllerData>,\n      ]) => css`\n        border-top: ${getBorderSide(borderTop || defaultBorderTop)};\n        border-right: ${getBorderSide(borderRight || defaultBorderRight)};\n        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};\n        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getBorderRadiusCorner(\n  borderRadiusCorner: LengthValue | BorderRadiusProperty<string | number>,\n) {\n  return typeof borderRadiusCorner === 'object'\n    ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}`\n    : borderRadiusCorner\n}\n\nexport function cssBorderRadius(\n  defaultValue: {\n    borderTopLeftRadius?: LengthValue | BorderTopLeftRadiusProperty<string | number>\n    borderTopRightRadius?: LengthValue | BorderTopRightRadiusProperty<string | number>\n    borderBottomLeftRadius?: LengthValue | BorderBottomLeftRadiusProperty<string | number>\n    borderBottomRightRadius?: LengthValue | BorderBottomRightRadiusProperty<string | number>\n  } = {},\n): (props: { borderRadius?: BorderRadiusValue }) => CSSRules {\n  const defaultBorderTopLeftRadius =\n    defaultValue.borderTopLeftRadius === undefined ? 0 : defaultValue.borderTopLeftRadius\n  const defaultBorderTopRightRadius =\n    defaultValue.borderTopRightRadius === undefined ? 0 : defaultValue.borderTopRightRadius\n  const defaultPaddingBottom =\n    defaultValue.borderBottomLeftRadius === undefined ? 0 : defaultValue.borderBottomLeftRadius\n  const defaultPaddingLeft =\n    defaultValue.borderBottomRightRadius === undefined ? 0 : defaultValue.borderBottomRightRadius\n\n  return props => css`\n    ${cssMediaRules(\n      [props.borderRadius] as const,\n      ([\n        {\n          borderTopLeftRadius,\n          borderTopRightRadius,\n          borderBottomLeftRadius,\n          borderBottomRightRadius,\n        } = {} as ExtractResponsiveValue<BorderRadiusValue>,\n      ]) => css`\n        border-top-left-radius: ${getBorderRadiusCorner(\n          borderTopLeftRadius || defaultBorderTopLeftRadius,\n        )};\n        border-top-right-radius: ${getBorderRadiusCorner(\n          borderTopRightRadius || defaultBorderTopRightRadius,\n        )};\n        border-bottom-left-radius: ${getBorderRadiusCorner(\n          borderBottomLeftRadius || defaultPaddingBottom,\n        )};\n        border-bottom-right-radius: ${getBorderRadiusCorner(\n          borderBottomRightRadius || defaultPaddingLeft,\n        )};\n      `,\n    )}\n  `\n}\n\nconst getBoxShadow = (shadows: BoxShadowData) =>\n  shadows\n    .map(\n      ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n        `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n          1,\n        )}px ${blurRadius}px ${spreadRadius}px ${\n          color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n        }`,\n    )\n    .filter(Boolean)\n    .join()\n\nexport function cssBoxShadow(\n  defaultValue: BoxShadowData = [],\n): (props: { boxShadow?: BoxShadowPropControllerData | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules(\n      [props.boxShadow] as const,\n      ([boxShadow = defaultValue]) => css`\n        box-shadow: ${getBoxShadow(boxShadow)};\n      `,\n    )}\n  `\n}\n\nconst floor =\n  (d: number) =>\n  (v: number): number =>\n    Math.floor(10 ** d * v) / 10 ** d\n\nexport function cssGridItem(): (props: {\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthValue>\n  rowGap?: ResponsiveValue<LengthValue>\n}) => CSSRules {\n  return props => css`\n    display: flex;\n\n    /* TODO: A default span of 12 won't work once the column count is modifiable. */\n    ${cssMediaRules(\n      [props.grid, props.columnGap, props.rowGap] as const,\n      ([\n        { spans, count } = { spans: [[12]], count: 12 },\n        columnGap = { value: 0, unit: 'px' },\n        rowGap = { value: 0, unit: 'px' },\n      ]) => {\n        const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n        const firstCol = columnIndex === 0\n        const lastCol = columnIndex === spans[rowIndex].length - 1\n        const span = spans[rowIndex][columnIndex]\n        const fraction = floor(5)(span / count)\n        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n          columnGap.unit\n        } / 2`\n        const iePrecisionError = '0.01px'\n        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n        const firstRow = rowIndex === 0\n        const lastRow = rowIndex === spans.length - 1\n\n        return span === 0\n          ? { display: 'none' }\n          : {\n              flexBasis,\n              minWidth: flexBasis,\n              // NOTE: IE11 width breaks without max width\n              // https://github.com/philipwalton/flexbugs/issues/3\n              maxWidth: flexBasis,\n              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n            }\n      },\n    )}\n  `\n}\n\nexport function cssTextStyle(\n  defaultValue: {\n    fontFamily?: string | null | undefined\n    letterSpacing: number | null | undefined\n    fontSize: LengthValue | null | undefined\n    fontWeight: number | null | undefined\n    textTransform: Array<'uppercase'>\n    fontStyle: Array<'italic'>\n  } = {\n    fontFamily: null,\n    letterSpacing: null,\n    fontSize: null,\n    fontWeight: null,\n    textTransform: [],\n    fontStyle: [],\n  },\n): (arg0: { textStyle?: TextStyleValue | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return css`\n        ${fontFamily != null\n          ? css`\n              font-family: '${fontFamily}';\n            `\n          : ''};\n        ${fontWeight != null\n          ? css`\n              font-weight: ${fontWeight};\n            `\n          : ''};\n        ${letterSpacing != null\n          ? css`\n              letter-spacing: ${letterSpacing}px;\n            `\n          : ''};\n        ${fontSize != null\n          ? css`\n              font-size: ${`${fontSize.value}${fontSize.unit}`};\n            `\n          : ''};\n        ${textTransform.includes('uppercase')\n          ? css`\n              text-transform: uppercase;\n            `\n          : ''};\n        ${fontStyle.includes('italic')\n          ? css`\n              font-style: italic;\n            `\n          : ''};\n      `\n    })}\n  `\n}\n"],"names":["joinResponsiveValues","getDevice","getDeviceMediaQuery","css","colorToString"],"mappings":"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"}

package/dist/cssMediaRules.es.js

@@ -0,0 +1,213 @@
+import { css } from "styled-components";
+import { H as join, I as getDevice, J as getDeviceMediaQuery, o as colorToString } from "./index.es.js";
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function cssMediaRules(responsiveValues, join$1, strategy) {
+  return (props) => join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
+    const device = getDevice(deviceId);
+    const mediaQuery = getDeviceMediaQuery(device);
+    return css`
+        ${acc}${mediaQuery} {
+          ${value}
+        }
+      `;
+  }, css``);
+}
+function cssWidth(defaultValue = "100%") {
+  return (props) => css`
+    max-width: 100%;
+    ${cssMediaRules([props.width], ([width = defaultValue]) => css`
+        width: ${typeof width === "object" ? `${width.value}${width.unit}` : width};
+      `)}
+  `;
+}
+function getMarginSide(marginSide) {
+  return typeof marginSide === "object" ? `${marginSide.value}${marginSide.unit}` : marginSide;
+}
+function cssMargin(defaultValue = {}) {
+  const defaultMarginTop = defaultValue.marginTop === void 0 ? 0 : defaultValue.marginTop;
+  const defaultMarginRight = defaultValue.marginRight === void 0 ? "auto" : defaultValue.marginRight;
+  const defaultMarginBottom = defaultValue.marginBottom === void 0 ? 0 : defaultValue.marginBottom;
+  const defaultMarginLeft = defaultValue.marginLeft === void 0 ? "auto" : defaultValue.marginLeft;
+  return (props) => css`
+    ${cssMediaRules([props.margin], ([
+    {
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft
+    } = {}
+  ]) => css`
+        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};
+        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};
+        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};
+        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};
+      `)}
+  `;
+}
+function getPaddingSide(paddingSide) {
+  return typeof paddingSide === "object" ? `${paddingSide.value}${paddingSide.unit}` : paddingSide;
+}
+function cssPadding(defaultValue = {}) {
+  const defaultPaddingTop = defaultValue.paddingTop === void 0 ? 0 : defaultValue.paddingTop;
+  const defaultPaddingRight = defaultValue.paddingRight === void 0 ? 0 : defaultValue.paddingRight;
+  const defaultPaddingBottom = defaultValue.paddingBottom === void 0 ? 0 : defaultValue.paddingBottom;
+  const defaultPaddingLeft = defaultValue.paddingLeft === void 0 ? 0 : defaultValue.paddingLeft;
+  return (props) => css`
+    ${cssMediaRules([props.padding], ([
+    {
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft
+    } = {}
+  ]) => css`
+        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};
+        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};
+        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};
+        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};
+      `)}
+  `;
+}
+const defaultBorderSide = { width: 0, style: "solid", color: null };
+const getBorderSide = ({ width, style, color }) => `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : "black"}`;
+function cssBorder(defaultValue = {}) {
+  const defaultBorderTop = defaultValue.borderTop === void 0 ? defaultBorderSide : defaultValue.borderTop;
+  const defaultBorderRight = defaultValue.borderRight === void 0 ? defaultBorderSide : defaultValue.borderRight;
+  const defaultBorderBottom = defaultValue.borderBottom === void 0 ? defaultBorderSide : defaultValue.borderBottom;
+  const defaultBorderLeft = defaultValue.borderLeft === void 0 ? defaultBorderSide : defaultValue.borderLeft;
+  return (props) => css`
+    ${cssMediaRules([props.border], ([
+    {
+      borderTop,
+      borderRight,
+      borderBottom,
+      borderLeft
+    } = {}
+  ]) => css`
+        border-top: ${getBorderSide(borderTop || defaultBorderTop)};
+        border-right: ${getBorderSide(borderRight || defaultBorderRight)};
+        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};
+        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};
+      `)}
+  `;
+}
+function getBorderRadiusCorner(borderRadiusCorner) {
+  return typeof borderRadiusCorner === "object" ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}` : borderRadiusCorner;
+}
+function cssBorderRadius(defaultValue = {}) {
+  const defaultBorderTopLeftRadius = defaultValue.borderTopLeftRadius === void 0 ? 0 : defaultValue.borderTopLeftRadius;
+  const defaultBorderTopRightRadius = defaultValue.borderTopRightRadius === void 0 ? 0 : defaultValue.borderTopRightRadius;
+  const defaultPaddingBottom = defaultValue.borderBottomLeftRadius === void 0 ? 0 : defaultValue.borderBottomLeftRadius;
+  const defaultPaddingLeft = defaultValue.borderBottomRightRadius === void 0 ? 0 : defaultValue.borderBottomRightRadius;
+  return (props) => css`
+    ${cssMediaRules([props.borderRadius], ([
+    {
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius
+    } = {}
+  ]) => css`
+        border-top-left-radius: ${getBorderRadiusCorner(borderTopLeftRadius || defaultBorderTopLeftRadius)};
+        border-top-right-radius: ${getBorderRadiusCorner(borderTopRightRadius || defaultBorderTopRightRadius)};
+        border-bottom-left-radius: ${getBorderRadiusCorner(borderBottomLeftRadius || defaultPaddingBottom)};
+        border-bottom-right-radius: ${getBorderRadiusCorner(borderBottomRightRadius || defaultPaddingLeft)};
+      `)}
+  `;
+}
+const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
+function cssBoxShadow(defaultValue = []) {
+  return (props) => css`
+    ${cssMediaRules([props.boxShadow], ([boxShadow = defaultValue]) => css`
+        box-shadow: ${getBoxShadow(boxShadow)};
+      `)}
+  `;
+}
+const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
+function cssGridItem() {
+  return (props) => css`
+    display: flex;
+
+    /* TODO: A default span of 12 won't work once the column count is modifiable. */
+    ${cssMediaRules([props.grid, props.columnGap, props.rowGap], ([
+    { spans, count } = { spans: [[12]], count: 12 },
+    columnGap = { value: 0, unit: "px" },
+    rowGap = { value: 0, unit: "px" }
+  ]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+    const firstCol = columnIndex === 0;
+    const lastCol = columnIndex === spans[rowIndex].length - 1;
+    const span = spans[rowIndex][columnIndex];
+    const fraction = floor(5)(span / count);
+    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
+    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
+    const iePrecisionError = "0.01px";
+    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
+    const firstRow = rowIndex === 0;
+    const lastRow = rowIndex === spans.length - 1;
+    return span === 0 ? { display: "none" } : {
+      flexBasis,
+      minWidth: flexBasis,
+      maxWidth: flexBasis,
+      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
+      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
+    };
+  })}
+  `;
+}
+function cssTextStyle(defaultValue = {
+  fontFamily: null,
+  letterSpacing: null,
+  fontSize: null,
+  fontWeight: null,
+  textTransform: [],
+  fontStyle: []
+}) {
+  return (props) => css`
+    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {
+    const {
+      fontSize,
+      fontWeight,
+      fontStyle = [],
+      textTransform = [],
+      letterSpacing,
+      fontFamily
+    } = textStyle;
+    return css`
+        ${fontFamily != null ? css`
+              font-family: '${fontFamily}';
+            ` : ""};
+        ${fontWeight != null ? css`
+              font-weight: ${fontWeight};
+            ` : ""};
+        ${letterSpacing != null ? css`
+              letter-spacing: ${letterSpacing}px;
+            ` : ""};
+        ${fontSize != null ? css`
+              font-size: ${`${fontSize.value}${fontSize.unit}`};
+            ` : ""};
+        ${textTransform.includes("uppercase") ? css`
+              text-transform: uppercase;
+            ` : ""};
+        ${fontStyle.includes("italic") ? css`
+              font-style: italic;
+            ` : ""};
+      `;
+  })}
+  `;
+}
+export { cssWidth as a, cssMargin as b, cssMediaRules as c, cssPadding as d, cssBorder as e, cssBorderRadius as f, cssBoxShadow as g, cssGridItem as h, cssTextStyle as i };
+//# sourceMappingURL=cssMediaRules.es.js.map

package/dist/cssMediaRules.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssMediaRules.es.js","sources":["../src/components/utils/columns.ts","../src/components/utils/cssMediaRules.ts"],"sourcesContent":["export const getIndexes = (spans: Array<Array<number>>, index: number): [number, number] => {\n  const flattened = spans.reduce((a, s) => a.concat(s), [])\n\n  if (index < 0 || index > flattened.length) throw new RangeError()\n\n  let remainder = index\n  let rowIndex = 0\n\n  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {\n    remainder -= spans[rowIndex].length\n    rowIndex += 1\n  }\n\n  return [rowIndex, remainder]\n}\n","import { css, CSSObject } from 'styled-components'\nimport {\n  WidthProperty,\n  MarginProperty,\n  MarginTopProperty,\n  MarginRightProperty,\n  MarginBottomProperty,\n  MarginLeftProperty,\n  PaddingProperty,\n  PaddingTopProperty,\n  PaddingRightProperty,\n  PaddingBottomProperty,\n  PaddingLeftProperty,\n  BorderRadiusProperty,\n  BorderTopLeftRadiusProperty,\n  BorderTopRightRadiusProperty,\n  BorderBottomLeftRadiusProperty,\n  BorderBottomRightRadiusProperty,\n} from 'csstype'\n\nimport {\n  ResponsiveValue,\n  ResponsiveValueType as ExtractResponsiveValue,\n  Length as LengthValue,\n} from '../../prop-controllers'\nimport {\n  FallbackStrategy,\n  getDevice,\n  getDeviceMediaQuery,\n  join as joinResponsiveValues,\n} from './devices'\nimport { getIndexes } from './columns'\nimport {\n  BorderRadiusValue,\n  MarginValue,\n  PaddingValue,\n  TextStyleValue,\n  WidthValue,\n} from '../../prop-controllers/descriptors'\nimport { colorToString } from './colorToString'\nimport {\n  BorderSide,\n  BorderPropControllerData,\n  BoxShadowData,\n  BoxShadowPropControllerData,\n} from '../hooks'\n\ntype CSSRules = ReturnType<typeof css>\n\nexport function cssMediaRules<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, P>(\n  responsiveValues: A | ((props: P) => A),\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) =>\n    | CSSRules\n    | CSSObject,\n  strategy?: FallbackStrategy<V>,\n): (props: P) => CSSRules {\n  return props =>\n    joinResponsiveValues(\n      typeof responsiveValues === 'function' ? responsiveValues(props) : responsiveValues,\n      join,\n      strategy,\n    ).reduce((acc, { deviceId, value }) => {\n      const device = getDevice(deviceId)\n      const mediaQuery = getDeviceMediaQuery(device)\n\n      return css`\n        ${acc}${mediaQuery} {\n          ${value}\n        }\n      `\n    }, css`` as CSSRules)\n}\n\nexport function cssWidth(\n  defaultValue: LengthValue | WidthProperty<string | number> = '100%',\n): (props: { width?: WidthValue }) => CSSRules {\n  return props => css`\n    max-width: 100%;\n    ${cssMediaRules(\n      [props.width] as const,\n      ([width = defaultValue]) => css`\n        width: ${typeof width === 'object' ? `${width.value}${width.unit}` : width};\n      `,\n    )}\n  `\n}\n\nfunction getMarginSide(marginSide: LengthValue | MarginProperty<string | number>) {\n  return typeof marginSide === 'object' ? `${marginSide.value}${marginSide.unit}` : marginSide\n}\n\nexport function cssMargin(\n  defaultValue: {\n    marginTop?: LengthValue | MarginTopProperty<string | number>\n    marginRight?: LengthValue | MarginRightProperty<string | number>\n    marginBottom?: LengthValue | MarginBottomProperty<string | number>\n    marginLeft?: LengthValue | MarginLeftProperty<string | number>\n  } = {},\n): (props: { margin?: MarginValue }) => CSSRules {\n  const defaultMarginTop = defaultValue.marginTop === undefined ? 0 : defaultValue.marginTop\n  const defaultMarginRight =\n    defaultValue.marginRight === undefined ? 'auto' : defaultValue.marginRight\n  const defaultMarginBottom =\n    defaultValue.marginBottom === undefined ? 0 : defaultValue.marginBottom\n  const defaultMarginLeft = defaultValue.marginLeft === undefined ? 'auto' : defaultValue.marginLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.margin] as const,\n      ([\n        {\n          marginTop,\n          marginRight,\n          marginBottom,\n          marginLeft,\n        } = {} as ExtractResponsiveValue<MarginValue>,\n      ]) => css`\n        margin-top: ${getMarginSide(marginTop || defaultMarginTop)};\n        margin-right: ${getMarginSide(marginRight || defaultMarginRight)};\n        margin-bottom: ${getMarginSide(marginBottom || defaultMarginBottom)};\n        margin-left: ${getMarginSide(marginLeft || defaultMarginLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getPaddingSide(paddingSide: LengthValue | PaddingProperty<string | number>) {\n  return typeof paddingSide === 'object' ? `${paddingSide.value}${paddingSide.unit}` : paddingSide\n}\n\nexport function cssPadding(\n  defaultValue: {\n    paddingTop?: LengthValue | PaddingTopProperty<string | number>\n    paddingRight?: LengthValue | PaddingRightProperty<string | number>\n    paddingBottom?: LengthValue | PaddingBottomProperty<string | number>\n    paddingLeft?: LengthValue | PaddingLeftProperty<string | number>\n  } = {},\n): (props: { padding?: PaddingValue }) => CSSRules {\n  const defaultPaddingTop = defaultValue.paddingTop === undefined ? 0 : defaultValue.paddingTop\n  const defaultPaddingRight =\n    defaultValue.paddingRight === undefined ? 0 : defaultValue.paddingRight\n  const defaultPaddingBottom =\n    defaultValue.paddingBottom === undefined ? 0 : defaultValue.paddingBottom\n  const defaultPaddingLeft = defaultValue.paddingLeft === undefined ? 0 : defaultValue.paddingLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.padding] as const,\n      ([\n        {\n          paddingTop,\n          paddingRight,\n          paddingBottom,\n          paddingLeft,\n        } = {} as ExtractResponsiveValue<PaddingValue>,\n      ]) => css`\n        padding-top: ${getPaddingSide(paddingTop || defaultPaddingTop)};\n        padding-right: ${getPaddingSide(paddingRight || defaultPaddingRight)};\n        padding-bottom: ${getPaddingSide(paddingBottom || defaultPaddingBottom)};\n        padding-left: ${getPaddingSide(paddingLeft || defaultPaddingLeft)};\n      `,\n    )}\n  `\n}\n\nconst defaultBorderSide = { width: 0, style: 'solid', color: null }\n\nconst getBorderSide = ({ width, style, color }: BorderSide) =>\n  `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n\nexport function cssBorder(\n  defaultValue: {\n    borderTop?: BorderSide\n    borderRight?: BorderSide\n    borderBottom?: BorderSide\n    borderLeft?: BorderSide\n  } = {},\n): (props: { border?: BorderPropControllerData | null | undefined }) => CSSRules {\n  const defaultBorderTop =\n    defaultValue.borderTop === undefined ? defaultBorderSide : defaultValue.borderTop\n  const defaultBorderRight =\n    defaultValue.borderRight === undefined ? defaultBorderSide : defaultValue.borderRight\n  const defaultBorderBottom =\n    defaultValue.borderBottom === undefined ? defaultBorderSide : defaultValue.borderBottom\n  const defaultBorderLeft =\n    defaultValue.borderLeft === undefined ? defaultBorderSide : defaultValue.borderLeft\n\n  return props => css`\n    ${cssMediaRules(\n      [props.border] as const,\n      ([\n        {\n          borderTop,\n          borderRight,\n          borderBottom,\n          borderLeft,\n        } = {} as ExtractResponsiveValue<BorderPropControllerData>,\n      ]) => css`\n        border-top: ${getBorderSide(borderTop || defaultBorderTop)};\n        border-right: ${getBorderSide(borderRight || defaultBorderRight)};\n        border-bottom: ${getBorderSide(borderBottom || defaultBorderBottom)};\n        border-left: ${getBorderSide(borderLeft || defaultBorderLeft)};\n      `,\n    )}\n  `\n}\n\nfunction getBorderRadiusCorner(\n  borderRadiusCorner: LengthValue | BorderRadiusProperty<string | number>,\n) {\n  return typeof borderRadiusCorner === 'object'\n    ? `${borderRadiusCorner.value}${borderRadiusCorner.unit}`\n    : borderRadiusCorner\n}\n\nexport function cssBorderRadius(\n  defaultValue: {\n    borderTopLeftRadius?: LengthValue | BorderTopLeftRadiusProperty<string | number>\n    borderTopRightRadius?: LengthValue | BorderTopRightRadiusProperty<string | number>\n    borderBottomLeftRadius?: LengthValue | BorderBottomLeftRadiusProperty<string | number>\n    borderBottomRightRadius?: LengthValue | BorderBottomRightRadiusProperty<string | number>\n  } = {},\n): (props: { borderRadius?: BorderRadiusValue }) => CSSRules {\n  const defaultBorderTopLeftRadius =\n    defaultValue.borderTopLeftRadius === undefined ? 0 : defaultValue.borderTopLeftRadius\n  const defaultBorderTopRightRadius =\n    defaultValue.borderTopRightRadius === undefined ? 0 : defaultValue.borderTopRightRadius\n  const defaultPaddingBottom =\n    defaultValue.borderBottomLeftRadius === undefined ? 0 : defaultValue.borderBottomLeftRadius\n  const defaultPaddingLeft =\n    defaultValue.borderBottomRightRadius === undefined ? 0 : defaultValue.borderBottomRightRadius\n\n  return props => css`\n    ${cssMediaRules(\n      [props.borderRadius] as const,\n      ([\n        {\n          borderTopLeftRadius,\n          borderTopRightRadius,\n          borderBottomLeftRadius,\n          borderBottomRightRadius,\n        } = {} as ExtractResponsiveValue<BorderRadiusValue>,\n      ]) => css`\n        border-top-left-radius: ${getBorderRadiusCorner(\n          borderTopLeftRadius || defaultBorderTopLeftRadius,\n        )};\n        border-top-right-radius: ${getBorderRadiusCorner(\n          borderTopRightRadius || defaultBorderTopRightRadius,\n        )};\n        border-bottom-left-radius: ${getBorderRadiusCorner(\n          borderBottomLeftRadius || defaultPaddingBottom,\n        )};\n        border-bottom-right-radius: ${getBorderRadiusCorner(\n          borderBottomRightRadius || defaultPaddingLeft,\n        )};\n      `,\n    )}\n  `\n}\n\nconst getBoxShadow = (shadows: BoxShadowData) =>\n  shadows\n    .map(\n      ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n        `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n          1,\n        )}px ${blurRadius}px ${spreadRadius}px ${\n          color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n        }`,\n    )\n    .filter(Boolean)\n    .join()\n\nexport function cssBoxShadow(\n  defaultValue: BoxShadowData = [],\n): (props: { boxShadow?: BoxShadowPropControllerData | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules(\n      [props.boxShadow] as const,\n      ([boxShadow = defaultValue]) => css`\n        box-shadow: ${getBoxShadow(boxShadow)};\n      `,\n    )}\n  `\n}\n\nconst floor =\n  (d: number) =>\n  (v: number): number =>\n    Math.floor(10 ** d * v) / 10 ** d\n\nexport function cssGridItem(): (props: {\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthValue>\n  rowGap?: ResponsiveValue<LengthValue>\n}) => CSSRules {\n  return props => css`\n    display: flex;\n\n    /* TODO: A default span of 12 won't work once the column count is modifiable. */\n    ${cssMediaRules(\n      [props.grid, props.columnGap, props.rowGap] as const,\n      ([\n        { spans, count } = { spans: [[12]], count: 12 },\n        columnGap = { value: 0, unit: 'px' },\n        rowGap = { value: 0, unit: 'px' },\n      ]) => {\n        const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n        const firstCol = columnIndex === 0\n        const lastCol = columnIndex === spans[rowIndex].length - 1\n        const span = spans[rowIndex][columnIndex]\n        const fraction = floor(5)(span / count)\n        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n          columnGap.unit\n        } / 2`\n        const iePrecisionError = '0.01px'\n        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n        const firstRow = rowIndex === 0\n        const lastRow = rowIndex === spans.length - 1\n\n        return span === 0\n          ? { display: 'none' }\n          : {\n              flexBasis,\n              minWidth: flexBasis,\n              // NOTE: IE11 width breaks without max width\n              // https://github.com/philipwalton/flexbugs/issues/3\n              maxWidth: flexBasis,\n              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n            }\n      },\n    )}\n  `\n}\n\nexport function cssTextStyle(\n  defaultValue: {\n    fontFamily?: string | null | undefined\n    letterSpacing: number | null | undefined\n    fontSize: LengthValue | null | undefined\n    fontWeight: number | null | undefined\n    textTransform: Array<'uppercase'>\n    fontStyle: Array<'italic'>\n  } = {\n    fontFamily: null,\n    letterSpacing: null,\n    fontSize: null,\n    fontWeight: null,\n    textTransform: [],\n    fontStyle: [],\n  },\n): (arg0: { textStyle?: TextStyleValue | null | undefined }) => CSSRules {\n  return props => css`\n    ${cssMediaRules([props.textStyle], ([textStyle = defaultValue]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return css`\n        ${fontFamily != null\n          ? css`\n              font-family: '${fontFamily}';\n            `\n          : ''};\n        ${fontWeight != null\n          ? css`\n              font-weight: ${fontWeight};\n            `\n          : ''};\n        ${letterSpacing != null\n          ? css`\n              letter-spacing: ${letterSpacing}px;\n            `\n          : ''};\n        ${fontSize != null\n          ? css`\n              font-size: ${`${fontSize.value}${fontSize.unit}`};\n            `\n          : ''};\n        ${textTransform.includes('uppercase')\n          ? css`\n              text-transform: uppercase;\n            `\n          : ''};\n        ${fontStyle.includes('italic')\n          ? css`\n              font-style: italic;\n            `\n          : ''};\n      `\n    })}\n  `\n}\n"],"names":["join","joinResponsiveValues"],"mappings":"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"}