@toptal/picasso-container - npm Package Compare versions

Comparing version 1.0.4-alpha-fx-null-fix-tag-7b2900a3d.25 to 2.0.0

dist-package/src/Container/Container.js

@@ -12,20 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import { makeStyles } from '@material-ui/core/styles';
-import { makeResponsiveSpacingProps } from '@toptal/picasso-provider';
-import cx from 'classnames';
 import React from 'react';
-import { documentable, forwardRef, kebabToCamelCase } from '@toptal/picasso-utils';
-import styles from './styles';
-import { filterOutStringAndPicassoSpacing, getBaseSpacingClasses, } from './utils';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoContainer',
-});
-const useResponsiveProps = makeResponsiveSpacingProps([
-    'margin-top',
-    'margin-bottom',
-    'margin-left',
-    'margin-right',
-    'padding',
-    'gap',
-], 'PicassoContainer-Responsive');
+import { documentable, forwardRef } from '@toptal/picasso-utils';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { alignmentClasses, variantClassesByColor } from './styles';
+import { getSpacingClasses, getSpacingStyles } from './utils';
 /**
@@ -38,31 +25,19 @@ * Container component used for spacing 2 elements
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    classes: externalClasses } = props, 
-    /* eslint-enable */
-    rest = __rest(props, ["children", "className", "inline", "flex", "direction", "alignItems", "justifyContent", "style", "bordered", "rounded", "variant", "align", "as", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
-    const classes = useStyles(props);
-    const { className: responsiveClasses, style: responsiveStyle } = useResponsiveProps({
-        'margin-top': filterOutStringAndPicassoSpacing(top),
-        'margin-bottom': filterOutStringAndPicassoSpacing(bottom),
-        'margin-left': filterOutStringAndPicassoSpacing(left),
-        'margin-right': filterOutStringAndPicassoSpacing(right),
-        padding: filterOutStringAndPicassoSpacing(padded),
-        gap: filterOutStringAndPicassoSpacing(gap),
-    });
-    const baseSpacingClasses = getBaseSpacingClasses({ top, left, bottom, right, gap, padded }, classes);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cx(classes[`${variant}Variant`], {
-            [classes[`${padded}Padding`]]: typeof padded === 'string',
-            [classes[`${gap}Gap`]]: typeof gap === 'string',
-            [classes[`top${top}Margin`]]: typeof top === 'string',
-            [classes[`bottom${bottom}Margin`]]: typeof bottom === 'string',
-            [classes[`left${left}Margin`]]: typeof left === 'string',
-            [classes[`right${right}Margin`]]: typeof right === 'string',
-            [classes[`${align}TextAlign`]]: typeof align === 'string',
-            [classes[`${kebabToCamelCase(alignItems || '')}AlignItems`]]: alignItems,
-            [classes[`${kebabToCamelCase(justifyContent || '')}JustifyContent`]]: justifyContent,
-            [classes.bordered]: bordered,
-            [classes.rounded]: rounded,
-            [classes.flex]: flex,
-            [classes.inline]: inline,
-            [classes[kebabToCamelCase(direction || '')]]: direction && direction !== 'row',
-        }, baseSpacingClasses, responsiveClasses, className), style: Object.assign(Object.assign({}, responsiveStyle), style) }), children));
+    classes: externalClasses } = props, rest = __rest(props, ["children", "className", "inline", "flex", "direction", "alignItems", "justifyContent", "style", "bordered", "rounded", "variant", "align", "as", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
+    const spacingProps = { gap, padded, top, bottom, right, left };
+    const isBorderedVariant = !variant || variant === 'white' || variant === 'transparent';
+    const getDisplayValue = (isInline, isFlex) => {
+        return isFlex
+            ? isInline
+                ? 'inline-flex'
+                : 'flex'
+            : isInline
+                ? 'inline-block'
+                : '';
+    };
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: twMerge(variant && variantClassesByColor[variant], getSpacingClasses(spacingProps), typeof align === 'string' && alignmentClasses.textAlign[align], alignItems && alignmentClasses.alignItems[alignItems], justifyContent && alignmentClasses.justifyContent[justifyContent], bordered &&
+            isBorderedVariant &&
+            'border border-solid border-gray-200', rounded && 'rounded-md', getDisplayValue(inline, flex), direction &&
+            direction !== 'row' &&
+            alignmentClasses.direction[direction], className), style: Object.assign(Object.assign({}, getSpacingStyles(spacingProps)), style) }), children));
 }));
