@liner-fe/prism 2.9.48 → 2.9.49
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/lib/index.css +45 -36
- package/lib/index.js +28 -19
- package/package.json +2 -2
package/lib/index.css
CHANGED
|
@@ -1145,49 +1145,49 @@
|
|
|
1145
1145
|
}
|
|
1146
1146
|
|
|
1147
1147
|
/* esbuild-sass-plugin:css-chunk:src/components/Textfield/style.module.scss */
|
|
1148
|
-
._textfield-
|
|
1148
|
+
._textfield-container_1v086_1 {
|
|
1149
1149
|
display: flex;
|
|
1150
1150
|
flex-direction: column;
|
|
1151
1151
|
gap: var(--lp-sys-gap-positive-200);
|
|
1152
1152
|
width: 100%;
|
|
1153
1153
|
}
|
|
1154
|
-
._textfield-
|
|
1154
|
+
._textfield-container_1v086_1 > ._textfield_1v086_1:focus-within {
|
|
1155
1155
|
outline: 1px solid var(--neutral-border-opaque-strong) !important;
|
|
1156
1156
|
}
|
|
1157
|
-
._textfield-
|
|
1157
|
+
._textfield-container_1v086_1 > ._textfield_1v086_1:focus-within ._label_1v086_10 {
|
|
1158
1158
|
color: var(--neutral-label-primary) !important;
|
|
1159
1159
|
}
|
|
1160
|
-
._textfield-
|
|
1160
|
+
._textfield-container_1v086_1:hover > ._textfield_1v086_1 {
|
|
1161
1161
|
outline: 1px solid var(--neutral-border-opaque-strong);
|
|
1162
1162
|
}
|
|
1163
|
-
._textfield-
|
|
1163
|
+
._textfield-container_1v086_1[data-disabled=true] {
|
|
1164
1164
|
cursor: not-allowed;
|
|
1165
1165
|
}
|
|
1166
|
-
._textfield-
|
|
1166
|
+
._textfield-container_1v086_1[data-disabled=true] > * {
|
|
1167
1167
|
cursor: not-allowed !important;
|
|
1168
1168
|
}
|
|
1169
|
-
._textfield-
|
|
1169
|
+
._textfield-container_1v086_1[data-disabled=true] > ._textfield_1v086_1 {
|
|
1170
1170
|
outline: 1px solid var(--neutral-border-opaque-normal);
|
|
1171
1171
|
}
|
|
1172
|
-
._textfield-
|
|
1172
|
+
._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1 {
|
|
1173
1173
|
outline: 1px solid var(--function-label-negative);
|
|
1174
1174
|
}
|
|
1175
|
-
._textfield-
|
|
1175
|
+
._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1 > ._input_1v086_28 + ._label_1v086_10 {
|
|
1176
1176
|
color: var(--function-label-negative);
|
|
1177
1177
|
}
|
|
1178
|
-
._textfield-
|
|
1178
|
+
._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:hover {
|
|
1179
1179
|
outline: 1px solid var(--function-label-negative);
|
|
1180
1180
|
}
|
|
1181
|
-
._textfield-
|
|
1181
|
+
._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:focus-within {
|
|
1182
1182
|
outline: 1px solid var(--function-label-negative) !important;
|
|
1183
1183
|
}
|
|
1184
|
-
._textfield-
|
|
1184
|
+
._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:focus-within ._label_1v086_10 {
|
|
1185
1185
|
color: var(--function-label-negative) !important;
|
|
1186
1186
|
}
|
|
1187
|
-
._textfield-
|
|
1187
|
+
._textfield-container_1v086_1[data-error=true] > ._footer_1v086_40 > ._error-wrapper_1v086_40 > ._error-message_1v086_40 {
|
|
1188
1188
|
margin: 0;
|
|
1189
1189
|
}
|
|
1190
|
-
.
|
|
1190
|
+
._textfield_1v086_1 {
|
|
1191
1191
|
box-sizing: border-box;
|
|
1192
1192
|
position: relative;
|
|
1193
1193
|
width: 100%;
|
|
@@ -1198,41 +1198,41 @@
|
|
|
1198
1198
|
cursor: text;
|
|
1199
1199
|
transition: ease-out all 0.1s;
|
|
1200
1200
|
}
|
|
1201
|
-
.
|
|
1201
|
+
._textfield_1v086_1:disabled {
|
|
1202
1202
|
outline: 1px solid var(--neutral-border-opaque-subtle);
|
|
1203
1203
|
cursor: not-allowed;
|
|
1204
1204
|
}
|
|
1205
|
-
.
|
|
1205
|
+
._textfield_1v086_1:disabled > ._label_1v086_10 {
|
|
1206
1206
|
color: var(--neutral-label-tertiary);
|
|
1207
1207
|
cursor: not-allowed;
|
|
1208
1208
|
}
|
|
1209
|
-
.
|
|
1209
|
+
._textfield_1v086_1._label-out-textfield_1v086_63 {
|
|
1210
1210
|
height: 52px;
|
|
1211
1211
|
margin-top: 24px;
|
|
1212
1212
|
}
|
|
1213
|
-
.
|
|
1213
|
+
._textfield_1v086_1._white_1v086_67 {
|
|
1214
1214
|
background: var(--neutral-container-lowest);
|
|
1215
1215
|
}
|
|
1216
|
-
.
|
|
1216
|
+
._textfield_1v086_1._gray_1v086_70 {
|
|
1217
1217
|
background: var(--neutral-container-mid);
|
|
1218
1218
|
}
|
|
1219
|
-
.
|
|
1219
|
+
._label_1v086_10 {
|
|
1220
1220
|
position: absolute;
|
|
1221
1221
|
left: 0;
|
|
1222
1222
|
top: 0;
|
|
1223
1223
|
color: var(--neutral-label-secondary) !important;
|
|
1224
1224
|
cursor: text;
|
|
1225
1225
|
}
|
|
1226
|
-
._label-
|
|
1226
|
+
._label-in_1v086_82 {
|
|
1227
1227
|
transform-origin: left top;
|
|
1228
1228
|
transform: translate(var(--lp-sys-padding-component-400), 100%) scale(1);
|
|
1229
1229
|
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
|
|
1230
1230
|
font-weight: var(--lp-pri-font-weight-400) !important;
|
|
1231
1231
|
}
|
|
1232
|
-
._label-
|
|
1232
|
+
._label-out_1v086_63 {
|
|
1233
1233
|
transform: translateY(-150%);
|
|
1234
1234
|
}
|
|
1235
|
-
._label-visually-
|
|
1235
|
+
._label-visually-hidden_1v086_93 {
|
|
1236
1236
|
position: absolute;
|
|
1237
1237
|
width: 1px;
|
|
1238
1238
|
height: 1px;
|
|
@@ -1242,7 +1242,7 @@
|
|
|
1242
1242
|
white-space: nowrap;
|
|
1243
1243
|
border: 0;
|
|
1244
1244
|
}
|
|
1245
|
-
._input-
|
|
1245
|
+
._input-wrapper_1v086_104 {
|
|
1246
1246
|
display: flex;
|
|
1247
1247
|
align-items: center;
|
|
1248
1248
|
justify-content: space-between;
|
|
@@ -1250,7 +1250,7 @@
|
|
|
1250
1250
|
height: 100%;
|
|
1251
1251
|
gap: var(--lp-sys-gap-positive-300);
|
|
1252
1252
|
}
|
|
1253
|
-
.
|
|
1253
|
+
._input_1v086_28 {
|
|
1254
1254
|
background: transparent;
|
|
1255
1255
|
border: none;
|
|
1256
1256
|
outline: none;
|
|
@@ -1264,50 +1264,59 @@
|
|
|
1264
1264
|
font-weight: var(--lp-pri-font-weight-400);
|
|
1265
1265
|
line-height: 130%;
|
|
1266
1266
|
}
|
|
1267
|
-
.
|
|
1268
|
-
.
|
|
1267
|
+
._input_1v086_28:focus + ._label-in_1v086_82,
|
|
1268
|
+
._input_1v086_28:not(:placeholder-shown) + ._label-in_1v086_82 {
|
|
1269
1269
|
transform: translate(var(--lp-sys-padding-component-400), 60%) scale(0.8);
|
|
1270
1270
|
font-weight: var(--lp-pri-font-weight-500);
|
|
1271
1271
|
color: var(--neutral-label-primary);
|
|
1272
1272
|
}
|
|
1273
|
-
.
|
|
1273
|
+
._input_1v086_28::placeholder {
|
|
1274
1274
|
color: var(--neutral-label-tertiary);
|
|
1275
1275
|
font-size: var(--lp-pri-font-size-15);
|
|
1276
1276
|
font-style: normal;
|
|
1277
1277
|
font-weight: var(--lp-pri-font-weight-400);
|
|
1278
1278
|
line-height: 130%;
|
|
1279
1279
|
}
|
|
1280
|
-
.
|
|
1280
|
+
._input_1v086_28[type=number] {
|
|
1281
|
+
-moz-appearance: textfield;
|
|
1282
|
+
appearance: textfield;
|
|
1283
|
+
}
|
|
1284
|
+
._input_1v086_28[type=number]::-webkit-inner-spin-button,
|
|
1285
|
+
._input_1v086_28[type=number]::-webkit-outer-spin-button {
|
|
1286
|
+
-webkit-appearance: none;
|
|
1287
|
+
margin: 0;
|
|
1288
|
+
}
|
|
1289
|
+
._label-out-input_1v086_148 {
|
|
1281
1290
|
transform: translateY(0);
|
|
1282
1291
|
}
|
|
1283
|
-
._input-action-
|
|
1292
|
+
._input-action-buttons_1v086_152 {
|
|
1284
1293
|
display: flex;
|
|
1285
1294
|
align-items: center;
|
|
1286
1295
|
gap: var(--lp-sys-gap-positive-50);
|
|
1287
1296
|
}
|
|
1288
|
-
._action-
|
|
1297
|
+
._action-button_1v086_158 {
|
|
1289
1298
|
margin-right: var(--lp-sys-padding-component-100);
|
|
1290
1299
|
}
|
|
1291
|
-
._action-
|
|
1300
|
+
._action-button_1v086_158 > svg > circle {
|
|
1292
1301
|
fill: var(--neutral-label-secondary);
|
|
1293
1302
|
}
|
|
1294
|
-
._error-
|
|
1303
|
+
._error-wrapper_1v086_40 {
|
|
1295
1304
|
display: flex;
|
|
1296
1305
|
align-items: flex-end;
|
|
1297
1306
|
gap: 4px;
|
|
1298
1307
|
}
|
|
1299
|
-
._error-
|
|
1308
|
+
._error-wrapper_1v086_40 > ._error-message_1v086_40 {
|
|
1300
1309
|
padding-top: 1px;
|
|
1301
1310
|
color: var(--function-label-negative);
|
|
1302
1311
|
}
|
|
1303
|
-
.
|
|
1312
|
+
._footer_1v086_40 {
|
|
1304
1313
|
display: flex;
|
|
1305
1314
|
justify-content: space-between;
|
|
1306
1315
|
align-items: center;
|
|
1307
1316
|
gap: 8px;
|
|
1308
1317
|
min-height: var(--lp-sys-icon-size-xs);
|
|
1309
1318
|
}
|
|
1310
|
-
.
|
|
1319
|
+
._character_1v086_183 {
|
|
1311
1320
|
color: var(--neutral-label-secondary);
|
|
1312
1321
|
}
|
|
1313
1322
|
|
package/lib/index.js
CHANGED
|
@@ -1806,24 +1806,24 @@ import {
|
|
|
1806
1806
|
|
|
1807
1807
|
// src/components/Textfield/style.module.scss
|
|
1808
1808
|
var style_module_default12 = {
|
|
1809
|
-
"textfield-container": "_textfield-
|
|
1810
|
-
"textfield": "
|
|
1811
|
-
"label": "
|
|
1812
|
-
"input": "
|
|
1813
|
-
"footer": "
|
|
1814
|
-
"error-wrapper": "_error-
|
|
1815
|
-
"error-message": "_error-
|
|
1816
|
-
"label-out-textfield": "_label-out-
|
|
1817
|
-
"white": "
|
|
1818
|
-
"gray": "
|
|
1819
|
-
"label-in": "_label-
|
|
1820
|
-
"label-out": "_label-
|
|
1821
|
-
"label-visually-hidden": "_label-visually-
|
|
1822
|
-
"input-wrapper": "_input-
|
|
1823
|
-
"label-out-input": "_label-out-
|
|
1824
|
-
"input-action-buttons": "_input-action-
|
|
1825
|
-
"action-button": "_action-
|
|
1826
|
-
"character": "
|
|
1809
|
+
"textfield-container": "_textfield-container_1v086_1",
|
|
1810
|
+
"textfield": "_textfield_1v086_1",
|
|
1811
|
+
"label": "_label_1v086_10",
|
|
1812
|
+
"input": "_input_1v086_28",
|
|
1813
|
+
"footer": "_footer_1v086_40",
|
|
1814
|
+
"error-wrapper": "_error-wrapper_1v086_40",
|
|
1815
|
+
"error-message": "_error-message_1v086_40",
|
|
1816
|
+
"label-out-textfield": "_label-out-textfield_1v086_63",
|
|
1817
|
+
"white": "_white_1v086_67",
|
|
1818
|
+
"gray": "_gray_1v086_70",
|
|
1819
|
+
"label-in": "_label-in_1v086_82",
|
|
1820
|
+
"label-out": "_label-out_1v086_63",
|
|
1821
|
+
"label-visually-hidden": "_label-visually-hidden_1v086_93",
|
|
1822
|
+
"input-wrapper": "_input-wrapper_1v086_104",
|
|
1823
|
+
"label-out-input": "_label-out-input_1v086_148",
|
|
1824
|
+
"input-action-buttons": "_input-action-buttons_1v086_152",
|
|
1825
|
+
"action-button": "_action-button_1v086_158",
|
|
1826
|
+
"character": "_character_1v086_183"
|
|
1827
1827
|
};
|
|
1828
1828
|
|
|
1829
1829
|
// src/components/Textfield/index.tsx
|
|
@@ -1905,6 +1905,15 @@ var Textfield = forwardRef14((props, ref) => {
|
|
|
1905
1905
|
}
|
|
1906
1906
|
}, "handleDeidentify");
|
|
1907
1907
|
useImperativeHandle(ref, () => inputRef.current);
|
|
1908
|
+
const inputType = (() => {
|
|
1909
|
+
if (type === "number") {
|
|
1910
|
+
return type;
|
|
1911
|
+
}
|
|
1912
|
+
if (isDeidentified) {
|
|
1913
|
+
return "password";
|
|
1914
|
+
}
|
|
1915
|
+
return "text";
|
|
1916
|
+
})();
|
|
1908
1917
|
return /* @__PURE__ */ jsxs8("div", { className: style_module_default12["textfield-container"], "data-disabled": disabled, "data-error": !!error, children: [
|
|
1909
1918
|
/* @__PURE__ */ jsx17(
|
|
1910
1919
|
"div",
|
|
@@ -1920,7 +1929,7 @@ var Textfield = forwardRef14((props, ref) => {
|
|
|
1920
1929
|
className: clsx14(style_module_default12.input, {
|
|
1921
1930
|
[style_module_default12["label-out-input"]]: !label || labelType === "out" || labelType === "visually-hidden"
|
|
1922
1931
|
}),
|
|
1923
|
-
type:
|
|
1932
|
+
type: inputType,
|
|
1924
1933
|
placeholder,
|
|
1925
1934
|
ref: inputRef,
|
|
1926
1935
|
disabled,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liner-fe/prism",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.49",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"dependencies": {
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"react": "^18.2.0",
|
|
18
18
|
"react-dom": "^18.2.0",
|
|
19
19
|
"recoil": "^0.5.2",
|
|
20
|
+
"@liner-fe/icon": "^0.2.42",
|
|
20
21
|
"@liner-fe/design-token-primitive": "^0.2.34",
|
|
21
22
|
"@liner-fe/design-token": "^2.5.35",
|
|
22
|
-
"@liner-fe/icon": "^0.2.42",
|
|
23
23
|
"@liner-fe/illust": "^0.2.10"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|