@sc-360-v2/storefront-cms-library 0.5.66 → 0.5.67

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 (9) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cartAttributes.scss +436 -68
  3. package/dist/coupon.scss +739 -352
  4. package/dist/map.scss +37 -8
  5. package/dist/sort.scss +176 -89
  6. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +120 -5
  7. package/dist/types/builder/tools/element-edit/coupon.d.ts +129 -20
  8. package/dist/types/builder/tools/element-edit/map.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/cartAttributes.scss CHANGED
@@ -198,7 +198,7 @@
198
198
  );
199
199
  gap: var(
200
200
  --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
201
- var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
201
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp, 12px))
202
202
  );
203
203
  border-color: var(
204
204
  --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
@@ -254,17 +254,64 @@
254
254
  text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
255
255
  padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
256
256
  }
257
+ // CurrencyDisplay renders `span.currency_span` and, with isStyledElement, adds no
258
+ // inline styles of its own — so the attributesPrice controls own it completely.
259
+ // Covers both the per-attribute price and the Order Attributes total.
260
+ .currency_span {
261
+ display: inline-block;
262
+ white-space: nowrap;
263
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-fy);
264
+ text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-tm);
265
+ word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-wp);
266
+ word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-bk);
267
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-cr);
268
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-wt);
269
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se);
270
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ue);
271
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-lr-sg);
272
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-le-ht);
273
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se-ic);
274
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-an);
275
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-pg);
276
+ background-color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-bd-cr);
277
+ }
257
278
  .attribute {
258
279
  width: 100%;
259
280
  display: flex;
260
281
  flex-direction: column;
282
+ // Every box property below falls back to the cart-details card styling, so an
283
+ // element whose design tokens were never emitted still renders as a card
284
+ // instead of an unpadded, borderless row.
261
285
  padding: var(
262
286
  --_ctm-mob-dn-as-cr-as-fs-pg,
263
- var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
287
+ var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg, 10px))
264
288
  );
265
289
  gap: var(
266
290
  --_ctm-mob-dn-as-cr-as-fs-im-gp,
267
- var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
291
+ var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp, 6px))
292
+ );
293
+ background-color: var(
294
+ --_ctm-mob-dn-as-cr-as-fs-bd-cr,
295
+ var(--_ctm-tab-dn-as-cr-as-fs-bd-cr, var(--_ctm-dn-as-cr-as-fs-bd-cr, var(--_base-white)))
296
+ );
297
+ border-color: var(
298
+ --_ctm-mob-dn-as-cr-as-fs-br-cr,
299
+ var(
300
+ --_ctm-tab-dn-as-cr-as-fs-br-cr,
301
+ var(--_ctm-dn-as-cr-as-fs-br-cr, var(--_thm-cs-be-se-3))
302
+ )
303
+ );
304
+ border-style: var(
305
+ --_ctm-mob-dn-as-cr-as-fs-br-se,
306
+ var(--_ctm-tab-dn-as-cr-as-fs-br-se, var(--_ctm-dn-as-cr-as-fs-br-se, solid))
307
+ );
308
+ border-width: var(
309
+ --_ctm-mob-dn-as-cr-as-fs-br-wh,
310
+ var(--_ctm-tab-dn-as-cr-as-fs-br-wh, var(--_ctm-dn-as-cr-as-fs-br-wh, 1px))
311
+ );
312
+ border-radius: var(
313
+ --_ctm-mob-dn-as-cr-as-fs-br-rs,
314
+ var(--_ctm-tab-dn-as-cr-as-fs-br-rs, var(--_ctm-dn-as-cr-as-fs-br-rs, 4px))
268
315
  );
269
316
  .label {
270
317
  display: block;
@@ -334,31 +381,37 @@
334
381
  input {
335
382
  background-color: var(
336
383
  --_ctm-mob-dn-as-cr-as-is-bd-cr,
337
- var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
384
+ var(
385
+ --_ctm-tab-dn-as-cr-as-is-bd-cr,
386
+ var(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
387
+ )
338
388
  );
339
389
  padding: var(
340
390
  --_ctm-mob-dn-as-cr-as-is-pg,
341
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
391
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
342
392
  );
343
393
  gap: var(
344
394
  --_ctm-mob-dn-as-cr-as-is-im-gp,
345
- var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
395
+ var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp, 8px))
346
396
  );
347
397
  border-color: var(
348
398
  --_ctm-mob-dn-as-cr-as-is-br-cr,
349
- var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
399
+ var(
400
+ --_ctm-tab-dn-as-cr-as-is-br-cr,
401
+ var(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
402
+ )
350
403
  );
351
404
  border-style: var(
352
405
  --_ctm-mob-dn-as-cr-as-is-br-se,
353
- var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
406
+ var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se, solid))
354
407
  );