@@ -69,0 +44,0 @@ Container.displayName = 'Container';

dist-package/src/Container/styles.d.ts

@@ -1,2 +0,1 @@
-import type { Theme } from '@material-ui/core/styles';
 declare const alignItemsVariants: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"];
@@ -8,4 +7,33 @@ declare const justifyContentVariants: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
 export declare type JustifyContentType = (typeof justifyContentVariants)[number];
-declare const _default: ({ palette, sizes: { borderRadius } }: Theme) => import("@material-ui/styles").StyleRules<{}, string>;
-export default _default;
+export declare const alignmentClasses: {
+    readonly alignItems: {
+        readonly 'flex-start': "items-start";
+        readonly 'flex-end': "items-end";
+        readonly center: "items-center";
+        readonly stretch: "items-stretch";
+        readonly baseline: "items-baseline";
+    };
+    readonly textAlign: {
+        readonly inherit: "[text-align:inherit]";
+        readonly left: "text-left";
+        readonly center: "text-center";
+        readonly right: "text-right";
+        readonly justify: "text-justify";
+    };
+    readonly justifyContent: {
+        readonly center: "justify-center";
+        readonly 'flex-start': "justify-start";
+        readonly 'flex-end': "justify-end";
+        readonly 'space-between': "justify-between";
+        readonly 'space-around': "justify-around";
+        readonly 'space-evenly': "justify-evenly";
+    };
+    readonly direction: {
+        readonly column: "flex-col";
+        readonly 'row-reverse': "flex-row-reverse";
+        readonly 'column-reverse': "flex-col-reverse";
+    };
+};
+export declare const variantClassesByColor: Record<VariantType, string>;
+export {};
 //# sourceMappingURL=styles.d.ts.map

dist-package/src/Container/styles.js

