@pisell/private-materials 6.12.376 → 6.12.377

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/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/meta.js +1 -1
  5. package/build/lowcode/render/default/view.css +1 -1
  6. package/build/lowcode/render/default/view.js +1 -1
  7. package/build/lowcode/view.css +1 -1
  8. package/build/lowcode/view.js +1 -1
  9. package/es/components/HDLKiosk/locales.js +10 -0
  10. package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/assets/order-background.svg +24 -0
  11. package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.js +53 -32
  12. package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.less +175 -125
  13. package/lib/components/HDLKiosk/locales.js +10 -0
  14. package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/assets/order-background.svg +24 -0
  15. package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.js +53 -32
  16. package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.less +175 -125
  17. package/package.json +3 -3
package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
2
+ const require_useStableInstanceId = require("../../../../../hooks/useStableInstanceId.js");
2
3
  const require_index = require("../../../components/shell/HDLKioskBottomBarHost/index.js");
3
4
  const require_index$1 = require("../../../components/shell/HDLKioskOrderSummary/index.js");
4
5
  const require_product = require("../../../product.js");
@@ -11,14 +12,15 @@ let _pisell_utils = require("@pisell/utils");
11
12
  let decimal_js = require("decimal.js");
12
13
  decimal_js = require_runtime.__toESM(decimal_js);
13
14
  //#region src/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.tsx
14
- function ProductImage({ src }) {
15
+ function ProductImage({ src, name }) {
15
16
  const [failed, setFailed] = (0, react.useState)(false);
16
17
  return /* @__PURE__ */ react.default.createElement("span", {
17
18
  className: "hdl-ps-product-image",
18
19
  "aria-hidden": "true"
19
- }, failed || !src ? /* @__PURE__ */ react.default.createElement("span", { className: "hdl-ps-image-fallback" }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.primary-image-unavailable")) : /* @__PURE__ */ react.default.createElement("img", {
20
+ }, failed || !src ? /* @__PURE__ */ react.default.createElement("span", { className: "hdl-ps-image-fallback" }, /* @__PURE__ */ react.default.createElement("strong", null, name), /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText("pisell2.hdl-kiosk.primary-image-unavailable"))) : /* @__PURE__ */ react.default.createElement("img", {
20
21
  src,
21
22
  alt: "",
23
+ draggable: false,
22
24
  onError: () => setFailed(true)
23
25
  }));
24
26
  }
@@ -26,6 +28,8 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
26
28
  const scale = require_scale.useHDLScaleSnapshot();
27
29
  const delivered = (0, react.useRef)(false);
28
30
  const heading = (0, react.useRef)(null);
31
+ const selectionId = require_useStableInstanceId.default("hdl-primary-selection");
32
+ const headingId = `${selectionId}-title`;
29
33
  const { currencySymbol } = orderBar;
30
34
  const items = [...products].sort((left, right) => {
31
35
  const leftSort = Number(left.sort);
@@ -38,11 +42,22 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
38
42
  return {
39
43
  product,
40
44
  facts,
45
+ name: (facts === null || facts === void 0 ? void 0 : facts.name) || require_product.resolveHDLProductText(product.title) || String(product.id),
46
+ imageUrl: typeof product.cover === "string" ? product.cover : void 0,
41
47
  subtitle: require_product.resolveHDLProductText(product.subtitle),
42
48
  disabled: unavailable || scaleUnavailable,
43
49
  reason: _pisell_utils.locales.getText(scaleUnavailable ? "pisell2.hdl-kiosk.entry-scale-unavailable" : "pisell2.hdl-kiosk.primary-unavailable")
44
50
  };
45
51
  });
52
+ const groups = ["weighted", "standard"].map((kind) => ({
53
+ kind,
54
+ title: _pisell_utils.locales.getText(kind === "weighted" ? "pisell2.hdl-kiosk.primary-weighted-zone" : "pisell2.hdl-kiosk.primary-standard-zone"),
55
+ items: items.filter((item) => {
56
+ var _item$product$variant, _item$facts;
57
+ const variants = (_item$product$variant = item.product.variant) !== null && _item$product$variant !== void 0 ? _item$product$variant : item.product.variants;
58
+ return (((_item$facts = item.facts) === null || _item$facts === void 0 ? void 0 : _item$facts.kind) === "weighted" || Number(item.product.open_sold_weight) === 1 || Array.isArray(variants) && variants.some((variant) => Number(variant === null || variant === void 0 ? void 0 : variant.open_sold_weight) === 1)) === (kind === "weighted");
59
+ })
60
+ })).filter((group) => group.items.length > 0);
46
61
  const select = (item) => {
47
62
  if (busy || item.disabled || !item.facts || delivered.current) return;
48
63
  delivered.current = true;
@@ -93,45 +108,51 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
93
108
  ]));
