@mirohq/design-system-base-text-field 0.1.16 → 0.2.0

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.
package/dist/main.js CHANGED
@@ -53,7 +53,7 @@ const textFieldStyles = {
53
53
  },
54
54
  disabled: {
55
55
  background: "$background-neutrals-disabled",
56
- border: "1px solid transparent"
56
+ borderColor: "transparent"
57
57
  },
58
58
  invalid: {
59
59
  idle: {
@@ -82,7 +82,12 @@ const textFieldStyles = {
82
82
  },
83
83
  base: {
84
84
  placeholder: {
85
- color: "$text-neutrals-subtle"
85
+ old: {
86
+ color: "$text-neutrals-subtle"
87
+ },
88
+ v1: {
89
+ color: "$text-neutrals-placeholder"
90
+ }
86
91
  },
87
92
  disabled: {
88
93
  caretColor: "transparent",
@@ -94,6 +99,33 @@ const textFieldStyles = {
94
99
  background: "transparent"
95
100
  }
96
101
  }
102
+ },
103
+ v1: {
104
+ idle: {
105
+ border: "1.5px solid $border-neutrals",
106
+ fontSize: "$175",
107
+ lineHeight: "$400"
108
+ },
109
+ focused: {
110
+ borderColor: "$border-primary-selected",
111
+ "@media (forced-colors: active)": {
112
+ outline: "Highlight solid"
113
+ }
114
+ },
115
+ readOnly: {
116
+ color: "$text-neutrals",
117
+ borderColor: "transparent"
118
+ },
119
+ invalid: {
120
+ focused: {
121
+ borderColor: "$border-primary-selected"
122
+ }
123
+ },
124
+ valid: {
125
+ focused: {
126
+ borderColor: "$border-primary-selected"
127
+ }
128
+ }
97
129
  }
98
130
  };
99
131
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n fontSize: '$200',\n lineHeight: '1.5',\n color: '$text-neutrals',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n border: '1px solid transparent',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":["focus"],"mappings":";;;;;;AAEO,MAAM,kBAAqB,GAAA;AAAA,EAChC,eAAiB,EAAA,aAAA;AAAA,EACjB,KAAO,EAAA,uBAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,OAAS,EAAA,KAAA;AAAA,EACT,MAAQ,EAAA,IAAA;AAAA,EAER,oEAAsE,EAAA;AAAA,IACpE,MAAQ,EAAA,WAAA;AAAA,IACR,oBAAsB,EAAA,oBAAA;AAAA,GACxB;AAAA,EAEA,GAAGA,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,cAAA;AAAA,GACZ,CAAA;AAAA,EAED,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,mCAAA;AAAA,GACnB;AAAA,EAEA,2BAA6B,EAAA;AAAA,IAC3B,eAAiB,EAAA,oCAAA;AAAA,GACnB;AACF,EAAA;AAEO,MAAM,eAAkB,GAAA;AAAA,EAC7B,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,YAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,MACZ,KAAO,EAAA,gBAAA;AAAA,MACP,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,KAChB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MAEb,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,MAAQ,EAAA,uBAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n fontSize: '$200',\n lineHeight: '1.5',\n color: '$text-neutrals',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n borderColor: 'transparent',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n old: {\n color: '$text-neutrals-subtle',\n },\n v1: {\n color: '$text-neutrals-placeholder',\n },\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n v1: {\n idle: {\n border: '1.5px solid $border-neutrals',\n fontSize: '$175',\n lineHeight: '$400',\n },\n focused: {\n borderColor: '$border-primary-selected',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n readOnly: {\n color: '$text-neutrals',\n borderColor: 'transparent',\n },\n invalid: {\n focused: {\n borderColor: '$border-primary-selected',\n },\n },\n valid: {\n focused: {\n borderColor: '$border-primary-selected',\n },\n },\n },\n}\n"],"names":["focus"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -49,7 +49,7 @@ const textFieldStyles = {
49
49
  },
50
50
  disabled: {
51
51
  background: "$background-neutrals-disabled",
52
- border: "1px solid transparent"
52
+ borderColor: "transparent"
53
53
  },