@@ -1,11 +0,1 @@
-import { createStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core';
-import { spacingToRem, spacings, kebabToCamelCase, snakeToCamelCase, } from '@toptal/picasso-provider';
-const textAlignVariants = [
-    'inherit',
-    'left',
-    'center',
-    'right',
-    'justify',
-];
 const alignItemsVariants = [
@@ -35,103 +25,40 @@ 'flex-start',
 ];
-const colorVariant = (colorOptions) => {
-    var _a;
-    if (!colorOptions) {
-        return {};
-    }
-    return {
-        backgroundColor: (_a = colorOptions.lighter2) !== null && _a !== void 0 ? _a : colorOptions.lighter,
-    };
+export const alignmentClasses = {
+    alignItems: {
+        'flex-start': 'items-start',
+        'flex-end': 'items-end',
+        center: 'items-center',
+        stretch: 'items-stretch',
+        baseline: 'items-baseline',
+    },
+    textAlign: {
+        inherit: '[text-align:inherit]',
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+        justify: 'text-justify',
+    },
+    justifyContent: {
+        center: 'justify-center',
+        'flex-start': 'justify-start',
+        'flex-end': 'justify-end',
+        'space-between': 'justify-between',
+        'space-around': 'justify-around',
+        'space-evenly': 'justify-evenly',
+    },
+    direction: {
+        column: 'flex-col',
+        'row-reverse': 'flex-row-reverse',
+        'column-reverse': 'flex-col-reverse',
+    },
 };
-const directionVariants = ['top', 'left', 'bottom', 'right'];
-const spacingVariants = [
-    'xsmall',
-    'small',
-    'medium',
-    'large',
-    'xlarge',
-];
-const paddings = spacingVariants.reduce((acc, variant) => {
-    acc[`${variant}Padding`] = {
-        padding: spacingToRem(variant),
-    };
-    return acc;
-}, Object.create(null));
-const basePaddings = Object.keys(spacings).reduce((acc, spacingKey) => {
-    acc[`${snakeToCamelCase(spacingKey)}Padding`] = {
-        padding: spacingToRem(spacings[spacingKey]),
-    };
-    return acc;
-}, Object.create(null));
-const gaps = spacingVariants.reduce((acc, variant) => {
-    acc[`${variant}Gap`] = {
-        gap: spacingToRem(variant),
-    };
-    return acc;
-}, Object.create(null));
-const baseGaps = Object.keys(spacings).reduce((acc, spacingKey) => {
-    acc[`${snakeToCamelCase(spacingKey)}Gap`] = {
-        gap: spacingToRem(spacings[spacingKey]),
-    };
-    return acc;
-}, Object.create(null));
-const marginClassDef = (direction, spacing) => ({
-    [`margin${capitalize(direction)}`]: spacingToRem(spacing),
-});
-const marginClasses = (direction) => {
-    return {
-        [`${direction}${'xsmall'}Margin`]: marginClassDef(direction, 'xsmall'),
-        [`${direction}${'small'}Margin`]: marginClassDef(direction, 'small'),
-        [`${direction}${'medium'}Margin`]: marginClassDef(direction, 'medium'),
-        [`${direction}${'large'}Margin`]: marginClassDef(direction, 'large'),
-        [`${direction}${'xlarge'}Margin`]: marginClassDef(direction, 'xlarge'),
-    };
+export const variantClassesByColor = {
+    white: 'bg-white',
+    red: 'bg-red-100 border border-solid border-red-150',
+    green: 'bg-green-100 border border-solid border-green-150',
+    yellow: 'bg-yellow-100 border border-solid border-yellow-150',
+    blue: 'bg-blue-100 border border-solid border-blue-150',
+    grey: 'bg-gray-200 border border-solid border-gray-400',
+    transparent: '',
 };
-const baseMarginClasses = (direction) => {
-    return Object.keys(spacings).reduce((acc, spacingKey) => {
-        acc[`${direction}${snakeToCamelCase(spacingKey, true)}Margin`] = {
-            [`margin${capitalize(direction)}`]: spacingToRem(spacings[spacingKey]),
-        };
-        return acc;
-    }, Object.create(null));
-};
-const margins = Object.assign(Object.assign(Object.assign(Object.assign({}, marginClasses('top')), marginClasses('left')), marginClasses('bottom')), marginClasses('right'));
-const baseMargins = Object.assign(Object.assign(Object.assign(Object.assign({}, baseMarginClasses('top')), baseMarginClasses('left')), baseMarginClasses('bottom')), baseMarginClasses('right'));
-const alignItems = {};
-alignItemsVariants.forEach(variant => {
-    alignItems[`${kebabToCamelCase(variant)}AlignItems`] = {
-        alignItems: variant,
-    };
-});
-const textAlignItems = {};
-textAlignVariants.forEach(variant => {
-    textAlignItems[`${variant}TextAlign`] = {
-        textAlign: variant,
-    };
-});
-const justifyContent = {};
-justifyContentVariants.forEach(variant => {
-    justifyContent[`${kebabToCamelCase(variant)}JustifyContent`] = {
-        justifyContent: variant,
-    };
-});
-export default ({ palette, sizes: { borderRadius } }) => createStyles(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ bordered: {
-        border: `1px solid ${palette.grey.lighter2}`,
-    }, rounded: {
-        borderRadius: borderRadius.medium,
-    }, flex: {
-        display: 'flex',
-        '&$inline': {
-            display: 'inline-flex',
-        },
-    }, column: {
-        flexDirection: 'column',
-    }, rowReverse: {
-        flexDirection: 'row-reverse',
-    }, columnReverse: {
-        flexDirection: 'column-reverse',
-    }, inline: {
-        display: 'inline-block',
-    }, whiteVariant: {
-        backgroundColor: palette.common.white,
-    }, redVariant: colorVariant(palette.red), greenVariant: colorVariant(palette.green), yellowVariant: colorVariant(palette.yellow), blueVariant: colorVariant(palette.blue), greyVariant: colorVariant(palette.grey) }, paddings), basePaddings), margins), baseMargins), alignItems), justifyContent), textAlignItems), gaps), baseGaps));
 //# sourceMappingURL=styles.js.map

dist-package/src/Container/utils/index.d.ts

@@ -1,3 +0,3 @@
-export { default as getBaseSpacingClasses } from './get-base-spacing-classes';
 export { default as filterOutStringAndPicassoSpacing } from './filter-out-strings-and-picasso-spacings';