94
109
  return /* @__PURE__ */ react.default.createElement("section", {
95
110
  className: "hdl-primary-selection",
96
- "aria-labelledby": "hdl-primary-selection-title"
97
- }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-dialog" }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-selection" }, /* @__PURE__ */ react.default.createElement("header", { className: "hdl-ps-heading" }, /* @__PURE__ */ react.default.createElement("h2", {
98
- id: "hdl-primary-selection-title",
111
+ "aria-labelledby": headingId
112
+ }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-dialog" }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-content" }, /* @__PURE__ */ react.default.createElement("h2", {
113
+ className: "hdl-ps-sr-only",
114
+ id: headingId,
99
115
  ref: heading,
100
116
  tabIndex: -1
101
- }, title), /* @__PURE__ */ react.default.createElement("p", { className: "hdl-ps-description" }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.primary-select-description"))), /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-products" }, items.map((item) => {
102
- var _item$facts, _item$facts2, _item$facts3;
103
- return /* @__PURE__ */ react.default.createElement("button", {
104
- className: "hdl-ps-product",
105
- key: String(item.product.id),
106
- type: "button",
107
- disabled: busy || item.disabled,
108
- onClick: () => select(item)
109
- }, /* @__PURE__ */ react.default.createElement(ProductImage, {
110
- key: (_item$facts = item.facts) === null || _item$facts === void 0 ? void 0 : _item$facts.imageUrl,
111
- src: (_item$facts2 = item.facts) === null || _item$facts2 === void 0 ? void 0 : _item$facts2.imageUrl
112
- }), /* @__PURE__ */ react.default.createElement("span", { className: "hdl-ps-product-details" }, /* @__PURE__ */ react.default.createElement("strong", { className: "hdl-ps-product-name" }, ((_item$facts3 = item.facts) === null || _item$facts3 === void 0 ? void 0 : _item$facts3.name) || require_product.resolveHDLProductText(item.product.title) || String(item.product.id)), item.subtitle ? /* @__PURE__ */ react.default.createElement("span", { className: "hdl-ps-product-subtitle" }, item.subtitle) : null, item.disabled ? /* @__PURE__ */ react.default.createElement("small", { className: "hdl-ps-unavailable" }, item.reason) : null), /* @__PURE__ */ react.default.createElement("span", {
113
- className: "hdl-ps-select-arrow",
114
- "aria-hidden": "true"
115
- }, /* @__PURE__ */ react.default.createElement("svg", {
116
- viewBox: "0 0 24 24",
117
- fill: "none"
118
- }, /* @__PURE__ */ react.default.createElement("path", {
119
- d: "M5 12h14m-6-6 6 6-6 6",
120
- stroke: "currentColor",
121
- strokeWidth: "1.8",
122
- strokeLinecap: "round",
123
- strokeLinejoin: "round"
124
- }))));
125
- })), /* @__PURE__ */ react.default.createElement("button", {
117
+ }, title), /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-choices" }, groups.map((group) => /* @__PURE__ */ react.default.createElement("div", {
118
+ className: "hdl-ps-group",
119
+ key: group.kind,
120
+ "data-zone": group.kind,
121
+ role: "group",
122
+ "aria-labelledby": `${selectionId}-${group.kind}`
123
+ }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-marker" }, /* @__PURE__ */ react.default.createElement("h3", { id: `${selectionId}-${group.kind}` }, group.title), /* @__PURE__ */ react.default.createElement("span", {
124
+ className: "hdl-ps-marker-line",
125
+ "aria-hidden": "true"
126
+ })), /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-products" }, group.items.map((item) => /* @__PURE__ */ react.default.createElement("div", {
127
+ className: "hdl-ps-image-area",
128
+ key: String(item.product.id)
129
+ }, /* @__PURE__ */ react.default.createElement("div", { className: "hdl-ps-poster-area" }, /* @__PURE__ */ react.default.createElement("button", {
130
+ className: "hdl-ps-product",
131
+ type: "button",
132
+ "aria-label": item.name,
133
+ "aria-describedby": item.disabled ? `${selectionId}-${item.product.id}-unavailable` : void 0,
134
+ disabled: busy || item.disabled,
135
+ onClick: () => select(item)
136
+ }, /* @__PURE__ */ react.default.createElement(ProductImage, {
137
+ key: item.imageUrl,
138
+ src: item.imageUrl,
139
+ name: item.name
140
+ }), item.subtitle ? /* @__PURE__ */ react.default.createElement("span", { className: "hdl-ps-sr-only" }, item.subtitle) : null)), item.disabled ? /* @__PURE__ */ react.default.createElement("small", {
141
+ className: "hdl-ps-unavailable",
142
+ id: `${selectionId}-${item.product.id}-unavailable`
143
+ }, item.reason) : null))))), !items.length ? /* @__PURE__ */ react.default.createElement("p", {
144
+ className: "hdl-ps-empty",
145
+ role: "status"
146
+ }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.primary-unavailable")) : null), /* @__PURE__ */ react.default.createElement("button", {
126
147
  type: "button",
127
- className: "hdl-bowl-dialog-button hdl-ps-skip",
148
+ className: "hdl-ps-skip",
128
149
  disabled: busy,
129
150
  onClick: () => {
130
151
  if (busy || delivered.current) return;
131
152
  delivered.current = true;
132
153
  if (onCancel() === false) delivered.current = false;
133
154
  }
134
- }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.customization-skip")), !items.length ? /* @__PURE__ */ react.default.createElement("p", { role: "status" }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.primary-unavailable")) : null))));
155
+ }, _pisell_utils.locales.getText("pisell2.hdl-kiosk.customization-skip")))));
135
156
  }
