@wecareu/icons 1.0.6 → 1.0.7

package/dist/index.js

@@ -323,13 +323,20 @@ var fontSizes = {
   display: 32
 };
 var lineHeights = {
-  tight: 1.2,
-  normal: 1.4,
-  relaxed: 1.6,
-  loose: 1.8,
-  caption: 1.4,
-  body: 1.5,
-  heading: 1.2
+  displayLarge: 38,
+  displayMedium: 29,
+  headingLarge: 28,
+  headingMedium: 25,
+  headingSmall: 22,
+  bodyLarge: 29,
+  bodyMedium: 22,
+  bodySmall: 20,
+  labelLarge: 22,
+  labelMedium: 20,
+  labelSmall: 17,
+  buttonLarge: 22,
+  buttonMedium: 20,
+  caption: 17
 };
 var fontWeights = {
   regular: "400",
@@ -341,86 +348,86 @@ var textStyles = {
   displayLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.huge,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayLarge
   },
   displayMedium: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.heading,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayMedium
   },
   headingLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.title,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.headingLarge
   },
   headingMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.subtitle,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingMedium
   },
   headingSmall: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingSmall
   },
   bodyLarge: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.lg,
-    lineHeight: lineHeights.relaxed,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyLarge
   },
   bodyMedium: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.body,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyMedium
   },
   bodySmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodySmall
   },
   labelLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelLarge
   },
   labelMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelMedium
   },
   labelSmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.xs,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.labelSmall
   },
   buttonLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonLarge
   },
   buttonMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonMedium
   },
   caption: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.caption,
-    lineHeight: lineHeights.caption,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.caption
   }
 };
 var spacing = {
@@ -1238,16 +1245,24 @@ var import_jsx_runtime70 = require("react/jsx-runtime");
 var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   const theme = useTheme();
   const Cmp = ICONS[name];
-  const extra = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+  const iconColor = color || strokeProp || theme.colors.text.primary || "#000000";
+  const dimensions = {};
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
-  const iconColor = color || theme.colors.text.primary || "#000000";
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Cmp, { ...extra, testID, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Cmp,
+    {
+      ...dimensions,
+      color: iconColor,
+      fill: fillProp ?? "none",
+      stroke: strokeProp ?? iconColor,
+      testID,
+      ...svgRest
+    }
+  );
 };
 
 // src/assets/lottie/dots.json

package/dist/index.mjs

@@ -287,13 +287,20 @@ var fontSizes = {
   display: 32
 };
 var lineHeights = {
-  tight: 1.2,
-  normal: 1.4,
-  relaxed: 1.6,
-  loose: 1.8,
-  caption: 1.4,
-  body: 1.5,
-  heading: 1.2
+  displayLarge: 38,
+  displayMedium: 29,
+  headingLarge: 28,
+  headingMedium: 25,
+  headingSmall: 22,
+  bodyLarge: 29,
+  bodyMedium: 22,
+  bodySmall: 20,
+  labelLarge: 22,
+  labelMedium: 20,
+  labelSmall: 17,
+  buttonLarge: 22,
+  buttonMedium: 20,
+  caption: 17
 };
 var fontWeights = {
   regular: "400",
@@ -305,86 +312,86 @@ var textStyles = {
   displayLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.huge,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayLarge
   },
   displayMedium: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.heading,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayMedium
   },
   headingLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.title,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.headingLarge
   },
   headingMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.subtitle,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingMedium
   },
   headingSmall: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingSmall
   },
   bodyLarge: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.lg,
-    lineHeight: lineHeights.relaxed,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyLarge
   },
   bodyMedium: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.body,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyMedium
   },
   bodySmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodySmall
   },
   labelLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelLarge
   },
   labelMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelMedium
   },
   labelSmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.xs,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.labelSmall
   },
   buttonLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonLarge
   },
   buttonMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonMedium
   },
   caption: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.caption,
-    lineHeight: lineHeights.caption,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.caption
   }
 };
 var spacing = {
@@ -1202,16 +1209,24 @@ import { jsx as jsx70 } from "react/jsx-runtime";
 var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   const theme = useTheme();
   const Cmp = ICONS[name];
-  const extra = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+  const iconColor = color || strokeProp || theme.colors.text.primary || "#000000";
+  const dimensions = {};
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
-  const iconColor = color || theme.colors.text.primary || "#000000";
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-  return /* @__PURE__ */ jsx70(Cmp, { ...extra, testID, ...rest });
+  return /* @__PURE__ */ jsx70(
+    Cmp,
+    {
+      ...dimensions,
+      color: iconColor,
+      fill: fillProp ?? "none",
+      stroke: strokeProp ?? iconColor,
+      testID,
+      ...svgRest
+    }
+  );
 };
 
 // src/index.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wecareu/icons",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Sistema de ícones SVG para WeCareU Design System",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Icon.tsx

@@ -13,18 +13,26 @@ export const Icon: React.FC<Props> = ({ name, size, color, testID = 'icon', ...r
   const theme = useTheme();
   const Cmp = ICONS[name];
 
-  const extra: SvgProps = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+
+  const iconColor = color || strokeProp || theme.colors.text.primary || '#000000';
+  const dimensions: Pick<SvgProps, 'height' | 'width'> = {};
+
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
 
-  const iconColor = color || theme.colors.text.primary || '#000000';
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-
-  return <Cmp {...extra} testID={testID} {...rest} />;
+  return (
+    <Cmp
+      {...dimensions}
+      color={iconColor}
+      fill={fillProp ?? 'none'}
+      stroke={strokeProp ?? iconColor}
+      testID={testID}
+      {...svgRest}
+    />
+  );
 };
 
 export type { IconName };