@makeswift/runtime 0.1.9 → 0.1.10

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,6 +1,6 @@
 export { b as Checkbox, C as CheckboxControlType, c as Link, L as LinkControlType, d as Number, N as NumberControlType, e as Select, S as SelectControlType, f as TextArea, T as TextAreaControlType, g as TextInput, a as TextInputControlType } from "./text-input.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";
+export { y as Image, I as ImageControlType, v as ImageControlValueFormat, z as Style, u as StyleControlProperty, w as StyleControlType } from "./image.es.js";
+export { a as Slot, c as SlotControl, b as SlotControlMessageType, S as SlotControlType } from "./slot.es.js";
 //# sourceMappingURL=controls.es.js.map

package/dist/cssMediaRules.cjs.js

@@ -1,18 +1,6 @@
 "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);
@@ -146,7 +134,7 @@ function cssGridItem() {
     columnGap = { value: 0, unit: "px" },
     rowGap = { value: 0, unit: "px" }
   ]) => {
-    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+    const [rowIndex, columnIndex] = next.getIndexes(spans, props.index);
     const firstCol = columnIndex === 0;
     const lastCol = columnIndex === spans[rowIndex].length - 1;
     const span = spans[rowIndex][columnIndex];

package/dist/cssMediaRules.cjs.js.map

@@ -1 +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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"}
+{"version":3,"file":"cssMediaRules.cjs.js","sources":["../src/components/utils/cssMediaRules.ts"],"sourcesContent":["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","getIndexes"],"mappings":"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"}

package/dist/cssMediaRules.es.js

@@ -1,17 +1,5 @@
 import { css } from "styled-components";
-import { H as join, I as getDevice, J as getDeviceMediaQuery, p 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];
-};
+import { H as join, I as getDevice, J as getDeviceMediaQuery, p as colorToString, K as getIndexes } from "./index.es.js";
 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);

package/dist/cssMediaRules.es.js.map

