wex-ui-lib 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/index.cjs.js +2296 -0
  2. package/dist/index.cjs.js.map +1 -0
  3. package/dist/index.d.ts +4 -5
  4. package/dist/index.esm.js +2273 -0
  5. package/dist/index.esm.js.map +1 -0
  6. package/dist/types/components/Button/index.d.ts +3 -0
  7. package/dist/types/components/Hero/index.d.ts +3 -0
  8. package/dist/types/components/Navbar/index.d.ts +3 -0
  9. package/dist/types/components/Showcase/index.d.ts +3 -0
  10. package/{src/index.ts → dist/types/index.d.ts} +1 -2
  11. package/dist/types/samples/Holik/Homepage.d.ts +2 -0
  12. package/dist/{shared → types/shared}/components/Fade.d.ts +1 -1
  13. package/dist/{shared → types/shared}/components/Icon.d.ts +2 -1
  14. package/package.json +28 -19
  15. package/.storybook/main.ts +0 -19
  16. package/.storybook/manager-head.html +0 -1
  17. package/.storybook/preview.ts +0 -15
  18. package/dist/components/Button/index.d.ts +0 -2
  19. package/dist/components/Hero/index.d.ts +0 -2
  20. package/dist/components/Navbar/index.d.ts +0 -2
  21. package/dist/components/Showcase/index.d.ts +0 -2
  22. package/dist/index.js +0 -11
  23. package/dist/index.js.map +0 -1
  24. package/dist/index.mjs +0 -11
  25. package/dist/index.mjs.map +0 -1
  26. package/dist/samples/Holik/Homepage.d.ts +0 -1
  27. package/public/logo.png +0 -0
  28. package/rollup.config.mjs +0 -42
  29. package/src/components/Button/index.stories.tsx +0 -54
  30. package/src/components/Button/index.tsx +0 -157
  31. package/src/components/Button/index.types.ts +0 -11
  32. package/src/components/Hero/index.stories.tsx +0 -40
  33. package/src/components/Hero/index.tsx +0 -76
  34. package/src/components/Hero/index.types.ts +0 -13
  35. package/src/components/Navbar/index.stories.tsx +0 -59
  36. package/src/components/Navbar/index.tsx +0 -196
  37. package/src/components/Navbar/index.types.ts +0 -27
  38. package/src/components/Showcase/index.stories.tsx +0 -54
  39. package/src/components/Showcase/index.tsx +0 -66
  40. package/src/components/Showcase/index.types.ts +0 -9
  41. package/src/samples/Holik/Homepage.tsx +0 -141
  42. package/src/samples/Holik/index.stories.tsx +0 -17
  43. package/src/shared/components/Fade.tsx +0 -48
  44. package/src/shared/components/Icon.tsx +0 -81
  45. package/src/shared/styles/animations.ts +0 -80
  46. package/src/shared/styles/global.css +0 -6
  47. package/src/shared/styles/theme.ts +0 -7
  48. package/src/shared/types.ts +0 -18
  49. package/src/shared/utils/formatters.ts +0 -12
  50. package/src/shared/utils/useIntObs.ts +0 -112
  51. package/tsconfig.json +0 -25
  52. /package/dist/{components → types/components}/Button/index.stories.d.ts +0 -0
  53. /package/dist/{components → types/components}/Button/index.types.d.ts +0 -0
  54. /package/dist/{components → types/components}/Hero/index.stories.d.ts +0 -0
  55. /package/dist/{components → types/components}/Hero/index.types.d.ts +0 -0
  56. /package/dist/{components → types/components}/Navbar/index.stories.d.ts +0 -0
  57. /package/dist/{components → types/components}/Navbar/index.types.d.ts +0 -0
  58. /package/dist/{components → types/components}/Showcase/index.stories.d.ts +0 -0
  59. /package/dist/{components → types/components}/Showcase/index.types.d.ts +0 -0
  60. /package/dist/{samples → types/samples}/Holik/index.stories.d.ts +0 -0
  61. /package/dist/{shared → types/shared}/styles/animations.d.ts +0 -0
  62. /package/dist/{shared → types/shared}/styles/theme.d.ts +0 -0
  63. /package/dist/{shared → types/shared}/types.d.ts +0 -0
  64. /package/dist/{shared → types/shared}/utils/formatters.d.ts +0 -0
  65. /package/dist/{shared → types/shared}/utils/useIntObs.d.ts +0 -0
