@clds/avatar - npm Package Compare versions

Comparing version 0.53.5 to 0.56.0-beta.1

dist/Avatar.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { rgba } from 'polished';
 import { createContext, useContext } from 'react';
-import { default as styled, css } from 'styled-components';
-import { globalTheme, useMixin } from '@clds/component-theme';
+import { css, default as styled } from 'styled-components';
 import { FoundationContextProvider } from '@clds/design-system-foundations';
@@ -12,5 +11,5 @@ import { typographyMixin } from '@clds/typography';
   border-radius: 100%;
-  width: ${avatarSizeVariant((branch) => branch.width)};
-  height: ${avatarSizeVariant((branch) => branch.width)};
-  max-width: ${avatarSizeVariant((branch) => branch.width)};
+  width: ${(props) => avatarSizeVariant(props).width};
+  height: ${(props) => avatarSizeVariant(props).width};
+  max-width: ${(props) => avatarSizeVariant(props).width};
   display: flex;
@@ -20,5 +19,5 @@ justify-content: center;
   text-align: center;
-  ${avatarSizeVariant((branch) => typographyMixin(branch.typography))};
+  ${(props) => typographyMixin(avatarSizeVariant(props).typography)};
   font-weight: 500;
-  background-color: ${globalTheme.palette.secondary};
+  background-color: ${(props) => props.theme.palette.secondary};
   border: solid 1px rgba(0, 0, 0, 0.1);
@@ -47,3 +46,3 @@ ${({ backgroundColor }) => backgroundColor &&
     }
-    const iconSize = useMixin(avatarTheme[size].iconSize);
+    const iconSize = avatarTheme[size].iconSize;
     return (_jsx(FoundationContextProvider, { size: iconSize, children: props?.icon }));
@@ -50,0 +49,0 @@ };

dist/theme.d.ts

 import { TypographySize, TypographyType } from '@clds/typography';
 import { Size } from './Avatar.types.js';
-export declare const avatarTheme: import("libs/foundations/component-theme/src/api/createTheme.types.js").Compiled<import("@clds/component-theme").Mixin<{
+export declare const avatarTheme: {
     sm: {
@@ -28,35 +28,10 @@ width: string;
     };
-}>> & import("libs/foundations/component-theme/src/api/createTheme.types.js").MappedChildren<{
-    sm: {
-        width: string;
-        typography: {
-            type: TypographyType;
-            size: TypographySize;
-        };
-        iconSize: string;
-    };
-    md: {
-        width: string;
-        typography: {
-            type: TypographyType;
-            size: TypographySize;
-        };
-        iconSize: string;
-    };
-    lg: {
-        width: string;
-        typography: {
-            type: TypographyType;
-            size: TypographySize;
-        };
-        iconSize: string;
-    };
-}> & {
-    [idField]: import("libs/foundations/component-theme/src/types.js").ThemeId;
 };
-export declare const avatarSizeVariant: <R>(calculator?: ((value: {
+export declare const avatarSizeVariant: (props: {
+    size: Size;
+}) => {
     width: string;
     typography: {
-        type: string;
-        size: string;
+        type: TypographyType;
+        size: TypographySize;
     };
@@ -67,4 +42,4 @@ iconSize: string;
     typography: {
-        type: string;
-        size: string;
+        type: TypographyType;
+        size: TypographySize;
     };
@@ -75,10 +50,6 @@ iconSize: string;
     typography: {
-        type: string;
-        size: string;
+        type: TypographyType;
+        size: TypographySize;
     };
     iconSize: string;
-}, props: {
-    size: Size;
-}) => R) | undefined) => (props: {
-    size: Size;
-}) => any;
+};

dist/theme.js

@@ -1,2 +0,1 @@
-import { createTheme, createVariant } from '@clds/component-theme';
 const asTypography = (size, type) => ({
@@ -6,3 +5,3 @@ type,
 });
-export const avatarTheme = createTheme({
+export const avatarTheme = {
     sm: {
@@ -23,4 +22,4 @@ width: '24px',
     },
-});
-export const avatarSizeVariant = createVariant((props) => avatarTheme[props.size]);
+};
+export const avatarSizeVariant = (props) => avatarTheme[props.size];
 //# sourceMappingURL=theme.js.map

package.json

 {
   "name": "@clds/avatar",
   "description": "",
-  "version": "0.53.5",
+  "version": "0.56.0-beta.1",
   "author": "Cloudinary",
@@ -13,7 +13,7 @@ "main": "./dist/index.js",
     "polished": "3.7.2",
-    "@clds/common-definitions": "0.53.5",
-    "@clds/component-theme": "0.53.5",
-    "@clds/design-system-foundations": "0.53.5",
-    "@clds/icon": "0.53.5",
-    "@clds/typography": "0.53.5"
+    "@clds/common-definitions": "0.56.0-beta.1",
+    "@clds/component-theme": "0.56.0-beta.1",
+    "@clds/design-system-foundations": "0.56.0-beta.1",
+    "@clds/icon": "0.56.0-beta.1",
+    "@clds/typography": "0.56.0-beta.1"
   },
@@ -20,0 +20,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

73208

decreased by-3.57%

Lines of code

155

decreased by-16.67%

Dependency changes

• + Added@clds/blender@0.56.0-beta.1(transitive)

• + Added@clds/common-definitions@0.56.0-beta.1(transitive)

• + Added@clds/component-theme@0.56.0-beta.1(transitive)

• + Added@clds/design-system-foundations@0.56.0-beta.1(transitive)

• + Added@clds/icon@0.56.0-beta.1(transitive)

• + Added@clds/theme-helper@0.56.0-beta.1(transitive)

• + Added@clds/themes@0.56.0-beta.1(transitive)

• + Added@clds/typography@0.56.0-beta.1(transitive)

• - Removed@clds/blender@0.53.5(transitive)

• - Removed@clds/common-definitions@0.53.5(transitive)

• - Removed@clds/component-theme@0.53.5(transitive)

• - Removed@clds/design-system-foundations@0.53.5(transitive)

• - Removed@clds/icon@0.53.5(transitive)

• - Removed@clds/theme-helper@0.53.5(transitive)

• - Removed@clds/themes@0.53.5(transitive)

• - Removed@clds/typography@0.53.5(transitive)

• - Removeddeepmerge@4.3.1(transitive)

• Updated@clds/common-definitions@0.56.0-beta.1

• Updated@clds/component-theme@0.56.0-beta.1

• Updated@clds/design-system-foundations@0.56.0-beta.1

• Updated@clds/icon@0.56.0-beta.1

• Updated@clds/typography@0.56.0-beta.1