@@ -1 +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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"}
+{"version":3,"file":"cssMediaRules.es.js","sources":["../src/components/utils/cssMediaRules.ts"],"sourcesContent":["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/image.cjs.js

@@ -1,4 +1,233 @@
 "use strict";
+const StyleControlType = "makeswift::controls::style";
+const StyleControlProperty = {
+  Width: "makeswift::controls::style::property::width",
+  Margin: "makeswift::controls::style::property::margin",
+  Padding: "makeswift::controls::style::property::padding",
+  Border: "makeswift::controls::style::property::border",
+  BorderRadius: "makeswift::controls::style::property::border-radius",
+  TextStyle: "makeswift::controls::style::property::text-style"
+};
+const StyleControlDefaultProperties = [
+  StyleControlProperty.Width,
+  StyleControlProperty.Margin
+];
+const AllStyleControlProperties = [
+  StyleControlProperty.Width,
+  StyleControlProperty.Margin,
+  StyleControlProperty.Padding,
+  StyleControlProperty.Border,
+  StyleControlProperty.BorderRadius,
+  StyleControlProperty.TextStyle
+];
+function Style(params) {
+  var _a;
+  return {
+    type: StyleControlType,
+    config: { properties: (_a = params == null ? void 0 : params.properties) != null ? _a : StyleControlDefaultProperties }
+  };
+}
+Style.Default = StyleControlDefaultProperties;
+Style.All = AllStyleControlProperties;
+Style.Width = StyleControlProperty.Width;
+Style.Margin = StyleControlProperty.Margin;
+Style.Padding = StyleControlProperty.Padding;
+Style.Border = StyleControlProperty.Border;
+Style.BorderRadius = StyleControlProperty.BorderRadius;
+Style.TextStyle = StyleControlProperty.TextStyle;
+const Types = {
+  Backgrounds: "Backgrounds",
+  Border: "Border",
+  BorderRadius: "BorderRadius",
+  Checkbox: "Checkbox",
+  Date: "Date",
+  ElementID: "ElementID",
+  Font: "Font",
+  GapX: "GapX",
+  GapY: "GapY",
+  Grid: "Grid",
+  Image: "Image",
+  Images: "Images",
+  Link: "Link",
+  List: "List",
+  Margin: "Margin",
+  NavigationLinks: "NavigationLinks",
+  Number: "Number",
+  Padding: "Padding",
+  ResponsiveColor: "ResponsiveColor",
+  ResponsiveIconRadioGroup: "ResponsiveIconRadioGroup",
+  ResponsiveLength: "ResponsiveLength",
+  ResponsiveNumber: "ResponsiveNumber",
+  ResponsiveOpacity: "ResponsiveOpacity",
+  ResponsiveSelect: "ResponsiveSelect",
+  RichText: "RichText",
+  Shadows: "Shadows",
+  Shape: "Shape",
+  SocialLinks: "SocialLinks",
+  Table: "Table",
+  TableFormFields: "TableFormFields",
+  Typeahead: "Typeahead",
+  TextArea: "TextArea",
+  TextInput: "TextInput",
+  TextStyle: "TextStyle",
+  Video: "Video",
+  Width: "Width",
+  Style: StyleControlType
+};
+function Backgrounds(options = {}) {
+  return { type: Types.Backgrounds, options };
+}
+function Border(options = {}) {
+  return { type: Types.Border, options };
+}
+function BorderRadius(options = {}) {
+  return { type: Types.BorderRadius, options };
+}
+function Checkbox(options) {
+  return { type: Types.Checkbox, options };
+}
+function Date(options = {}) {
+  return { type: Types.Date, options };
+}
+function ElementID(options = {}) {
+  return { type: Types.ElementID, options };
+}
+function Font(options = {}) {
+  return { type: Types.Font, options };
+}
+function GapX(options = {}) {
+  return { type: Types.GapX, options };
+}
+function GapY(options = {}) {
+  return { type: Types.GapY, options };
+}
+function Grid(options = {}) {
+  return { type: Types.Grid, options };
+}
+function Image$1(options = {}) {
+  return { type: Types.Image, options };
+}
+function Images(options = {}) {
+  return { type: Types.Images, options };
+}
+function Link(options = {}) {
+  return { type: Types.Link, options };
+}
+function List(options) {
+  return { type: Types.List, options };
+}
+function Margin(options = {}) {
+  return { type: Types.Margin, options };
+}
+function NavigationLinks(options = {}) {
+  return { type: Types.NavigationLinks, options };
+}
+function Number(options = {}) {
+  return { type: Types.Number, options };
+}
+function Padding(options = {}) {
+  return { type: Types.Padding, options };
+}
+function ResponsiveColor(options = {}) {
+  return { type: Types.ResponsiveColor, options };
+}
+function ResponsiveIconRadioGroup(options) {
+  return { type: Types.ResponsiveIconRadioGroup, options };
+}
+function ResponsiveLength(options = {}) {
+  return { type: Types.ResponsiveLength, options };
+}
+function ResponsiveNumber(options = {}) {
+  return { type: Types.ResponsiveNumber, options };
+}
+function ResponsiveOpacity(options = {}) {
+  return { type: Types.ResponsiveOpacity, options };
+}
+function ResponsiveSelect(options) {
+  return { type: Types.ResponsiveSelect, options };
+}
+function RichText(options = {}) {
+  return { type: Types.RichText, options };
+}
+function Shadows(options = {}) {
+  return { type: Types.Shadows, options };
+}
+function Shape(options) {
+  return { type: Types.Shape, options };
+}
+function SocialLinks(options = {}) {
+  return { type: Types.SocialLinks, options };
+}
+function Table(options = {}) {
+  return { type: Types.Table, options };
+}
+function TableFormFields(options = {}) {
+  return { type: Types.TableFormFields, options };
+}
+function Typeahead(options) {
+  return { type: Types.Typeahead, options };
+}
+function TextArea(options = {}) {
+  return { type: Types.TextArea, options };
+}
+function TextInput(options = {}) {
+  return { type: Types.TextInput, options };
+}
+function TextStyle(options = {}) {
+  return { type: Types.TextStyle, options };
+}
+function Video(options = {}) {
+  return { type: Types.Video, options };
+}
+const WidthControlValueFormats = {
+  ClassName: "ClassName",
+  ResponsiveValue: "ResponsiveValue"
+};
+function Width(options = {}) {
+  return { type: Types.Width, options };
+}
+Width.Formats = WidthControlValueFormats;
+var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Types,
+  Backgrounds,
+  Border,
+  BorderRadius,
+  Checkbox,
+  Date,
+  ElementID,
+  Font,
+  GapX,
+  GapY,
+  Grid,
+  Image: Image$1,
+  Images,
+  Link,
+  List,
+  Margin,
+  NavigationLinks,
+  Number,
+  Padding,
+  ResponsiveColor,
+  ResponsiveIconRadioGroup,
+  ResponsiveLength,
+  ResponsiveNumber,
+  ResponsiveOpacity,
+  ResponsiveSelect,
+  RichText,
+  Shadows,
+  Shape,
+  SocialLinks,
+  Table,
+  TableFormFields,
+  Typeahead,
+  TextArea,
+  TextInput,
+  TextStyle,
+  Video,
+  WidthControlValueFormats,
+  Width
+}, Symbol.toStringTag, { value: "Module" }));
 const ImageControlType = "makeswift::controls::image";
 const ImageControlValueFormat = {
   URL: "makeswift::controls::image::format::url",
@@ -8,7 +237,46 @@ function Image(config = {}) {
   return { type: ImageControlType, config };
 }
 Image.Format = ImageControlValueFormat;
-exports.Image = Image;
+exports.Backgrounds = Backgrounds;
+exports.Border = Border;
+exports.BorderRadius = BorderRadius;
+exports.Checkbox = Checkbox;
+exports.Date = Date;
+exports.ElementID = ElementID;
+exports.Font = Font;
+exports.GapX = GapX;
+exports.GapY = GapY;
+exports.Grid = Grid;
+exports.Image = Image$1;
+exports.Image$1 = Image;
 exports.ImageControlType = ImageControlType;
 exports.ImageControlValueFormat = ImageControlValueFormat;
+exports.Images = Images;
+exports.Link = Link;
+exports.Margin = Margin;
+exports.NavigationLinks = NavigationLinks;
+exports.Number = Number;
+exports.Padding = Padding;
+exports.ResponsiveColor = ResponsiveColor;
+exports.ResponsiveIconRadioGroup = ResponsiveIconRadioGroup;
+exports.ResponsiveLength = ResponsiveLength;
+exports.ResponsiveNumber = ResponsiveNumber;
+exports.ResponsiveOpacity = ResponsiveOpacity;
+exports.ResponsiveSelect = ResponsiveSelect;
+exports.RichText = RichText;
+exports.Shadows = Shadows;
+exports.SocialLinks = SocialLinks;
+exports.Style = Style;
+exports.StyleControlProperty = StyleControlProperty;
+exports.StyleControlType = StyleControlType;
+exports.Table = Table;
+exports.TableFormFields = TableFormFields;
+exports.TextArea = TextArea;
+exports.TextInput = TextInput;
+exports.TextStyle = TextStyle;
+exports.Types = Types;
+exports.Video = Video;
+exports.Width = Width;
+exports.WidthControlValueFormats = WidthControlValueFormats;
+exports.descriptors = descriptors;
 //# sourceMappingURL=image.cjs.js.map