diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
index 47dbfa642..5f91795b5 100644
--- a/packages/react/.storybook/preview-head.html
+++ b/packages/react/.storybook/preview-head.html
@@ -1,5 +1,5 @@
-
+
diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
index 8fa356960..8742cc531 100644
--- a/packages/react/.storybook/theme.js
+++ b/packages/react/.storybook/theme.js
@@ -9,7 +9,7 @@ export const buildTheme = (theme, mode) => create({
barBg: theme.color.surface,
barTextColor: theme.color.highEmphasis,
base: mode,
- brandTitle: 'Natura Design System',
+ brandTitle: 'Gaya Natura Design System',
colorPrimary: theme.color.primary,
colorSecondary: theme.color.secondary,
textColor: theme.color.highEmphasis,
diff --git a/packages/react/package.json b/packages/react/package.json
index 4370c5787..5235380ee 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -2,7 +2,7 @@
"name": "@naturacosmeticos/natds-react",
"displayName": "NatDS-React",
"description": "A collection of components from Natura Design System for React",
- "version": "2.58.1",
+ "version": "2.58.2-alpha.DSY-4495.1.0",
"private": false,
"keywords": [
"design-system",
@@ -57,8 +57,8 @@
"generate": "yarn plop --plopfile ./generators/plopfile.js"
},
"dependencies": {
- "@naturacosmeticos/natds-icons": "1.20.1",
- "@naturacosmeticos/natds-themes": "0.71.0",
+ "@naturacosmeticos/natds-icons": "1.22.1",
+ "@naturacosmeticos/natds-themes": "0.72.1",
"react-jss": "10.9.0"
},
"devDependencies": {
diff --git a/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap b/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
index e8dd4b43d..ec8cb79ce 100644
--- a/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
+++ b/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
@@ -401,28 +401,6 @@ Object {
"primaryDarkest": "#A67423",
"primaryLight": "#f6b854",
"primaryLightest": "#F8C675",
- "primitiveBlack": "#000000",
- "primitiveDarkGray100": "#7f7f7f",
- "primitiveDarkGray200": "#737373",
- "primitiveDarkGray300": "#676767",
- "primitiveDarkGray400": "#4e4e4e",
- "primitiveDarkGray50": "#8c8c8c",
- "primitiveDarkGray500": "#424242",
- "primitiveDarkGray600": "#363636",
- "primitiveDarkGray700": "#2a2a2a",
- "primitiveDarkGray800": "#1d1d1d",
- "primitiveDarkGray900": "#111111",
- "primitiveLightGray100": "#eeeeee",
- "primitiveLightGray200": "#e1e1e1",
- "primitiveLightGray300": "#d5d5d5",
- "primitiveLightGray400": "#c9c9c9",
- "primitiveLightGray50": "#fafafa",
- "primitiveLightGray500": "#c3c3c3",
- "primitiveLightGray600": "#bdbdbd",
- "primitiveLightGray700": "#b0b0b0",
- "primitiveLightGray800": "#a4a4a4",
- "primitiveLightGray900": "#989898",
- "primitiveWhite": "#ffffff",
"secondary": "#ff6b0b",
"secondaryDark": "#d65a09",
"secondaryDarkest": "#ad4907",
@@ -743,6 +721,87 @@ Object {
"letterSpacing": 1.92,
"lineHeight": 1.5,
},
+ "platform": Object {
+ "body1": Object {
+ "letterSpacing": 0.51,
+ },
+ "body2": Object {
+ "letterSpacing": 0.22,
+ },
+ "button": Object {
+ "letterSpacing": 1.23,
+ },
+ "caption": Object {
+ "letterSpacing": 0.38,
+ },
+ "heading1": Object {
+ "letterSpacing": 0,
+ },
+ "heading2": Object {
+ "letterSpacing": 0,
+ },
+ "heading3": Object {
+ "letterSpacing": 0,
+ },
+ "heading4": Object {
+ "letterSpacing": 0,
+ },
+ "heading5": Object {
+ "letterSpacing": 0,
+ },
+ "heading6": Object {
+ "letterSpacing": 0.24,
+ },
+ "overline": Object {
+ "letterSpacing": 1.92,
+ },
+ "subtitle1": Object {
+ "letterSpacing": 0.13,
+ },
+ "subtitle2": Object {
+ "letterSpacing": 0.11,
+ },
+ "typography": Object {
+ "fallback": Object {
+ "fontFamily": "Arial",
+ "fontWeight": 400,
+ },
+ "fontFamily": Object {
+ "code": "Roboto Mono",
+ "primary": "Roboto",
+ },
+ },
+ },
+ "private": Object {
+ "borderRadius": Object {
+ "circle": Object {
+ "huge": 48,
+ "hugeX": 64,
+ "hugeXX": 72,
+ "hugeXXX": 96,
+ "large": 32,
+ "largeX": 36,
+ "largeXX": 40,
+ "largeXXX": 44,
+ "medium": 24,
+ "mediumX": 28,
+ "micro": 2,
+ "none": 0,
+ "semi": 16,
+ "semiX": 20,
+ "small": 8,
+ "standard": 12,
+ "tiny": 4,
+ "veryHuge": 128,
+ },
+ },
+ "button": Object {
+ "borderRadius": 4,
+ },
+ "shortcut": Object {
+ "borderRadius": 28,
+ },
+ },
"progressIndicator": Object {
"color": Object {
"layer": "#ffffff",
@@ -989,6 +1048,199 @@ Object {
"tiny": 8,
"xLarge": 64,
},
+ "spectrum": Object {
+ "blue": Object {
+ "100": "#d0ebff",
+ "200": "#a5d8ff",
+ "300": "#74c0fc",
+ "400": "#4dabf7",
+ "50": "#e7f5ff",
+ "500": "#339af0",
+ "600": "#228be6",
+ "700": "#1c7ed6",
+ "800": "#1971c2",
+ "900": "#1864ab",
+ },
+ "color": Object {
+ "brand": Object {
+ "a": Object {
+ "dark": "#CD902C",
+ "darkest": "#A67423",
+ "light": "#F6B854",
+ "lightest": "#F8C675",
+ "main": "#F4AB34",
+ },
+ "b": Object {
+ "dark": "#D65A09",
+ "darkest": "#AD4907",
+ "light": "#FF8332",
+ "lightest": "#FF9A59",
+ "main": "#FF6B0B",
+ },
+ "c": Object {
+ "dark": "#D2D2D2",
+ "darkest": "#AAAAAA",
+ "light": "#FBFBFB",
+ "lightest": "#FCFCFC",
+ "main": "#FAFAFA",
+ },
+ "gradient": Object {
+ "primary": Object {
+ "angle": 101,
+ "end": "#FF6B0B",
+ "start": "#F4AB34",
+ "type": "linear",
+ },
+ },
+ },
+ },
+ "cyan": Object {
+ "100": "#c5f6fa",
+ "200": "#99e9f2",
+ "300": "#66d9e8",
+ "400": "#3bc9db",
+ "50": "#e3fafc",
+ "500": "#22b8cf",
+ "600": "#15aabf",
+ "700": "#1098ad",
+ "800": "#0c8599",
+ "900": "#0b7285",
+ },
+ "dark": "#000000",
+ "grape": Object {
+ "100": "#f3d9fa",
+ "200": "#eebefa",
+ "300": "#e599f7",
+ "400": "#da77f2",
+ "50": "#f8f0fc",
+ "500": "#cc5de8",
+ "600": "#be4bdb",
+ "700": "#ae3ec9",
+ "800": "#9c36b5",
+ "900": "#862e9c",
+ },
+ "gray": Object {
+ "100": "#f1f3f5",
+ "200": "#e9ecef",
+ "300": "#dee2e6",
+ "400": "#ced4da",
+ "50": "#f8f9fa",
+ "500": "#adb5bd",
+ "600": "#868e96",
+ "700": "#495057",
+ "800": "#343a40",
+ "900": "#212529",
+ },
+ "green": Object {
+ "100": "#d3f9d8",
+ "200": "#b2f2bb",
+ "300": "#8ce99a",
+ "400": "#69db7c",
+ "50": "#ebfbee",
+ "500": "#51cf66",
+ "600": "#40c057",
+ "700": "#37b24d",
+ "800": "#2f9e44",
+ "900": "#2b8a3e",
+ },
+ "indigo": Object {
+ "100": "#dbe4ff",
+ "200": "#bac8ff",
+ "300": "#91a7ff",
+ "400": "#748ffc",
+ "50": "#edf2ff",
+ "500": "#5c7cfa",
+ "600": "#4c6ef5",
+ "700": "#4263eb",
+ "800": "#3b5bdb",
+ "900": "#364fc7",
+ },
+ "light": "#ffffff",
+ "lime": Object {
+ "100": "#e9fac8",
+ "200": "#d8f5a2",
+ "300": "#c0eb75",
+ "400": "#a9e34b",
+ "50": "#f4fce3",
+ "500": "#94d82d",
+ "600": "#82c91e",
+ "700": "#74b816",
+ "800": "#66a80f",
+ "900": "#5c940d",
+ },
+ "orange": Object {
+ "100": "#ffe8cc",
+ "200": "#ffd8a8",
+ "300": "#ffc078",
+ "400": "#ffa94d",
+ "50": "#fff4e6",
+ "500": "#ff922b",
+ "600": "#fd7e14",
+ "700": "#f76707",
+ "800": "#e8590c",
+ "900": "#d9480f",
+ },
+ "pink": Object {
+ "100": "#ffdeeb",
+ "200": "#fcc2d7",
+ "300": "#faa2c1",
+ "400": "#f783ac",
+ "50": "#fff0f6",
+ "500": "#f06595",
+ "600": "#e64980",
+ "700": "#d6336c",
+ "800": "#c2255c",
+ "900": "#a61e4d",
+ },
+ "red": Object {
+ "100": "#ffe3e3",
+ "200": "#ffc9c9",
+ "300": "#ffa8a8",
+ "400": "#ff8787",
+ "50": "#fff5f5",
+ "500": "#ff6b6b",
+ "600": "#fa5252",
+ "700": "#f03e3e",
+ "800": "#e03131",
+ "900": "#c92a2a",
+ },
+ "teal": Object {
+ "100": "#c3fae8",
+ "200": "#96f2d7",
+ "300": "#63e6be",
+ "400": "#38d9a9",
+ "50": "#e6fcf5",
+ "500": "#20c997",
+ "600": "#12b886",
+ "700": "#0ca678",
+ "800": "#099268",
+ "900": "#087f5b",
+ },
+ "violet": Object {
+ "100": "#e5dbff",
+ "200": "#d0bfff",
+ "300": "#b197fc",
+ "400": "#9775fa",
+ "50": "#f3f0ff",
+ "500": "#845ef7",
+ "600": "#7950f2",
+ "700": "#7048e8",
+ "800": "#6741d9",
+ "900": "#5f3dc4",
+ },
+ "yellow": Object {
+ "100": "#fff3bf",
+ "200": "#ffec99",
+ "300": "#ffe066",
+ "400": "#ffd43b",
+ "50": "#fff9db",
+ "500": "#fcc419",
+ "600": "#fab005",
+ "700": "#f59f00",
+ "800": "#f08c00",
+ "900": "#e67700",
+ },
+ },
"subtitle1": Object {
"fontSize": 16,
"fontWeight": 500,
diff --git a/packages/react/src/components/IconButton/IconButton.stories.tsx b/packages/react/src/components/IconButton/IconButton.stories.tsx
index 4bc9192ef..28e982f50 100644
--- a/packages/react/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/react/src/components/IconButton/IconButton.stories.tsx
@@ -147,8 +147,29 @@ export const SearchIconButton: Story = (args) => {
{
filterOptions.map((names) => (
-
- ''} IconComponent={} />
+ <>
+
+
''}
+ IconComponent={}
+ />
+ {names.value}
+