@julseb-lib/react 0.0.37 → 0.0.39

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 (33) hide show
  1. package/dist/index.cjs.js +19 -19
  2. package/dist/index.es.js +19 -19
  3. package/dist/index.umd.js +87 -87
  4. package/dist/lib/Variables.ts +6 -4
  5. package/dist/lib/components/Accordion/styles.tsx +3 -3
  6. package/dist/lib/components/Aside/styles.tsx +2 -2
  7. package/dist/lib/components/Breadcrumbs/styles.tsx +2 -2
  8. package/dist/lib/components/Burger/styles.tsx +2 -8
  9. package/dist/lib/components/ButtonIcon/styles.tsx +2 -2
  10. package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx +9 -9
  11. package/dist/lib/components/Datepicker/styles.tsx +8 -8
  12. package/dist/lib/components/Drawer/styles.tsx +2 -2
  13. package/dist/lib/components/Dropdown/styles.tsx +2 -2
  14. package/dist/lib/components/Footer/styles.tsx +4 -4
  15. package/dist/lib/components/Header/styles.tsx +10 -10
  16. package/dist/lib/components/InputCheck/styles.tsx +4 -4
  17. package/dist/lib/components/InputComponents/styles.tsx +7 -7
  18. package/dist/lib/components/InputImage/styles.tsx +2 -2
  19. package/dist/lib/components/InputSlider/styles.tsx +4 -4
  20. package/dist/lib/components/ListGroup/styles.tsx +2 -2
  21. package/dist/lib/components/Main/styles.tsx +2 -2
  22. package/dist/lib/components/MarkdownEditor/styles.tsx +2 -2
  23. package/dist/lib/components/Messaging/styles.tsx +3 -3
  24. package/dist/lib/components/Pagination/styles.tsx +2 -8
  25. package/dist/lib/components/Rating/styles.tsx +4 -8
  26. package/dist/lib/components/Slideshow/styles.tsx +11 -11
  27. package/dist/lib/components/Table/styles.tsx +2 -8
  28. package/dist/lib/components/Tabs/styles.tsx +5 -5
  29. package/dist/lib/components/Toast/styles.tsx +2 -2
  30. package/dist/lib/components/Wrapper/styles.tsx +2 -2
  31. package/dist/lib/index.ts +1 -0
  32. package/dist/style.css +1 -0
  33. package/package.json +3 -1
