@platformatic/ui-components 0.1.137 → 0.1.139

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 (17) hide show
  1. package/dist/assets/index-45c3b9ea.css +1 -0
  2. package/dist/assets/{index-706e83c1.js → index-5faf74a6.js} +19 -19
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Common.module.css +21 -0
  6. package/src/components/DropDown.jsx +19 -4
  7. package/src/components/FollowUs.jsx +41 -32
  8. package/src/components/SearchBarV2.jsx +12 -4
  9. package/src/components/SearchBarV2.module.css +5 -3
  10. package/src/components/forms/Input.jsx +33 -21
  11. package/src/components/forms/Input.module.css +0 -1
  12. package/src/components/forms/InputWithSeparator.jsx +3 -3
  13. package/src/components/forms/InputWithSeparator.module.css +5 -3
  14. package/src/components/forms/Select.jsx +12 -7
  15. package/src/components/forms/Select.module.css +1 -1
  16. package/src/stories/forms/Input.stories.jsx +3 -3
  17. package/dist/assets/index-89e9ad97.css +0 -1
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-706e83c1.js"></script>
8
- <link rel="stylesheet" href="/assets/index-89e9ad97.css">
7
+ <script type="module" crossorigin src="/assets/index-5faf74a6.js"></script>
8
+ <link rel="stylesheet" href="/assets/index-45c3b9ea.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.137",
4
+ "version": "0.1.139",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Common.module.css CHANGED
@@ -43,6 +43,27 @@
43
43
  .bordered--white-100 {
44
44
  @apply border-white/100;
45
45
  }
46
+ .bordered--main-green-70 {
47
+ @apply border-main-green/70;
48
+ }
49
+ .bordered--main-dark-blue-70 {
50
+ @apply border-main-dark-blue/70;
51
+ }
52
+ .bordered--tertiary-blue-70 {
53
+ @apply border-tertiary-blue/70;
54
+ }
55
+ .bordered--error-red-70 {
56
+ @apply border-error-red/70;
57
+ }
58
+ .bordered--warning-yellow-70 {
59
+ @apply border-warning-yellow/70;
60
+ }
61
+ .bordered--dark-blue-70 {
62
+ @apply border-dark-blue/70;
63
+ }
64
+ .bordered--white-70 {
65
+ @apply border-white/70;
66
+ }
46
67
  .bordered--main-green-30 {
47
68
  @apply border-main-green/30;
48
69
  }
package/src/components/DropDown.jsx CHANGED
@@ -5,7 +5,17 @@ import styles from './DropDown.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
7
  import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