355
408
  border-width: var(
356
409
  --_ctm-mob-dn-as-cr-as-is-br-wh,
357
- var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
410
+ var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh, 1px))
358
411
  );
359
412
  border-radius: var(
360
413
  --_ctm-mob-dn-as-cr-as-is-br-rs,
361
- var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
414
+ var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs, 4px))
362
415
  );
363
416
  &::placeholder {
364
417
  font-family: var(
@@ -462,11 +515,16 @@
462
515
  color 0.2s,
463
516
  border-color 0.2s,
464
517
  box-shadow 0.2s;
518
+ width: 100%;
519
+ padding: var(
520
+ --_ctm-mob-dn-as-cr-as-is-pg,
521
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
522
+ );
465
523
  &:focus {
466
524
  box-shadow:
467
525
  0px 1px 2px rgba(16, 24, 40, 0.05),
468
- 0px 0px 0px 2px var(--primary-100);
469
- border: 1px solid var(--primary-300);
526
+ 0px 0px 0px 2px var(--_primary-100);
527
+ border: 1px solid var(--_primary-300);
470
528
  }
471
529
  }
472
530
  .dropdown-input-section {
@@ -566,6 +624,49 @@
566
624
  border-color: #dc2626;
567
625
  background-color: #fef2f2;
568
626
  }
627
+ // DatePickerInput renders the calendar icon as a *sibling* of the input
628
+ // wrapper, so it only sits inside the field once it is taken out of flow.
629
+ // Without this the icon renders on its own line above the input.
630
+ .date_picker_container {
631
+ position: relative;
632
+
633
+ .svg_icon {
634
+ position: absolute;
635
+ left: 8px;
636
+ // Centring on the midpoint keeps the icon aligned whatever padding or
637
+ // font size the input ends up with; a fixed `top` drifts as soon as the
638
+ // merchant changes either.
639
+ top: 50%;
640
+ transform: translateY(-50%);
641
+ display: inline-flex;
642
+ align-items: center;
643
+ line-height: 0;
644
+ pointer-events: none;
645
+ // The input paints a background, so the icon needs to sit above it.
646
+ z-index: 1;
647
+
648
+ svg {
649
+ display: block;
650
+ // The icon markup carries its own width/height/stroke attributes;
651
+ // these override them so the attributesInputs icon controls apply.
652
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
653
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
654
+
655
+ path {
656
+ stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
657
+ stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
658
+ }
659
+ }
660
+ }
661
+
662
+ .react-datepicker-wrapper {
663
+ .react-datepicker__input-container {
664
+ input {
665
+ padding-left: 32px !important;
666
+ }
667
+ }
668
+ }
669
+ }
569
670
  .react-datepicker-wrapper {
570
671
  width: 100%;
571
672
  .react-datepicker__close-icon::after {
@@ -574,40 +675,345 @@
574
675
  color: var(--_gray-500);
575
676
  }
576
677
  }
678
+ // Same shape as the date picker: the percent glyph is a sibling of the input,
679
+ // so it needs lifting out of flow to sit inside the field.
680
+ // `&.` because attribute.tsx puts this class on the .attribute_field element
681
+ // itself (`className="attribute_field input_percent_a"`), not on a child.
682
+ &.input_percent_a {
683
+ position: relative;
684
+
685
+ .svg_icon {
686
+ position: absolute;
687
+ right: 10px;
688
+ top: 50%;
689
+ transform: translateY(-50%);
690
+ display: inline-flex;
691
+ align-items: center;
692
+ line-height: 0;
693
+ pointer-events: none;
694
+ z-index: 1;
695
+
696
+ svg {
697
+ display: block;
698
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
699
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
700
+
701
+ path {
702
+ stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
703
+ stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
704
+ }
705
+ }
706
+ }
707
+
708
+ input {
709
+ // Keep the value clear of the glyph, and drop the number spinner that
710
+ // would otherwise render on top of it.
711
+ padding-right: 32px !important;
712
+ appearance: textfield;
713
+ -moz-appearance: textfield;
714
+
715
+ &::-webkit-outer-spin-button,
716
+ &::-webkit-inner-spin-button {
717
+ -webkit-appearance: none;
718
+ margin: 0;
719
+ }
720
+ }
721
+ }
722
+ // Co-class on .attribute_field, same as the percent field above.
723
+ &.color_picker_a {
724
+ position: relative;
725
+
726
+ .color-circle {
727
+ // The swatch carries inline width/height, so the size control can only
728
+ // take effect with !important. Falls back to the inline 30px.
729
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
730
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
731
+ }
732
+
733
+ .color-picker-container {
734
+ // The popover used to sit in flow, so opening it pushed the rest of the
735
+ // panel down and overflowed the card in a narrow sidebar.
736
+ position: absolute;
737
+ z-index: 5;
738
+ top: calc(100% + 4px);
739
+ left: 0;
740
+ min-width: 220px;
741
+ background-color: prepareMediaVariable(
742
+ --_ctm-dn-as-cr-as-cr-pr-bd-cr,
743
+ var(--_base-white)
744
+ );
745
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-pg, 12px);
746
+ border-color: prepareMediaVariable(
747
+ --_ctm-dn-as-cr-as-cr-pr-br-cr,
748
+ var(--_thm-cs-be-se-3)
749
+ );
750
+ border-style: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-se, solid);
751
+ border-width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-wh, 1px);
752
+ border-radius: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-rs, 4px);
753
+ box-shadow: 0px 4px 12px rgba(16, 24, 40, 0.12);
754
+
755
+ .custom_hex_color_picker_div {
756
+ margin-top: 8px;
757
+
758
+ label {
759
+ display: inline-block;
760
+ margin-bottom: 4px;
761
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
762
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
763
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
764
+ line-height: 20px;
765
+ }
766
+ }
767
+
768
+ .custom__div {
769
+ display: grid;
770
+ grid-template-columns: repeat(4, 1fr);
771
+ gap: 0;
772
+
773
+ label {
774
+ display: flex;
775
+ flex-direction: column;
776
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
777
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
778
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
779
+
780
+ input {
781
+ border: 1px solid var(--_thm-cs-be-se-3);
782
+ padding: 8px;
783
+ outline: none;
784
+ text-align: center;
785
+ border-radius: 0;
786
+ }
787
+
788
+ &:first-child input {
789
+ border-right: none;
790
+ border-top-left-radius: 4px;
791
+ border-bottom-left-radius: 4px;
792
+ }
793
+
794
+ &:last-child input {
795
+ border-left: none;
796
+ border-top-right-radius: 4px;
797
+ border-bottom-right-radius: 4px;
798
+ }
799
+ }
800
+ }
801
+ }
802
+ }
803
+ // Co-class on .attribute_field, same as the percent field above.
804
+ &.input_textarea_a {
805
+ width: 100%;
806
+
807
+ .attribute_text_area_field {
808
+ width: 100% !important;
809
+ // A textarea with no height authored collapsed to roughly one row.
810
+ min-height: prepareMediaVariable(--_ctm-dn-as-cr-as-tt-aa-ht, 80px);
811
+ resize: vertical;
812
+ // Each property falls back to the single-line input styling, so the
813
+ // textarea still matches the other fields until it is authored.
814
+ background-color: prepareMediaVariable(
815
+ --_ctm-dn-as-cr-as-tt-aa-bd-cr,
816
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
817
+ );
818
+ padding: prepareMediaVariable(
819
+ --_ctm-dn-as-cr-as-tt-aa-pg,
820
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-pg, 8px 12px)
821
+ );
822
+ border-color: prepareMediaVariable(
823
+ --_ctm-dn-as-cr-as-tt-aa-br-cr,
824
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
825
+ );
826
+ border-style: prepareMediaVariable(
827
+ --_ctm-dn-as-cr-as-tt-aa-br-se,
828
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-se, solid)
829
+ );
830
+ border-width: prepareMediaVariable(
831
+ --_ctm-dn-as-cr-as-tt-aa-br-wh,
832
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-wh, 1px)
833
+ );
834
+ border-radius: prepareMediaVariable(
835
+ --_ctm-dn-as-cr-as-tt-aa-br-rs,
836
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-rs, 4px)
837
+ );
838
+ font-family: prepareMediaVariable(
839
+ --_ctm-dn-as-cr-as-tt-aa-ft-fy,
840
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-fy)
841
+ );
842
+ font-size: prepareMediaVariable(
843
+ --_ctm-dn-as-cr-as-tt-aa-ft-se,
844
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-se)
845
+ );
846
+ font-weight: prepareMediaVariable(
847
+ --_ctm-dn-as-cr-as-tt-aa-ft-wt,
848
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-wt)
849
+ );
850
+ color: prepareMediaVariable(
851
+ --_ctm-dn-as-cr-as-tt-aa-cr,
852
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-cr)
853
+ );
854
+ line-height: prepareMediaVariable(
855
+ --_ctm-dn-as-cr-as-tt-aa-le-ht,
856
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-le-ht)
857
+ );
858
+ transition:
859
+ background-color 0.2s,
860
+ color 0.2s,
861
+ border-color 0.2s,
862
+ box-shadow 0.2s;
863
+
864
+ &::placeholder {
865
+ color: var(--_gray-500);
866
+ }
867
+
868
+ &:focus {
869
+ outline: 0 none;
870
+ box-shadow:
871
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
872
+ 0px 0px 0px 2px var(--primary-100);
873
+ border: 1px solid var(--primary-300);
874
+ }
875
+ }
876
+ }
577
877
  .custom-upload {
578
878
  display: flex;
579
- flex-direction: column;
879
+ // Row, matching cart-details: the icon sits beside the text, and the
880
+ // filled state puts the preview and the clear button at opposite ends.
580
881
  align-items: center;
581
882
  align-self: stretch;
883
+ position: relative;
582
884
 
583
885
  background-color: var(
584
886
  --_ctm-mob-dn-as-cr-us-bd-cr,
585
- var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
887
+ var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr, var(--_base-white)))
586
888
  );