package/dist/lib/components/Pagination/styles.tsx CHANGED
@@ -1,13 +1,7 @@
1
1
  /*=============================================== Pagination styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import {
5
- setDefaultTheme,
6
- BREAKPOINTS,
7
- Mixins,
8
- RADIUSES,
9
- TRANSITIONS,
10
- } from "../../"
4
+ import { setDefaultTheme, MEDIA, Mixins, RADIUSES, TRANSITIONS } from "../../"
11
5
  import type { LibColorsHover } from "../../types"
12
6
 
13
7
  const BUTTON_SIZE = 32
@@ -50,7 +44,7 @@ const StyledPaginationButton = styled.button<{
50
44
  case false:
51
45
  case undefined:
52
46
  return css`
53
- @media ${BREAKPOINTS.HOVER} {
47
+ @media ${MEDIA.HOVER} {
54
48
  &:not(:disabled):hover {
55
49
  background-color: ${Mixins.ColorsHoverHover(
56
50
  $accentColor,
package/dist/lib/components/Rating/styles.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /*=============================================== Rating styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import { BREAKPOINTS, Mixins, setDefaultTheme } from "../../"
4
+ import { MEDIA, Mixins, setDefaultTheme } from "../../"
5
5
  import type { LibValidationStatus } from "../../types"
6
6
 
7
7
  export const BUTTON_SIZE = 32
@@ -29,21 +29,17 @@ const RatingButton = styled.button<{
29
29
  ${({ $isReadOnly, theme, $validationStatus }) =>
30
30
  !$isReadOnly &&
31
31
  css`
32
- @media ${BREAKPOINTS.HOVER} {
32
+ @media ${MEDIA.HOVER} {
33
33
  &:hover {
34
34
  color: ${Mixins.ColorsHoverHover(
35
- $validationStatus === false
36
- ? "danger"
37
- : "primary",
35
+ $validationStatus === false ? "danger" : "primary",
38
36
  theme
39
37
  )};
40
38
  }
41
39
 
42
40
  &:active {
43
41
  color: ${Mixins.ColorsHoverActive(
44
- $validationStatus === false
45
- ? "danger"
46
- : "primary",
42
+ $validationStatus === false ? "danger" : "primary",
47
43
  theme
48
44
  )};
49
45
  }
package/dist/lib/components/Slideshow/styles.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  setDefaultTheme,
7
7
  Mixins,
8
8
  RADIUSES,
9
- BREAKPOINTS,
9
+ MEDIA,
10
10
  SPACERS,
11
11
  Flexbox,
12
12
  TRANSITIONS,
@@ -124,7 +124,7 @@ const StyledSlideshowButton = styled.button<{
124
124
  return null
125
125
  }};
126
126
 
127
- @media ${BREAKPOINTS.HOVER} {
127
+ @media ${MEDIA.HOVER} {
128
128
  &:hover {
129
129
  background-color: ${({ theme, $color }) =>
130
130
  Mixins.ColorsHoverHover($color, theme)};
@@ -139,7 +139,7 @@ const StyledSlideshowButton = styled.button<{
139
139
  ${({ $hideOnTouch }) =>
140
140
  $hideOnTouch &&
141
141
  css`
142
- @media ${BREAKPOINTS.TOUCH} {
142
+ @media ${MEDIA.TOUCH} {
143
143
  display: none;
144
144
  }
145
145
  `}
@@ -163,7 +163,7 @@ const StyledSlideshowPagination = styled(Flexbox).attrs({
163
163
  ${({ $hideOnTouch }) =>
164
164
  $hideOnTouch &&
165
165
  css`
166
- @media ${BREAKPOINTS.TOUCH} {
166
+ @media ${MEDIA.TOUCH} {
167
167
  display: none;
168
168
  }
169
169
  `}
@@ -188,7 +188,7 @@ const SlideshowPaginationItem = styled.button<{
188
188
  border-radius: ${RADIUSES.ROUND};
189
189
  background-color: ${Mixins.ColorsHoverHover($color, theme)};
190
190
 
191
- @media ${BREAKPOINTS.HOVER} {
191
+ @media ${MEDIA.HOVER} {
192
192
  &:hover {
193
193
  background-color: ${Mixins.ColorsHoverDefault(
194
194
  $color,
@@ -210,7 +210,7 @@ const SlideshowPaginationItem = styled.button<{
210
210
  theme
211
211
  )};
212
212
 
213
- @media ${BREAKPOINTS.HOVER} {
213
+ @media ${MEDIA.HOVER} {
214
214
  &:hover {
215
215
  background-color: ${Mixins.ColorsHoverHover(
216
216
  $color,
@@ -227,7 +227,7 @@ const SlideshowPaginationItem = styled.button<{
227
227
  border-radius: 50%;
228
228
  background-color: ${Mixins.ColorsHoverHover($color, theme)};
229
229
 
230
- @media ${BREAKPOINTS.HOVER} {
230
+ @media ${MEDIA.HOVER} {
231
231
  &:hover {
232
232
  background-color: ${Mixins.ColorsHoverDefault(
233
233
  $color,
@@ -249,7 +249,7 @@ const SlideshowPaginationItem = styled.button<{
249
249
  theme
250
250
  )};
251
251
 
252
- @media ${BREAKPOINTS.HOVER} {
252
+ @media ${MEDIA.HOVER} {
253
253
  &:hover {
254
254
  background-color: ${Mixins.ColorsHoverHover(
255
255
  $color,
@@ -268,7 +268,7 @@ const SlideshowPaginationItem = styled.button<{
268
268
  border: 1px solid
269
269
  ${Mixins.ColorsHoverDefault($color, theme)};
270
270
 
271
- @media ${BREAKPOINTS.HOVER} {
271
+ @media ${MEDIA.HOVER} {
272
272
  &:hover {
273
273
  border-color: ${Mixins.ColorsHoverHover(
274
274
  $color,
@@ -290,7 +290,7 @@ const SlideshowPaginationItem = styled.button<{
290
290
  theme
291
291
  )};
292
292
 
293
- @media ${BREAKPOINTS.HOVER} {
293
+ @media ${MEDIA.HOVER} {
294
294
  &:hover {
295
295
  background-color: ${Mixins.ColorsHoverHover(
296
296
  $color,
@@ -323,7 +323,7 @@ const SlideshowThumbnail = styled.button`
323
323
  opacity: 0.5;
324
324
  transition: ${TRANSITIONS.SHORT};
325
325
 
326
- @media ${BREAKPOINTS.HOVER} {
326
+ @media ${MEDIA.HOVER} {
327
327
  &:hover {
328
328
  opacity: 0.8;
329
329
  }
package/dist/lib/components/Table/styles.tsx CHANGED
@@ -1,13 +1,7 @@
1
1
  /*=============================================== Table styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import {
5
- setDefaultTheme,
6
- SPACERS,
7
- Mixins,
8
- FONT_SIZES,
9
- BREAKPOINTS,
10
- } from "../../"
4
+ import { setDefaultTheme, SPACERS, Mixins, FONT_SIZES, MEDIA } from "../../"
11
5
  import { TextBaseMixin } from "../ComponentsMixins"
12
6
  import type { CssVerticalAlign, LibTableVariant } from "../../types"
13
7
 
@@ -47,7 +41,7 @@ const StyledTable = styled.table<{
47
41
  font-size: ${FONT_SIZES.SMALL};
48
42
  }
49
43
 
50
- @media ${BREAKPOINTS.MOBILE} {
44
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
51
45
  display: block;
52
46
  }
53
47
  }
package/dist/lib/components/Tabs/styles.tsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  setDefaultTheme,
6
6
  Mixins,
7
7
  RADIUSES,
8
- BREAKPOINTS,
8
+ MEDIA,
9
9
  SPACERS,
10
10
  TRANSITIONS,
11
11
  } from "../../"
@@ -65,7 +65,7 @@ const StyledTabsButtonsContainer = styled.div<{
65
65
  $inline: true,
66
66
  })};
67
67
 
68
- @media ${BREAKPOINTS.MOBILE} {
68
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
69
69
  flex-direction: column;
70
70
  }
71
71
  `
@@ -76,7 +76,7 @@ const StyledTabsButtonsContainer = styled.div<{
76
76
  $col: $cols,
77
77
  })};
78
78
 
79
- @media ${BREAKPOINTS.MOBILE} {
79
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
80
80
  grid-template-columns: repeat(1, 1fr);
81
81
  }
82
82
  `
@@ -105,7 +105,7 @@ const StyledTabButton = styled.button<{
105
105
  z-index: 2;
106
106
  color: ${theme.FONT};
107
107
 
108
- @media ${BREAKPOINTS.MOBILE} {
108
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
109
109
  width: 100%;
110
110
  }
111
111
 
@@ -121,7 +121,7 @@ const StyledTabButton = styled.button<{
121
121
  min-width: ${$justify === "start" && "100px"};
122
122
  color: ${theme.FONT};
123
123
 
124
- @media ${BREAKPOINTS.HOVER} {
124
+ @media ${MEDIA.HOVER} {
125
125
  &:hover {
126
126
  background-color: ${Mixins.ColorsHoverHover(
127
127
  "primary",
package/dist/lib/components/Toast/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled, { keyframes, css } from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_SIZES,
7
7
  LINE_HEIGHTS,
8
8
  Mixins,
@@ -124,7 +124,7 @@ const CloseButton = styled.button`
124
124
  $justifyContent: "center",
125
125
  })}
126
126
 
127
- @media ${BREAKPOINTS.HOVER} {
127
+ @media ${MEDIA.HOVER} {
128
128
  &:hover {
129
129
  color: ${({ theme }) => Mixins.ColorsHoverHover("gray", theme)};
130
130
  }
package/dist/lib/components/Wrapper/styles.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /*=============================================== Wrapper styles ===============================================*/
2
2
 