8
- function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor, lastButton }) {
8
+ function DropDown ({
9
+ pictureUrl,
10
+ header,
11
+ items,
12
+ align,
13
+ backgroundColor,
14
+ textColor,
15
+ borderColor,
16
+ headerColor,
17
+ lastButton
18
+ }) {
9
19
  const [open, setOpen] = useState(false)
10
20
  const borderClass = commonStyles[`bordered--${borderColor}-30`]
11
21
 
@@ -47,7 +57,7 @@ function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColo
47
57
  <div className={classNameMenu}>
48
58
  {items.map((item, index) => {
49
59
  return (
50
- <div className={classNameItem} key={index}>
60
+ <div className={classNameItem} key={index} onClick={handleOpen}>
51
61
  {item}
52
62
  </div>
53
63
  )
@@ -95,7 +105,11 @@ DropDown.propTypes = {
95
105
  /**
96
106
  * lastButton
97
107
  */
98
- lastButton: PropTypes.node
108
+ lastButton: PropTypes.node,
109
+ /**
110
+ * callBackClose
111
+ */
112
+ callBackClose: PropTypes.func
99
113
  }
100
114
 
101
115
  DropDown.defaultProps = {
@@ -107,6 +121,7 @@ DropDown.defaultProps = {
107
121
  textColor: MAIN_DARK_BLUE,
108
122
  headerColor: WHITE,
109
123
  borderColor: WHITE,
110
- lastButton: null
124
+ lastButton: null,
125
+ callBackClose: () => {}
111
126
  }
112
127
  export default DropDown
package/src/components/FollowUs.jsx CHANGED
@@ -23,7 +23,14 @@ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize })
23
23
  )
24
24
  }
25
25
 
26
- function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
26
+ function FollowUs ({
27
+ label,
28
+ labelClassName,
29
+ useOnFrontpage,
30
+ iconColor,
31
+ iconSize,
32
+ socialElements
33
+ }) {
27
34
  const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
28
35
  const className = styles[`container${suffix}`]
29
36
  const iconClassName = styles[`icon${suffix}`]
@@ -34,34 +41,16 @@ function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize,
34
41
  {label}
35
42
  </div>
36
43
 
37
- <SocialElement
38
- href='https://twitter.com/platformatic'
39
- iconName='SocialXIcon'
40
- iconClassName={iconClassName}
41
- iconColor={iconColor}
42
- iconSize={iconSize}
43
- />
44
- <SocialElement
45
- href='https://www.linkedin.com/company/platformatic/'
46
- iconName='SocialLinkedInIcon'
47
- iconClassName={iconClassName}
48
- iconColor={iconColor}
49
- iconSize={iconSize}
50
- />
51
- <SocialElement
52
- href='https://github.com/platformatic'
53
- iconName='SocialGitHubIcon'
54
- iconClassName={iconClassName}
55
- iconColor={iconColor}
56
- iconSize={iconSize}
57
- />
58
- <SocialElement
59
- href='https://discord.gg/platformatic'
60
- iconName='SocialDiscordIcon'
61
- iconClassName={iconClassName}
62
- iconColor={iconColor}
63
- iconSize={iconSize}
64
- />
44
+ {socialElements.map(socialElement =>
45
+ <SocialElement
46
+ key={socialElement.link}
47
+ href={socialElement.link}
48
+ iconName={socialElement.iconName}
49
+ iconClassName={iconClassName}
50
+ iconColor={iconColor}
51
+ iconSize={iconSize}
52
+ />
53
+ )}
65
54
  </div>
66
55
  )
67
56
  }
@@ -90,15 +79,35 @@ FollowUs.propTypes = {
90
79
  /**
91
80
  * iconSize
92
81
  */
93
- iconSize: PropTypes.oneOf([MEDIUM, SMALL])
82
+ iconSize: PropTypes.oneOf([MEDIUM, SMALL]),
83
+ /**
84
+ * socialElements
85
+ */
86
+ socialElements: PropTypes.arrayOf(PropTypes.shape({
87
+ link: PropTypes.string.isRequired,
88
+ iconName: PropTypes.string.isRequired
89
+ }))
94
90
  }
95
91
 
96
92
  FollowUs.defaultProps = {
97
93
  label: 'Follow us on',
98
94
  labelClassName: '',
99
95
  useOnFrontpage: true,
100
- labelColor: LIGHT_GREEN,
101
96
  iconColor: WHITE,
102
- iconSize: MEDIUM
97
+ iconSize: MEDIUM,
98
+ socialElements: [{
99
+ link: 'https://twitter.com/platformatic',
100
+ iconName: 'SocialXIcon'
101
+ }, {
102
+ link: 'https://www.linkedin.com/company/platformatic/',
103
+ iconName: 'SocialLinkedInIcon'
104
+ }, {
105
+ link: 'https://github.com/platformatic',
106
+ iconName: 'SocialGitHubIcon'
107
+ }, {
108
+ link: 'https://discord.gg/platformatic',
109
+ iconName: 'SocialDiscordIcon'
110
+ }]
111
+
103
112
  }
104
113
  export default FollowUs
package/src/components/SearchBarV2.jsx CHANGED
@@ -13,11 +13,13 @@ function SearchBarV2 ({
13
13
  backgroundColor,
14
14
  placeholder,
15
15
  dataAttrName,
16
- dataAttrValue
16
+ dataAttrValue,
17
+ inputTextClassName
17
18
  }) {
18
19
  const inputRef = useRef()
19
20
  const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
20
21
  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
22
+ const inputClassName = `${styles.input} ${inputTextClassName} `
21
23
  const [isOnFocus, setIsOnFocus] = useState(false)
22
24
  const [showClear, setShowClear] = useState(false)
23
25
  const dataProps = {}
@@ -68,7 +70,7 @@ function SearchBarV2 ({
68
70
  return (
69
71
  <div className={wrapperClassName} {...dataProps}>
70
72
  <PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={SMALL} onClick={handleSearch} />
71
- <input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
73
+ <input type='text' placeholder={placeholder} className={inputClassName} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
72
74
  {showClear && (
73
75
  <div className={styles.clearContainer}>
74
76
  <PlatformaticIcon iconName='CircleCloseIcon' color={color} size={SMALL} onClick={handleClear} />
@@ -110,7 +112,11 @@ SearchBarV2.propTypes = {
110
112
  /**
111
113
  * dataAttrValue
112
114
  */
113
- dataAttrValue: PropTypes.string
115
+ dataAttrValue: PropTypes.string,
116
+ /**
117
+ * inputTextClassName
118
+ */
119
+ inputTextClassName: PropTypes.string
114
120
  }
115
121
 
116
122
  SearchBarV2.defaultProps = {
@@ -121,7 +127,9 @@ SearchBarV2.defaultProps = {
121
127
  onClear: () => { },
122
128
  placeholder: 'Search',
123
129
  dataAttrName: '',
124
- dataAttrValue: ''
130
+ dataAttrValue: '',
131
+ inputTextClassName: ''
132
+
125
133
  }
126
134
 
127
135
  export default SearchBarV2
package/src/components/SearchBarV2.module.css CHANGED
@@ -1,14 +1,16 @@
1
1
  .container {
2
- @apply relative flex gap-x-2 w-full h-auto border border-solid box-border rounded-md;
2
+ @apply flex items-center gap-x-2 w-full h-auto border border-solid box-border rounded-md relative ;
3
3
  }
4
4
  .input {
5
5
  @apply w-full p-0 bg-transparent border-none text-white ;
6
+ padding-block: 0px;
7
+ padding-inline: 0px;
6
8
  }
7
9
  .onFocus {
8
10
  @apply border-white;
9
11
  }
10
12
  .onBlur {
11
- @apply border-white/15;
13
+ @apply border-white/70;
12
14
  }
13
15
  .fillWhite {
14
16
  @apply fill-white;
@@ -23,6 +25,6 @@
23
25
  @apply absolute right-[1rem];
24
26
  }
25
27
  .wrapperPadding {
26
- @apply px-2 py-1.5;
28
+ @apply px-2 py-1.5 md:px-3 md:py-[8.5px];
27
29
  }
28
30
 
package/src/components/forms/Input.jsx CHANGED
@@ -1,11 +1,10 @@
1
1
  'use strict'
2
- import React from 'react'
2
+ import React, { useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import styles from './Input.module.css'
5
5
  import commonStyles from '../Common.module.css'
6
6
  import PlatformaticIcon from '../PlatformaticIcon'
7
- import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
8
- import BorderedBox from '../BorderedBox'
7
+ import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
9
8
 
10
9
  function Input ({
11
10
  placeholder,
@@ -17,7 +16,6 @@ function Input ({
17
16
  disabled,
18
17
  beforeIcon,
19
18
  afterIcon,
20
- focused,
21
19
  placeholderApart,
22
20
  backgroundColor,
23
21
  inputTextClassName,
@@ -26,16 +24,15 @@ function Input ({
26
24
  dataAttrValue,
27
25
  readOnly
28
26
  }) {
29
- let inputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
30
- inputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
31
- inputClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
32
- inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
27
+ let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
28
+ baseInputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
29
+ baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
33
30
 
34
31
  const showError = errorMessage.length > 0
35
- if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
36
- if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
37
- if (beforeIcon) inputClassName += ' ' + styles.beforeIconPadding
38
- if (afterIcon) inputClassName += ' ' + styles.afterIconPadding
32
+ if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
33
+ if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
34
+ if (afterIcon) baseInputClassName += ' ' + styles.afterIconPadding
35
+ const [focus, setFocus] = useState(false)
39
36
  const inputPlaceholder = placeholderApart ? '' : placeholder
40
37
 
41
38
  const dataProps = {}
@@ -43,7 +40,27 @@ function Input ({
43
40
  dataProps[`data-${dataAttrName}`] = dataAttrValue
44
41
  }
45
42
 
46
- const cmp = (
43
+ function focusedClassName () {
44
+ const useEffectColor = showError ? ERROR_RED : borderColor
45
+ return (baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-100`])
46
+ }
47
+
48
+ function normalClassName () {
49
+ const useEffectColor = showError ? ERROR_RED : borderColor
50
+ return baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-70`]
51
+ }
52
+
53
+ function handleFocus () {
54
+ if (!disabled) {
55
+ setFocus(true)
56
+ }
57
+ }
58
+
59
+ function handleBlur () {
60
+ if (!disabled) setFocus(false)
61
+ }
62
+
63
+ return (
47
64
  <div className={styles.container} {...dataProps}>
48
65
  <div className={styles.inputContainer}>
49
66
  {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
@@ -51,12 +68,14 @@ function Input ({
51
68
  type='text'
52
69
  name={name}
53
70
  value={value}
54
- className={inputClassName}
71
+ className={focus ? focusedClassName() : normalClassName()}
55
72
  onChange={onChange}
56
73
  disabled={disabled}
57
74
  placeholder={inputPlaceholder}
58
75
  readOnly={readOnly}
59
76
  aria-readonly={readOnly}
77
+ onFocus={() => handleFocus()}
78
+ onBlur={() => handleBlur()}
60
79
  />
61
80
  {placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
62
81
  {afterIcon && <div className={styles.afterInputIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
@@ -64,8 +83,6 @@ function Input ({
64
83
  {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
65
84
  </div>
66
85
  )
67
-
68
- return focused ? (<BorderedBox classes={styles.paddingFocused} color={MAIN_GREEN} backgroundColor={MAIN_GREEN} opaque={10}>{cmp}</BorderedBox>) : cmp
69
86
  }
70
87
 
71
88
  Input.propTypes = {
@@ -113,10 +130,6 @@ Input.propTypes = {
113
130
  color: PropTypes.string,
114
131
  onClick: PropTypes.func
115
132
  }),
116
- /**
117
- * addFocus
118
- */
119
- focused: PropTypes.bool,
120
133
  /**
121
134
  * placeholderApart
122
135
  */
@@ -158,7 +171,6 @@ Input.defaultProps = {
158
171
  disabled: false,
159
172
  beforeIcon: null,
160
173
  afterIcon: null,
161
- focused: false,
162
174
  shadowPlaceholder: false,
163
175
  inputTextClassName: '',
164
176
  verticalPaddingClassName: '',
package/src/components/forms/Input.module.css CHANGED
@@ -45,6 +45,5 @@
45
45
  }
46
46
  .input.active,
47
47
  .input:focus {
48
- @apply shadow-white;
49
48
  outline: none;
50
49
  }
package/src/components/forms/InputWithSeparator.jsx CHANGED
@@ -25,7 +25,7 @@ function InputWithSeparator ({
25
25
  const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
26
26
  const [chunks, setChunks] = useState([])
27
27
  const [inputClassName, setInputClassName] = useState(normalClassName())
28
- const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
28
+ const chunkClasses = styles.chunkClasses
29
29
  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
30
30
  const showError = errorMessage.length > 0
31
31
  if (showError) className += ' ' + commonStyles['bordered--error-red']
@@ -71,9 +71,9 @@ function InputWithSeparator ({
71
71
 
72
72
  function renderChunk (chunk, index) {
73
73
  return (
74
- <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index}>
74
+ <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index} bor>
75
75
  <div className={styles.chunkContent}>
76
- <span className={`${styles.chunkText} ${inputTextClassName}`}>{chunk}</span>
76
+ <span className={`${inputTextClassName} ${styles.chunkText} `}>{chunk}</span>
77
77
  <ButtonFullRounded
78
78
  iconName='CircleCloseIcon'
79
79
  iconSize={SMALL}
package/src/components/forms/InputWithSeparator.module.css CHANGED
@@ -2,10 +2,10 @@
2
2
  @apply flex gap-x-2 w-full items-center;
3
3
  }
4
4
  .chunkText {
5
- @apply text-sm;
5
+ @apply text-[14px] leading-[17px] !important ;
6
6
  }
7
7
  .inputContainer {
8
- @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow px-2;
8
+ @apply flex min-h-[40px] border border-solid box-border rounded-md items-center gap-2 flex-wrap relative grow px-2;
9
9
  }
10
10
  .input {
11
11
  @apply h-full m-0 border-0;
@@ -34,6 +34,8 @@
34
34
 
35
35
  .input.active,
36
36
  .input:focus {
37
- @apply shadow-white;
38
37
  outline: none;
38
+ }
39
+ .chunkClasses {
40
+ @apply flex-none p-2 my-0 border-0;
39
41
  }
package/src/components/forms/Select.jsx CHANGED
@@ -25,8 +25,8 @@ function Select ({
25
25
  optionSelected,
26
26
  dataAttrName,
27
27
  dataAttrValue,
28
- backgroundColor
29
-
28
+ backgroundColor,
29
+ inputTextClassName
30
30
  }) {
31
31
  const inputRef = useRef()
32
32
  const [showOptions, setShowOptions] = useState(false)
@@ -34,7 +34,7 @@ function Select ({
34
34
  const [isOnFocus, setIsOnFocus] = useState(false)
35
35
  const showError = errorMessage.length > 0
36
36
  const containerClassName = `${styles.container} ${defaultContainerClassName} `
37
- let inputClassName = `${commonStyles.fullWidth} ${styles.select}`
37
+ let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
38
38
  inputClassName += ' ' + styles[`select-${mainColor}`]
39
39
  inputClassName += ' ' + commonStyles[`text--${borderColor}`]
40
40
  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
@@ -47,7 +47,7 @@ function Select ({
47
47
  optionsClassName += ' ' + styles['bordered-options']
48
48
  optionsClassName += ' ' + commonStyles[`bordered--${borderListColor}-30`]
49
49
  }
50
- let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-15`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
50
+ let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-70`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
51
51
  if (optionsBorderedBottom) {
52
52
  singleOptionClassName += ` ${styles['bordered-bottom']}`
53
53
  }
@@ -60,7 +60,7 @@ function Select ({
60
60
  }
61
61
 
62
62
  function normalClassName () {
63
- return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-15`]
63
+ return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-70`]
64
64
  }
65
65
 
66
66
  const dataProps = {}
@@ -275,7 +275,11 @@ Select.propTypes = {
275
275
  /**
276
276
  * backgroundColor
277
277
  */
278
- backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK])
278
+ backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
279
+ /**
280
+ * inputTextClassName
281
+ */
282
+ inputTextClassName: PropTypes.string
279
283
  }
280
284
 
281
285
  Select.defaultProps = {
@@ -298,7 +302,8 @@ Select.defaultProps = {
298
302
  optionSelected: null,
299
303
  dataAttrName: '',
300
304
  dataAttrValue: '',
301
- backgroundColor: WHITE
305
+ backgroundColor: WHITE,
306
+ inputTextClassName: ''
302
307
  }
303
308
 
304
309
  export default Select
package/src/components/forms/Select.module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @apply w-full flex items-center relative z-10;
6
6
  }
7
7
  .select {
8
- @apply px-2 h-full border border-solid box-border rounded-md py-1.5;
8
+ @apply py-1.5 px-2 md:px-3 md:py-[10.5px] h-full border border-solid box-border rounded-md ;
9
9
  }
10
10
 
11
11
  .select-main-dark-blue.active,
package/src/stories/forms/Input.stories.jsx CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict'
2
2
  import React, { useState } from 'react'
3
3
  import Input from '../../components/forms/Input'
4
+ import { ERROR_RED } from '../../components/constants'
4
5
 
5
6
  const divStyle = {
6
7
  width: '100%',
@@ -88,13 +89,12 @@ IconBeforeAndAfter.args = {
88
89
  }
89
90
  }
90
91
 
91
- export const Focused = TemplateBorderMainDarkBlue.bind({})
92
+ export const Focused = TemplateValuedAndAlertChange.bind({})
92
93
 
93
94
  Focused.args = {
94
95
  name: 'test',
95
96
  placeholder: 'Platformatic',
96
- borderColor: 'main-dark-blue',
97
- focused: true
97
+ borderColor: ERROR_RED
98
98
  }
99
99
 
100
100
  export const PlaceholderAPart = TemplateValuedAndAlertChange.bind({})
package/dist/assets/index-89e9ad97.css DELETED
@@ -1 +0,0 @@
1
- ._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_5vifr_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_5vifr_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_5vifr_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_5vifr_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_5vifr_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_5vifr_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_5vifr_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_5vifr_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--main-green-100_5vifr_25{border-color:#21fa90}._bordered--main-dark-blue-100_5vifr_28{border-color:#00283d}._bordered--tertiary-blue-100_5vifr_31{border-color:#2588e4}._bordered--error-red-100_5vifr_34{border-color:#fa2121}._bordered--warning-yellow-100_5vifr_37{border-color:#feb928}._bordered--dark-blue-100_5vifr_40{border-color:#00344f}._bordered--white-100_5vifr_43{border-color:#fff}._bordered--main-green-30_5vifr_46{border-color:#21fa904d}._bordered--main-dark-blue-30_5vifr_49{border-color:#00283d4d}._bordered--error-red-30_5vifr_52{border-color:#fa21214d}._bordered--warning-yellow-30_5vifr_55{border-color:#feb9284d}._bordered--dark-blue-30_5vifr_58{border-color:#00344f4d}._bordered--white-30_5vifr_61{border-color:#ffffff4d}._bordered--tertiary-blue-30_5vifr_64{border-color:#2588e44d}._bordered--main-green-20_5vifr_67{border-color:#21fa9033}._bordered--main-dark-blue-20_5vifr_70{border-color:#00283d33}._bordered--error-red-20_5vifr_73{border-color:#fa212133}._bordered--warning-yellow-20_5vifr_76{border-color:#feb92833}._bordered--dark-blue-20_5vifr_79{border-color:#00344f33}._bordered--white-20_5vifr_82{border-color:#fff3}._bordered--tertiary-blue-20_5vifr_85{border-color:#2588e433}._bordered--main-dark-blue-15_5vifr_88{border-color:#00283d26}._bordered--white-15_5vifr_91{border-color:#ffffff26}._bordered--tertiary-blue-15_5vifr_94{border-color:#2588e426}._bordered--main-dark-blue-10_5vifr_28{border-color:#00283d1a}._bordered--white-10_5vifr_43{border-color:#ffffff1a}._bordered--tertiary-blue-10_5vifr_31{border-color:#2588e41a}._error-message_5vifr_108{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_5vifr_112{padding:.625rem .5rem}._text--error-red_5vifr_116{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_5vifr_119{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--dark-green_5vifr_122{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--main-green_5vifr_125{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--light-green_5vifr_128{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--main-dark-blue_5vifr_131{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--light-blue_5vifr_134{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--base_5vifr_138{font-size:1rem;line-height:1.5rem}._text--xs_5vifr_141{font-size:.75rem;line-height:1rem}._background-color-main-green_5vifr_145{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_5vifr_148{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_5vifr_151{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_5vifr_154{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_5vifr_157{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_5vifr_160{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_5vifr_163{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_5vifr_166{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_5vifr_169{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_5vifr_172{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-rich-black_5vifr_175{--tw-bg-opacity: 1 !important;background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important}._background-color-transparent_5vifr_178{background-color:transparent}._background-color-opaque-100_5vifr_181{--tw-bg-opacity: 1 !important}._background-color-opaque-60_5vifr_184{--tw-bg-opacity: .6 !important}._background-color-opaque-30_5vifr_187{--tw-bg-opacity: .3 !important}._background-color-opaque-20_5vifr_190{--tw-bg-opacity: .2 !important}._background-color-opaque-10_5vifr_181{--tw-bg-opacity: .1 !important}._apply-opacity-30_5vifr_196{opacity:.3}._padding--none_5vifr_199{padding:0}._padding--small_5vifr_202{padding:.25rem}._padding--medium_5vifr_205{padding:.5rem}._padding--large_5vifr_208{padding:1rem}._padding--extra-large_5vifr_211{padding:1.5rem}._hover-background-color-opaque-main-green_5vifr_214:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_5vifr_217:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_5vifr_220:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_5vifr_223:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_5vifr_226:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_5vifr_229:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_5vifr_232:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_5vifr_235:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_5vifr_238:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_5vifr_241{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_5vifr_244{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_5vifr_247{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_5vifr_250{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_5vifr_253{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_5vifr_256{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_5vifr_259{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_5vifr_262{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_5vifr_265{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_5vifr_269{font-weight:600}._fontLight_5vifr_272{font-weight:300}._fullWidth_5vifr_275{width:100%}._error-red_ulad8_1>circle,._error-red_ulad8_1>ellipse,._error-red_ulad8_1>rect,._error-red_ulad8_1>line,._error-red_ulad8_1>path{stroke:#fa2121}._main-dark-blue_ulad8_9>circle,._main-dark-blue_ulad8_9>ellipse,._main-dark-blue_ulad8_9>rect,._main-dark-blue_ulad8_9>line,._main-dark-blue_ulad8_9>path{stroke:#00283d}._main-green_ulad8_17>circle,._main-green_ulad8_17>ellipse,._main-green_ulad8_17>rect,._main-green_ulad8_17>line,._main-green_ulad8_17>path{stroke:#21fa90}._tertiary-blue_ulad8_25>circle,._tertiary-blue_ulad8_25>ellipse,._tertiary-blue_ulad8_25>rect,._tertiary-blue_ulad8_25>line,._tertiary-blue_ulad8_25>path{stroke:#2588e4}._warning-yellow_ulad8_33>circle,._warning-yellow_ulad8_33>ellipse,._warning-yellow_ulad8_33>rect,._warning-yellow_ulad8_33>line,._warning-yellow_ulad8_33>path{stroke:#feb928}._white_ulad8_41>circle,._white_ulad8_41>ellipse,._white_ulad8_41>rect,._white_ulad8_41>line,._white_ulad8_41>path{stroke:#fff}._filled-white_ulad8_49{fill:#fff}._filled-error-red_ulad8_52{fill:#fa2121}._filled-main-dark-blue_ulad8_55{fill:#00283d}._filled-main-green_ulad8_58{fill:#21fa90}._filled-warning-yellow_ulad8_61{fill:#feb928}._filled-tertiary-blue_ulad8_64{fill:#2588e4}._fill-circle-green_ulad8_68>circle{fill:#fff}._fill-circle-main-dark-blue_ulad8_71>circle{fill:#00283d}._svgClassName_ulad8_75{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_ulad8_80{opacity:.3}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_1rjlv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1rjlv_4{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_1rjlv_4:hover{cursor:pointer}._tab_1rjlv_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_1rjlv_1:first-child{margin-left:0}._tab_1rjlv_1:last-child{margin-right:0}._tab_1rjlv_1:hover{font-weight:600}._selected-tab_1rjlv_10{font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_1rjlv_13{min-height:100vh}._tab_1rjlv_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._borderedBox_ljsv8_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._clickable_ljsv8_4{cursor:pointer}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 350px){.container{max-width:350px}}@media (min-width: 390px){.container{max-width:390px}}@media (min-width: 744px){.container{max-width:744px}}@media (min-width: 1240px){.container{max-width:1240px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1920px){.container{max-width:1920px}}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}