587
889
  padding: var(
588
890
  --_ctm-mob-dn-as-cr-us-pg,
589
- var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
891
+ var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg, 16px))
590
892
  );
591
893
  gap: var(
592
894
  --_ctm-mob-dn-as-cr-us-im-gp,
593
- var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
895
+ var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp, 12px))
594
896
  );
595
897
  border-color: var(
596
898
  --_ctm-mob-dn-as-cr-us-br-cr,
597
- var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
899
+ var(
900
+ --_ctm-tab-dn-as-cr-us-br-cr,
901
+ var(--_ctm-dn-as-cr-us-br-cr, var(--_thm-cs-be-se-3))
902
+ )
598
903
  );
599
904
  border-style: var(
600
905
  --_ctm-mob-dn-as-cr-us-br-se,
601
- var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
906
+ var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se, solid))
602
907
  );
603
908
  border-width: var(
604
909
  --_ctm-mob-dn-as-cr-us-br-wh,
605
- var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
910
+ var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh, 1px))
606
911
  );
607
912
  border-radius: var(
608
913
  --_ctm-mob-dn-as-cr-us-br-rs,
609
- var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
914
+ var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs, 4px))
610
915
  );
916
+
917
+ .clear_upload_icon {
918
+ // Never shrink and never inherit the preview's height: the button stays a
919
+ // 30px circle centred against the preview, however many lines the file
920
+ // name wraps to. (The old `margin-top: 3px` nudged it off centre.)
921
+ flex: 0 0 auto;
922
+ align-self: center;
923
+ display: flex;
924
+ align-items: center;
925
+ justify-content: center;
926
+ width: 30px;
927
+ height: 30px;
928
+ background: #fff;
929
+ border-radius: 50%;
930
+ padding: 3px;
931
+
932
+ .svg_icon {
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ line-height: 0;
937
+
938
+ svg {
939
+ display: block;
940
+ width: 20px;
941
+ height: 20px;
942
+ }
943
+ }
944
+
945
+ &:hover {
946
+ .svg_icon {
947
+ svg {
948
+ path {
949
+ stroke: var(--_error-500);
950
+ }
951
+ }
952
+ }
953
+ }
954
+ }
955
+
956
+ // &:hover {
957
+ // .clear_upload_icon {
958
+ // display: block;
959
+ // }
960
+ // }
961
+
962
+ // FileUpload renders the thumbnail and the file name as siblings inside
963
+ // .preview_image_container, so the name cannot be styled from inside
964
+ // .preview_image. `min-width: 0` is what lets the name truncate instead of
965
+ // pushing the clear button out of the card.
966
+ .preview_image_container,
967
+ .preview_file {
968
+ display: flex;
969
+ align-items: center;
970
+ gap: 8px;
971
+ flex: 1 1 auto;
972
+ min-width: 0;
973
+ }
974
+
975
+ .preview_image {
976
+ display: flex;
977
+ align-items: center;
978
+ flex: 0 0 auto;
979
+
980
+ img {
981
+ width: 100%;
982
+ height: 100%;
983
+ object-fit: cover;
984
+ border-radius: 50%;
985
+ display: block;
986
+ }
987
+ }
988
+
989
+ .file_info {
990
+ min-width: 0;
991
+ }
992
+
993
+ // The filled state's file name follows the Uploads description typography,
994
+ // so the document/image preview is authorable like the rest of the field.
995
+ .image_title,
996
+ .file_name,
997
+ .file_extension {
998
+ min-width: 0;
999
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-fy-dc);
1000
+ color: prepareMediaVariable(--_ctm-dn-as-cr-us-cr-dc, var(--_gray-700));
1001
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-se-dc, 14px);
1002
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-wt-dc, 400);
1003
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-us-le-ht-dc, 150%);
1004
+ display: -webkit-box;
1005
+ -webkit-box-orient: vertical;
1006
+ -webkit-line-clamp: 1;
1007
+ overflow: hidden;
1008
+ word-break: break-all;
1009
+ }
1010
+
1011
+ .preview_file {
1012
+ .svg_icon {
1013
+ flex: 0 0 auto;
1014
+ line-height: 0;
1015
+ }
1016
+ }
611
1017
  .file_upload_text {
612
1018
  text-align: center;
613
1019
  display: flex;
@@ -725,6 +1131,16 @@
725
1131
  // color: var(--_gray-600);
726
1132
  }