136
157
  //#endregion
137
158
  exports.PrimaryProductSelection = PrimaryProductSelection;
package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.less CHANGED
@@ -1,110 +1,140 @@
1
- // Fill the workflow content area while leaving room for the shell's floating bar.
1
+ // The shell owns the header and floating cart bar; fill the space between them.
2
2
  .pisell-hdl-kiosk .hdl-primary-selection {
3
+ container-type: inline-size;
3
4
  display: flex;
5
+ flex: 1;
4
6
  width: 100%;
5
7
  min-width: 0;
6
8
  min-height: 0;
7
- flex: 1;
8
- overflow: hidden;
9
9
  padding-bottom: var(--hdl-bottom-bar-clearance);
10
- background: #faf8f5;
10
+ overflow: hidden;
11
+ background: #eee8dc url('./assets/order-background.svg') center top /
12
+ max(100%, 1080px) auto;
11
13
  }
12
14
 
13
15
  .hdl-ps-dialog {
14
- --hdl-ps-red: #b20d12;
15
- --hdl-ps-ink: #292523;
16
- --hdl-ps-muted: #736b65;
17
16
  display: flex;
18
- width: 100%;
17
+ flex: 1;
19
18
  min-width: 0;
20
19
  min-height: 0;
21
- flex-direction: column;
22
- padding: 24px;
23
- overflow: hidden;
24
- color: var(--hdl-ps-ink);
25
- font-size: 16px;
26
- line-height: 1.5;
20
+ color: #252323;
27
21
  text-align: left;
28
- animation: hdl-ps-dialog-enter 180ms ease-out both;
29
22
  }
30
23
  .hdl-ps-dialog button {
31
- font: inherit;
24
+ appearance: none;
25
+ font-family: inherit;
32
26
  cursor: pointer;
33
27
  touch-action: manipulation;
34
28
  -webkit-tap-highlight-color: transparent;
35
29
  }
