@liner-fe/prism 2.9.48 → 2.9.50

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 (3) hide show
  1. package/lib/index.css +59 -51
  2. package/lib/index.js +32 -23
  3. package/package.json +2 -2
package/lib/index.css CHANGED
@@ -931,7 +931,7 @@
931
931
  }
932
932
 
933
933
  /* esbuild-sass-plugin:css-chunk:src/components/CheckBox/style.module.scss */
934
- ._checkbox_1expy_1 {
934
+ ._checkbox_1dr57_1 {
935
935
  display: flex;
936
936
  width: var(--lp-sys-icon-size-xs);
937
937
  height: var(--lp-sys-icon-size-xs);
@@ -940,50 +940,49 @@
940
940
  flex-shrink: 0;
941
941
  outline: none;
942
942
  transform: translateY(10%);
943
- background: var(--lp-pri-achromatic-white);
944
943
  border-radius: 4px;
945
944
  border: 1px solid var(--neutral-border-overlay-strong);
946
945
  cursor: pointer;
947
946
  }
948
- ._checkbox_1expy_1:hover:not(:disabled) {
949
- background: var(--neutral-fill-overlay-lowest-hover);
947
+ ._checkbox_1dr57_1:hover:not(:disabled) {
948
+ background: var(--inverse-container-highest);
950
949
  }
951
- ._checkbox_1expy_1:disabled {
950
+ ._checkbox_1dr57_1:disabled {
952
951
  background: var(--neutral-container-highest);
953
952
  cursor: not-allowed;
954
953
  border: 1px solid var(--neutral-border-overlay-strong);
955
954
  }
956
- ._checkbox_1expy_1:disabled > span {
955
+ ._checkbox_1dr57_1:disabled > span {
957
956
  background: none;
958
957
  }
959
- ._checkbox_1expy_1:disabled > span > svg > path {
958
+ ._checkbox_1dr57_1:disabled > span > svg > path {
960
959
  fill: var(--neutral-label-tertiary);
961
960
  }
962
- ._checkbox_1expy_1[aria-checked=true]:not(:disabled) {
961
+ ._checkbox_1dr57_1[aria-checked=true]:not(:disabled) {
963
962
  border: none;
964
963
  }
965
- ._checkbox_1expy_1[aria-checked=true]:hover:not(:disabled) > span {
964
+ ._checkbox_1dr57_1[aria-checked=true]:hover:not(:disabled) > span {
966
965
  background: var(--inverse-container-static-high-hover);
967
966
  }
968
- ._checkbox_1expy_1 [aria-checked=true]:disabled > span {
967
+ ._checkbox_1dr57_1 [aria-checked=true]:disabled > span {
969
968
  background: none;
970
969
  }
971
- ._checkbox-indicator_1expy_39 {
970
+ ._checkbox-indicator_1dr57_38 {
972
971
  display: flex;
973
972
  align-items: center;
974
973
  justify-content: center;
975
974
  border-radius: 4px;
976
- background: var(--inverse-container-static-high);
975
+ background: var(--inverse-container-lowest);
977
976
  }
978
- ._label-wrapper_1expy_47 {
977
+ ._label-wrapper_1dr57_46 {
979
978
  display: flex;
980
979
  flex-direction: column;
981
980
  gap: var(--lp-sys-gap-positive-200);
982
981
  }
983
- ._description_1expy_53 {
982
+ ._description_1dr57_52 {
984
983
  color: var(--neutral-label-secondary);
985
984
  }
986
- ._description_1expy_53:has([disabled]) {
985
+ ._description_1dr57_52:has([disabled]) {
987
986
  color: var(--neutral-label-tertiary);
988
987
  }
989
988
 
@@ -1145,49 +1144,49 @@
1145
1144
  }
1146
1145
 
1147
1146
  /* esbuild-sass-plugin:css-chunk:src/components/Textfield/style.module.scss */
1148
- ._textfield-container_g33rb_1 {
1147
+ ._textfield-container_1v086_1 {
1149
1148
  display: flex;
1150
1149
  flex-direction: column;
1151
1150
  gap: var(--lp-sys-gap-positive-200);
1152
1151
  width: 100%;
1153
1152
  }
1154
- ._textfield-container_g33rb_1 > ._textfield_g33rb_1:focus-within {
1153
+ ._textfield-container_1v086_1 > ._textfield_1v086_1:focus-within {
1155
1154
  outline: 1px solid var(--neutral-border-opaque-strong) !important;
1156
1155
  }
1157
- ._textfield-container_g33rb_1 > ._textfield_g33rb_1:focus-within ._label_g33rb_10 {
1156
+ ._textfield-container_1v086_1 > ._textfield_1v086_1:focus-within ._label_1v086_10 {
1158
1157
  color: var(--neutral-label-primary) !important;
1159
1158
  }
1160
- ._textfield-container_g33rb_1:hover > ._textfield_g33rb_1 {
1159
+ ._textfield-container_1v086_1:hover > ._textfield_1v086_1 {
1161
1160
  outline: 1px solid var(--neutral-border-opaque-strong);
1162
1161
  }
1163
- ._textfield-container_g33rb_1[data-disabled=true] {
1162
+ ._textfield-container_1v086_1[data-disabled=true] {
1164
1163
  cursor: not-allowed;
1165
1164
  }
1166
- ._textfield-container_g33rb_1[data-disabled=true] > * {
1165
+ ._textfield-container_1v086_1[data-disabled=true] > * {
1167
1166
  cursor: not-allowed !important;
1168
1167
  }
1169
- ._textfield-container_g33rb_1[data-disabled=true] > ._textfield_g33rb_1 {
1168
+ ._textfield-container_1v086_1[data-disabled=true] > ._textfield_1v086_1 {
1170
1169
  outline: 1px solid var(--neutral-border-opaque-normal);
1171
1170
  }
1172
- ._textfield-container_g33rb_1[data-error=true] > ._textfield_g33rb_1 {
1171
+ ._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1 {
1173
1172
  outline: 1px solid var(--function-label-negative);
1174
1173
  }
1175
- ._textfield-container_g33rb_1[data-error=true] > ._textfield_g33rb_1 > ._input_g33rb_28 + ._label_g33rb_10 {
1174
+ ._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1 > ._input_1v086_28 + ._label_1v086_10 {
1176
1175
  color: var(--function-label-negative);
1177
1176
  }
1178
- ._textfield-container_g33rb_1[data-error=true] > ._textfield_g33rb_1:hover {
1177
+ ._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:hover {
1179
1178
  outline: 1px solid var(--function-label-negative);
1180
1179
  }
1181
- ._textfield-container_g33rb_1[data-error=true] > ._textfield_g33rb_1:focus-within {
1180
+ ._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:focus-within {
1182
1181
  outline: 1px solid var(--function-label-negative) !important;
1183
1182
  }
1184
- ._textfield-container_g33rb_1[data-error=true] > ._textfield_g33rb_1:focus-within ._label_g33rb_10 {
1183
+ ._textfield-container_1v086_1[data-error=true] > ._textfield_1v086_1:focus-within ._label_1v086_10 {
1185
1184
  color: var(--function-label-negative) !important;
1186
1185
  }
1187
- ._textfield-container_g33rb_1[data-error=true] > ._footer_g33rb_40 > ._error-wrapper_g33rb_40 > ._error-message_g33rb_40 {
1186
+ ._textfield-container_1v086_1[data-error=true] > ._footer_1v086_40 > ._error-wrapper_1v086_40 > ._error-message_1v086_40 {
1188
1187
  margin: 0;
1189
1188
  }
1190
- ._textfield_g33rb_1 {
1189
+ ._textfield_1v086_1 {
1191
1190
  box-sizing: border-box;
1192
1191
  position: relative;
1193
1192
  width: 100%;
@@ -1198,41 +1197,41 @@
1198
1197
  cursor: text;
1199
1198
  transition: ease-out all 0.1s;
1200
1199
  }
1201
- ._textfield_g33rb_1:disabled {
1200
+ ._textfield_1v086_1:disabled {
1202
1201
  outline: 1px solid var(--neutral-border-opaque-subtle);
1203
1202
  cursor: not-allowed;
1204
1203
  }
1205
- ._textfield_g33rb_1:disabled > ._label_g33rb_10 {
1204
+ ._textfield_1v086_1:disabled > ._label_1v086_10 {
1206
1205
  color: var(--neutral-label-tertiary);
1207
1206
  cursor: not-allowed;
1208
1207
  }
1209
- ._textfield_g33rb_1._label-out-textfield_g33rb_63 {
1208
+ ._textfield_1v086_1._label-out-textfield_1v086_63 {
1210
1209
  height: 52px;
1211
1210
  margin-top: 24px;
1212
1211
  }
1213
- ._textfield_g33rb_1._white_g33rb_67 {
1212
+ ._textfield_1v086_1._white_1v086_67 {
1214
1213
  background: var(--neutral-container-lowest);
1215
1214
  }
1216
- ._textfield_g33rb_1._gray_g33rb_70 {
1215
+ ._textfield_1v086_1._gray_1v086_70 {
1217
1216
  background: var(--neutral-container-mid);
1218
1217
  }
1219
- ._label_g33rb_10 {
1218
+ ._label_1v086_10 {
1220
1219
  position: absolute;
1221
1220
  left: 0;
1222
1221
  top: 0;
1223
1222
  color: var(--neutral-label-secondary) !important;
1224
1223
  cursor: text;
1225
1224
  }
1226
- ._label-in_g33rb_82 {
1225
+ ._label-in_1v086_82 {
1227
1226
  transform-origin: left top;
1228
1227
  transform: translate(var(--lp-sys-padding-component-400), 100%) scale(1);
1229
1228
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
1230
1229
  font-weight: var(--lp-pri-font-weight-400) !important;
1231
1230
  }
1232
- ._label-out_g33rb_63 {
1231
+ ._label-out_1v086_63 {
1233
1232
  transform: translateY(-150%);
1234
1233
  }
1235
- ._label-visually-hidden_g33rb_93 {
1234
+ ._label-visually-hidden_1v086_93 {
1236
1235
  position: absolute;
1237
1236
  width: 1px;
1238
1237
  height: 1px;
@@ -1242,7 +1241,7 @@
1242
1241
  white-space: nowrap;
1243
1242
  border: 0;
1244
1243
  }
1245
- ._input-wrapper_g33rb_104 {
1244
+ ._input-wrapper_1v086_104 {
1246
1245
  display: flex;
1247
1246
  align-items: center;
1248
1247
  justify-content: space-between;
@@ -1250,7 +1249,7 @@
1250
1249
  height: 100%;
1251
1250
  gap: var(--lp-sys-gap-positive-300);
1252
1251
  }
1253
- ._input_g33rb_28 {
1252
+ ._input_1v086_28 {
1254
1253
  background: transparent;
1255
1254
  border: none;
1256
1255
  outline: none;
@@ -1264,50 +1263,59 @@
1264
1263
  font-weight: var(--lp-pri-font-weight-400);
1265
1264
  line-height: 130%;
1266
1265
  }
1267
- ._input_g33rb_28:focus + ._label-in_g33rb_82,
1268
- ._input_g33rb_28:not(:placeholder-shown) + ._label-in_g33rb_82 {
1266
+ ._input_1v086_28:focus + ._label-in_1v086_82,
1267
+ ._input_1v086_28:not(:placeholder-shown) + ._label-in_1v086_82 {
1269
1268
  transform: translate(var(--lp-sys-padding-component-400), 60%) scale(0.8);
1270
1269
  font-weight: var(--lp-pri-font-weight-500);
1271
1270
  color: var(--neutral-label-primary);
1272
1271
  }
1273
- ._input_g33rb_28::placeholder {
1272
+ ._input_1v086_28::placeholder {
1274
1273
  color: var(--neutral-label-tertiary);
1275
1274
  font-size: var(--lp-pri-font-size-15);
1276
1275
  font-style: normal;
1277
1276
  font-weight: var(--lp-pri-font-weight-400);
1278
1277
  line-height: 130%;
1279
1278
  }
1280
- ._label-out-input_g33rb_140 {
1279
+ ._input_1v086_28[type=number] {
1280
+ -moz-appearance: textfield;
1281
+ appearance: textfield;
1282
+ }
1283
+ ._input_1v086_28[type=number]::-webkit-inner-spin-button,
1284
+ ._input_1v086_28[type=number]::-webkit-outer-spin-button {
1285
+ -webkit-appearance: none;
1286
+ margin: 0;
1287
+ }
1288
+ ._label-out-input_1v086_148 {
1281
1289
  transform: translateY(0);
1282
1290
  }
1283
- ._input-action-buttons_g33rb_144 {
1291
+ ._input-action-buttons_1v086_152 {
1284
1292
  display: flex;
1285
1293
  align-items: center;
1286
1294
  gap: var(--lp-sys-gap-positive-50);
1287
1295
  }
1288
- ._action-button_g33rb_150 {
1296
+ ._action-button_1v086_158 {
1289
1297
  margin-right: var(--lp-sys-padding-component-100);
1290
1298
  }
1291
- ._action-button_g33rb_150 > svg > circle {
1299
+ ._action-button_1v086_158 > svg > circle {
1292
1300
  fill: var(--neutral-label-secondary);
1293
1301
  }
1294
- ._error-wrapper_g33rb_40 {
1302
+ ._error-wrapper_1v086_40 {
1295
1303
  display: flex;
1296
1304
  align-items: flex-end;
1297
1305
  gap: 4px;
1298
1306
  }
1299
- ._error-wrapper_g33rb_40 > ._error-message_g33rb_40 {
1307
+ ._error-wrapper_1v086_40 > ._error-message_1v086_40 {
1300
1308
  padding-top: 1px;
1301
1309
  color: var(--function-label-negative);
1302
1310
  }
1303
- ._footer_g33rb_40 {
1311
+ ._footer_1v086_40 {
1304
1312
  display: flex;
1305
1313
  justify-content: space-between;
1306
1314
  align-items: center;
1307
1315
  gap: 8px;
1308
1316
  min-height: var(--lp-sys-icon-size-xs);
1309
1317
  }
1310
- ._character_g33rb_175 {
1318
+ ._character_1v086_183 {
1311
1319
  color: var(--neutral-label-secondary);
1312
1320
  }
1313
1321
 
package/lib/index.js CHANGED
@@ -1645,10 +1645,10 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui";
1645
1645
 
1646
1646
  // src/components/CheckBox/style.module.scss
1647
1647
  var style_module_default9 = {
1648
- "checkbox": "_checkbox_1expy_1",
1649
- "checkbox-indicator": "_checkbox-indicator_1expy_39",
1650
- "label-wrapper": "_label-wrapper_1expy_47",
1651
- "description": "_description_1expy_53"
1648
+ "checkbox": "_checkbox_1dr57_1",
1649
+ "checkbox-indicator": "_checkbox-indicator_1dr57_38",
1650
+ "label-wrapper": "_label-wrapper_1dr57_46",
1651
+ "description": "_description_1dr57_52"
1652
1652
  };
1653
1653
 
1654
1654
  // src/components/CheckBox/index.tsx
@@ -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-container_g33rb_1",
1810
- "textfield": "_textfield_g33rb_1",
1811
- "label": "_label_g33rb_10",
1812
- "input": "_input_g33rb_28",
1813
- "footer": "_footer_g33rb_40",
1814
- "error-wrapper": "_error-wrapper_g33rb_40",
1815
- "error-message": "_error-message_g33rb_40",
1816
- "label-out-textfield": "_label-out-textfield_g33rb_63",
1817
- "white": "_white_g33rb_67",
1818
- "gray": "_gray_g33rb_70",
1819
- "label-in": "_label-in_g33rb_82",
1820
- "label-out": "_label-out_g33rb_63",
1821
- "label-visually-hidden": "_label-visually-hidden_g33rb_93",
1822
- "input-wrapper": "_input-wrapper_g33rb_104",
1823
- "label-out-input": "_label-out-input_g33rb_140",
1824
- "input-action-buttons": "_input-action-buttons_g33rb_144",
1825
- "action-button": "_action-button_g33rb_150",
1826
- "character": "_character_g33rb_175"
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: isDeidentified ? "password" : "text",
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.48",
3
+ "version": "2.9.50",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "dependencies": {
@@ -17,8 +17,8 @@
17
17
  "react": "^18.2.0",
18
18
  "react-dom": "^18.2.0",
19
19
  "recoil": "^0.5.2",
20
- "@liner-fe/design-token-primitive": "^0.2.34",
21
20
  "@liner-fe/design-token": "^2.5.35",
21
+ "@liner-fe/design-token-primitive": "^0.2.34",
22
22
  "@liner-fe/icon": "^0.2.42",
23
23
  "@liner-fe/illust": "^0.2.10"
24
24
  },