727
1133
  }
1134
+ .has-file {
1135
+ justify-content: space-between;
1136
+ }
1137
+ // Multi-upload stacks one filled card per file, above the upload button.
1138
+ .multi-upload-list {
1139
+ display: flex;
1140
+ flex-direction: column;
1141
+ gap: 8px;
1142
+ margin-bottom: 8px;
1143
+ }
728
1144
  }
729
1145
  }
730
1146
  .error-text {
@@ -980,54 +1396,6 @@
980
1396
  }
981
1397
  }
982
1398
 
983
- // .custom-upload {
984
- // // text-align: center;
985
- // // border: 1px solid var(--_gray-200);
986
- // // border-radius: 6px;
987
- // // padding: 16px;
988
- // border-radius: 6px;
989
- // border: 1px solid var(--Gray-200, #eaecf0);
990
- // background: var(--Base-White, #fff);
991
- // display: flex;
992
- // padding: 16px 24px;
993
- // flex-direction: column;
994
- // align-items: center;
995
- // gap: 4px;
996
- // align-self: stretch;
997
- // &:hover {
998
- // cursor: pointer;
999
- // border: 1px solid var(--_primary-200);
1000
- // background: var(--_primary-25);
1001
- // }
1002
- // .uploadicon {
1003
- // padding: 10px;
1004
- // background: #f2f4f7;
1005
- // display: inline-block;
1006
- // border-radius: 50%;
1007
- // margin-bottom: 12px;
1008
- // color: var(--_gray-600);
1009
- // }
1010
- // p {
1011
- // padding-bottom: 4px;
1012
- // color: var(--_gray-600);
1013
- // font-size: 14px;
1014
- // strong {
1015
- // // color: var(--_primary-400);
1016
- // // font-weight: 600;
1017
- // color: var(--Primary-400, #243dc6);
1018
- // font-size: 14px;
1019
- // font-weight: 600;
1020
- // // line-height: 20px;
1021
- // }
1022
- // }
1023
- // span {
1024
- // color: var(--Gray-600, #475467);
1025
- // font-size: 14px;
1026
- // font-weight: 400;
1027
- // // line-height: 20px;
1028
- // }
1029
- // }
1030
-
1031
1399
  .input_color_picker_a {
1032
1400
  width: 100% !important;
1033
1401
  height: 48px;