@gympass/yoga 7.111.1 → 7.113.0

package/cjs/Dropdown/Dropdown.theme.js

@@ -197,7 +197,7 @@ const Dropdown = ({
       font: {
         color: colors.text.primary,
         weight: fontWeights.medium,
-        size: fontSizes.medium
+        size: fontSizes.small
       }
     }
   }

package/cjs/Dropdown/native/Dropdown.js

@@ -104,7 +104,7 @@ const Selector = import_styled_components.default.View`
     ${selected ? `border-color: ${dropdown.selected.selector.border.color};` : ""};
   `}
 `;
-const Label = (0, import_styled_components.default)(import_Text.default)`
+const Label = (0, import_styled_components.default)(import_Text.default.Body2)`
   ${({
   disabled,
   selected,

package/cjs/Dropdown/native/Options.android.js

@@ -57,7 +57,7 @@ const Option = (0, import_styled_components.default)(import_List.default.Item)`
     background-color: ${isSelected ? `${dropdown.hover.option.backgroundColor}` : "transparent"};
   `}
 `;
-const OptionText = import_styled_components.default.Text`
+const OptionText = (0, import_styled_components.default)(import_Text.default.Body2)`
   ${({
   isSelected,
   theme: {
@@ -85,7 +85,7 @@ const Options = ({ options, selectedOption, onSelect }) => /* @__PURE__ */ (0, i
           OptionText,
           {
             isSelected: selectedOption && selectedOption.value === item.value,
-            as: selectedOption && selectedOption.value === item.value ? import_Text.default.Bold : import_Text.default.Regular,
+            bold: selectedOption && selectedOption.value === item.value,
             children: item.label
           }
         )

package/cjs/Stepper/Stepper.theme.js

@@ -21,7 +21,7 @@ __export(Stepper_theme_exports, {
   default: () => Stepper_theme_default
 });
 module.exports = __toCommonJS(Stepper_theme_exports);
-const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
+const Stepper = ({ colors, spacing, radii }) => ({
   padding: {
     left: spacing.xxlarge,
     right: spacing.xxlarge
@@ -30,7 +30,7 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   },
   dot: {
@@ -38,18 +38,14 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   },
   label: {
-    font: {
-      weight: fontWeights.bold,
-      size: fontSizes.xsmall
-    },
     color: {
       active: colors.primary,
       inactive: colors.elements.selectionAndIcons,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   }
 });

package/cjs/Stepper/native/Dots.js

@@ -32,8 +32,8 @@ __export(Dots_exports, {
 });
 module.exports = __toCommonJS(Dots_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_prop_types = require("prop-types");
 var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
 var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../Text"));
 var import_activeDot = __toESM(require("../activeDot"));
@@ -65,7 +65,7 @@ const Dot = import_styled_components.default.View(
     `;
   }
 );
-const Label = (0, import_styled_components.default)(import_Text.default.Bold)(
+const Label = (0, import_styled_components.default)(import_Text.default.Overline)(
   ({
     active,
     secondary,
@@ -81,7 +81,6 @@ const Label = (0, import_styled_components.default)(import_Text.default.Bold)(
       margin-top: 10px;
       margin-left: -40px;
       color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
-      font-size: ${stepper.label.font.size}px;
       text-align: center;
     `;
   }

package/cjs/Stepper/web/Dots.js

@@ -35,8 +35,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_prop_types = require("prop-types");
 var import_styled_components = __toESM(require("styled-components"));
-var import_activeDot = __toESM(require("../activeDot"));
 var import_Text = __toESM(require("../../Text"));
+var import_activeDot = __toESM(require("../activeDot"));
 const Dot = import_styled_components.default.div`
   ${({
   theme: {
@@ -51,20 +51,10 @@ const Dot = import_styled_components.default.div`
     border-radius: ${stepper.dot.radius}px;
   `}
 `;
-const Label = (0, import_styled_components.default)(import_Text.default.Bold)`
-  ${({
-  theme: {
-    yoga: {
-      components: { stepper }
-    }
-  }
-}) => import_styled_components.css`
-    width: 95px;
+const Label = (0, import_styled_components.default)(import_Text.default.Overline)`
+  width: 95px;
 
-    font-size: ${stepper.label.font.size}px;
-
-    transform: translateX(-50%);
-  `}
+  transform: translateX(-50%);
 `;
 const DotWrapper = import_styled_components.default.div`
   ${({

package/cjs/Theme/theme/v3theme.js

@@ -261,6 +261,39 @@ const v3theme = (0, import_themeGenerator.default)((tokens) => ({
           weight: tokens.fontWeights.medium
         }
       }
+    },
+    dropdown: {
+      input: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small
+        }
+      },
+      option: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small,
+          weight: tokens.fontWeights.medium
+        }
+      },
+      backdrop: {
+        content: {
+          title: {
+            font: {
+              weight: tokens.fontWeights.bold,
+              size: tokens.fontSizes.medium
+            }
+          }
+        }
+      },
+      selected: {
+        option: {
+          font: {
+            weight: tokens.fontWeights.bold,
+            size: tokens.fontSizes.small
+          }
+        }
+      }
     }
   }
 }));

