ats-form-react-pdf-stylesheet 6.1.2

package/README.md

@@ -0,0 +1,68 @@
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
+</p>
+
+# @react-pdf/stylesheet
+
+> React-pdf styles engine
+
+## How to install
+
+```sh
+yarn add @react-pdf/stylesheet
+```
+
+## How it works
+
+```js
+import stylesheet from '@react-pdf/stylesheet';
+
+const container = {
+  width: 400,
+  height: 600,
+  orientation: 'portrait',
+};
+
+const style = {
+  margin: 20,
+  width: '50vw',
+  height: '20vh',
+  borderRadius: 5,
+  fontWeight: 'semibold',
+  borderBottom: '2 solid yellow',
+  '@media max-width: 500': {
+    backgroundColor: 'rgb(255, 0, 0)',
+  },
+};
+
+const computed = stylesheet(container, style);
+
+// Computed
+// {
+//   width: 200,
+//   height: 120,
+//   marginTop: 20,
+//   marginLeft: 20,
+//   marginRight: 20,
+//   marginBottom: 20,
+//   marginBottom: 20,
+//   borderTopLeftRadius: 5,
+//   borderTopRightRadius: 5,
+//   borderBottomLeftRadius: 5,
+//   borderBottomRightRadius: 5,
+//   fontWeight: 600,
+//   borderBottomWidth: 2,
+//   borderBottomStyle: 'solid',
+//   borderBottomColor: 'yellow',
+//   backgroundColor: '#FF0000'
+// }
+```
+
+This library exports a `stylesheet` function that takes two arguments:
+
+- _container_: Container where the styles are being computed into. It specifies the `width` and `height` in points (needed for media queries and unit conversions), and optionally the container `orientation` (needed for certain media queries).
+- _style_: Style to be computed. JS object with raw styles that you would like to get in a normalized format.
+
+## License
+
+MIT © [Diego Muracciole](http://github.com/diegomura)

package/lib/index.d.ts

@@ -0,0 +1,314 @@
+type Container = {
+    width: number;
+    height: number;
+    dpi?: number;
+    remBase?: number;
+    orientation?: 'landscape' | 'portrait';
+};
+type Percentage = `${string}%`;
+type BorderStyleValue = 'dashed' | 'dotted' | 'solid';
+type BorderShorthandStyle = {
+    border?: number | string;
+    borderTop?: number | string;
+    borderRight?: number | string;
+    borderBottom?: number | string;
+    borderLeft?: number | string;
+    borderColor?: string;
+    borderRadius?: number | string;
+    borderStyle?: BorderStyleValue;
+    borderWidth?: number | string;
+};
+type BorderExpandedStyle = {
+    borderTopColor?: string;
+    borderTopStyle?: BorderStyleValue;
+    borderTopWidth?: number | string;
+    borderRightColor?: string;
+    borderRightStyle?: BorderStyleValue;
+    borderRightWidth?: number | string;
+    borderBottomColor?: string;
+    borderBottomStyle?: BorderStyleValue;
+    borderBottomWidth?: number | string;
+    borderLeftColor?: string;
+    borderLeftStyle?: BorderStyleValue;
+    borderLeftWidth?: number | string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+};
+type BorderSafeStyle = BorderExpandedStyle & {
+    borderTopWidth?: number;
+    borderRightWidth?: number;
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    borderTopLeftRadius?: number | Percentage;
+    borderTopRightRadius?: number | Percentage;
+    borderBottomRightRadius?: number | Percentage;
+    borderBottomLeftRadius?: number | Percentage;
+};
+type BorderStyle = BorderShorthandStyle & BorderExpandedStyle;
+type FlexboxShorthandStyle = {
+    flex?: number | string;
+};
+type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+type JustifySelf = string;
+type FlexboxExpandedStyle = {
+    alignContent?: AlignContent;
+    alignItems?: AlignItems;
+    alignSelf?: AlignSelf;
+    flexDirection?: FlexDirection;
+    flexWrap?: FlexWrap;
+    flexFlow?: number | string;
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexBasis?: number | string;
+    justifySelf?: JustifySelf;
+    justifyContent?: JustifyContent;
+};
+type FlexboxSafeStyle = FlexboxExpandedStyle & {
+    flexGrow?: number;
+    flexShrink?: number;
+};
+type FlexboxStyle = FlexboxShorthandStyle & FlexboxExpandedStyle;
+type GapShorthandStyle = {
+    gap?: number | string;
+};
+type GapExpandedStyle = {
+    rowGap?: number | string;
+    columnGap?: number | string;
+};
+type GapSafeStyle = {
+    rowGap?: number | Percentage;
+    columnGap?: number | Percentage;
+};
+type GapStyle = GapShorthandStyle & GapExpandedStyle;
+type PositionShorthandStyle = {
+    objectPosition?: number | string;
+};
+type PositionExpandedStyle = {
+    objectPositionX?: number | string;
+    objectPositionY?: number | string;
+    objectFit?: string;
+};
+type PositionSafeStyle = PositionExpandedStyle & {
+    objectPositionX?: number;
+    objectPositionY?: number;
+};
+type PositioningStyle = PositionShorthandStyle & PositionExpandedStyle;
+type ScaleTransform = {
+    operation: 'scale';
+    value: [number, number];
+};
+type TranslateTransform = {
+    operation: 'translate';
+    value: [number, number];
+};
+type RotateTransform = {
+    operation: 'rotate';
+    value: [number];
+};
+type SkewTransform = {
+    operation: 'skew';
+    value: [number, number];
+};
+type MatrixTransform = {
+    operation: 'matrix';
+    value: [number, number, number, number, number, number];
+};
+type Transform = ScaleTransform | TranslateTransform | RotateTransform | SkewTransform | MatrixTransform;
+type TransformShorthandStyle = {
+    transformOrigin?: number | string;
+};
+type TransformExpandedStyle = {
+    transformOriginX?: number | string;
+    transformOriginY?: number | string;
+    transform?: string | Transform[];
+    gradientTransform?: string | Transform[];
+};
+type TransformSafeStyle = Omit<TransformExpandedStyle, 'transform'> & {
+    transformOriginX?: number | Percentage;
+    transformOriginY?: number | Percentage;
+    transform?: Transform[];
+    gradientTransform?: Transform[];
+};
+type TransformStyle = TransformShorthandStyle & TransformExpandedStyle;
+type Display = 'flex' | 'none';
+type Position = 'absolute' | 'relative' | 'static';
+type LayoutStyle = {
+    aspectRatio?: number | string;
+    bottom?: number | string;
+    display?: Display;
+    left?: number | string;
+    position?: Position;
+    right?: number | string;
+    top?: number | string;
+    overflow?: 'hidden';
+    zIndex?: number | string;
+};
+type LayoutExpandedStyle = LayoutStyle;
+type LayoutSafeStyle = LayoutExpandedStyle & {
+    aspectRatio?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    top?: number;
+    zIndex?: number;
+};
+type DimensionStyle = {
+    height?: number | string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    width?: number | string;
+};
+type DimensionExpandedStyle = DimensionStyle;
+type DimensionSafeStyle = DimensionExpandedStyle & {
+    height?: number | Percentage;
+    maxHeight?: number | Percentage;
+    maxWidth?: number | Percentage;
+    minHeight?: number | Percentage;
+    minWidth?: number | Percentage;
+    width?: number | Percentage;
+};
+type ColorStyle = {
+    backgroundColor?: string;
+    color?: string;
+    opacity?: number | string;
+};
+type ColorExpandedStyle = ColorStyle;
+type ColorSafeStyle = {
+    backgroundColor?: string;
+    color?: string;
+    opacity?: number;
+};
+type FontStyle = 'normal' | 'italic' | 'oblique';
+type FontWeight = string | number | 'thin' | 'hairline' | 'ultralight' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'demibold' | 'bold' | 'ultrabold' | 'extrabold' | 'heavy' | 'black';
+type TextAlign = 'left' | 'right' | 'center' | 'justify';
+type TextDecoration = 'line-through' | 'underline' | 'none' | 'line-through underline' | 'underline line-through';
+type TextDecorationStyle = 'dashed' | 'dotted' | 'solid' | string;
+type TextTransform = 'capitalize' | 'lowercase' | 'uppercase' | 'upperfirst' | 'none';
+type VerticalAlign = 'sub' | 'super';
+type TextStyle = {
+    direction?: 'ltr' | 'rtl';
+    fontSize?: number | string;
+    fontFamily?: string | string[];
+    fontStyle?: FontStyle;
+    fontWeight?: FontWeight;
+    letterSpacing?: number | string;
+    lineHeight?: number | string;
+    maxLines?: number;
+    textAlign?: TextAlign;
+    textDecoration?: TextDecoration;
+    textDecorationColor?: string;
+    textDecorationStyle?: TextDecorationStyle;
+    textIndent?: any;
+    textOverflow?: 'ellipsis';
+    textTransform?: TextTransform;
+    verticalAlign?: VerticalAlign;
+};
+type TextExpandedStyle = TextStyle;
+type TextSafeStyle = TextExpandedStyle & {
+    fontSize?: number;
+    fontWeight?: number;
+    letterSpacing?: number;
+    lineHeight?: number;
+};
+type MarginShorthandStyle = {
+    margin?: number | string;
+    marginHorizontal?: number | string;
+    marginVertical?: number | string;
+};
+type MarginExpandedStyle = {
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+};
+type MarginSafeStyle = MarginExpandedStyle & {
+    marginTop?: number | Percentage;
+    marginRight?: number | Percentage;
+    marginBottom?: number | Percentage;
+    marginLeft?: number | Percentage;
+};
+type MarginStyle = MarginShorthandStyle & MarginExpandedStyle;
+type PaddingShorthandStyle = {
+    padding?: number | string;
+    paddingHorizontal?: number | string;
+    paddingVertical?: number | string;
+};
+type PaddingExpandedStyle = {
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+};
+type PaddingSafeStyle = PaddingExpandedStyle & {
+    paddingTop?: number | Percentage;
+    paddingRight?: number | Percentage;
+    paddingBottom?: number | Percentage;
+    paddingLeft?: number | Percentage;
+};
+type PaddingStyle = PaddingShorthandStyle & PaddingExpandedStyle;
+interface SvgStyle {
+    fill?: string;
+    stroke?: string;
+    strokeDasharray?: string;
+    strokeWidth?: string | number;
+    fillOpacity?: string | number;
+    fillRule?: 'nonzero' | 'evenodd';
+    strokeOpacity?: string | number;
+    textAnchor?: 'start' | 'middle' | 'end';
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'butt' | 'round' | 'square' | 'miter' | 'bevel';
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    clipPath?: string;
+    dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'mathematical' | 'text-after-edge' | 'text-before-edge';
+}
+type SvgExpandedStyle = SvgStyle;
+type SvgSafeStyle = SvgStyle & {
+    strokeWidth?: number;
+    fillOpacity?: number;
+    strokeOpacity?: number;
+};
+type BaseStyle = BorderStyle & ColorStyle & DimensionStyle & FlexboxStyle & GapStyle & LayoutStyle & MarginStyle & PaddingStyle & PositioningStyle & TextStyle & TransformStyle & SvgStyle;
+type MediaQueryStyle = {
+    [key in `@media${string}`]: BaseStyle;
+};
+type Style = BaseStyle & MediaQueryStyle;
+type StyleKey = keyof BaseStyle;
+type ExpandedStyle = BorderExpandedStyle & ColorExpandedStyle & DimensionExpandedStyle & FlexboxExpandedStyle & GapExpandedStyle & LayoutExpandedStyle & MarginExpandedStyle & PaddingExpandedStyle & PositionExpandedStyle & TextExpandedStyle & TransformExpandedStyle & SvgExpandedStyle;
+type SafeStyle = BorderSafeStyle & ColorSafeStyle & DimensionSafeStyle & FlexboxSafeStyle & GapSafeStyle & LayoutSafeStyle & MarginSafeStyle & PaddingSafeStyle & PositionSafeStyle & TextSafeStyle & TransformSafeStyle & SvgSafeStyle;
+
+/**
+ * Transform given color to hexa
+ *
+ * @param value - Styles value
+ * @returns Transformed value
+ */
+declare const transformColor: (value: string) => string;
+
+/**
+ * Flattens an array of style objects, into one aggregated style object.
+ *
+ * @param styles - Style or style array
+ * @returns Flattened style object
+ */
+declare const flatten: (value: Style | Style[], ...args: any[]) => Style;
+
+type StyleParam = Style | null | undefined;
+/**
+ * Resolves styles
+ *
+ * @param container
+ * @param style - Style
+ * @returns Resolved style
+ */
+declare const resolveStyles: (container: Container, style: StyleParam | StyleParam[]) => SafeStyle;
+
+export { type AlignContent, type AlignItems, type AlignSelf, type BorderExpandedStyle, type BorderSafeStyle, type BorderShorthandStyle, type BorderStyle, type BorderStyleValue, type ColorExpandedStyle, type ColorSafeStyle, type ColorStyle, type Container, type DimensionExpandedStyle, type DimensionSafeStyle, type DimensionStyle, type Display, type ExpandedStyle, type FlexDirection, type FlexWrap, type FlexboxExpandedStyle, type FlexboxSafeStyle, type FlexboxShorthandStyle, type FlexboxStyle, type FontStyle, type FontWeight, type GapExpandedStyle, type GapSafeStyle, type GapShorthandStyle, type GapStyle, type JustifyContent, type JustifySelf, type LayoutExpandedStyle, type LayoutSafeStyle, type LayoutStyle, type MarginExpandedStyle, type MarginSafeStyle, type MarginShorthandStyle, type MarginStyle, type MatrixTransform, type PaddingExpandedStyle, type PaddingSafeStyle, type PaddingShorthandStyle, type PaddingStyle, type Percentage, type Position, type PositionExpandedStyle, type PositionSafeStyle, type PositionShorthandStyle, type PositioningStyle, type RotateTransform, type SafeStyle, type ScaleTransform, type SkewTransform, type Style, type StyleKey, type SvgExpandedStyle, type SvgSafeStyle, type SvgStyle, type TextAlign, type TextDecoration, type TextDecorationStyle, type TextExpandedStyle, type TextSafeStyle, type TextStyle, type TextTransform, type Transform, type TransformExpandedStyle, type TransformSafeStyle, type TransformShorthandStyle, type TransformStyle, type TranslateTransform, type VerticalAlign, resolveStyles as default, flatten, transformColor };

package/lib/index.js

@@ -0,0 +1,767 @@
+import { compose, castArray, parseFloat as parseFloat$1, matchPercent } from '@react-pdf/fns';
+import matchMedia from 'media-engine';
+import hlsToHex from 'hsl-to-hex';
+import colorString from 'color-string';
+import parse$1 from 'postcss-value-parser/lib/parse.js';
+import parseUnit from 'postcss-value-parser/lib/unit.js';
+
+/**
+ * Remove nil values from array
+ *
+ * @param array - Style array
+ * @returns Style array without nils
+ */
+const compact = (array) => array.filter(Boolean);
+/**
+ * Merges style objects array
+ *
+ * @param styles - Style array
+ * @returns Merged style object
+ */
+const mergeStyles = (styles) => styles.reduce((acc, style) => {
+    const s = Array.isArray(style) ? flatten(style) : style;
+    Object.keys(s).forEach((key) => {
+        if (s[key] !== null && s[key] !== undefined) {
+            acc[key] = s[key];
+        }
+    });
+    return acc;
+}, {});
+/**
+ * Flattens an array of style objects, into one aggregated style object.
+ *
+ * @param styles - Style or style array
+ * @returns Flattened style object
+ */
+const flatten = compose(mergeStyles, compact, (castArray));
+
+/**
+ * Resolves media queries in styles object
+ *
+ * @param container - Container for which styles are resolved
+ * @param style - Style description
+ * @returns Resolved style object
+ */
+const resolveMediaQueries = (container, style) => {
+    return Object.keys(style).reduce((acc, key) => {
+        if (/@media/.test(key)) {
+            return {
+                ...acc,
+                ...matchMedia({ [key]: style[key] }, container),
+            };
+        }
+        return { ...acc, [key]: style[key] };
+    }, {});
+};
+
+const isRgb = (value) => /rgba?/g.test(value);
+const isHsl = (value) => /hsla?/g.test(value);
+/**
+ * Transform rgb color to hexa
+ *
+ * @param value - Styles value
+ * @returns Transformed value
+ */
+const parseRgb = (value) => {
+    const rgb = colorString.get.rgb(value);
+    return colorString.to.hex(rgb);
+};
+/**
+ * Transform Hsl color to hexa
+ *
+ * @param value - Styles value
+ * @returns Transformed value
+ */
+const parseHsl = (value) => {
+    const hsl = colorString.get.hsl(value).map(Math.round);
+    const hex = hlsToHex(...hsl);
+    return hex.toUpperCase();
+};
+/**
+ * Transform given color to hexa
+ *
+ * @param value - Styles value
+ * @returns Transformed value
+ */
+const transformColor = (value) => {
+    if (isRgb(value))
+        return parseRgb(value);
+    if (isHsl(value))
+        return parseHsl(value);
+    return value;
+};
+
+/**
+ * Parses scalar value in value and unit pairs
+ *
+ * @param value - Scalar value
+ * @returns Parsed value
+ */
+const parseValue = (value) => {
+    if (typeof value === 'number')
+        return { value, unit: undefined };
+    const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px|rem)?$/g.exec(value);
+    return match
+        ? { value: parseFloat(match[1]), unit: match[2] || 'pt' }
+        : { value, unit: undefined };
+};
+/**
+ * Transform given scalar value
+ *
+ * @param container
+ * @param value - Styles value
+ * @returns Transformed value
+ */
+const transformUnit = (container, value) => {
+    const scalar = parseValue(value);
+    const outputDpi = 72;
+    const inputDpi = container.dpi || 72;
+    const mmFactor = (1 / 25.4) * outputDpi;
+    const cmFactor = (1 / 2.54) * outputDpi;
+    if (typeof scalar.value !== 'number')
+        return scalar.value;
+    switch (scalar.unit) {
+        case 'rem':
+            return scalar.value * (container.remBase || 18);
+        case 'in':
+            return scalar.value * outputDpi;
+        case 'mm':
+            return scalar.value * mmFactor;
+        case 'cm':
+            return scalar.value * cmFactor;
+        case 'vh':
+            return scalar.value * (container.height / 100);
+        case 'vw':
+            return scalar.value * (container.width / 100);
+        case 'px':
+            return Math.round(scalar.value * (outputDpi / inputDpi));
+        default:
+            return scalar.value;
+    }
+};
+
+const processNumberValue = (key, value) => ({
+    [key]: parseFloat$1(value),
+});
+const processUnitValue = (key, value, container) => ({
+    [key]: transformUnit(container, value),
+});
+const processColorValue = (key, value) => {
+    const result = { [key]: transformColor(value) };
+    return result;
+};
+const processNoopValue = (key, value) => ({
+    [key]: value,
+});
+
+const BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(in|mm|cm|pt|vw|vh|px|rem)?)\s(\S+)\s(.+)/;
+const matchBorderShorthand = (value) => value.match(BORDER_SHORTHAND_REGEX) || [];
+const resolveBorderShorthand = (key, value, container) => {
+    const match = matchBorderShorthand(`${value}`);
+    if (match) {
+        const widthMatch = match[1] || value;
+        const styleMatch = match[4] || value || 'solid';
+        const colorMatch = match[5] || value;
+        const style = styleMatch;
+        const color = colorMatch ? transformColor(colorMatch) : undefined;
+        const width = typeof widthMatch !== 'undefined'
+            ? transformUnit(container, widthMatch)
+            : undefined;
+        if (key.match(/(Top|Right|Bottom|Left)$/)) {
+            return {
+                [`${key}Color`]: color,
+                [`${key}Style`]: style,
+                [`${key}Width`]: width,
+            };
+        }
+        if (key.match(/Color$/)) {
+            return {
+                borderTopColor: color,
+                borderRightColor: color,
+                borderBottomColor: color,
+                borderLeftColor: color,
+            };
+        }
+        if (key.match(/Style$/)) {
+            if (typeof style === 'number')
+                throw new Error(`Invalid border style: ${style}`);
+            return {
+                borderTopStyle: style,
+                borderRightStyle: style,
+                borderBottomStyle: style,
+                borderLeftStyle: style,
+            };
+        }
+        if (key.match(/Width$/)) {
+            if (typeof width !== 'number')
+                throw new Error(`Invalid border width: ${width}`);
+            return {
+                borderTopWidth: width,
+                borderRightWidth: width,
+                borderBottomWidth: width,
+                borderLeftWidth: width,
+            };
+        }
+        if (key.match(/Radius$/)) {
+            const radius = value ? transformUnit(container, value) : undefined;
+            if (typeof radius !== 'number')
+                throw new Error(`Invalid border radius: ${radius}`);
+            return {
+                borderTopLeftRadius: radius,
+                borderTopRightRadius: radius,
+                borderBottomRightRadius: radius,
+                borderBottomLeftRadius: radius,
+            };
+        }
+        if (typeof width !== 'number')
+            throw new Error(`Invalid border width: ${width}`);
+        if (typeof style === 'number')
+            throw new Error(`Invalid border style: ${style}`);
+        return {
+            borderTopColor: color,
+            borderTopStyle: style,
+            borderTopWidth: width,
+            borderRightColor: color,
+            borderRightStyle: style,
+            borderRightWidth: width,
+            borderBottomColor: color,
+            borderBottomStyle: style,
+            borderBottomWidth: width,
+            borderLeftColor: color,
+            borderLeftStyle: style,
+            borderLeftWidth: width,
+        };
+    }
+    return { [key]: value };
+};
+const handlers$b = {
+    border: (resolveBorderShorthand),
+    borderBottom: (resolveBorderShorthand),
+    borderBottomColor: (processColorValue),
+    borderBottomLeftRadius: (processUnitValue),
+    borderBottomRightRadius: (processUnitValue),
+    borderBottomStyle: (processNoopValue),
+    borderBottomWidth: (processUnitValue),
+    borderColor: (resolveBorderShorthand),
+    borderLeft: (resolveBorderShorthand),
+    borderLeftColor: (processColorValue),
+    borderLeftStyle: (processNoopValue),
+    borderLeftWidth: (processUnitValue),
+    borderRadius: (resolveBorderShorthand),
+    borderRight: (resolveBorderShorthand),
+    borderRightColor: (processColorValue),
+    borderRightStyle: (processNoopValue),
+    borderRightWidth: (processUnitValue),
+    borderStyle: (resolveBorderShorthand),
+    borderTop: (resolveBorderShorthand),
+    borderTopColor: (processColorValue),
+    borderTopLeftRadius: (processUnitValue),
+    borderTopRightRadius: (processUnitValue),
+    borderTopStyle: (processNoopValue),
+    borderTopWidth: (processUnitValue),
+    borderWidth: (resolveBorderShorthand),
+};
+
+const handlers$a = {
+    backgroundColor: (processColorValue),
+    color: (processColorValue),
+    opacity: (processNumberValue),
+};
+
+const handlers$9 = {
+    height: (processUnitValue),
+    maxHeight: (processUnitValue),
+    maxWidth: (processUnitValue),
+    minHeight: (processUnitValue),
+    minWidth: (processUnitValue),
+    width: (processUnitValue),
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
+// TODO: change flex defaults to [0, 1, 'auto'] as in spec in next major release
+const flexDefaults = [1, 1, 0];
+const flexAuto = [1, 1, 'auto'];
+const processFlexShorthand = (key, value, container) => {
+    let defaults = flexDefaults;
+    let matches = [];
+    if (value === 'auto') {
+        defaults = flexAuto;
+    }
+    else {
+        matches = `${value}`.split(' ');
+    }
+    const flexGrow = parseFloat$1(matches[0] || defaults[0]);
+    const flexShrink = parseFloat$1(matches[1] || defaults[1]);
+    const flexBasis = transformUnit(container, matches[2] || defaults[2]);
+    return { flexGrow, flexShrink, flexBasis };
+};
+const handlers$8 = {
+    alignContent: (processNoopValue),
+    alignItems: (processNoopValue),
+    alignSelf: (processNoopValue),
+    flex: (processFlexShorthand),
+    flexBasis: (processUnitValue),
+    flexDirection: (processNoopValue),
+    flexFlow: (processNoopValue),
+    flexGrow: (processNumberValue),
+    flexShrink: (processNumberValue),
+    flexWrap: (processNoopValue),
+    justifyContent: (processNoopValue),
+    justifySelf: (processNoopValue),
+};
+
+const processGapShorthand = (key, value, container) => {
+    const match = `${value}`.split(' ');
+    const rowGap = transformUnit(container, match?.[0] || value);
+    const columnGap = transformUnit(container, match?.[1] || value);
+    return { rowGap, columnGap };
+};
+const handlers$7 = {
+    gap: (processGapShorthand),
+    columnGap: (processUnitValue),
+    rowGap: (processUnitValue),
+};
+
+const handlers$6 = {
+    aspectRatio: (processNumberValue),
+    bottom: (processUnitValue),
+    display: (processNoopValue),
+    left: (processUnitValue),
+    position: (processNoopValue),
+    right: (processUnitValue),
+    top: (processUnitValue),
+    overflow: (processNoopValue),
+    zIndex: (processNumberValue),
+};
+
+const BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
+const logError = (style, value) => {
+    const name = style.toString();
+    // eslint-disable-next-line no-console
+    console.error(`
+    @react-pdf/stylesheet parsing error:
+    ${name}: ${value},
+    ${' '.repeat(name.length + 2)}^
+    Unsupported ${name} value format
+  `);
+};
+/**
+ * @param options
+ * @param [options.expandsTo]
+ * @param [options.maxValues]
+ * @param [options.autoSupported]
+ */
+const expandBoxModel = ({ expandsTo, maxValues = 1, autoSupported = false, } = {}) => (model, value, container) => {
+    const nodes = parse$1(`${value}`);
+    const parts = [];
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        // value contains `calc`, `url` or other css function
+        // `,`, `/` or strings that unsupported by margin and padding
+        if (node.type === 'function' ||
+            node.type === 'string' ||
+            node.type === 'div') {
+            logError(model, value);
+            return {};
+        }
+        if (node.type === 'word') {
+            if (node.value === 'auto' && autoSupported) {
+                parts.push(node.value);
+            }
+            else {
+                const result = parseUnit(node.value);
+                // when unit isn't specified this condition is true
+                if (result && BOX_MODEL_UNITS.includes(result.unit)) {
+                    parts.push(node.value);
+                }
+                else {
+                    logError(model, value);
+                    return {};
+                }
+            }
+        }
+    }
+    // checks that we have enough parsed values
+    if (parts.length > maxValues) {
+        logError(model, value);
+        return {};
+    }
+    const first = transformUnit(container, parts[0]);
+    if (expandsTo) {
+        const second = transformUnit(container, parts[1] || parts[0]);
+        const third = transformUnit(container, parts[2] || parts[0]);
+        const fourth = transformUnit(container, parts[3] || parts[1] || parts[0]);
+        return expandsTo({ first, second, third, fourth });
+    }
+    return {
+        [model]: first,
+    };
+};
+
+const processMargin = expandBoxModel({
+    expandsTo: ({ first, second, third, fourth }) => ({
+        marginTop: first,
+        marginRight: second,
+        marginBottom: third,
+        marginLeft: fourth,
+    }),
+    maxValues: 4,
+    autoSupported: true,
+});
+const processMarginVertical = expandBoxModel({
+    expandsTo: ({ first, second }) => ({
+        marginTop: first,
+        marginBottom: second,
+    }),
+    maxValues: 2,
+    autoSupported: true,
+});
+const processMarginHorizontal = expandBoxModel({
+    expandsTo: ({ first, second }) => ({
+        marginRight: first,
+        marginLeft: second,
+    }),
+    maxValues: 2,
+    autoSupported: true,
+});
+const processMarginSingle = expandBoxModel({
+    autoSupported: true,
+});
+const handlers$5 = {
+    margin: (processMargin),
+    marginBottom: (processMarginSingle),
+    marginHorizontal: (processMarginHorizontal),
+    marginLeft: (processMarginSingle),
+    marginRight: (processMarginSingle),
+    marginTop: (processMarginSingle),
+    marginVertical: (processMarginVertical),
+};
+
+const processPadding = expandBoxModel({
+    expandsTo: ({ first, second, third, fourth }) => ({
+        paddingTop: first,
+        paddingRight: second,
+        paddingBottom: third,
+        paddingLeft: fourth,
+    }),
+    maxValues: 4,
+});
+const processPaddingVertical = expandBoxModel({
+    expandsTo: ({ first, second }) => ({
+        paddingTop: first,
+        paddingBottom: second,
+    }),
+    maxValues: 2,
+});
+const processPaddingHorizontal = expandBoxModel({
+    expandsTo: ({ first, second }) => ({
+        paddingRight: first,
+        paddingLeft: second,
+    }),
+    maxValues: 2,
+});
+const processPaddingSingle = expandBoxModel();
+const handlers$4 = {
+    padding: (processPadding),
+    paddingBottom: (processPaddingSingle),
+    paddingHorizontal: (processPaddingHorizontal),
+    paddingLeft: (processPaddingSingle),
+    paddingRight: (processPaddingSingle),
+    paddingTop: (processPaddingSingle),
+    paddingVertical: (processPaddingVertical),
+};
+
+const offsetKeyword = (value) => {
+    switch (value) {
+        case 'top':
+        case 'left':
+            return '0%';
+        case 'right':
+        case 'bottom':
+            return '100%';
+        case 'center':
+            return '50%';
+        default:
+            return value;
+    }
+};
+
+const processObjectPosition = (key, value, container) => {
+    const match = `${value}`.split(' ');
+    const objectPositionX = offsetKeyword(transformUnit(container, match?.[0] || value));
+    const objectPositionY = offsetKeyword(transformUnit(container, match?.[1] || value));
+    return { objectPositionX, objectPositionY };
+};
+const processObjectPositionValue = (key, value, container) => ({
+    [key]: offsetKeyword(transformUnit(container, value)),
+});
+const handlers$3 = {
+    objectPosition: (processObjectPosition),
+    objectPositionX: (processObjectPositionValue),
+    objectPositionY: (processObjectPositionValue),
+    objectFit: (processNoopValue),
+};
+
+const castInt = (value) => {
+    if (typeof value === 'number')
+        return value;
+    return parseInt(value, 10);
+};
+
+const FONT_WEIGHTS = {
+    thin: 100,
+    hairline: 100,
+    ultralight: 200,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    demibold: 600,
+    bold: 700,
+    ultrabold: 800,
+    extrabold: 800,
+    heavy: 900,
+    black: 900,
+};
+const transformFontWeight = (value) => {
+    if (!value)
+        return FONT_WEIGHTS.normal;
+    if (typeof value === 'number')
+        return value;
+    const lv = value.toLowerCase();
+    if (FONT_WEIGHTS[lv])
+        return FONT_WEIGHTS[lv];
+    return castInt(value);
+};
+const processFontWeight = (key, value) => {
+    return { [key]: transformFontWeight(value) };
+};
+const transformLineHeight = (value, styles, container) => {
+    if (value === '')
+        return value;
+    const fontSize = transformUnit(container, styles.fontSize || 18);
+    const lineHeight = transformUnit(container, value);
+    // Percent values: use this number multiplied by the element's font size
+    const { percent } = matchPercent(lineHeight) || {};
+    if (percent)
+        return percent * fontSize;
+    // Unitless values: use this number multiplied by the element's font size
+    return isNaN(value) ? lineHeight : lineHeight * fontSize;
+};
+const processLineHeight = (key, value, container, styles) => {
+    return {
+        [key]: transformLineHeight(value, styles, container),
+    };
+};
+const handlers$2 = {
+    direction: (processNoopValue),
+    fontFamily: (processNoopValue),
+    fontSize: (processUnitValue),
+    fontStyle: (processNoopValue),
+    fontWeight: (processFontWeight),
+    letterSpacing: (processUnitValue),
+    lineHeight: (processLineHeight),
+    maxLines: (processNumberValue),
+    textAlign: (processNoopValue),
+    textDecoration: (processNoopValue),
+    textDecorationColor: (processColorValue),
+    textDecorationStyle: (processNoopValue),
+    textIndent: (processNoopValue),
+    textOverflow: (processNoopValue),
+    textTransform: (processNoopValue),
+    verticalAlign: (processNoopValue),
+};
+
+const matchNumber = (value) => typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
+const castFloat = (value) => {
+    if (typeof value !== 'string')
+        return value;
+    if (matchNumber(value))
+        return parseFloat(value);
+    return value;
+};
+
+const parse = (transformString) => {
+    const transforms = transformString.trim().split(/\)[ ,]|\)/);
+    // Handle "initial", "inherit", "unset".
+    if (transforms.length === 1) {
+        return [[transforms[0], true]];
+    }
+    const parsed = [];
+    for (let i = 0; i < transforms.length; i += 1) {
+        const transform = transforms[i];
+        if (transform) {
+            const [name, rawValue] = transform.split('(');
+            const splitChar = rawValue.indexOf(',') >= 0 ? ',' : ' ';
+            const value = rawValue.split(splitChar).map((val) => val.trim());
+            parsed.push({ operation: name.trim(), value });
+        }
+    }
+    return parsed;
+};
+const parseAngle = (value) => {
+    const unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
+    const [, angle, unit] = unitsRegexp.exec(value);
+    const number = Number.parseFloat(angle);
+    return unit === 'rad' ? (number * 180) / Math.PI : number;
+};
+const normalizeTransformOperation = ({ operation, value }) => {
+    switch (operation) {
+        case 'scale': {
+            const [scaleX, scaleY = scaleX] = value.map((num) => Number.parseFloat(num));
+            return { operation: 'scale', value: [scaleX, scaleY] };
+        }
+        case 'scaleX': {
+            return { operation: 'scale', value: [Number.parseFloat(value), 1] };
+        }
+        case 'scaleY': {
+            return { operation: 'scale', value: [1, Number.parseFloat(value)] };
+        }
+        case 'rotate': {
+            return { operation: 'rotate', value: [parseAngle(value)] };
+        }
+        case 'translate': {
+            return {
+                operation: 'translate',
+                value: value.map((num) => Number.parseFloat(num)),
+            };
+        }
+        case 'translateX': {
+            return {
+                operation: 'translate',
+                value: [Number.parseFloat(value), 0],
+            };
+        }
+        case 'translateY': {
+            return { operation: 'translate', value: [0, Number.parseFloat(value)] };
+        }
+        case 'skew': {
+            return { operation: 'skew', value: value.map(parseAngle) };
+        }
+        case 'skewX': {
+            return { operation: 'skew', value: [parseAngle(value), 0] };
+        }
+        case 'skewY': {
+            return { operation: 'skew', value: [0, parseAngle(value)] };
+        }
+        default: {
+            return { operation, value: value.map((num) => Number.parseFloat(num)) };
+        }
+    }
+};
+const normalize = (operations) => {
+    return operations.map((operation) => normalizeTransformOperation(operation));
+};
+const processTransform = (key, value) => {
+    if (typeof value !== 'string')
+        return { [key]: value };
+    return { [key]: normalize(parse(value)) };
+};
+const Y_AXIS_SHORTHANDS = { top: true, bottom: true };
+const sortTransformOriginPair = (a, b) => {
+    if (Y_AXIS_SHORTHANDS[a])
+        return 1;
+    if (Y_AXIS_SHORTHANDS[b])
+        return -1;
+    return 0;
+};
+const getTransformOriginPair = (values) => {
+    if (!values || values.length === 0)
+        return ['center', 'center'];
+    const pair = values.length === 1 ? [values[0], 'center'] : values;
+    return pair.sort(sortTransformOriginPair);
+};
+// Transforms shorthand transformOrigin values
+const processTransformOriginShorthand = (key, value, container) => {
+    const match = `${value}`.split(' ');
+    const pair = getTransformOriginPair(match);
+    const transformOriginX = transformUnit(container, pair[0]);
+    const transformOriginY = transformUnit(container, pair[1]);
+    return {
+        transformOriginX: offsetKeyword(transformOriginX) || castFloat(transformOriginX),
+        transformOriginY: offsetKeyword(transformOriginY) || castFloat(transformOriginY),
+    };
+};
+const processTransformOriginValue = (key, value, container) => {
+    const v = transformUnit(container, value);
+    return { [key]: offsetKeyword(v) || castFloat(v) };
+};
+const handlers$1 = {
+    transform: processTransform,
+    gradientTransform: processTransform,
+    transformOrigin: (processTransformOriginShorthand),
+    transformOriginX: (processTransformOriginValue),
+    transformOriginY: (processTransformOriginValue),
+};
+
+const handlers = {
+    fill: (processColorValue),
+    stroke: (processColorValue),
+    strokeDasharray: (processNoopValue),
+    strokeWidth: (processUnitValue),
+    fillOpacity: (processNumberValue),
+    strokeOpacity: (processNumberValue),
+    fillRule: (processNoopValue),
+    textAnchor: (processNoopValue),
+    strokeLinecap: (processNoopValue),
+    strokeLinejoin: (processNoopValue),
+    visibility: (processNoopValue),
+    clipPath: (processNoopValue),
+    dominantBaseline: (processNoopValue),
+};
+
+const shorthands = {
+    ...handlers$b,
+    ...handlers$a,
+    ...handlers$9,
+    ...handlers$8,
+    ...handlers$7,
+    ...handlers$6,
+    ...handlers$5,
+    ...handlers$4,
+    ...handlers$3,
+    ...handlers$2,
+    ...handlers$1,
+    ...handlers,
+};
+/**
+ * Expand the shorthand properties.
+ *
+ * @param style - Style object
+ * @returns Expanded style object
+ */
+const resolve = (container) => (style) => {
+    const propsArray = Object.keys(style);
+    const resolvedStyle = {};
+    for (let i = 0; i < propsArray.length; i += 1) {
+        const key = propsArray[i];
+        const value = style[key];
+        if (!shorthands[key]) {
+            resolvedStyle[key] = value;
+            continue;
+        }
+        const resolved = shorthands[key](key, value, container, style);
+        const keys = Object.keys(resolved);
+        for (let j = 0; j < keys.length; j += 1) {
+            const propName = keys[j];
+            const propValue = resolved[propName];
+            resolvedStyle[propName] = propValue;
+        }
+    }
+    return resolvedStyle;
+};
+
+/**
+ * Resolves styles
+ *
+ * @param container
+ * @param style - Style
+ * @returns Resolved style
+ */
+const resolveStyles = (container, style) => {
+    const computeMediaQueries = (value) => resolveMediaQueries(container, value);
+    return compose(resolve(container), computeMediaQueries, flatten)(style);
+};
+
+export { resolveStyles as default, flatten, transformColor };

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "ats-form-react-pdf-stylesheet",
+  "version": "6.1.2",
+  "license": "MIT",
+  "description": "A styles engine for Node and the browser",
+  "author": "Diego Muracciole <diegomuracciole@gmail.com>",
+  "homepage": "https://github.com/diegomura/react-pdf#readme",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/diegomura/react-pdf.git",
+    "directory": "packages/stylesheet"
+  },
+  "scripts": {
+    "test": "vitest",
+    "build": "rimraf ./lib && rollup -c",
+    "watch": "rimraf ./lib && rollup -c -w",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@react-pdf/fns": "3.1.2",
+    "@react-pdf/types": "^2.9.1",
+    "color-string": "^1.9.1",
+    "hsl-to-hex": "^1.0.0",
+    "media-engine": "^1.0.3",
+    "postcss-value-parser": "^4.1.0"
+  },
+  "files": [
+    "lib"
+  ]
+}