+export * from './get-spacing-classes';
 //# sourceMappingURL=index.d.ts.map

dist-package/src/Container/utils/index.js

@@ -1,3 +0,3 @@
-export { default as getBaseSpacingClasses } from './get-base-spacing-classes';
 export { default as filterOutStringAndPicassoSpacing } from './filter-out-strings-and-picasso-spacings';
+export * from './get-spacing-classes';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@toptal/picasso-container",
-  "version": "1.0.4-alpha-fx-null-fix-tag-7b2900a3d.25+7b2900a3d",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Container",
@@ -29,13 +29,13 @@ "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-null-fix-tag-7b2900a3d.25+7b2900a3d",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.1.1",
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-fx-null-fix-tag-7b2900a3d.33+7b2900a3d",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-fix-tag-7b2900a3d.25+7b2900a3d"
+    "@toptal/picasso-provider": "5.0.0",
+    "@toptal/picasso-test-utils": "1.1.1"
   },
@@ -49,4 +49,3 @@ "publishConfig": {
     "src"
-  ],
-  "gitHead": "7b2900a3d34f5627022f65bf3cbaa23b53aa48b8"
+  ]
 }

src/Container/styles.ts

@@ -1,23 +0,1 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import type { Color } from '@material-ui/core';
-import { capitalize } from '@material-ui/core'
-import type { SimplePaletteColorOptions } from '@material-ui/core/styles/createPalette'
-import {
-  spacingToRem,
-  type DeprecatedSpacingType,
-  type PicassoSpacing,
-  spacings,
-  kebabToCamelCase,
-  snakeToCamelCase,
-} from '@toptal/picasso-provider'
-
-const textAlignVariants = [
-  'inherit',
-  'left',
-  'center',
-  'right',
-  'justify',
-] as const
-
 const alignItemsVariants = [
@@ -53,178 +31,41 @@ 'flex-start',
 export type JustifyContentType = (typeof justifyContentVariants)[number]
-type MapOfClasses = Record<string, Record<string, string>>
 
-const colorVariant = (colorOptions?: SimplePaletteColorOptions | Color) => {
-  if (!colorOptions) {
-    return {}
-  }
+export const alignmentClasses = {
+  alignItems: {
+    'flex-start': 'items-start',
+    'flex-end': 'items-end',
+    center: 'items-center',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+  },
+  textAlign: {
+    inherit: '[text-align:inherit]',
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+  },
+  justifyContent: {
+    center: 'justify-center',
+    'flex-start': 'justify-start',
+    'flex-end': 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+  },
+  direction: {
+    column: 'flex-col',
+    'row-reverse': 'flex-row-reverse',
+    'column-reverse': 'flex-col-reverse',
+  },
+} as const
 
-  return {
-    backgroundColor: colorOptions.lighter2 ?? colorOptions.lighter,
-  }
+export const variantClassesByColor: Record<VariantType, string> = {
+  white: 'bg-white',
+  red: 'bg-red-100 border border-solid border-red-150',
+  green: 'bg-green-100 border border-solid border-green-150',
+  yellow: 'bg-yellow-100 border border-solid border-yellow-150',
+  blue: 'bg-blue-100 border border-solid border-blue-150',
+  grey: 'bg-gray-200 border border-solid border-gray-400',
+  transparent: '',
 }
-
-const directionVariants = ['top', 'left', 'bottom', 'right'] as const
-
-const spacingVariants = [
-  'xsmall',
-  'small',
-  'medium',
-  'large',
-  'xlarge',
-] as const
-
-type Direction = (typeof directionVariants)[number]
-type Spacing = (typeof spacingVariants)[number]
-
-const paddings = spacingVariants.reduce((acc, variant) => {
-  acc[`${variant}Padding`] = {
-    padding: spacingToRem(variant as DeprecatedSpacingType),
-  }
-
-  return acc
-}, Object.create(null))
-
-const basePaddings = Object.keys(spacings).reduce((acc, spacingKey) => {
-  acc[`${snakeToCamelCase(spacingKey)}Padding`] = {
-    padding: spacingToRem(spacings[spacingKey] as PicassoSpacing),
-  }
-
-  return acc
-}, Object.create(null))
-
-const gaps = spacingVariants.reduce((acc, variant) => {
-  acc[`${variant}Gap`] = {
-    gap: spacingToRem(variant as DeprecatedSpacingType),
-  }
-
-  return acc
-}, Object.create(null))
-
-const baseGaps = Object.keys(spacings).reduce((acc, spacingKey) => {
-  acc[`${snakeToCamelCase(spacingKey)}Gap`] = {
-    gap: spacingToRem(spacings[spacingKey] as PicassoSpacing),
-  }
-
-  return acc
-}, Object.create(null))
-
-const marginClassDef = (direction: Direction, spacing: Spacing) => ({
-  [`margin${capitalize(direction)}`]: spacingToRem(spacing),
-})
-
-const marginClasses = (direction: Direction) => {
-  return {
-    [`${direction}${'xsmall'}Margin`]: marginClassDef(direction, 'xsmall'),
-    [`${direction}${'small'}Margin`]: marginClassDef(direction, 'small'),
-    [`${direction}${'medium'}Margin`]: marginClassDef(direction, 'medium'),
-    [`${direction}${'large'}Margin`]: marginClassDef(direction, 'large'),
-    [`${direction}${'xlarge'}Margin`]: marginClassDef(direction, 'xlarge'),
-  }
-}
-
-const baseMarginClasses = (direction: Direction) => {
-  return Object.keys(spacings).reduce((acc, spacingKey) => {
-    acc[`${direction}${snakeToCamelCase(spacingKey, true)}Margin`] = {
-      [`margin${capitalize(direction)}`]: spacingToRem(spacings[spacingKey]),
-    }
-
-    return acc
-  }, Object.create(null))
-}
-
-const margins: MapOfClasses = {
-  ...marginClasses('top'),
-  ...marginClasses('left'),
-  ...marginClasses('bottom'),
-  ...marginClasses('right'),
-}
-
-const baseMargins: MapOfClasses = {
-  ...baseMarginClasses('top'),
-  ...baseMarginClasses('left'),
-  ...baseMarginClasses('bottom'),
-  ...baseMarginClasses('right'),
-}
-
-const alignItems: MapOfClasses = {}
-
-alignItemsVariants.forEach(variant => {
-  alignItems[`${kebabToCamelCase(variant)}AlignItems`] = {
-    alignItems: variant,
-  }
-})
-
-const textAlignItems: MapOfClasses = {}
-
-textAlignVariants.forEach(variant => {
-  textAlignItems[`${variant}TextAlign`] = {
-    textAlign: variant,
-  }
-})
-
-const justifyContent: MapOfClasses = {}
-
-justifyContentVariants.forEach(variant => {
-  justifyContent[`${kebabToCamelCase(variant)}JustifyContent`] = {
-    justifyContent: variant,
-  }
-})
-
-export default ({ palette, sizes: { borderRadius } }: Theme) =>
-  createStyles({
-    bordered: {
-      border: `1px solid ${palette.grey.lighter2}`,
-    },
-
-    rounded: {
-      borderRadius: borderRadius.medium,
-    },
-
-    flex: {
-      display: 'flex',
-
-      '&$inline': {
-        display: 'inline-flex',
-      },
-    },
-
-    column: {
-      flexDirection: 'column',
-    },
-
-    rowReverse: {
-      flexDirection: 'row-reverse',
-    },
-
-    columnReverse: {
-      flexDirection: 'column-reverse',
-    },
-
-    inline: {
-      display: 'inline-block',
-    },
-
-    whiteVariant: {
-      backgroundColor: palette.common.white,
-    },
-
-    redVariant: colorVariant(palette.red),
-
-    greenVariant: colorVariant(palette.green),
-
-    yellowVariant: colorVariant(palette.yellow),
-
-    blueVariant: colorVariant(palette.blue),
-
-    greyVariant: colorVariant(palette.grey),
-
-    ...paddings,
-    ...basePaddings,
-    ...margins,
-    ...baseMargins,
-    ...alignItems,
-    ...justifyContent,
-    ...textAlignItems,
-    ...gaps,
-    ...baseGaps,
-  })

src/Container/utils/index.ts

@@ -1,2 +0,3 @@
-export { default as getBaseSpacingClasses } from './get-base-spacing-classes'
 export { default as filterOutStringAndPicassoSpacing } from './filter-out-strings-and-picasso-spacings'
+
+export * from './get-spacing-classes'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109204

increased by102.48%

Number of package files

53

increased by6%

Lines of code

3025

increased by176.51%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@alloc/quick-lru@5.2.0(transitive)

• + Added@isaacs/cliui@8.0.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@nodelib/fs.scandir@2.1.5(transitive)

• + Added@nodelib/fs.stat@2.0.5(transitive)

• + Added@nodelib/fs.walk@1.2.8(transitive)

• + Added@pkgjs/parseargs@0.11.0(transitive)

• + Added@toptal/picasso-shared@15.0.0(transitive)

• + Added@toptal/picasso-tailwind@3.0.0(transitive)

• + Added@toptal/picasso-tailwind-merge@1.2.0(transitive)

• + Added@toptal/picasso-utils@1.0.3(transitive)

• + Added@types/color@3.0.6(transitive)

• + Added@types/color-convert@2.0.4(transitive)

• + Added@types/color-name@1.1.5(transitive)

• + Addedansi-regex@5.0.16.1.0(transitive)

• + Addedansi-styles@4.3.06.2.1(transitive)

• + Addedany-promise@1.3.0(transitive)

• + Addedanymatch@3.1.3(transitive)

• + Addedap-style-title-case@1.1.2(transitive)

• + Addedarg@5.0.2(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedbrace-expansion@2.0.1(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedcamelcase-css@2.0.1(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedcommander@4.1.1(transitive)

• + Addedcross-spawn@7.0.3(transitive)

• + Addedcssesc@3.0.0(transitive)

• + Addeddidyoumean@1.2.2(transitive)

• + Addeddlv@1.1.3(transitive)

• + Addedeastasianwidth@0.2.0(transitive)

• + Addedemoji-regex@8.0.09.2.2(transitive)

• + Addedfast-glob@3.3.2(transitive)

• + Addedfastq@1.17.1(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedforeground-child@3.3.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglob@10.4.5(transitive)

• + Addedglob-parent@5.1.26.0.2(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-fullwidth-code-point@3.0.0(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedisexe@2.0.0(transitive)

• + Addedjackspeak@3.4.3(transitive)

• + Addedjiti@1.21.6(transitive)

• + Addedlilconfig@2.1.03.1.2(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlru-cache@10.4.3(transitive)

• + Addedmerge2@1.4.1(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addedminimatch@9.0.5(transitive)

• + Addedminipass@7.1.2(transitive)

• + Addedmz@2.7.0(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addednotistack@1.0.10(transitive)

• + Addedobject-hash@3.0.0(transitive)

• + Addedpackage-json-from-dist@1.0.1(transitive)

• + Addedpath-key@3.1.1(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-scurry@1.11.1(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpify@2.3.0(transitive)

• + Addedpirates@4.0.6(transitive)

• + Addedpostcss@8.4.47(transitive)

• + Addedpostcss-import@15.1.0(transitive)

• + Addedpostcss-js@4.0.1(transitive)

• + Addedpostcss-load-config@4.0.2(transitive)

• + Addedpostcss-nested@6.2.0(transitive)

• + Addedpostcss-selector-parser@6.1.2(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedqueue-microtask@1.2.3(transitive)

• + Addedread-cache@1.0.0(transitive)

• + Addedreaddirp@3.6.0(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedreusify@1.0.4(transitive)

• + Addedrun-parallel@1.2.0(transitive)

• + Addedshebang-command@2.0.0(transitive)

• + Addedshebang-regex@3.0.0(transitive)

• + Addedsignal-exit@4.1.0(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstring-width@4.2.35.1.2(transitive)

• + Addedstrip-ansi@6.0.17.1.0(transitive)

• + Addedsucrase@3.35.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtailwind-merge@2.5.4(transitive)

• + Addedtailwindcss@3.4.14(transitive)

• + Addedthenify@3.3.1(transitive)

• + Addedthenify-all@1.6.0(transitive)

• + Addedto-regex-range@5.0.1(transitive)

• + Addedts-interface-checker@0.1.13(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedwhich@2.0.2(transitive)

• + Addedwrap-ansi@7.0.08.1.0(transitive)

• + Addedyaml@2.6.0(transitive)

• - Removedclassnames@^2.5.1

• Updated@toptal/picasso-utils@1.0.3