@julseb-lib/react 0.0.36 → 0.0.38

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 +45 -45
  2. package/dist/index.es.js +113 -107
  3. package/dist/index.umd.js +94 -94
  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/context/Theme.context.tsx +14 -10
  32. package/dist/lib/utils/set-default-theme.ts +1 -1
  33. package/package.json +3 -1
package/dist/lib/Variables.ts CHANGED
@@ -277,12 +277,14 @@ export enum TRANSITIONS {
277
277
 
278
278
  /*====================== Breakpoints ======================*/
279
279
 
280
- export enum BREAKPOINTS {
281
- TABLET_LARGE = "(max-width: 1024px)",
282
- TABLET_SMALL = "(max-width: 768px)",
283
- MOBILE = "(max-width: 600px)",
280
+ export enum MEDIA {
281
+ BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)",
282
+ BREAKPOINT_TABLET_SMALL = "(max-width: 768px)",
283
+ BREAKPOINT_MOBILE = "(max-width: 600px)",
284
284
  TOUCH = "(hover: none) and (pointer: coarse)",
285
285
  HOVER = "(hover: hover)",
286
+ PREFERS_LIGHT = "(prefers-color-scheme: light)",
287
+ PREFERS_DARK = "(prefers-color-scheme: dark)",
286
288
  }
287
289
 
288
290
  /*====================== Icon multiplier ======================*/
package/dist/lib/components/Accordion/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_FAMILIES,
7
7
  FONT_SIZES,
8
8
  FONT_WEIGHTS,
@@ -51,7 +51,7 @@ const StyledAccordionButton = styled.button`
51
51
  border-bottom: 1px solid ${({ theme }) => theme.GRAY_200};
52
52
  color: ${({ theme }) => Mixins.ColorsHoverDefault("primary", theme)};
53
53
 
54
- @media ${BREAKPOINTS.HOVER} {
54
+ @media ${MEDIA.HOVER} {
55
55
  &:hover {
56
56
  color: ${({ theme }) =>
57
57
  Mixins.ColorsHoverHover("primary", theme)};
@@ -70,7 +70,7 @@ const StyledAccordionButton = styled.button`
70
70
  color: ${({ theme }) => theme.BACKGROUND};
71
71
  padding: ${SPACERS.S};
72
72
 
73
- @media ${BREAKPOINTS.HOVER} {
73
+ @media ${MEDIA.HOVER} {
74
74
  &:hover {
75
75
  background-color: ${({ theme }) =>
76
76
  Mixins.ColorsHoverHover("primary", theme)};
package/dist/lib/components/Aside/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
- import { setDefaultTheme, LAYOUTS, Mixins, SPACERS, BREAKPOINTS } from "../../"
5
+ import { setDefaultTheme, LAYOUTS, Mixins, SPACERS, MEDIA } from "../../"
6
6
  import type { LibAsideSize } from "../../types"
7
7
 
8
8
  const getAsideSize = (size: LibAsideSize) => {
@@ -36,7 +36,7 @@ const StyledAside = styled.aside<{
36
36
  flex-shrink: 0;
37
37
  }
38
38
 
39
- @media ${BREAKPOINTS.TABLET_SMALL} {
39
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
40
40
  height: inherit;
41
41
  }
42
42
  `
package/dist/lib/components/Breadcrumbs/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_SIZES,
7
7
  FONT_WEIGHTS,
8
8
  LINE_HEIGHTS,
@@ -35,7 +35,7 @@ const StyledBreadcrumbs = styled.nav<{
35
35
  transition: ${TRANSITIONS.SHORT};
36
36
  font-weight: ${FONT_WEIGHTS.BLACK};
37
37
 
38
- @media ${BREAKPOINTS.HOVER} {
38
+ @media ${MEDIA.HOVER} {
39
39
  &:hover {
40
40
  color: ${({ theme, $linkColor }) =>
41
41
  Mixins.ColorsHoverHover($linkColor, theme)};
package/dist/lib/components/Burger/styles.tsx CHANGED
@@ -2,13 +2,7 @@
2
2
 
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
- import {
6
- BREAKPOINTS,
7
- RADIUSES,
8
- TRANSITIONS,
9
- setDefaultTheme,
10
- Mixins,
11
- } from "../../"
5
+ import { MEDIA, RADIUSES, TRANSITIONS, setDefaultTheme, Mixins } from "../../"
12
6
  import type { LibColorsHoverAndCurrent } from "../../types"
13
7
 
14
8
  const StyledBurger = styled.button<{
@@ -34,7 +28,7 @@ const StyledBurger = styled.button<{
34
28
  case false:
35
29
  case undefined:
36
30
  return css`
37
- @media ${BREAKPOINTS.HOVER} {
31
+ @media ${MEDIA.HOVER} {
38
32
  &:hover {
39
33
  color: ${Mixins.ColorsHoverHover($color, theme)};
40
34
  }
package/dist/lib/components/ButtonIcon/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
- import { BREAKPOINTS, setDefaultTheme } from "../../"
5
+ import { MEDIA, setDefaultTheme } from "../../"
6
6
  import { ButtonMixin } from "../ComponentsMixins"
7
7
  import type { ILibButtonIconStyles } from "./subtypes"
8
8
 
@@ -18,7 +18,7 @@ const StyledButtonIcon = styled.button<ILibButtonIconStyles>`
18
18
  $variant === "transparent" &&
19
19
  $showBackgroundHover &&
20
20
  css`
21
- @media ${BREAKPOINTS.HOVER} {
21
+ @media ${MEDIA.HOVER} {
22
22
  &:not(:disabled):hover {
23
23
  background-color: ${theme.GRAY_50};
24
24
  }
package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import { css } from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_FAMILIES,
7
7
  INPUT_HEIGHT,
8
8
  LINE_HEIGHTS,
@@ -57,7 +57,7 @@ export const ButtonMixin = ({
57
57
  ? theme.FONT
58
58
  : theme.BACKGROUND};
59
59
 
60
- @media ${BREAKPOINTS.HOVER} {
60
+ @media ${MEDIA.HOVER} {
61
61
  &:not(:disabled):hover {
62
62
  background-color: ${Mixins.ColorsHoverHover(
63
63
  $color,
@@ -82,7 +82,7 @@ export const ButtonMixin = ({
82
82
  return css`
83
83
  color: ${Mixins.ColorsHoverDefault($color, theme)};
84
84
 
85
- @media ${BREAKPOINTS.HOVER} {
85
+ @media ${MEDIA.HOVER} {
86
86
  &:not(:disabled):hover {
87
87
  color: ${Mixins.ColorsHoverHover($color, theme)};
88
88
  }
@@ -108,7 +108,7 @@ export const ButtonMixin = ({
108
108
  ? theme.BACKGROUND
109
109
  : Mixins.ColorsHoverDefault($color, theme)};
110
110
 
111
- @media ${BREAKPOINTS.HOVER} {
111
+ @media ${MEDIA.HOVER} {
112
112
  &:not(:disabled):hover {
113
113
  background-color: ${Mixins.ColorsGhostHover(
114
114
  $color,
@@ -134,7 +134,7 @@ export const ButtonMixin = ({
134
134
  border-color: ${Mixins.ColorsHoverDefault($color, theme)};
135
135
  color: ${Mixins.ColorsHoverDefault($color, theme)};
136
136
 
137
- @media ${BREAKPOINTS.HOVER} {
137
+ @media ${MEDIA.HOVER} {
138
138
  &:not(:disabled):hover {
139
139
  border-color: ${Mixins.ColorsHoverHover(
140
140
  $color,
@@ -204,7 +204,7 @@ export const TextBaseMixin = ({
204
204
  color: ${({ theme }) => Mixins.ColorsHoverDefault($linkColor, theme)};
205
205
 
206
206
  &:not(:disabled) {
207
- @media ${BREAKPOINTS.HOVER} {
207
+ @media ${MEDIA.HOVER} {
208
208
  &:hover {
209
209
  color: ${({ theme }) =>
210
210
  Mixins.ColorsHoverHover($linkColor, theme)};
@@ -273,7 +273,7 @@ export const InputBaseMixin = ({
273
273
  transform: translateY(-1px);
274
274
  }
275
275
 
276
- @media ${BREAKPOINTS.HOVER} {
276
+ @media ${MEDIA.HOVER} {
277
277
  &:not(:disabled):hover::file-selector-button {
278
278
  background-color: ${({ theme }) => theme.GRAY_300};
279
279
  }
@@ -301,7 +301,7 @@ export const InputBaseMixin = ({
301
301
  color: ${COLORS_LIGHT.FONT};
302
302
  }
303
303
 
304
- @media ${BREAKPOINTS.HOVER} {
304
+ @media ${MEDIA.HOVER} {
305
305
  &:not(:disabled):hover::file-selector-button {
306
306
  background-color: ${COLORS_LIGHT.GRAY_300};
307
307
  }
@@ -324,7 +324,7 @@ export const InputBaseMixin = ({
324
324
  color: ${COLORS_DARK.FONT};
325
325
  }
326
326
 
327
- @media ${BREAKPOINTS.HOVER} {
327
+ @media ${MEDIA.HOVER} {
328
328
  &:not(:disabled):hover::file-selector-button {
329
329
  background-color: ${COLORS_DARK.GRAY_300};
330
330
  }
package/dist/lib/components/Datepicker/styles.tsx CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  SPACERS,
10
10
  COLORS_LIGHT,
11
11
  COLORS_DARK,
12
- BREAKPOINTS,
12
+ MEDIA,
13
13
  FONT_SIZES,
14
14
  } from "../../"
15
15
  import type {
@@ -152,7 +152,7 @@ const CalendarNavButton = styled.button<{
152
152
  background-color: transparent;
153
153
  color: currentColor;
154
154
 
155
- @media ${BREAKPOINTS.HOVER} {
155
+ @media ${MEDIA.HOVER} {
156
156
  &:not(:disabled):hover {
157
157
  background-color: ${({ theme, $validationStatus }) =>
158
158
  Mixins.ColorsHoverHover(
@@ -178,7 +178,7 @@ const CalendarNavButton = styled.button<{
178
178
  switch ($inputBackground) {
179
179
  case "light":
180
180
  return css`
181
- @media ${BREAKPOINTS.HOVER} {
181
+ @media ${MEDIA.HOVER} {
182
182
  &:not(:disabled):hover {
183
183
  background-color: ${Mixins.ColorsHoverHover(
184
184
  $validationStatus === false
@@ -206,7 +206,7 @@ const CalendarNavButton = styled.button<{
206
206
  `
207
207
  case "dark":
208
208
  return css`
209
- @media ${BREAKPOINTS.HOVER} {
209
+ @media ${MEDIA.HOVER} {
210
210
  &:not(:disabled):hover {
211
211
  background-color: ${Mixins.ColorsHoverHover(
212
212
  $validationStatus === false
@@ -303,7 +303,7 @@ const CalendarDay = styled.button<{
303
303
  color: ${({ theme }) => theme.BACKGROUND};
304
304
  }
305
305
 
306
- @media ${BREAKPOINTS.HOVER} {
306
+ @media ${MEDIA.HOVER} {
307
307
  &:not(:disabled):hover {
308
308
  background-color: ${({ theme, $validationStatus }) =>
309
309
  Mixins.ColorsHoverHover(
@@ -326,7 +326,7 @@ const CalendarDay = styled.button<{
326
326
  color: ${({ theme }) => theme.GRAY_500};
327
327
  }
328
328
 
329
- @media ${BREAKPOINTS.MOBILE} {
329
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
330
330
  width: ${BUTTON_MOBILE}px;
331
331
  height: ${BUTTON_MOBILE}px;
332
332
  }
@@ -354,7 +354,7 @@ const CalendarDay = styled.button<{
354
354
  color: ${COLORS_LIGHT.BACKGROUND};
355
355
  }
356
356
 
357
- @media ${BREAKPOINTS.HOVER} {
357
+ @media ${MEDIA.HOVER} {
358
358
  &:not(:disabled):hover {
359
359
  background-color: ${Mixins.ColorsHoverHover(
360
360
  $validationStatus === false
@@ -402,7 +402,7 @@ const CalendarDay = styled.button<{
402
402
  color: ${COLORS_DARK.BACKGROUND};
403
403
  }
404
404
 
405
- @media ${BREAKPOINTS.HOVER} {
405
+ @media ${MEDIA.HOVER} {
406
406
  &:not(:disabled):hover {
407
407
  background-color: ${Mixins.ColorsHoverHover(
408
408
  $validationStatus === false
package/dist/lib/components/Drawer/styles.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  Mixins,
7
7
  TRANSITIONS,
8
8
  stringifyPx,
9
- BREAKPOINTS,
9
+ MEDIA,
10
10
  } from "../../"
11
11
  import type {
12
12
  LibAllColors,
@@ -94,7 +94,7 @@ const DrawerContent = styled.div<{
94
94
  text-align: left;
95
95
  transition: ${TRANSITIONS.SHORT};
96
96
 
97
- @media ${BREAKPOINTS.HOVER} {
97
+ @media ${MEDIA.HOVER} {
98
98
  &:hover {
99
99
  color: ${({ $linksColor, theme }) =>
100
100
  Mixins.ColorsHoverHover($linksColor, theme)};
package/dist/lib/components/Dropdown/styles.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
5
  import {
6
- BREAKPOINTS,
6
+ MEDIA,
7
7
  FONT_FAMILIES,
8
8
  FONT_SIZES,
9
9
  FONT_WEIGHTS,
@@ -107,7 +107,7 @@ const StyledDropdownItem = styled.button<{
107
107
  $gap,
108
108
  })}
109
109
 
110
- @media ${BREAKPOINTS.HOVER} {
110
+ @media ${MEDIA.HOVER} {
111
111
  &:hover {
112
112
  background-color: ${({ theme, $accentColor }) =>
113
113
  Mixins.ColorsHoverHover($accentColor, theme)};
package/dist/lib/components/Footer/styles.tsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  setDefaultTheme,
6
6
  Mixins,
7
7
  SPACERS,
8
- BREAKPOINTS,
8
+ MEDIA,
9
9
  Image,
10
10
  Text,
11
11
  Flexbox,
@@ -43,7 +43,7 @@ const StyledFooter = styled.footer<{
43
43
  padding: 0;
44
44
  background-color: transparent;
45
45
 
46
- @media ${BREAKPOINTS.HOVER} {
46
+ @media ${MEDIA.HOVER} {
47
47
  &:hover {
48
48
  color: ${({ theme }) =>
49
49
  Mixins.ColorsHoverHover("primary", theme)};
@@ -56,7 +56,7 @@ const StyledFooter = styled.footer<{
56
56
  }
57
57
  }
58
58
 
59
- @media ${BREAKPOINTS.MOBILE} {
59
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
60
60
  flex-direction: column;
61
61
  gap: ${SPACERS.XS};
62
62
  }
@@ -92,7 +92,7 @@ const FooterLinksContainer = styled(Flexbox).attrs({
92
92
  gap: "xs",
93
93
  flexWrap: "wrap",
94
94
  })`
95
- @media ${BREAKPOINTS.MOBILE} {
95
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
96
96
  justify-content: center;
97
97
  align-items: center;
98
98
  }
package/dist/lib/components/Header/styles.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  TRANSITIONS,
13
13
  FONT_SIZES,
14
14
  FONT_WEIGHTS,
15
- BREAKPOINTS,
15
+ MEDIA,
16
16
  OVERLAYS,
17
17
  LINE_HEIGHTS,
18
18
  } from "../../"
@@ -41,7 +41,7 @@ const StyledHeaderBurger = styled(Burger)`
41
41
  display: none;
42
42
  z-index: 999;
43
43
 
44
- @media ${BREAKPOINTS.MOBILE} {
44
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
45
45
  display: inherit;
46
46
  }
47
47
  `
@@ -71,7 +71,7 @@ const StyledHeader = styled.header<{
71
71
  Mixins.AllColors($backgroundColor)};
72
72
  color: ${({ $textColor }) => Mixins.AllColors($textColor)};
73
73
 
74
- @media ${BREAKPOINTS.MOBILE} {
74
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
75
75
  height: ${({ $headerHeight }) => $headerHeight}px;
76
76
  }
77
77
 
@@ -95,7 +95,7 @@ const StyledHeader = styled.header<{
95
95
  ${({ $burgerPosition }) =>
96
96
  $burgerPosition === "left" &&
97
97
  css`
98
- @media ${BREAKPOINTS.MOBILE} {
98
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
99
99
  justify-content: flex-start;
100
100
  gap: ${SPACERS.XS};
101
101
  }
@@ -121,7 +121,7 @@ const StyledHeader = styled.header<{
121
121
  color: ${({ theme }) =>
122
122
  Mixins.ColorsHoverDefault($linkColor, theme)};
123
123
 
124
- @media ${BREAKPOINTS.HOVER} {
124
+ @media ${MEDIA.HOVER} {
125
125
  &:hover {
126
126
  color: ${({ theme }) =>
127
127
  Mixins.ColorsHoverHover($linkColor, theme)};
@@ -150,7 +150,7 @@ const StyledHeader = styled.header<{
150
150
  return css`
151
151
  background-color: transparent;
152
152
 
153
- @media ${BREAKPOINTS.MOBILE} {
153
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
154
154
  &.Open {
155
155
  background-color: ${theme.PRIMARY_500};
156
156
 
@@ -161,7 +161,7 @@ const StyledHeader = styled.header<{
161
161
  color: ${({ theme }) =>
162
162
  Mixins.ColorsHoverDefault("white", theme)};
163
163
 
164
- @media ${BREAKPOINTS.HOVER} {
164
+ @media ${MEDIA.HOVER} {
165
165
  &:hover {
166
166
  color: ${({ theme }) =>
167
167
  Mixins.ColorsHoverHover(
@@ -202,7 +202,7 @@ const StyledHeader = styled.header<{
202
202
  & > ${Logo} {
203
203
  color: ${Mixins.ColorsHoverDefault($linkColor, theme)};
204
204
 
205
- @media ${BREAKPOINTS.HOVER} {
205
+ @media ${MEDIA.HOVER} {
206
206
  &:hover {
207
207
  color: ${({ theme }) =>
208
208
  Mixins.ColorsHoverHover($linkColor, theme)};
@@ -240,7 +240,7 @@ const Nav = styled.nav<{
240
240
  flex-grow: 1;
241
241
  `}
242
242
 
243
- @media ${BREAKPOINTS.MOBILE} {
243
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
244
244
  position: absolute;
245
245
  background-color: ${({ theme, $variant }) =>
246
246
  $variant === "white" ? theme.WHITE : theme.PRIMARY_500};
@@ -326,7 +326,7 @@ const SearchForm = styled.form<{ $maxWidth?: string | number }>`
326
326
  width: 100%;
327
327
  max-width: ${({ $maxWidth }) => $maxWidth && stringifyPx($maxWidth)};
328
328
 
329
- @media ${BREAKPOINTS.MOBILE} {
329
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
330
330
  max-width: 100%;
331
331
  }
332
332
  `
package/dist/lib/components/InputCheck/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled, { css } from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_SIZES,
7
7
  LINE_HEIGHTS,
8
8
  Mixins,
@@ -123,7 +123,7 @@ const StyledInputCheck = styled.label<{
123
123
 
124
124
  ${!$disabled &&
125
125
  css`
126
- @media ${BREAKPOINTS.HOVER} {
126
+ @media ${MEDIA.HOVER} {
127
127
  &:hover {
128
128
  border-color: ${Mixins.ColorsHoverHover(
129
129
  $validationStatus === false
@@ -158,7 +158,7 @@ const StyledInputCheck = styled.label<{
158
158
 
159
159
  ${!$disabled &&
160
160
  css`
161
- @media ${BREAKPOINTS.HOVER} {
161
+ @media ${MEDIA.HOVER} {
162
162
  &:hover {
163
163
  background-color: ${Mixins.ColorsHoverHover(
164
164
  $validationStatus === false
@@ -239,7 +239,7 @@ const StyledInputCheck = styled.label<{
239
239
 
240
240
  ${!$disabled &&
241
241
  css`
242
- @media ${BREAKPOINTS.HOVER} {
242
+ @media ${MEDIA.HOVER} {
243
243
  &:hover {
244
244
  background-color: ${Mixins.ColorsHoverHover(
245
245
  $validationStatus === false
package/dist/lib/components/InputComponents/styles.tsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  COLORS_LIGHT,
9
9
  COLORS_DARK,
10
10
  TRANSITIONS,
11
- BREAKPOINTS,
11
+ MEDIA,
12
12
  SPACERS,
13
13
  RADIUSES,
14
14
  } from "../.."
@@ -194,7 +194,7 @@ const StyledInputButton = styled.button<{
194
194
  $justifyContent: "center",
195
195
  })};
196
196
 
197
- @media ${BREAKPOINTS.HOVER} {
197
+ @media ${MEDIA.HOVER} {
198
198
  &:not(:disabled):hover {
199
199
  color: ${({ theme, $validationStatus, $isSpan }) =>
200
200
  !$isSpan &&
@@ -236,7 +236,7 @@ const StyledInputButton = styled.button<{
236
236
  "light"
237
237
  )};
238
238
 
239
- @media ${BREAKPOINTS.HOVER} {
239
+ @media ${MEDIA.HOVER} {
240
240
  &:not(:disabled):hover {
241
241
  color: ${!$isSpan &&
242
242
  Mixins.ColorsHoverHover(
@@ -272,7 +272,7 @@ const StyledInputButton = styled.button<{
272
272
  "dark"
273
273
  )};
274
274
 
275
- @media ${BREAKPOINTS.HOVER} {
275
+ @media ${MEDIA.HOVER} {
276
276
  &:not(:disabled):hover {
277
277
  color: ${!$isSpan &&
278
278
  Mixins.ColorsHoverHover(
@@ -525,7 +525,7 @@ const StyledListInputItem = styled.span<{
525
525
  css`
526
526
  cursor: pointer;
527
527
 
528
- @media ${BREAKPOINTS.HOVER} {
528
+ @media ${MEDIA.HOVER} {
529
529
  &:hover {
530
530
  background-color: ${Mixins.ColorsHoverHover(
531
531
  $validationStatus === false ? "danger" : "primary",
@@ -558,7 +558,7 @@ const StyledListInputItem = styled.span<{
558
558
 
559
559
  ${!$readOnly &&
560
560
  css`
561
- @media ${BREAKPOINTS.HOVER} {
561
+ @media ${MEDIA.HOVER} {
562
562
  &:hover {
563
563
  background-color: ${Mixins.ColorsHoverHover(
564
564
  $validationStatus === false
@@ -595,7 +595,7 @@ const StyledListInputItem = styled.span<{
595
595
 
596
596
  ${!$readOnly &&
597
597
  css`
598
- @media ${BREAKPOINTS.HOVER} {
598
+ @media ${MEDIA.HOVER} {
599
599
  &:hover {
600
600
  background-color: ${Mixins.ColorsHoverHover(
601
601
  $validationStatus === false
package/dist/lib/components/InputImage/styles.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
5
  import {
6
- BREAKPOINTS,
6
+ MEDIA,
7
7
  Image,
8
8
  Mixins,
9
9
  setDefaultTheme,
@@ -66,7 +66,7 @@ const StyledHoverContainer = styled.div<{
66
66
  ${({ $disabled }) =>
67
67
  !$disabled &&
68
68
  css`
69
- @media ${BREAKPOINTS.HOVER} {
69
+ @media ${MEDIA.HOVER} {
70
70
  opacity: 0;
71
71
 
72
72
  &.Visible {
package/dist/lib/components/InputSlider/styles.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import styled, { css } from "styled-components"
4
4
  import { getPercentage } from "@julseb-lib/utils"
5
5
  import {
6
- BREAKPOINTS,
6
+ MEDIA,
7
7
  OVERLAYS,
8
8
  RADIUSES,
9
9
  SHADOWS,
@@ -58,7 +58,7 @@ const StyledInputSlider = styled.input<{
58
58
  position: relative;
59
59
  z-index: 2;
60
60
 
61
- @media ${BREAKPOINTS.HOVER} {
61
+ @media ${MEDIA.HOVER} {
62
62
  &:not(:disabled):hover {
63
63
  background-color: ${({ theme, $validationStatus }) =>
64
64
  Mixins.ColorsHoverHover(
@@ -136,7 +136,7 @@ const StyledInputSlider = styled.input<{
136
136
  $validationStatus === false ? "danger" : "primary"
137
137
  )};
138
138
 
139
- @media ${BREAKPOINTS.HOVER} {
139
+ @media ${MEDIA.HOVER} {
140
140
  &:not(:disabled):hover {
141
141
  background-color: ${Mixins.ColorsHoverHover(
142
142
  $validationStatus === false
@@ -196,7 +196,7 @@ const StyledInputSlider = styled.input<{
196
196
  $validationStatus === false ? "danger" : "primary"
197
197
  )};
198
198
 
199
- @media ${BREAKPOINTS.HOVER} {
199
+ @media ${MEDIA.HOVER} {
200
200
  &:not(:disabled):hover {
201
201
  background-color: ${Mixins.ColorsHoverHover(
202
202
  $validationStatus === false
package/dist/lib/components/ListGroup/styles.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
5
  import {
6
- BREAKPOINTS,
6
+ MEDIA,
7
7
  FONT_SIZES,
8
8
  FONT_WEIGHTS,
9
9
  LINE_HEIGHTS,
@@ -73,7 +73,7 @@ const StyledListItem = styled.div<{
73
73
  transition: ${TRANSITIONS.SHORT};
74
74
  color: ${Mixins.ColorsHoverDefault("primary", theme)};
75
75
 
76
- @media ${BREAKPOINTS.HOVER} {
76
+ @media ${MEDIA.HOVER} {
77
77
  &:not(:disabled):hover {
78
78
  background-color: ${Mixins.ColorsHoverHover(
79
79
  "primary",
package/dist/lib/components/Main/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled, { css } from "styled-components"
4
4
  import { stringifyPx } from "@julseb-lib/utils"
5
- import { setDefaultTheme, Mixins, BREAKPOINTS, SPACERS, LAYOUTS } from "../../"
5
+ import { setDefaultTheme, Mixins, MEDIA, SPACERS, LAYOUTS } from "../../"
6
6
  import type { LibMainSize } from "../../types"
7
7
 
8
8
  const getMainSize = (size: LibMainSize) => {
@@ -51,7 +51,7 @@ const StyledMain = styled.main<{
51
51
  }
52
52
  `}
53
53
 
54
- @media ${BREAKPOINTS.TABLET_SMALL} {
54
+ @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
55
55
  height: unset;
56
56
  }
57
57
  `
package/dist/lib/components/MarkdownEditor/styles.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  setDefaultTheme,
7
7
  Flexbox,
8
8
  SPACERS,
9
- BREAKPOINTS,
9
+ MEDIA,
10
10
  RADIUSES,
11
11
  Mixins,
12
12
  FONT_FAMILIES,
@@ -101,7 +101,7 @@ const ButtonsContainer = styled(Flexbox).attrs({
101
101
  border-radius: ${RADIUSES.M} ${RADIUSES.M} 0 0;
102
102
  padding: ${SPACERS.XS};
103
103
 
104
- @media ${BREAKPOINTS.MOBILE} {
104
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
105
105
  gap: 0;
106
106
  align-items: flex-start;
107
107
  justify-content: flex-start;
package/dist/lib/components/Messaging/styles.tsx CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  RADIUSES,
12
12
  ButtonIcon,
13
13
  TRANSITIONS,
14
- BREAKPOINTS,
14
+ MEDIA,
15
15
  Flexbox,
16
16
  } from "../../"
17
17
 
@@ -115,7 +115,7 @@ const StyledMessage = styled.p`
115
115
  color: ${({ theme }) =>
116
116
  Mixins.ColorsHoverDefault("background", theme)};
117
117
 
118
- @media ${BREAKPOINTS.HOVER} {
118
+ @media ${MEDIA.HOVER} {
119
119
  &:hover {
120
120
  color: ${({ theme }) =>
121
121
  Mixins.ColorsHoverHover("background", theme)};
@@ -141,7 +141,7 @@ const StyledMessage = styled.p`
141
141
  color: ${({ theme }) =>
142
142
  Mixins.ColorsHoverDefault("primary", theme)};
143
143
 
144
- @media ${BREAKPOINTS.HOVER} {
144
+ @media ${MEDIA.HOVER} {
145
145
  &:hover {
146
146
  color: ${({ theme }) =>
147
147
  Mixins.ColorsHoverHover("primary", theme)};