3
3
  import styled from "styled-components"
4
- import { BREAKPOINTS, Mixins, setDefaultTheme } from "../../"
4
+ import { MEDIA, Mixins, setDefaultTheme } from "../../"
5
5
  import type { LibAllColors, LibSpacers } from "../../types"
6
6
 
7
7
  const StyledWrapper = styled.div<{
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div<{
17
17
  $justifyContent: "center",
18
18
  })}
19
19
 
20
- @media ${BREAKPOINTS.TABLET_LARGE} {
20
+ @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
21
21
  flex-direction: column;
22
22
  align-items: center;
23
23
  min-height: inherit;
package/dist/lib/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /*=============================================== Exports ===============================================*/
2
2
 
3
+ import "./index.css"
3
4
  export { ThemeProvider } from "styled-components"
4
5
  import {} from "styled-components/cssprop"
5
6
  export * from "./utils"
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap";:root{--color-black: rgb(0, 0, 0);--color-white: rgb(255, 255, 255);--color-light-gray-50: rgb(248, 248, 248);--color-light-gray-100: rgb(228, 228, 228);--color-light-gray-200: rgb(200, 200, 200);--color-light-gray-300: rgb(173, 173, 173);--color-light-gray-400: rgb(145, 145, 145);--color-light-gray-500: rgb(118, 118, 118);--color-light-gray-600: rgb(94, 94, 94);--color-light-gray-700: rgb(71, 71, 71);--color-light-gray-800: rgb(47, 47, 47);--color-light-gray-900: rgb(24, 24, 24);--color-light-primary-50: rgb(244, 246, 247);--color-light-primary-100: rgb(209, 218, 225);--color-light-primary-200: rgb(164, 181, 195);--color-light-primary-300: rgb(118, 143, 164);--color-light-primary-400: rgb(73, 106, 134);--color-light-primary-500: rgb(27, 69, 104);--color-light-primary-600: rgb(22, 55, 83);--color-light-primary-700: rgb(16, 41, 62);--color-light-primary-800: rgb(11, 28, 42);--color-light-primary-900: rgb(5, 14, 21);--color-light-secondary-50: rgb(244, 248, 253);--color-light-secondary-100: rgb(212, 226, 246);--color-light-secondary-200: rgb(168, 197, 237);--color-light-secondary-300: rgb(125, 167, 229);--color-light-secondary-400: rgb(81, 138, 220);--color-light-secondary-500: rgb(38, 109, 211);--color-light-secondary-600: rgb(30, 87, 169);--color-light-secondary-700: rgb(23, 65, 127);--color-light-secondary-800: rgb(15, 44, 84);--color-light-secondary-900: rgb(8, 22, 42);--color-light-success-50: rgb(243, 249, 246);--color-light-success-100: rgb(206, 230, 219);--color-light-success-200: rgb(157, 205, 183);--color-light-success-300: rgb(107, 179, 146);--color-light-success-400: rgb(58, 154, 110);--color-light-success-500: rgb(9, 129, 74);--color-light-success-600: rgb(7, 103, 59);--color-light-success-700: rgb(5, 77, 44);--color-light-success-800: rgb(4, 52, 30);--color-light-success-900: rgb(2, 26, 15);--color-light-danger-50: rgb(251, 242, 244);--color-light-danger-100: rgb(240, 204, 209);--color-light-danger-200: rgb(225, 153, 164);--color-light-danger-300: rgb(209, 102, 118);--color-light-danger-400: rgb(194, 51, 73);--color-light-danger-500: rgb(179, 0, 27);--color-light-danger-600: rgb(143, 0, 22);--color-light-danger-700: rgb(107, 0, 16);--color-light-danger-800: rgb(72, 0, 11);--color-light-danger-900: rgb(36, 0, 5);--color-light-warning-50: rgb(252, 246, 242);--color-light-warning-100: rgb(243, 219, 204);--color-light-warning-200: rgb(231, 182, 153);--color-light-warning-300: rgb(220, 146, 102);--color-light-warning-400: rgb(208, 109, 51);--color-light-warning-500: rgb(196, 73, 0);--color-light-warning-600: rgb(157, 58, 0);--color-light-warning-700: rgb(118, 44, 0);--color-light-warning-800: rgb(78, 29, 0);--color-light-warning-900: rgb(39, 15, 0);--color-light-background: var(--color-white);--color-light-font: var(--color-black);--color-light-link-font-default: var(--color-light-font);--color-light-link-font-hover: var(--color-light-gray-700);--color-light-link-font-active: var(--color-light-gray-900);--color-light-link-background-default: var(--color-light-background);--color-light-link-background-hover: var(--color-light-gray-300);--color-light-link-background-active: var(--color-light-gray-100);--color-light-font-ghost-default: var(--color-light-gray-900);--color-light-font-ghost-hover: var(--color-light-gray-700);--color-light-font-ghost-active: var(--color-light-gray-800);--color-light-background-ghost-default: var(--color-light-gray-50);--color-light-background-ghost-hover: var(--color-light-gray-200);--color-light-background-ghost-active: var(--color-light-gray-100);--color-dark-gray-50: rgba(24, 24, 24, 1);--color-dark-gray-100: rgba(47, 47, 47, 1);--color-dark-gray-200: rgba(71, 71, 71, 1);--color-dark-gray-300: rgba(94, 94, 94, 1);--color-dark-gray-400: rgba(118, 118, 118, 1);--color-dark-gray-500: rgba(145, 145, 145, 1);--color-dark-gray-600: rgba(173, 173, 173, 1);--color-dark-gray-700: rgba(200, 200, 200, 1);--color-dark-gray-800: rgba(228, 228, 228, 1);--color-dark-gray-900: rgba(248, 248, 248, 1);--color-dark-primary-50: rgb(20, 30, 51);--color-dark-primary-100: rgb(41, 61, 102);--color-dark-primary-200: rgb(61, 91, 153);--color-dark-primary-300: rgb(82, 122, 204);--color-dark-primary-400: rgb(102, 152, 255);--color-dark-primary-500: rgb(133, 173, 255);--color-dark-primary-600: rgb(163, 193, 255);--color-dark-primary-700: rgb(194, 214, 255);--color-dark-primary-800: rgb(224, 234, 255);--color-dark-primary-900: rgb(247, 250, 255);--color-dark-secondary-50: rgb(23, 45, 46);--color-dark-secondary-100: rgb(46, 89, 92);--color-dark-secondary-200: rgb(68, 134, 139);--color-dark-secondary-300: rgb(91, 178, 185);--color-dark-secondary-400: rgb(114, 223, 231);--color-dark-secondary-500: rgb(142, 229, 236);--color-dark-secondary-600: rgb(170, 236, 241);--color-dark-secondary-700: rgb(199, 242, 245);--color-dark-secondary-800: rgb(227, 249, 250);--color-dark-secondary-900: rgb(248, 254, 254);--color-dark-success-50: rgb(17, 47, 32);--color-dark-success-100: rgb(35, 94, 64);--color-dark-success-200: rgb(52, 141, 97);--color-dark-success-300: rgb(70, 188, 129);--color-dark-success-400: rgb(87, 235, 161);--color-dark-success-500: rgb(121, 239, 180);--color-dark-success-600: rgb(154, 243, 199);--color-dark-success-700: rgb(188, 247, 217);--color-dark-success-800: rgb(221, 251, 236);--color-dark-success-900: rgb(247, 254, 250);--color-dark-danger-50: rgb(51, 26, 26);--color-dark-danger-100: rgb(102, 51, 51);--color-dark-danger-200: rgb(153, 77, 77);--color-dark-danger-300: rgb(204, 102, 102);--color-dark-danger-400: rgb(255, 128, 128);--color-dark-danger-500: rgb(255, 153, 153);--color-dark-danger-600: rgb(255, 179, 179);--color-dark-danger-700: rgb(255, 204, 204);--color-dark-danger-800: rgb(255, 230, 230);--color-dark-danger-900: rgb(255, 249, 249);--color-dark-warning-50: rgb(51, 41, 23);--color-dark-warning-100: rgb(101, 82, 46);--color-dark-warning-200: rgb(152, 122, 70);--color-dark-warning-300: rgb(202, 163, 93);--color-dark-warning-400: rgb(253, 204, 116);--color-dark-warning-500: rgb(254, 214, 144);--color-dark-warning-600: rgb(254, 224, 172);--color-dark-warning-700: rgb(254, 235, 199);--color-dark-warning-800: rgb(255, 245, 227);--color-dark-warning-900: rgb(255, 253, 248);--color-dark-background: rgb(18, 18, 18);--color-dark-font: var(--color-white);--color-dark-link-font-default: var(--color-dark-font);--color-dark-link-font-hover: var(--color-dark-gray-300);--color-dark-link-font-active: var(--color-dark-gray-100);--color-dark-link-background-default: var(--color-dark-background);--color-dark-link-background-hover: var(--color-dark-gray-700);--color-dark-link-background-active: var(--color-dark-gray-900);--color-dark-font-ghost-default: var(--color-dark-gray-900);--color-dark-font-ghost-hover: var(--color-dark-gray-700);--color-dark-font-ghost-active: var(--color-dark-gray-800);--color-dark-background-ghost-default: var(--color-dark-gray-50);--color-dark-background-ghost-hover: var(--color-dark-gray-200);--color-dark-background-ghost-active: var(--color-dark-gray-100);--overlay-black-50: rgba(0, 0, 0, .5);--overlay-black-80: rgba(0, 0, 0, .8);--overlay-white-50: rgba(255, 255, 255, .5);--overlay-white-80: rgba(255, 255, 255, .8);--overlay-gradient-black: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .56) 100% );--overlay-gradient-white: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .35) 100% );--font-family-body: "Lato", sans-serif;--font-family-code: monospace;--font-size-display-h1: 5rem;--font-size-display-h2: 4rem;--font-size-display-h3: 3.5rem;--font-size-display-h4: 3rem;--font-size-display-h5: 2.5rem;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.8rem;--font-size-h4: 1.5rem;--font-size-h5: 1.3rem;--font-size-h6: 1.1rem;--font-size-body: 1rem;--font-size-small: .875rem;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-black: 900;--line-height-body: 1.5;--line-height-code: 1.8;--shadow-xxl: 0px 10px 14px 8px rgba(0, 0, 0, .2), 0px 4px 4px rgba(0, 0, 0, .3);--shadow-xl: 0px 8px 12px 6px rgba(0, 0, 0, .15), 0px 4px 4px rgba(0, 0, 0, .3);--shadow-l: 0px 6px 10px 4px rgba(0, 0, 0, .15), 0px 2px 3px rgba(0, 0, 0, .3);--shadow-m: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px rgba(0, 0, 0, .3);--shadow-s: 0px 1px 2px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--shadow-xs: 0px 1px 2px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--spacer-xxl: 48px;--spacer-xl: 32px;--spacer-l: 24px;--spacer-m: 16px;--spacer-s: 12px;--spacer-xs: 8px;--spacer-xxs: 4px;--radius-xxl: 24px;--radius-xl: 16px;--radius-l: 12px;--radius-m: 8px;--radius-s: 4px;--radius-xs: 2px;--radius-round: 99em;--radius-circle: 50%;--main-default: 600px;--main-large: 800px;--main-form: 400px;--main-full: 100%;--aside-default: 250px;--aside-small: 200px;--transition-short: all .2s ease;--transition-long: all .5s ease;--transition-bezier: all .5s cubic-bezier(.25, .75, 0, .66);--transition-progress-circle: all 1s ease-in-out}@media screen and (max-width: 1024px){:root{--main-default: 90%;--main-large: 90%;--main-form: 90%;--aside-default: 90%;--aside-small: 90%}}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}*[hidden]{display:none!important}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr,ul,ol{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-light-background);color:var(--color-light-font);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);position:relative;overflow-x:hidden}body.dark{background-color:var(--color-dark-background);color:var(--color-dark-font)}table{border-collapse:collapse;border-spacing:0}button,a{cursor:pointer;-webkit-transition:var(--transition-short);-o-transition:var(--transition-short);transition:var(--transition-short);font-weight:var(--font-weight-black);font-size:var(--font-size-body);font-family:var(--font-family-body);line-height:var(--line-height)}button:disabled,a:disabled{cursor:not-allowed}u{text-decoration:underline;color:currentColor}.stop-scrolling{height:100vh;overflow:hidden}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.clear-float{float:none!important}.hidden{position:fixed;top:-999em;left:-999em}.no-marg{margin:0!important}.no-marg-top{margin-top:0!important}.no-marg-bottom{margin-bottom:0!important}.no-marg-left{margin-left:0!important}.no-marg-right{margin-right:0!important}.no-padd{padding:0!important}.no-padd-top{padding-top:0!important}.no-padd-bottom{padding-bottom:0!important}.no-padd-left{padding-left:0!important}.no-padd-right{padding-right:0!important}.no-select{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;gap:nowrap}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.smooth{scroll-behavior:smooth}.bg-black{background-color:var(--color-black)!important}.bg-white{background-color:var(--color-white)!important}.bg-gray-50{background-color:var(--color-gray-50)!important}.bg-gray-100{background-color:var(--color-gray-100)!important}.bg-gray-200{background-color:var(--color-gray-200)!important}.bg-gray-300{background-color:var(--color-gray-300)!important}.bg-gray-400{background-color:var(--color-gray-400)!important}.bg-gray-500{background-color:var(--color-gray-500)!important}.bg-gray-600{background-color:var(--color-gray-600)!important}.bg-gray-700{background-color:var(--color-gray-700)!important}.bg-gray-800{background-color:var(--color-gray-800)!important}.bg-gray-900{background-color:var(--color-gray-900)!important}.bg-primary-50{background-color:var(--color-primary-50)!important}.bg-primary-100{background-color:var(--color-primary-100)!important}.bg-primary-200{background-color:var(--color-primary-200)!important}.bg-primary-300{background-color:var(--color-primary-300)!important}.bg-primary-400{background-color:var(--color-primary-400)!important}.bg-primary-500{background-color:var(--color-primary-500)!important}.bg-primary-600{background-color:var(--color-primary-600)!important}.bg-primary-700{background-color:var(--color-primary-700)!important}.bg-primary-800{background-color:var(--color-primary-800)!important}.bg-primary-900{background-color:var(--color-primary-900)!important}.bg-secondary-50{background-color:var(--color-secondary-50)!important}.bg-secondary-100{background-color:var(--color-secondary-100)!important}.bg-secondary-200{background-color:var(--color-secondary-200)!important}.bg-secondary-300{background-color:var(--color-secondary-300)!important}.bg-secondary-400{background-color:var(--color-secondary-400)!important}.bg-secondary-500{background-color:var(--color-secondary-500)!important}.bg-secondary-600{background-color:var(--color-secondary-600)!important}.bg-secondary-700{background-color:var(--color-secondary-700)!important}.bg-secondary-800{background-color:var(--color-secondary-800)!important}.bg-secondary-900{background-color:var(--color-secondary-900)!important}.bg-success-50{background-color:var(--color-success-50)!important}.bg-success-100{background-color:var(--color-success-100)!important}.bg-success-200{background-color:var(--color-success-200)!important}.bg-success-300{background-color:var(--color-success-300)!important}.bg-success-400{background-color:var(--color-success-400)!important}.bg-success-500{background-color:var(--color-success-500)!important}.bg-success-600{background-color:var(--color-success-600)!important}.bg-success-700{background-color:var(--color-success-700)!important}.bg-success-800{background-color:var(--color-success-800)!important}.bg-success-900{background-color:var(--color-success-900)!important}.bg-danger-50{background-color:var(--color-danger-50)!important}.bg-danger-100{background-color:var(--color-danger-100)!important}.bg-danger-200{background-color:var(--color-danger-200)!important}.bg-danger-300{background-color:var(--color-danger-300)!important}.bg-danger-400{background-color:var(--color-danger-400)!important}.bg-danger-500{background-color:var(--color-danger-500)!important}.bg-danger-600{background-color:var(--color-danger-600)!important}.bg-danger-700{background-color:var(--color-danger-700)!important}.bg-danger-800{background-color:var(--color-danger-800)!important}.bg-danger-900{background-color:var(--color-danger-900)!important}.bg-warning-50{background-color:var(--color-warning-50)!important}.bg-warning-100{background-color:var(--color-warning-100)!important}.bg-warning-200{background-color:var(--color-warning-200)!important}.bg-warning-300{background-color:var(--color-warning-300)!important}.bg-warning-400{background-color:var(--color-warning-400)!important}.bg-warning-500{background-color:var(--color-warning-500)!important}.bg-warning-600{background-color:var(--color-warning-600)!important}.bg-warning-700{background-color:var(--color-warning-700)!important}.bg-warning-800{background-color:var(--color-warning-800)!important}.bg-warning-900{background-color:var(--color-warning-900)!important}.bg-overlay-black-50{background:var(--overlay-black-50)!important}.bg-overlay-black-80{background:var(--overlay-black-80)!important}.bg-overlay-white-50{background:var(--overlay-white-50)!important}.bg-overlay-white-80{background:var(--overlay-white-80)!important}.bg-overlay-gradient-black{background:var(--overlay-gradient-black)!important}.bg-overlay-gradient-white{background:var(--overlay-gradient-white)!important}.font-black{color:var(--color-black)!important}.font-white{color:var(--color-white)!important}.font-gray-50{color:var(--color-gray-50)!important}.font-gray-100{color:var(--color-gray-100)!important}.font-gray-200{color:var(--color-gray-200)!important}.font-gray-300{color:var(--color-gray-300)!important}.font-gray-400{color:var(--color-gray-400)!important}.font-gray-500{color:var(--color-gray-500)!important}.font-gray-600{color:var(--color-gray-600)!important}.font-gray-700{color:var(--color-gray-700)!important}.font-gray-800{color:var(--color-gray-800)!important}.font-gray-900{color:var(--color-gray-900)!important}.font-primary-50{color:var(--color-primary-50)!important}.font-primary-100{color:var(--color-primary-100)!important}.font-primary-200{color:var(--color-primary-200)!important}.font-primary-300{color:var(--color-primary-300)!important}.font-primary-400{color:var(--color-primary-400)!important}.font-primary-500{color:var(--color-primary-500)!important}.font-primary-600{color:var(--color-primary-600)!important}.font-primary-700{color:var(--color-primary-700)!important}.font-primary-800{color:var(--color-primary-800)!important}.font-primary-900{color:var(--color-primary-900)!important}.font-secondary-50{color:var(--color-secondary-50)!important}.font-secondary-100{color:var(--color-secondary-100)!important}.font-secondary-200{color:var(--color-secondary-200)!important}.font-secondary-300{color:var(--color-secondary-300)!important}.font-secondary-400{color:var(--color-secondary-400)!important}.font-secondary-500{color:var(--color-secondary-500)!important}.font-secondary-600{color:var(--color-secondary-600)!important}.font-secondary-700{color:var(--color-secondary-700)!important}.font-secondary-800{color:var(--color-secondary-800)!important}.font-secondary-900{color:var(--color-secondary-900)!important}.font-success-50{color:var(--color-success-50)!important}.font-success-100{color:var(--color-success-100)!important}.font-success-200{color:var(--color-success-200)!important}.font-success-300{color:var(--color-success-300)!important}.font-success-400{color:var(--color-success-400)!important}.font-success-500{color:var(--color-success-500)!important}.font-success-600{color:var(--color-success-600)!important}.font-success-700{color:var(--color-success-700)!important}.font-success-800{color:var(--color-success-800)!important}.font-success-900{color:var(--color-success-900)!important}.font-danger-50{color:var(--color-danger-50)!important}.font-danger-100{color:var(--color-danger-100)!important}.font-danger-200{color:var(--color-danger-200)!important}.font-danger-300{color:var(--color-danger-300)!important}.font-danger-400{color:var(--color-danger-400)!important}.font-danger-500{color:var(--color-danger-500)!important}.font-danger-600{color:var(--color-danger-600)!important}.font-danger-700{color:var(--color-danger-700)!important}.font-danger-800{color:var(--color-danger-800)!important}.font-danger-900{color:var(--color-danger-900)!important}.font-warning-50{color:var(--color-warning-50)!important}.font-warning-100{color:var(--color-warning-100)!important}.font-warning-200{color:var(--color-warning-200)!important}.font-warning-300{color:var(--color-warning-300)!important}.font-warning-400{color:var(--color-warning-400)!important}.font-warning-500{color:var(--color-warning-500)!important}.font-warning-600{color:var(--color-warning-600)!important}.font-warning-700{color:var(--color-warning-700)!important}.font-warning-800{color:var(--color-warning-800)!important}.font-warning-900{color:var(--color-warning-900)!important}.border-black{border-color:var(--color-black)!important}.border-white{border-color:var(--color-white)!important}.border-gray-50{border-color:var(--color-gray-50)!important}.border-gray-100{border-color:var(--color-gray-100)!important}.border-gray-200{border-color:var(--color-gray-200)!important}.border-gray-300{border-color:var(--color-gray-300)!important}.border-gray-400{border-color:var(--color-gray-400)!important}.border-gray-500{border-color:var(--color-gray-500)!important}.border-gray-600{border-color:var(--color-gray-600)!important}.border-gray-700{border-color:var(--color-gray-700)!important}.border-gray-800{border-color:var(--color-gray-800)!important}.border-gray-900{border-color:var(--color-gray-900)!important}.border-primary-50{border-color:var(--color-primary-50)!important}.border-primary-100{border-color:var(--color-primary-100)!important}.border-primary-200{border-color:var(--color-primary-200)!important}.border-primary-300{border-color:var(--color-primary-300)!important}.border-primary-400{border-color:var(--color-primary-400)!important}.border-primary-500{border-color:var(--color-primary-500)!important}.border-primary-600{border-color:var(--color-primary-600)!important}.border-primary-700{border-color:var(--color-primary-700)!important}.border-primary-800{border-color:var(--color-primary-800)!important}.border-primary-900{border-color:var(--color-primary-900)!important}.border-secondary-50{border-color:var(--color-secondary-50)!important}.border-secondary-100{border-color:var(--color-secondary-100)!important}.border-secondary-200{border-color:var(--color-secondary-200)!important}.border-secondary-300{border-color:var(--color-secondary-300)!important}.border-secondary-400{border-color:var(--color-secondary-400)!important}.border-secondary-500{border-color:var(--color-secondary-500)!important}.border-secondary-600{border-color:var(--color-secondary-600)!important}.border-secondary-700{border-color:var(--color-secondary-700)!important}.border-secondary-800{border-color:var(--color-secondary-800)!important}.border-secondary-900{border-color:var(--color-secondary-900)!important}.border-success-50{border-color:var(--color-success-50)!important}.border-success-100{border-color:var(--color-success-100)!important}.border-success-200{border-color:var(--color-success-200)!important}.border-success-300{border-color:var(--color-success-300)!important}.border-success-400{border-color:var(--color-success-400)!important}.border-success-500{border-color:var(--color-success-500)!important}.border-success-600{border-color:var(--color-success-600)!important}.border-success-700{border-color:var(--color-success-700)!important}.border-success-800{border-color:var(--color-success-800)!important}.border-success-900{border-color:var(--color-success-900)!important}.border-danger-50{border-color:var(--color-danger-50)!important}.border-danger-100{border-color:var(--color-danger-100)!important}.border-danger-200{border-color:var(--color-danger-200)!important}.border-danger-300{border-color:var(--color-danger-300)!important}.border-danger-400{border-color:var(--color-danger-400)!important}.border-danger-500{border-color:var(--color-danger-500)!important}.border-danger-600{border-color:var(--color-danger-600)!important}.border-danger-700{border-color:var(--color-danger-700)!important}.border-danger-800{border-color:var(--color-danger-800)!important}.border-danger-900{border-color:var(--color-danger-900)!important}.border-warning-50{border-color:var(--color-warning-50)!important}.border-warning-100{border-color:var(--color-warning-100)!important}.border-warning-200{border-color:var(--color-warning-200)!important}.border-warning-300{border-color:var(--color-warning-300)!important}.border-warning-400{border-color:var(--color-warning-400)!important}.border-warning-500{border-color:var(--color-warning-500)!important}.border-warning-600{border-color:var(--color-warning-600)!important}.border-warning-700{border-color:var(--color-warning-700)!important}.border-warning-800{border-color:var(--color-warning-800)!important}.border-warning-900{border-color:var(--color-warning-900)!important}.radius-xxl{-webkit-border-radius:var(--radius-xxl)!important;border-radius:var(--radius-xxl)!important}.radius-xl{-webkit-border-radius:var(--radius-xl)!important;border-radius:var(--radius-xl)!important}.radius-l{-webkit-border-radius:var(--radius-l)!important;border-radius:var(--radius-l)!important}.radius-m{-webkit-border-radius:var(--radius-m)!important;border-radius:var(--radius-m)!important}.radius-s{-webkit-border-radius:var(--radius-s)!important;border-radius:var(--radius-s)!important}.radius-xs{-webkit-border-radius:var(--radius-xs)!important;border-radius:var(--radius-xs)!important}.radius-round{-webkit-border-radius:var(--radius-round)!important;border-radius:var(--radius-round)!important}.radius-circle{-webkit-border-radius:var(--radius-circle)!important;border-radius:var(--radius-circle)!important}.shadow-xxl{-webkit-box-shadow:var(--shadow-xxl)!important;box-shadow:var(--shadow-xxl)!important}.shadow-xl{-webkit-box-shadow:var(--shadow-xl)!important;box-shadow:var(--shadow-xl)!important}.shadow-l{-webkit-box-shadow:var(--shadow-l)!important;box-shadow:var(--shadow-l)!important}.shadow-m{-webkit-box-shadow:var(--shadow-m)!important;box-shadow:var(--shadow-m)!important}.shadow-s{-webkit-box-shadow:var(--shadow-s)!important;box-shadow:var(--shadow-s)!important}.shadow-xs{-webkit-box-shadow:var(--shadow-xs)!important;box-shadow:var(--shadow-xs)!important}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.37",
3
+ "version": "0.0.39",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -21,6 +21,7 @@
21
21
  "plop:p": "yarn plop preview",
22
22
  "plop:st": "yarn plop subtype",
23
23
  "docgen": "react-docgen -o ./src/data/docgen.json ./src/lib/components/**/*.tsx",
24
+ "cssgen": "cssjson src/lib/index.css --output src/data/styles.json",
24
25
  "check-errors": "tsc --noEmit"
25
26
  },
26
27
  "dependencies": {
@@ -50,6 +51,7 @@
50
51
  "@types/styled-components": "^5.1.34",
51
52
  "@vitejs/plugin-react": "^4.3.1",
52
53
  "axios": "^1.7.5",
54
+ "cssjson-cli": "^1.0.1",
53
55
  "cypress": "^13.13.3",
54
56
  "eslint": "^9.9.1",
55
57
  "eslint-plugin-react": "^7.35.0",