package/esm/Dropdown/Dropdown.theme.js

@@ -174,7 +174,7 @@ const Dropdown = ({
       font: {
         color: colors.text.primary,
         weight: fontWeights.medium,
-        size: fontSizes.medium
+        size: fontSizes.small
       }
     }
   }

package/esm/Dropdown/native/Dropdown.js

@@ -81,7 +81,7 @@ const Selector = styled.View`
     ${selected ? `border-color: ${dropdown.selected.selector.border.color};` : ""};
   `}
 `;
-const Label = styled(Text)`
+const Label = styled(Text.Body2)`
   ${({
   disabled,
   selected,

package/esm/Dropdown/native/Options.android.js

@@ -24,7 +24,7 @@ const Option = styled(List.Item)`
     background-color: ${isSelected ? `${dropdown.hover.option.backgroundColor}` : "transparent"};
   `}
 `;
-const OptionText = styled.Text`
+const OptionText = styled(Text.Body2)`
   ${({
   isSelected,
   theme: {
@@ -52,7 +52,7 @@ const Options = ({ options, selectedOption, onSelect }) => /* @__PURE__ */ jsx(
           OptionText,
           {
             isSelected: selectedOption && selectedOption.value === item.value,
-            as: selectedOption && selectedOption.value === item.value ? Text.Bold : Text.Regular,
+            bold: selectedOption && selectedOption.value === item.value,
             children: item.label
           }
         )

package/esm/Stepper/Stepper.theme.js

@@ -1,4 +1,4 @@
-const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
+const Stepper = ({ colors, spacing, radii }) => ({
   padding: {
     left: spacing.xxlarge,
     right: spacing.xxlarge
@@ -7,7 +7,7 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   },
   dot: {
@@ -15,18 +15,14 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   },
   label: {
-    font: {
-      weight: fontWeights.bold,
-      size: fontSizes.xsmall
-    },
     color: {
       active: colors.primary,
       inactive: colors.elements.selectionAndIcons,
-      secondary: colors.medium
+      secondary: colors.secondary
     }
   }
 });

package/esm/Stepper/native/Dots.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { arrayOf, bool, number, string } from "prop-types";
 import React from "react";
+import { arrayOf, bool, number, string } from "prop-types";
 import styled, { css } from "styled-components";
 import Text from "../../Text";
 import activeDot from "../activeDot";
@@ -32,7 +32,7 @@ const Dot = styled.View(
     `;
   }
 );
-const Label = styled(Text.Bold)(
+const Label = styled(Text.Overline)(
   ({
     active,
     secondary,
@@ -48,7 +48,6 @@ const Label = styled(Text.Bold)(
       margin-top: 10px;
       margin-left: -40px;
       color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
-      font-size: ${stepper.label.font.size}px;
       text-align: center;
     `;
   }

package/esm/Stepper/web/Dots.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { number, arrayOf, string, bool } from "prop-types";
+import { arrayOf, bool, number, string } from "prop-types";
 import styled, { css } from "styled-components";
-import activeDot from "../activeDot";
 import Text from "../../Text";
+import activeDot from "../activeDot";
 const Dot = styled.div`
   ${({
   theme: {
@@ -18,20 +18,10 @@ const Dot = styled.div`
     border-radius: ${stepper.dot.radius}px;
   `}
 `;
-const Label = styled(Text.Bold)`
-  ${({
-  theme: {
-    yoga: {
-      components: { stepper }
-    }
-  }
-}) => css`
-    width: 95px;
+const Label = styled(Text.Overline)`
+  width: 95px;
 
-    font-size: ${stepper.label.font.size}px;
-
-    transform: translateX(-50%);
-  `}
+  transform: translateX(-50%);
 `;
 const DotWrapper = styled.div`
   ${({

package/esm/Theme/theme/v3theme.js

@@ -228,6 +228,39 @@ const v3theme = createTheme((tokens) => ({
           weight: tokens.fontWeights.medium
         }
       }
+    },
+    dropdown: {
+      input: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small
+        }
+      },
+      option: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small,
+          weight: tokens.fontWeights.medium
+        }
+      },
+      backdrop: {
+        content: {
+          title: {
+            font: {
+              weight: tokens.fontWeights.bold,
+              size: tokens.fontSizes.medium
+            }
+          }
+        }
+      },
+      selected: {
+        option: {
+          font: {
+            weight: tokens.fontWeights.bold,
+            size: tokens.fontSizes.small
+          }
+        }
+      }
     }
   }
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.111.1",
+  "version": "7.113.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "e892002f014e3951eeaf192df5c22afeaa1d1721",
+  "gitHead": "4e633d4c26ba8948f69ac53f785e4210e2e82db8",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"