54
54
  invalid: {
55
55
  idle: {
@@ -78,7 +78,12 @@ const textFieldStyles = {
78
78
  },
79
79
  base: {
80
80
  placeholder: {
81
- color: "$text-neutrals-subtle"
81
+ old: {
82
+ color: "$text-neutrals-subtle"
83
+ },
84
+ v1: {
85
+ color: "$text-neutrals-placeholder"
86
+ }
82
87
  },
83
88
  disabled: {
84
89
  caretColor: "transparent",
@@ -90,6 +95,33 @@ const textFieldStyles = {
90
95
  background: "transparent"
91
96
  }
92
97
  }
98
+ },
99
+ v1: {
100
+ idle: {
101
+ border: "1.5px solid $border-neutrals",
102
+ fontSize: "$175",
103
+ lineHeight: "$400"
104
+ },
105
+ focused: {
106
+ borderColor: "$border-primary-selected",
107
+ "@media (forced-colors: active)": {
108
+ outline: "Highlight solid"
109
+ }
110
+ },
111
+ readOnly: {
112
+ color: "$text-neutrals",
113
+ borderColor: "transparent"
114
+ },
115
+ invalid: {
116
+ focused: {
117
+ borderColor: "$border-primary-selected"
118
+ }
119
+ },
120
+ valid: {
121
+ focused: {
122
+ borderColor: "$border-primary-selected"
123
+ }
124
+ }
93
125
  }
94
126
  };
95
127
 
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n fontSize: '$200',\n lineHeight: '1.5',\n color: '$text-neutrals',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n border: '1px solid transparent',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAqB,GAAA;AAAA,EAChC,eAAiB,EAAA,aAAA;AAAA,EACjB,KAAO,EAAA,uBAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,OAAS,EAAA,KAAA;AAAA,EACT,MAAQ,EAAA,IAAA;AAAA,EAER,oEAAsE,EAAA;AAAA,IACpE,MAAQ,EAAA,WAAA;AAAA,IACR,oBAAsB,EAAA,oBAAA;AAAA,GACxB;AAAA,EAEA,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,cAAA;AAAA,GACZ,CAAA;AAAA,EAED,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,mCAAA;AAAA,GACnB;AAAA,EAEA,2BAA6B,EAAA;AAAA,IAC3B,eAAiB,EAAA,oCAAA;AAAA,GACnB;AACF,EAAA;AAEO,MAAM,eAAkB,GAAA;AAAA,EAC7B,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,YAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,MACZ,KAAO,EAAA,gBAAA;AAAA,MACP,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,KAChB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,MAEb,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,MAAQ,EAAA,uBAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["import { focus } from '@mirohq/design-system-styles'\n\nexport const actionButtonStyles = {\n backgroundColor: 'transparent',\n color: '$icon-neutrals-subtle',\n display: 'flex',\n justifyContent: 'center',\n padding: '6px',\n square: '$7',\n\n '& svg:not([data-icon-component]), & img:not([data-icon-component])': {\n square: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n}\n\nexport const textFieldStyles = {\n variants: {\n idle: {\n boxSizing: 'border-box',\n width: '100%',\n fontSize: '$200',\n lineHeight: '1.5',\n color: '$text-neutrals',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n borderColor: 'transparent',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n old: {\n color: '$text-neutrals-subtle',\n },\n v1: {\n color: '$text-neutrals-placeholder',\n },\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n v1: {\n idle: {\n border: '1.5px solid $border-neutrals',\n fontSize: '$175',\n lineHeight: '$400',\n },\n focused: {\n borderColor: '$border-primary-selected',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n readOnly: {\n color: '$text-neutrals',\n borderColor: 'transparent',\n },\n invalid: {\n focused: {\n borderColor: '$border-primary-selected',\n },\n },\n valid: {\n focused: {\n borderColor: '$border-primary-selected',\n },\n },\n },\n}\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -48,7 +48,7 @@ declare const textFieldStyles: {
48
48
  };
49
49
  disabled: {
50
50
  background: string;
51
- border: string;
51
+ borderColor: string;
52
52
  };
53
53
  invalid: {
54
54
  idle: {
@@ -77,7 +77,12 @@ declare const textFieldStyles: {
77
77
  };
78
78
  base: {
79
79
  placeholder: {
80
- color: string;
80
+ old: {
81
+ color: string;
82
+ };
83
+ v1: {
84
+ color: string;
85
+ };
81
86
  };
82
87
  disabled: {
83
88
  caretColor: string;
@@ -90,6 +95,33 @@ declare const textFieldStyles: {
90
95
  };
91
96
  };
92
97
  };
98
+ v1: {
99
+ idle: {
100
+ border: string;
101
+ fontSize: string;
102
+ lineHeight: string;
103
+ };
104
+ focused: {
105
+ borderColor: string;
106
+ '@media (forced-colors: active)': {
107
+ outline: string;
108
+ };
109
+ };
110
+ readOnly: {
111
+ color: string;
112
+ borderColor: string;
113
+ };
114
+ invalid: {
115
+ focused: {
116
+ borderColor: string;
117
+ };
118
+ };
119
+ valid: {
120
+ focused: {
121
+ borderColor: string;
122
+ };
123
+ };
124
+ };
93
125
  };
94
126
 
95
127
  export { actionButtonStyles, textFieldStyles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-text-field",
3
- "version": "0.1.16",
3
+ "version": "0.2.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,7 +26,7 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-styles": "^1.2.26"
29
+ "@mirohq/design-system-styles": "^1.2.27"
30
30
  },
31
31
  "scripts": {
32
32
  "build": "rollup -c ../../../../rollup.config.js",