36
- .hdl-ps-dialog button:focus-visible {
37
- outline: 3px solid #2563eb;
38
- outline-offset: 4px;
39
- }
40
30
  .hdl-ps-content {
41
31
  display: flex;
32
+ flex: 1;
33
+ flex-direction: column;
34
+ gap: clamp(12px, 1.85cqw, 20px);
35
+ min-width: 0;
42
36
  min-height: 0;
37
+ padding: clamp(12px, 1.67cqw, 18px) clamp(24px, 4.9cqw, 53px);
38
+ }
39
+ .hdl-ps-choices {
40
+ --hdl-ps-gap: clamp(24px, 3.7cqw, 40px);
41
+ display: flex;
43
42
  flex: 1;
43
+ flex-direction: column;
44
+ gap: var(--hdl-ps-gap);
45
+ min-height: 0;
44
46
  overflow: auto;
45
47
  overscroll-behavior: contain;
46
- padding: 24px 8px;
48
+ // Leave room for keyboard focus inside the scroll region.
49
+ padding: 4px;
50
+ margin: -4px;
47
51
  }
48
- .hdl-ps-selection {
49
- width: min(960px, 100%);
50
- min-width: 0;
52
+ .hdl-ps-group {
53
+ --hdl-ps-zone-ink: #963047;
54
+ --hdl-ps-zone-line: #d5bfa5;
55
+ position: relative;
56
+ display: flex;
57
+ // Every product keeps its own height; additional products scroll instead of shrinking.
51
58
  flex: none;
52
- margin: auto;
59
+ flex-direction: column;
60
+ gap: clamp(4px, 0.74cqw, 8px);
61
+ min-width: 0;
62
+ padding: clamp(8px, 1.4cqw, 15px);
63
+ border: 1px solid #cfbda5;
64
+ border-radius: clamp(18px, 2.8cqw, 30px);
65
+ background: #faf4e8;
66
+ }
67
+ .hdl-ps-group[data-zone='standard'] {
68
+ --hdl-ps-zone-ink: #3f4b45;
69
+ --hdl-ps-zone-line: #c1c7bd;
70
+ border-color: #bfc6bc;
71
+ background: #f2f4ee;
72
+ }
73
+ .hdl-ps-group + .hdl-ps-group::before {
74
+ position: absolute;
75
+ inset: calc(var(--hdl-ps-gap) / -2) 0 auto;
76
+ height: 1px;
77
+ background: #cbbba6;
78
+ content: '';
79
+ pointer-events: none;
53
80
  }
54
- .hdl-ps-heading {
55
- margin: 0 0 32px;
56
- text-align: center;
81
+ .hdl-ps-marker {
82
+ display: flex;
83
+ flex: none;
84
+ align-items: center;
85
+ gap: clamp(12px, 1.8cqw, 20px);
86
+ min-height: clamp(26px, 3.9cqw, 42px);
87
+ padding-inline: clamp(4px, 0.74cqw, 8px);
57
88
  }
58
- .hdl-ps-heading h2 {
89
+ .hdl-ps-marker h3 {
90
+ flex: none;
59
91
  margin: 0;
60
- font-size: 40px;
61
- font-weight: 850;
62
- line-height: 1.25;
63
- letter-spacing: -0.025em;
64
- outline: none;
92
+ color: var(--hdl-ps-zone-ink);
93
+ font-size: clamp(18px, 3.15cqw, 34px);
94
+ font-weight: 650;
95
+ line-height: 1.2;
65
96
  }
66
- .hdl-ps-heading .hdl-ps-description {
67
- margin: 10px 0 0;
68
- font-size: 20px;
69
- color: var(--hdl-ps-muted);
97
+ .hdl-ps-marker-line {
98
+ flex: 1;
99
+ height: 1px;
100
+ background: var(--hdl-ps-zone-line);
70
101
  }
71
102
  .hdl-ps-products {
72
- --hdl-ps-product-height: 250px;
73
103
  display: grid;
74
- grid-template-columns: repeat(2, minmax(0, 1fr));
75
- gap: 20px;
104
+ grid-template-columns: minmax(0, 1fr);
105
+ gap: clamp(12px, 1.85cqw, 20px);
106
+ min-width: 0;
76
107
  }
77
- .hdl-ps-products > :first-child,
78
- .hdl-ps-products > :last-child:nth-child(even) {
79
- grid-column: 1 / -1;
108
+ .hdl-ps-image-area {
109
+ display: flex;
110
+ flex-direction: column;
111
+ min-width: 0;
112
+ min-height: 0;
113
+ padding: 4px;
80
114
  }
81
- .hdl-ps-dialog .hdl-ps-product {
82
- display: grid;
83
- grid-template-columns: minmax(0, 24%) minmax(0, 1fr) auto;
84
- align-items: center;
115
+ .hdl-ps-poster-area {
116
+ width: 100%;
85
117
  min-width: 0;
86
- min-height: var(--hdl-ps-product-height);
87
- padding: 12px;
88
- border: 1.5px solid #d8d1ca;
89
- border-radius: 24px;
90
- color: var(--hdl-ps-ink);
91
- background: #fff;
92
- text-align: left;
93
- transition: border-color 160ms, background 160ms, box-shadow 160ms;
118
+ min-height: 0;
94
119
  }
95
- .hdl-ps-dialog .hdl-ps-products > :first-child {
96
- min-height: calc(var(--hdl-ps-product-height) * 1.4);
120
+ .hdl-ps-dialog .hdl-ps-product {
121
+ display: block;
122
+ width: 100%;
123
+ max-width: 100%;
124
+ margin: 0;
125
+ padding: 0;
126
+ border: 0;
127
+ border-radius: clamp(10px, 1.6cqw, 18px);
128
+ background: transparent;
129
+ overflow: hidden;
130
+ transition: transform 160ms ease, filter 160ms ease;
97
131
  }
98
132
  .hdl-ps-product-image {
99
133
  position: relative;
100
- display: grid;
101
- place-items: center;
134
+ display: block;
102
135
  width: 100%;
103
- min-height: 0;
104
- aspect-ratio: 1 / 1;
105
- overflow: hidden;
106
- border-radius: 14px;
107
- background: #f1ece6;
136
+ // Keep every poster at the same display ratio, including square source images.
137
+ aspect-ratio: 16 / 10;
108
138
  }
109
139
  .hdl-ps-product-image img {
110
140
  position: absolute;
@@ -113,86 +143,106 @@
113
143
  width: 100%;
114
144
  height: 100%;
115
145
  object-fit: cover;
146
+ object-position: center;
147
+ user-select: none;
148
+ -webkit-user-drag: none;
116
149
  }
117
150
  .hdl-ps-image-fallback {
118
- padding: 12px;
119
- color: var(--hdl-ps-muted);
120
- text-align: center;
121
- }
122
- .hdl-ps-product-details {
151
+ position: absolute;
152
+ inset: 0;
123
153
  display: flex;
124
- min-width: 0;
125
154
  align-self: stretch;
126
- flex-direction: column;
155
+ align-items: center;
127
156
  justify-content: center;
128
- padding: 12px 28px;
157
+ flex-direction: column;
158
+ gap: 12px;
159
+ width: 100%;
160
+ height: 100%;
161
+ padding: 16px;
162
+ background: #ebe5da;
163
+ color: #645b52;
164
+ font-size: clamp(16px, 2.2cqw, 24px);
165
+ text-align: center;
129
166
  }
130
- .hdl-ps-product-name {
131
- display: block;
132
- font-size: 32px;
133
- font-weight: 800;
134
- line-height: 1.3;
167
+ .hdl-ps-image-fallback strong {
168
+ color: #252323;
169
+ font-size: clamp(20px, 3cqw, 32px);
135
170
  }
136
- .hdl-ps-product-subtitle {
137
- display: block;
171
+ .hdl-ps-unavailable {
172
+ flex: none;
138
173
  margin-top: 8px;
139
- font-size: 20px;
140
- line-height: 1.5;
141
- color: var(--hdl-ps-muted);
174
+ color: #645b52;
175
+ font-size: clamp(14px, 1.85cqw, 20px);
176
+ line-height: 1.4;
177
+ text-align: center;
142
178
  }
143
- .hdl-ps-select-arrow {
144
- display: grid;
145
- place-items: center;
146
- width: 64px;
147
- height: 64px;
148
- margin-right: 12px;
149
- border-radius: 16px;
150
- background: #fff2ef;
151
- color: var(--hdl-ps-red);
152
- }
153
- .hdl-ps-select-arrow svg {
154
- width: 36px;
155
- height: 36px;
179
+ .hdl-ps-dialog .hdl-ps-skip {
180
+ display: block;
181
+ flex: none;
182
+ width: 100%;
183
+ min-height: clamp(64px, 10cqw, 108px);
184
+ margin: 0;
185
+ padding: 12px 20px;
186
+ border: 1px solid #cdbbb1;
187
+ border-radius: clamp(8px, 1.6cqw, 18px);
188
+ background: #faf7ef;
189
+ color: #b80020;
190
+ font-size: clamp(16px, 2.65cqw, 29px);
191
+ font-weight: 650;
192
+ line-height: 1.3;
193
+ text-align: center;
194
+ transition: background-color 160ms ease;
156
195
  }
157
196
  .hdl-ps-dialog .hdl-ps-product:not(:disabled):active {
158
- border-color: var(--hdl-ps-red);
159
- background: #fff3f1;
160
- box-shadow: inset 0 0 0 1px var(--hdl-ps-red);
197
+ transform: scale(0.975);
198
+ filter: brightness(0.92);
161
199
  }
162
200
  @media (hover: hover) {
163
- .hdl-ps-dialog .hdl-ps-product:not(:disabled):hover {
164
- border-color: var(--hdl-ps-red);
165
- background: #fffaf8;
201
+ .hdl-ps-product:not(:disabled):hover {
202
+ filter: brightness(0.97);
203
+ }
204
+ .hdl-ps-skip:not(:disabled):hover {
205
+ background: #f8eeee;
166
206
  }
167
207
  }
168
- .hdl-ps-unavailable {
169
- margin-top: 12px;
170
- color: var(--hdl-ps-muted);
171
- font-size: 18px;
172
- line-height: 1.5;
208
+ .hdl-ps-dialog .hdl-ps-skip:not(:disabled):active {
209
+ filter: brightness(0.96);
173
210
  }
174
- .hdl-ps-dialog .hdl-ps-skip {
175
- flex: none;
176
- width: 100%;
177
- margin-top: 24px;
211
+ .hdl-ps-dialog button:focus-visible {
212
+ outline: 3px solid #b80020;
213
+ outline-offset: 4px;
178
214
  }
179
- .pisell-hdl-kiosk .hdl-ps-dialog button:disabled {
180
- background: #ebe6e1;
181
- color: #847b75;
215
+ .hdl-ps-dialog button:disabled {
182
216
  cursor: not-allowed;
183
217
  }
184
- @keyframes hdl-ps-dialog-enter {
185
- from {
186
- opacity: 0;
187
- }
188
- to {
189
- opacity: 1;
190
- }
218
+ .hdl-ps-dialog .hdl-ps-product:disabled {
219
+ filter: grayscale(0.65);
220
+ }
221
+ .hdl-ps-dialog .hdl-ps-skip:disabled {
222
+ color: #645b52;
223
+ }
224
+ .hdl-ps-empty {
225
+ margin: auto;
226
+ color: #645b52;
227
+ font-size: clamp(18px, 2.2cqw, 24px);
228
+ text-align: center;
229
+ }
230
+ .hdl-ps-sr-only {
231
+ position: absolute;
232
+ width: 1px;
233
+ height: 1px;
234
+ margin: -1px;
235
+ padding: 0;
236
+ border: 0;
237
+ overflow: hidden;
238
+ clip: rect(0, 0, 0, 0);
239
+ white-space: nowrap;
191
240
  }
192
241
  @media (prefers-reduced-motion: reduce) {
193
- .hdl-ps-dialog,
194
- .hdl-ps-dialog * {
195
- animation: none !important;
196
- transition: none !important;
242
+ .hdl-ps-dialog button {
243
+ transition: none;
244
+ }
245
+ .hdl-ps-dialog .hdl-ps-product:not(:disabled):active {
246
+ transform: none;
197
247
  }
198
248
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/private-materials",
3
- "version": "6.12.376",
3
+ "version": "6.12.377",
4
4
  "main": "./lib/index.js",
5
5
  "module": "./es/index.js",
6
6
  "types": "./lib/index.d.ts",
@@ -74,10 +74,10 @@
74
74
  "styled-components": "^6.0.0-rc.3",
75
75
  "use-sync-external-store": "^1.6.0",
76
76
  "@pisell/pi-payment-sdk": "0.0.4",
77
- "@pisell/materials": "6.12.88",
77
+ "@pisell/utils": "3.0.7",
78
78
  "@pisell/date-picker": "3.0.12",
79
79
  "@pisell/icon": "0.0.11",
80
- "@pisell/utils": "3.0.7"
80
+ "@pisell/materials": "6.12.88"
81
81
  },
82
82
  "peerDependencies": {
83
83
  "react": "^18.0.0",