@@ -1,54 +0,0 @@
1
- import React from 'react'
2
- import Button from '.'
3
- import { ButtonProps } from './index.types'
4
- import { Meta, StoryObj } from '@storybook/react/*'
5
-
6
- type StoryProps = ButtonProps & { buttonText: string }
7
-
8
- const meta: Meta<StoryProps> = {
9
- title: 'Components/Button',
10
- component: Button,
11
- argTypes: { onClick: { action: 'Button clicked!' } },
12
- parameters: {
13
- layout: 'centered',
14
- },
15
- tags: ['autodocs'],
16
- }
17
-
18
- export default meta
19
-
20
- type Story = StoryObj<StoryProps>
21
-
22
- export const Default: Story = {
23
- args: {
24
- buttonText: 'Button',
25
- type: 'default',
26
- },
27
- render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
28
- }
29
-
30
- export const Rounded: Story = {
31
- args: {
32
- buttonText: 'Button',
33
- type: 'rounded',
34
- arrow: 'arrow-caret'
35
- },
36
- render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
37
- }
38
-
39
- export const Pill: Story = {
40
- args: {
41
- buttonText: 'Button',
42
- type: 'pill',
43
- },
44
- render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
45
- }
46
-
47
- export const Underlined: Story = {
48
- args: {
49
- buttonText: 'Button',
50
- type: 'underlined',
51
- arrow: 'arrow-long'
52
- },
53
- render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
54
- }
@@ -1,157 +0,0 @@
1
- import React from "react"
2
- import styled from '@emotion/styled';
3
- import Icon from '../../shared/components/Icon';
4
- import { theme } from '../../shared/styles/theme';
5
- import { ButtonProps } from './index.types';
6
- import { formatText } from "../../shared/utils/formatters";
7
-
8
- export default function Button(props: ButtonProps) {
9
- const {
10
- children,
11
- onClick,
12
- type,
13
- colors,
14
- arrow,
15
- font = {
16
- size: '16px',
17
- casing: 'uppercase',
18
- weight: '600'
19
- },
20
- } = props
21
-
22
- switch (type) {
23
- default:
24
- return (
25
- <DefaultButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
26
- {font.casing ? formatText(children as string, font.casing) : children}
27
- {arrow &&
28
- <Icon icon={arrow} color={colors?.text || theme.white} />
29
- }
30
- </DefaultButton>
31
- )
32
- case "rounded":
33
- return (
34
- <RoundedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
35
- {font.casing ? formatText(children as string, font.casing) : children}
36
- {arrow &&
37
- <Icon icon={arrow} color={colors?.text || theme.white} />
38
- }
39
- </RoundedButton>
40
- )
41
- case "pill":
42
- return (
43
- <PillButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
44
- {font.casing ? formatText(children as string, font.casing) : children}
45
- {arrow &&
46
- <Icon icon={arrow} color={colors?.text || theme.white} />
47
- }
48
- </PillButton>
49
- )
50
- case "underlined":
51
- return (
52
- <UnderlinedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
53
- {font.casing ? formatText(children as string, font.casing) : children}
54
- {arrow &&
55
- <Icon icon={arrow} color={colors?.text || theme.primary} />
56
- }
57
- </UnderlinedButton>
58
- )
59
- }
60
- }
61
-
62
- const DefaultButton = styled.button<{ colors?: ButtonProps['colors'], font?: ButtonProps['font'], hasArrow?: boolean }>`
63
- all: unset;
64
- display: flex;
65
- align-items: center;
66
- padding: 10px 14px;
67
- letter-spacing: 1px;
68
- font-size: ${props => props.font?.size};
69
- font-weight: ${props => props.font?.weight};
70
- cursor: pointer;
71
- width: fit-content;
72
- grid-area: button;
73
- transition: filter 0.3s, background-color 0.3s;
74
- gap: 11px;
75
- background-color: ${props => props.colors?.background || theme.primary};
76
- color: ${props => props.colors?.text || theme.white};
77
- position: relative;
78
- svg {
79
- fill: ${props => props.colors?.text || theme.white};
80
- transition: all 0.3s;
81
- }
82
- &:hover{
83
- ${props => props.colors?.backgroundHover ? `background-color: ${props.colors?.backgroundHover}` : `filter: brightness(1.4)`};
84
- color: ${props => props.colors?.textHover || theme.white};
85
- svg {
86
- fill: ${props => props.colors?.textHover || theme.white};
87
- transform: translateX(5px);
88
- }
89
- &::after{
90
- transform: translateX(4px);
91
- }
92
- }
93
- &::after{
94
- display: ${props => props.hasArrow ? "unset" : "none"};
95
- content: "";
96
- width: 100%;
97
- height: 100%;
98
- position: absolute;
99
- transition: all 0.3s;
100
- background-color: ${props => props.colors?.background || theme.primary};
101
- left: 0;
102
- top: 0;
103
- z-index: -1;
104
- border-radius: inherit;
105
- transform-origin: left;
106
- }
107
- `
108
-
109
- const UnderlinedButton = styled(DefaultButton)`
110
- background-color: ${props => props.colors?.background || 'transparent'};
111
- color: ${props => props.color || theme.black};
112
- padding: 10px 0px;
113
- letter-spacing: 2px;
114
- &::before{
115
- content: "";
116
- position: absolute;
117
- left: 0;
118
- bottom: 0;
119
- width: 99%;
120
- height: 2.5px;
121
- background-color: ${props => props.colors?.border || theme.primary};
122
- transition: 0.2s;
123
- }
124
- svg{
125
- fill: ${props => props.colors?.border || theme.primary};
126
- path {
127
- fill: ${props => props.colors?.border || theme.primary};
128
- }
129
- }
130
- &::after{
131
- display: none;
132
- }
133
- &:hover{
134
- color: ${props => props.colors?.textHover || theme.black};
135
- transform: translateY(-1px);
136
- svg{
137
- transform: translateX(6px);
138
- fill: ${props => props.colors?.borderHover || theme.primary};
139
- path {
140
- fill: ${props => props.colors?.borderHover || theme.primary};
141
- }
142
- }
143
- &::before{
144
- transform: translateY(4px);
145
- }
146
- }
147
- `
148
-
149
- const PillButton = styled(DefaultButton)`
150
- border-radius: 30px;
151
- letter-spacing: 1px;
152
- text-transform: uppercase;
153
- `
154
-
155
- const RoundedButton = styled(DefaultButton)`
156
- border-radius: 4px;
157
- `
@@ -1,11 +0,0 @@
1
- import { ArrowIcon } from "../../shared/components/Icon"
2
- import { ComponentColors, ComponentFont } from "../../shared/types"
3
-
4
- export type ButtonProps = {
5
- children?: React.ReactNode | string,
6
- onClick?: () => void,
7
- type?: "default" | "rounded" | "pill" | "underlined",
8
- colors?: ComponentColors
9
- font?: ComponentFont
10
- arrow?: ArrowIcon
11
- }
@@ -1,40 +0,0 @@
1
- import React from 'react'
2
- import type { Meta, StoryObj } from '@storybook/react';
3
- import Hero from '.';
4
- import Button from '../Button';
5
-
6
- const meta = {
7
- title: 'Components/Hero',
8
- component: Hero,
9
- parameters: {
10
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
11
- layout: 'fullscreen',
12
- },
13
- } satisfies Meta<typeof Hero>;
14
-
15
- export default meta;
16
-
17
- type Story = StoryObj<typeof meta>;
18
-
19
- export const Default: Story = {
20
- render: () =>
21
- <Hero
22
- height='100vh'
23
- imageUrls={['https://images.unsplash.com/photo-1628745277862-bc0b2d68c50c']}
24
- overlay={{
25
- color: "black",
26
- opacity: "50%"
27
- }}>
28
- <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
29
- <h2>Donde el lujo se transforma en el arte de vivir</h2>
30
- <h2>60 años creando espacios únicos que inspiran.</h2>
31
- <Button
32
- arrow='arrow-caret'
33
- font={{ casing: 'first-capitalized' }}
34
- colors={{ background: 'black' }}
35
- >
36
- Transformá tu espacio
37
- </Button>
38
- </div>
39
- </Hero>
40
- };
@@ -1,76 +0,0 @@
1
- import React, { useState } from 'react'
2
- import styled from '@emotion/styled'
3
- import { HeroProps } from './index.types'
4
- import { theme } from '../../shared/styles/theme'
5
- import { Opacity } from '../../shared/types'
6
-
7
- export default function Hero(props: HeroProps) {
8
- const {
9
- children,
10
- imageUrls=[""],
11
- overlay,
12
- marginTop,
13
- height
14
- } = props
15
-
16
- const [activeBackgroundUrl, setActiveBackgroundUrl] = useState<string>(imageUrls && imageUrls[0] ? imageUrls[0] : "")
17
-
18
- return (
19
- <>
20
- <Container
21
- backgroundUrl={activeBackgroundUrl}
22
- marginTop={marginTop}
23
- height={height}
24
- >
25
- {overlay && (
26
- <Overlay color={overlay.color} opacity={overlay.opacity}/>
27
- )}
28
- <HeroContent>
29
- {children}
30
- </HeroContent>
31
- </Container>
32
- </>
33
- )
34
- }
35
-
36
- const Container = styled.div<{backgroundUrl: string, marginTop: HeroProps['marginTop'], height: HeroProps['height']}>`
37
- position: relative;
38
- display: flex;
39
- flex-direction: column;
40
- align-items: flex-start;
41
- justify-content: center;
42
- position: relative;
43
- width: 100vw;
44
- height: 100vh;
45
- height: ${props => `calc(${props.height} - ${props.marginTop})`};
46
- margin-top: ${props => props.marginTop};
47
- background-image: url(${props => props.backgroundUrl});
48
- /* background-color: rgba(76, 88, 97, 0.7);
49
- background-blend-mode: luminosity; */
50
- background-position-y: 69%;
51
- background-size: cover;
52
- padding: 0 8vw;
53
- @media only screen and (max-width: 800px) {
54
- padding: 80px 10px;
55
- svg {
56
- max-height: 300px;
57
- transform: translateX(20px);
58
- }
59
- }
60
- `
61
-
62
- const Overlay = styled.div<{color: string, opacity: Opacity}>`
63
- position: absolute;
64
- width: 100%;
65
- height: 100%;
66
- left: 0;
67
- top: 0;
68
- z-index: 1;
69
- background-color: ${props => props.color};
70
- opacity: ${props => props.opacity};
71
- `
72
-
73
- const HeroContent = styled.div`
74
- width: 100%;
75
- z-index: 2;
76
- `
@@ -1,13 +0,0 @@
1
- import React from "react"
2
- import { Opacity } from "../../shared/types"
3
-
4
- export type HeroProps = {
5
- children?: React.ReactNode
6
- imageUrls?: string[]
7
- marginTop?: string
8
- height?: string
9
- overlay?: {
10
- color: string
11
- opacity: Opacity
12
- }
13
- }
@@ -1,59 +0,0 @@
1
- import React from 'react'
2
- import Navbar from '.'
3
- import { NavbarProps } from './index.types'
4
- import { Meta, StoryObj } from '@storybook/react/*'
5
-
6
- type StoryProps = NavbarProps
7
-
8
- const meta: Meta<StoryProps> = {
9
- title: 'Components/Navbar',
10
- component: Navbar,
11
- parameters: {
12
- layout: '',
13
- },
14
- tags: ['autodocs'],
15
- }
16
-
17
- export default meta
18
-
19
- type Story = StoryObj<StoryProps>
20
-
21
- export const Default: Story = {
22
- render: () =>
23
- <Navbar
24
- config={{ centeredItems: true }}
25
- logo={{ url: 'https://kgo.googleusercontent.com/profile_vrt_raw_bytes_1587515400_10885.png' }}
26
- button={{
27
- label: "Agendá una reunión",
28
- type: "rounded",
29
- arrow: 'arrow-long',
30
- font: {
31
- size: '14px',
32
- weight: '500',
33
- casing: 'first-capitalized'
34
- }
35
- }}
36
- items={[
37
- {
38
- label: "Sobre Nosotros",
39
- subitems: [
40
- {
41
- label: 'Quiénes somos',
42
- },
43
- {
44
- label: 'Por qué elegirnos',
45
- },
46
- {
47
- label: 'Testimonios y Opiniones',
48
- }
49
- ],
50
- },
51
- {
52
- label: "Productos",
53
- },
54
- {
55
- label: "Nuestros proyectos",
56
- },
57
- ]}
58
- />,
59
- }
@@ -1,196 +0,0 @@
1
- import React from 'react'
2
- import styled from '@emotion/styled';
3
- import { theme } from '../../shared/styles/theme';
4
- import Icon from '../../shared/components/Icon';
5
- import Button from '../Button';
6
- import { NavbarProps } from './index.types';
7
- import { appearAnimation, disappearAnimation } from '../../shared/styles/animations';
8
-
9
- export default function Navbar(props: NavbarProps) {
10
- const {
11
- logo,
12
- items,
13
- button,
14
- config
15
- } = props
16
-
17
- return (
18
- <>
19
- <NavbarContainer height={config.height} colors={config.colors} centeredItems={config.centeredItems}>
20
- <Logo src={logo?.url} onClick={logo?.onClick} />
21
- <div>
22
- {items?.map(item => {
23
- return (
24
- <a
25
- key={item.label}
26
- href="#"
27
- onClick={(e) => {
28
- e.preventDefault();
29
- item.onClick && item.onClick()
30
- }}
31
- >
32
- {item.label}
33
- {item.subitems && (
34
- <>
35
- <Icon icon='arrow-caret' size='8px' />
36
- <div>
37
- {item.subitems?.map(subitem => {
38
- return (
39
- <ControlledNavItem key={subitem.label}>
40
- <a href="#" onClick={(e) => {
41
- e.preventDefault();
42
- subitem.onClick && subitem.onClick()
43
- }}>
44
- {subitem.label}
45
- </a>
46
- </ControlledNavItem>
47
- )
48
- })}
49
- </div>
50
- </>
51
- )}
52
- </a>
53
- )
54
- })}
55
- </div>
56
- {button &&
57
- <Button
58
- colors={button.colors}
59
- type={button.type}
60
- font={button.font}
61
- onClick={button.onClick}
62
- arrow={button.arrow}
63
- >
64
- {button.label}
65
- </Button>
66
- }
67
- </NavbarContainer>
68
- </>
69
- )
70
- }
71
-
72
- const NavbarContainer = styled.div<NavbarProps['config']>`
73
- background-color: ${props => props.colors?.background || theme.black};
74
- width: 100vw;
75
- height: ${props => props.height || '80px'};
76
- display: flex;
77
- position: fixed;
78
- top: 0;
79
- left: 0;
80
- align-items: center;
81
- justify-content: space-between;
82
- padding: 0 4vw;
83
- z-index: 99;
84
- backdrop-filter: blur(4px);
85
- * {
86
- -webkit-user-drag: none;
87
- -khtml-user-drag: none;
88
- -moz-user-drag: none;
89
- -o-user-drag: none;
90
- }
91
- @media only screen and (max-width: 800px) {
92
- height: 80px;
93
- padding: 0 6vw;
94
- }
95
- & > div {
96
- display: flex;
97
- align-items: center;
98
- height: 100%;
99
- margin-left: ${props => props.centeredItems ? 'unset' : 'auto'};
100
- & > a {
101
- color: ${props => props.colors?.text || theme.white};
102
- position: relative;
103
- display: flex;
104
- gap: 5px;
105
- align-items: center;
106
- justify-content: center;
107
- height: 100%;
108
- font-size: 12px;
109
- letter-spacing: 2px;
110
- font-weight: 500;
111
- text-transform: uppercase;
112
- text-decoration: none;
113
- padding: 6px 22px 0;
114
- transition: 0.3s;
115
- border-bottom: 4px solid transparent;
116
- svg {
117
- margin-bottom: 1px;
118
- transform: rotateZ(90deg);
119
- }
120
- & > div {
121
- z-index: 10;
122
- position: absolute;
123
- display: none;
124
- flex-direction: column;
125
- align-items: flex-start;
126
- width: max-content;
127
- gap: 12px;
128
- top: 88%;
129
- left: 0;
130
- background-color: black;
131
- padding: 16px 14px;
132
- animation-name: ${disappearAnimation};
133
- animation-duration: 0.3s;
134
- animation-fill-mode: forwards;
135
- a {
136
- color: ${props => props.colors?.text || theme.white};
137
- padding: 0;
138
- }
139
- &:hover {
140
- animation-name: ${appearAnimation};
141
- display: flex;
142
- }
143
- }
144
- &:hover {
145
- border-color: white;
146
- svg {
147
- transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);
148
- }
149
- & > div{
150
- animation-name: ${appearAnimation};
151
- display: flex;
152
- }
153
- }
154
- }
155
- @media only screen and (max-width: 800px) {
156
- display: none;
157
- }
158
- }
159
- `
160
-
161
- const Logo = styled.img`
162
- cursor: pointer;
163
- height: 56%;
164
- transition: all 0.2s;
165
- &:hover {
166
- filter: brightness(1.2);
167
- }
168
- `
169
-
170
- const ControlledNavItem = styled.div`
171
- cursor: pointer;
172
- height: 100%;
173
- max-height: 90px;
174
- text-transform: uppercase;
175
- position: relative;
176
- display: flex;
177
- align-items: center;
178
- justify-content: center;
179
- transition: 0.3s;
180
- a {
181
- display: flex;
182
- align-items: center;
183
- justify-content: center;
184
- height: 100%;
185
- padding: 0 22px;
186
- font-size: 12px;
187
- letter-spacing: 2px;
188
- font-weight: 500;
189
- text-decoration: none;
190
- }
191
- &:hover {
192
- & > div{
193
- display: flex;
194
- }
195
- }
196
- `
@@ -1,27 +0,0 @@
1
- import React from "react"
2
- import { ButtonProps } from "../Button/index.types"
3
- import { ComponentColors } from "../../shared/types"
4
-
5
- export type NavbarProps = {
6
- config: {
7
- colors?: ComponentColors
8
- height?: string
9
- centeredItems?: boolean
10
- }
11
- logo?: {
12
- url: string
13
- onClick?: () => void
14
- }
15
- items?: {
16
- label: string
17
- onClick?: () => void
18
- subitems?: {
19
- label: string
20
- onClick?: () => void
21
- }[]
22
- }[]
23
- button?: ButtonProps & {
24
- label: string
25
- onClick?: () => void
26
- }
27
- }
@@ -1,54 +0,0 @@
1
- import React from 'react'
2
- import { Meta, StoryObj } from '@storybook/react/*'
3
- import { ShowcaseProps } from './index.types'
4
- import Showcase from '.'
5
- import { theme } from '../../shared/styles/theme'
6
-
7
- type StoryProps = ShowcaseProps
8
-
9
- const meta: Meta<StoryProps> = {
10
- title: 'Components/Showcase',
11
- component: Showcase,
12
- parameters: {
13
- layout: 'fullscreen',
14
- },
15
- tags: [],
16
- }
17
-
18
- export default meta
19
-
20
- type Story = StoryObj<StoryProps>
21
-
22
- export const Default: Story = {
23
- render: () => (
24
- <Showcase
25
- backgroundColor={theme.black}
26
- items={[
27
- {
28
- label: "Cocinas",
29
- imageUrl: "https://s3-alpha-sig.figma.com/img/3a0e/23d7/0d060ffe0c746222fe8ba3ef5c0e9ea8?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=e9PCWO9nXQiYEdTdaAUw~Mj2gt82gQoixJw4F-e205zHZqaov1DB3CITGEADHwNn2hdlLIBF5cReOI6LVdCbAVJva1V1l-s5USJlxhLZSYnYMuU7VR6MFLMOHAUtaQ097MRubuo94qKxWVyRR4lPNR8IGPQ0WTsy84KS1sYXE1PQbMuhfdI9MqICMHbp8VgbogVa3oXUZ~ciFH3VsGRAVC-xLPCMkhkgP-N-sFjsyYeK9pS61-hhnne9tmzgmlz4tDVb57tM5a0Deue7giFf-bTfyo-GA1C26Qx88oCtE6bupgBeoiq988RtV5bGkTxJMugdTprr-kbMOs7bds7uiw__"
30
- },
31
- {
32
- label: "Mesadas",
33
- imageUrl: "https://s3-alpha-sig.figma.com/img/f785/86dc/82fe2f6e1e6adf5f9279a1703e3ba495?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=o630MkLw7YCQAQA4v9kSerLB4UTkDcmPyoQY0h-VFnJDHVnUprbCFed3mVoX-6ltkaSQP7-Qk7QooxbErRo-rWXzWD-Fvmk~iQQ-RBYAJZHpCjF-AGh5KWko1zcHSzNiZngeBzIDsNtyzuZUnl~0LWlPJrLb68hKmB2loyUfvEa0DXaFbruHYazBbJv3a4ia8hPO3rzPYdLzuloyomTW1N4IMAhOB8r32Q-94G3eoflbiSlAaedwtQTJDSMX8X0NZ8~qXcJaPk2HlkvOhgvFmTmFqfg1FIxjDMmF263bXyAd0dPwunRQ6HQFzA-9OrWr3ZOfT-zGmJQivhziUBFM8Q__"
34
- },
35
- {
36
- label: "Accesorios",
37
- imageUrl: "https://s3-alpha-sig.figma.com/img/2cd6/2a3c/7ae476c8ada93abdcc116a1d2aa5e948?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=nSe9I6uq8bKHOgaqwwZdcyU2VSsorHQtkY6YTpDUTpdh9LiaJdToSmXOzy2qirgnm8C7qTfrF80KP40eZrhFSJUomLj8J90r1SXC-FUVDJrYxNxkdmTApSKBbghWpumwfA~-vbJATZsFtyBywXfTaZzu-Djkiv8xqPSNlwhc2WSKpXX-bpeHcGAvdoINxTsJM2PhzCSIbTybITSi7f59GobTFXzRSZC7A6wu8eTckG7AylzDDa0-LRTkSvmGx86GnZJc-HIE2-US~nyxqG9aO8Knv79JP8K4YcUnNoRS1gL~OXN6HE4eHu3WwmXZmAJ4Xj9B6d5lbYTkOcoGQYtWjg__"
38
- },
39
- {
40
- label: "Placares y Vestidores",
41
- imageUrl: "https://s3-alpha-sig.figma.com/img/9493/7851/c8d2abc918e08ea500deab12830ea3bb?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MYdXcluyFxyH7z73JP3hj3HQaYJLh5068mHGljV4uQUc8pMYgpxjMsmP1j77FP7m8V~4K4pZ9PmE5x8Ry8unEgYwSfzA-JYw~TS-s5xQgbFRJuGdNVldICnRrw4CfX7K1YSS~0vATXi6gE4LPAmxrSeoMgXHgipZL9E4lCMVwFUpOvyIKxaMS2iO7MCuo-G59L-qt4hhOXGFdc9CEM82kBOIBxzGPqvZBSYr77ronVc5Mwwd7RI5GEqH7RZm9tYz~SkXql4dN7dPnfBCVuiaEOmQIfoqPjDvPLGKvxLcA-~ataXpE-b3~eJn0Pk9CODn1ReACRF5LPAD8Suc0Y-juA__"
42
- },
43
- {
44
- label: "Dormitorios",
45
- imageUrl: "https://s3-alpha-sig.figma.com/img/ed05/0f1a/1db80154708d1df2cf70585589f89eac?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=KpAKwg9aheibfNvLhs2ol7Sp3fWNvOKS1K0augX0uxqjve5F~7SgoyITuCWokfmIDBh15hh8eus8KejFmWZJ5Kmis4cth9rBnODw038MIQWjDsWH01uXawmpWXZJT1gvZSxP-WIhzfDsaQVkYq1g9nkBxY6JKY5fR6oBLXlMW8BIFaqqPazW~t9gsFbMyDnBu9MAFlXhyIf1XXmFQdVsl2yJhxW7gw9d2lg1juek-FGYzwsJqNdFJnwKrvdb-i6zmqO~9CXZcRwAkonVhqyZysSulwRpJ3r9TwAZNLjWFAsH-wkSGDk44HN-pvJndTrmV~CcWZk4KxUUgRukx~RY2w__"
46
- },
47
- {
48
- label: "Living",
49
- imageUrl: "https://s3-alpha-sig.figma.com/img/7792/4024/34e4dce3c316cdce310593312054b966?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=kqCpcW8oe~SV4UaLnDyWfYUGHDJLJEiok1J94xZOELWaytzco6eFkuzMNPsn-rt7VHe8c1Wg3FmLrdMpzIHTbmOFuuKX7uh7hNjjE7rRW7GiwDnIT8iXmWnbc3Oc83lc8X8hCq79v9LxPAr67BqrGbjo3FjKMlVTpV-wi-ExSoPg1UrgQ5FCa~~sScWoQx-NutdmMGSHPDwfAmP811BekiltHmzW6de52C-srViEAhrzGw3XE5l1WoGVvy8G~qHY75sTMN5R6SHg4ed2m7OXhFKbgxYlPst85FRmJSe2ecZboTMJTQMT2MLjzxDG436Zm5LXDFaMqqAtdS3b73gBkg__"
50
- },
51
- ]}
52
- />
53
- ),
54
- }