@makeswift/runtime 0.0.22 → 0.1.1

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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"}

package/dist/descriptors.es.js

@@ -192,5 +192,5 @@ var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   WidthControlValueFormats,
   Width
 }, Symbol.toStringTag, { value: "Module" }));
-export { Backgrounds as B, Checkbox as C, Date as D, ElementID as E, Font as F, GapY as G, Image as I, Link as L, Margin as M, Number as N, Padding as P, ResponsiveIconRadioGroup as R, Shadows as S, Types as T, Video as V, Width as W, Border as a, BorderRadius as b, GapX as c, descriptors as d, ResponsiveSelect as e, ResponsiveNumber as f, Grid as g, TextInput as h, ResponsiveColor as i, TextStyle as j, ResponsiveOpacity as k, Images as l, ResponsiveLength as m, TextArea as n, Table as o, TableFormFields as p, NavigationLinks as q, SocialLinks as r, RichText as s, WidthControlValueFormats as t };
+export { Backgrounds as B, Checkbox as C, Date as D, ElementID as E, Font as F, GapY as G, Images as I, Link as L, Margin as M, Number as N, Padding as P, ResponsiveIconRadioGroup as R, Shadows as S, Types as T, Video as V, Width as W, Border as a, BorderRadius as b, GapX as c, descriptors as d, ResponsiveSelect as e, ResponsiveNumber as f, Grid as g, TextInput as h, ResponsiveColor as i, TextStyle as j, ResponsiveLength as k, TextArea as l, Table as m, TableFormFields as n, Image as o, ResponsiveOpacity as p, NavigationLinks as q, SocialLinks as r, RichText as s, WidthControlValueFormats as t };
 //# sourceMappingURL=descriptors.es.js.map