@incodetech/web 0.0.0-dev-20260220-d32fe9f → 0.0.0-dev-20260223-b372057

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/base.css CHANGED
@@ -37,10 +37,10 @@
37
37
  --tw-ease: initial;
38
38
  --tw-font-weight: initial;
39
39
  --tw-duration: initial;
40
+ --tw-leading: initial;
40
41
  --tw-translate-x: 0;
41
42
  --tw-translate-y: 0;
42
43
  --tw-translate-z: 0;
43
- --tw-leading: initial;
44
44
  --tw-tracking: initial;
45
45
  }
46
46
  }
@@ -375,6 +375,120 @@
375
375
  .IncodeButton.IncodeButtonLink.IncodeButtonLoading .IncodeLoadingIconSecondaryIcon {
376
376
  fill: var(--surface-brand-400-static);
377
377
  }
378
+ .IncodeCheckbox {
379
+ flex-direction: column;
380
+ display: inline-flex;
381
+ }
382
+ .IncodeCheckboxLabel {
383
+ cursor: pointer;
384
+ -webkit-user-select: none;
385
+ user-select: none;
386
+ align-items: center;
387
+ gap: 10px;
388
+ display: inline-flex;
389
+ position: relative;
390
+ }
391
+ .IncodeCheckboxLabel.IncodeCheckboxLabelDisabled {
392
+ cursor: not-allowed;
393
+ }
394
+ .IncodeCheckboxInput {
395
+ opacity: 0;
396
+ width: 28px;
397
+ height: 28px;
398
+ margin: var(--spacing-0, var(--spacing-none, 0px));
399
+ cursor: pointer;
400
+ z-index: 1;
401
+ position: absolute;
402
+ }
403
+ .IncodeCheckboxInput:disabled {
404
+ cursor: not-allowed;
405
+ }
406
+ .IncodeCheckboxInput:focus-visible + .IncodeCheckboxVisual {
407
+ outline: 2px solid var(--border-status-focus);
408
+ outline-offset: 2px;
409
+ }
410
+ .IncodeCheckboxVisual {
411
+ border-radius: var(--radius-checkbox, var(--checkbox-border-radius));
412
+ border-style: var(--tw-border-style);
413
+ border-width: 2px;
414
+ border-color: var(--color-checkbox-border-default, var(--checkbox-border-default));
415
+ background-color: var(--color-checkbox-surface-default, var(--checkbox-surface-default));
416
+ width: 28px;
417
+ min-width: 28px;
418
+ height: 28px;
419
+ min-height: 28px;
420
+ transition-property: all;
421
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
422
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
423
+ --tw-duration: .2s;
424
+ justify-content: center;
425
+ align-items: center;
426
+ transition-duration: .2s;
427
+ display: inline-flex;
428
+ position: relative;
429
+ }
430
+ .IncodeCheckboxVisualChecked {
431
+ background-color: var(--color-checkbox-surface-selected, var(--checkbox-surface-selected));
432
+ border-color: var(--color-checkbox-border-selected, var(--checkbox-border-selected));
433
+ }
434
+ .IncodeCheckboxVisualDisabled, .IncodeCheckboxVisualChecked.IncodeCheckboxVisualDisabled {
435
+ background-color: var(--color-checkbox-surface-disabled, var(--checkbox-surface-disabled));
436
+ border-color: var(--color-checkbox-border-disabled, var(--checkbox-border-disabled));
437
+ }
438
+ .IncodeCheckboxVisualError {
439
+ border-color: var(--color-checkbox-border-negative, var(--checkbox-border-negative));
440
+ }
441
+ .IncodeCheckboxText {
442
+ color: var(--color-checkbox-text-default, var(--checkbox-text-default));
443
+ --tw-leading: 1.5;
444
+ line-height: 1.5;
445
+ font-family: var(--primitive-typography-family-dm-sans), system-ui, sans-serif;
446
+ }
447
+ .IncodeCheckboxTextS {
448
+ font-size: var(--text-14, var(--primitive-typography-size-14));
449
+ --tw-font-weight: var(--font-weight-normal, 400);
450
+ font-weight: var(--font-weight-normal, 400);
451
+ }
452
+ .IncodeCheckboxTextM {
453
+ font-size: var(--text-16, var(--primitive-typography-size-16));
454
+ --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
455
+ font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
456
+ }
457
+ .IncodeCheckboxTextDisabled {
458
+ color: var(--color-checkbox-text-disabled, var(--checkbox-text-disabled));
459
+ }
460
+ .IncodeCheckboxRequired {
461
+ color: var(--color-text-status-negative, var(--text-status-negative));
462
+ margin-left: var(--spacing-4, var(--spacing-4, 4px));
463
+ }
464
+ .IncodeCheckboxMessageWrapper {
465
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
466
+ align-items: center;
467
+ margin-left: 38px;
468
+ display: flex;
469
+ }
470
+ .IncodeCheckboxIconWrapper {
471
+ margin-right: var(--spacing-8, var(--spacing-8, 8px));
472
+ display: inline-block;
473
+ }
474
+ .IncodeCheckboxErrorText {
475
+ margin: var(--spacing-0, var(--spacing-none, 0px));
476
+ color: var(--color-checkbox-text-negative, var(--checkbox-text-negative));
477
+ font-size: var(--text-14, var(--primitive-typography-size-14));
478
+ --tw-font-weight: var(--font-weight-normal, 400);
479
+ font-weight: var(--font-weight-normal, 400);
480
+ font-family: inherit;
481
+ display: inline-block;
482
+ }
483
+ .IncodeCheckboxHelperText {
484
+ margin: var(--spacing-0, var(--spacing-none, 0px));
485
+ color: var(--color-text-body-secondary, var(--text-body-secondary));
486
+ font-size: var(--text-14, var(--primitive-typography-size-14));
487
+ --tw-font-weight: var(--font-weight-normal, 400);
488
+ font-weight: var(--font-weight-normal, 400);
489
+ font-family: inherit;
490
+ display: inline-block;
491
+ }
378
492
  .IncodeInput {
379
493
  width: 100%;
380
494
  max-width: 420px;
@@ -528,6 +642,241 @@
528
642
  font-family: inherit;
529
643
  display: inline-block;
530
644
  }
645
+ .IncodeDropdownComposed {
646
+ width: 100%;
647
+ max-width: 420px;
648
+ position: relative;
649
+ }
650
+ .IncodeDropdownComposedLabel {
651
+ margin: var(--spacing-0, var(--spacing-none, 0px));
652
+ margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
653
+ padding: var(--spacing-0, var(--spacing-none, 0px));
654
+ font-size: var(--text-14, var(--primitive-typography-size-14));
655
+ --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
656
+ font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
657
+ color: var(--color-dropdown-text-label-default, var(--dropdown-text-label-default));
658
+ font-family: var(--dropdown-text-label-font-family);
659
+ display: inline-block;
660
+ }
661
+ .IncodeDropdownComposedRequired {
662
+ color: var(--color-dropdown-text-helper-negative, var(--dropdown-text-helper-negative));
663
+ }
664
+ .IncodeDropdownComposedWrapper {
665
+ position: relative;
666
+ }
667
+ .IncodeDropdownComposedTriggerRow {
668
+ display: flex;
669
+ }
670
+ .IncodeDropdownComposedTriggerRowWithSibling {
671
+ gap: var(--spacing-8, var(--spacing-8, 8px));
672
+ }
673
+ .IncodeDropdownComposedSibling {
674
+ flex: 1;
675
+ width: 100%;
676
+ }
677
+ .IncodeDropdownComposedTrigger {
678
+ cursor: pointer;
679
+ border-radius: var(--radius-input, var(--input-border-radius));
680
+ border-style: var(--tw-border-style);
681
+ border-width: 1px;
682
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
683
+ background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
684
+ width: 100%;
685
+ padding: var(--spacing-16, var(--spacing-16, 16px));
686
+ text-align: left;
687
+ font-family: var(--primitive-typography-family-dm-sans);
688
+ font-size: var(--typography-body-lg-size);
689
+ font-weight: var(--typography-body-lg-weight);
690
+ line-height: var(--typography-body-lg-line-height);
691
+ letter-spacing: var(--typography-body-lg-letter-spacing);
692
+ font-size: var(--text-lg, 1.125rem);
693
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
694
+ --tw-font-weight: var(--font-weight-normal, 400);
695
+ font-weight: var(--font-weight-normal, 400);
696
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
697
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
698
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
699
+ --tw-duration: .2s;
700
+ --tw-outline-style: none;
701
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
702
+ font-family: var(--dropdown-text-input-font-family);
703
+ outline-style: none;
704
+ justify-content: space-between;
705
+ align-items: center;
706
+ transition-duration: .2s;
707
+ display: flex;
708
+ }
709
+ .IncodeDropdownComposedTrigger:hover:not(:disabled) {
710
+ border-color: var(--color-dropdown-border-active, var(--dropdown-border-active));
711
+ }
712
+ .IncodeDropdownComposedTrigger[data-focused="true"] {
713
+ border-style: var(--tw-border-style);
714
+ border-width: 2px;
715
+ border-color: var(--color-dropdown-border-focus, var(--dropdown-border-focus));
716
+ background-color: var(--color-dropdown-surface-active, var(--dropdown-surface-active));
717
+ }
718
+ .IncodeDropdownComposedTrigger[data-error="true"] {
719
+ border-color: var(--color-dropdown-border-negative, var(--dropdown-border-negative));
720
+ }
721
+ .IncodeDropdownComposedTrigger[data-error="true"][data-focused="true"] {
722
+ border-style: var(--tw-border-style);
723
+ border-width: 2px;
724
+ border-color: var(--color-dropdown-border-negative, var(--dropdown-border-negative));
725
+ }
726
+ .IncodeDropdownComposedTrigger:disabled {
727
+ cursor: not-allowed;
728
+ border-color: var(--color-dropdown-border-disabled, var(--dropdown-border-disabled));
729
+ background-color: var(--color-dropdown-surface-disabled, var(--dropdown-surface-disabled));
730
+ color: var(--color-dropdown-text-input-disabled, var(--dropdown-text-input-disabled));
731
+ }
732
+ .IncodeDropdownComposedTriggerText {
733
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
734
+ }
735
+ .IncodeDropdownComposedTriggerPlaceholder {
736
+ color: var(--color-dropdown-text-input-placeholder, var(--dropdown-text-input-placeholder));
737
+ font-weight: 500;
738
+ }
739
+ .IncodeDropdownComposedTriggerIcon {
740
+ margin-left: var(--spacing-8, var(--spacing-8, 8px));
741
+ transition-property: transform, translate, scale, rotate;
742
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
743
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
744
+ --tw-duration: .2s;
745
+ color: var(--text-body-tertiary, var(--color-text-body-tertiary));
746
+ flex-shrink: 0;
747
+ transition-duration: .2s;
748
+ display: flex;
749
+ }
750
+ .IncodeDropdownComposedTriggerIcon[data-open="true"] {
751
+ transform: rotate(180deg);
752
+ }
753
+ .IncodeDropdownComposedList {
754
+ top: 100%;
755
+ right: var(--spacing-0, var(--spacing-none, 0px));
756
+ left: var(--spacing-0, var(--spacing-none, 0px));
757
+ z-index: 20;
758
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
759
+ border-radius: var(--radius-input, var(--input-border-radius));
760
+ border-style: var(--tw-border-style);
761
+ border-width: 1px;
762
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
763
+ background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
764
+ flex-direction: column;
765
+ max-height: 320px;
766
+ display: flex;
767
+ position: absolute;
768
+ overflow: hidden;
769
+ box-shadow: 0 2px 8px #00000026;
770
+ }
771
+ .IncodeDropdownComposedList[data-error="true"] {
772
+ border-color: var(--color-dropdown-border-negative, var(--dropdown-border-negative));
773
+ }
774
+ .IncodeDropdownComposedSearchWrapper {
775
+ border-bottom-style: var(--tw-border-style);
776
+ border-bottom-width: 1px;
777
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
778
+ padding: var(--spacing-8, var(--spacing-8, 8px));
779
+ flex-shrink: 0;
780
+ }
781
+ .IncodeDropdownComposedSearchInner {
782
+ position: relative;
783
+ }
784
+ .IncodeDropdownComposedSearchInput {
785
+ box-sizing: border-box;
786
+ border-style: var(--tw-border-style);
787
+ border-width: var(--border-width-none, var(--border-none));
788
+ --tw-border-style: none;
789
+ width: 100%;
790
+ padding-block: var(--spacing-8, var(--spacing-8, 8px));
791
+ padding-right: var(--spacing-40, var(--spacing-40, 40px));
792
+ padding-left: var(--spacing-12, var(--spacing-12, 12px));
793
+ font-family: var(--primitive-typography-family-dm-sans);
794
+ font-size: var(--typography-body-lg-size);
795
+ font-weight: var(--typography-body-lg-weight);
796
+ line-height: var(--typography-body-lg-line-height);
797
+ letter-spacing: var(--typography-body-lg-letter-spacing);
798
+ font-size: var(--text-lg, 1.125rem);
799
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
800
+ --tw-font-weight: var(--font-weight-normal, 400);
801
+ font-weight: var(--font-weight-normal, 400);
802
+ --tw-outline-style: none;
803
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
804
+ font-family: var(--dropdown-text-input-font-family);
805
+ background-color: #0000;
806
+ border-style: none;
807
+ outline-style: none;
808
+ }
809
+ .IncodeDropdownComposedSearchInput::placeholder {
810
+ color: var(--color-dropdown-text-input-placeholder, var(--dropdown-text-input-placeholder));
811
+ }
812
+ .IncodeDropdownComposedSearchIcon {
813
+ pointer-events: none;
814
+ top: 50%;
815
+ right: var(--spacing-16, var(--spacing-16, 16px));
816
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
817
+ translate: var(--tw-translate-x) var(--tw-translate-y);
818
+ align-items: center;
819
+ display: flex;
820
+ position: absolute;
821
+ }
822
+ .IncodeDropdownComposedOptionsScroll {
823
+ min-height: var(--spacing-0, var(--spacing-none, 0px));
824
+ flex: 1;
825
+ overflow-y: auto;
826
+ }
827
+ .IncodeDropdownComposedOption {
828
+ cursor: pointer;
829
+ padding-inline: var(--spacing-16, var(--spacing-16, 16px));
830
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
831
+ font-size: var(--text-16, var(--primitive-typography-size-16));
832
+ --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
833
+ font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
834
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
835
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
836
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
837
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
838
+ }
839
+ .IncodeDropdownComposedOption[aria-selected="true"] {
840
+ background-color: var(--surface-neutral-100, var(--color-surface-neutral-100));
841
+ }
842
+ .IncodeDropdownComposedOption:hover, .IncodeDropdownComposedOption[data-highlighted="true"] {
843
+ background-color: var(--surface-neutral-200, var(--color-surface-neutral-200));
844
+ }
845
+ .IncodeDropdownComposedNoResults {
846
+ padding: var(--spacing-16, var(--spacing-16, 16px));
847
+ text-align: center;
848
+ font-size: var(--text-16, var(--primitive-typography-size-16));
849
+ --tw-font-weight: var(--font-weight-normal, 400);
850
+ font-weight: var(--font-weight-normal, 400);
851
+ color: var(--color-dropdown-text-input-placeholder, var(--dropdown-text-input-placeholder));
852
+ }
853
+ .IncodeDropdownComposedErrorWrapper, .IncodeDropdownComposedHelperWrapper {
854
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
855
+ align-items: center;
856
+ display: flex;
857
+ }
858
+ .IncodeDropdownComposedIconWrapper {
859
+ margin-right: var(--spacing-8, var(--spacing-8, 8px));
860
+ display: inline-block;
861
+ }
862
+ .IncodeDropdownComposedError {
863
+ margin: var(--spacing-0, var(--spacing-none, 0px));
864
+ font-size: var(--text-14, var(--primitive-typography-size-14));
865
+ --tw-font-weight: var(--font-weight-normal, 400);
866
+ font-weight: var(--font-weight-normal, 400);
867
+ color: var(--color-dropdown-text-helper-negative, var(--dropdown-text-helper-negative));
868
+ font-family: inherit;
869
+ display: inline-block;
870
+ }
871
+ .IncodeDropdownComposedHelper {
872
+ margin: var(--spacing-0, var(--spacing-none, 0px));
873
+ font-size: var(--text-14, var(--primitive-typography-size-14));
874
+ --tw-font-weight: var(--font-weight-normal, 400);
875
+ font-weight: var(--font-weight-normal, 400);
876
+ color: var(--color-dropdown-text-helper-default, var(--dropdown-text-helper-default));
877
+ font-family: inherit;
878
+ display: inline-block;
879
+ }
531
880
  .IncodeOtpInput {
532
881
  flex-direction: column;
533
882
  flex: 1;
@@ -1318,6 +1667,66 @@
1318
1667
  height: 840px;
1319
1668
  }
1320
1669
  }
1670
+ @media (min-width: 40rem) {
1671
+ .IncodePageContainer .IncodePageInner {
1672
+ max-width: 40rem;
1673
+ }
1674
+ }
1675
+ @media (min-width: 48rem) {
1676
+ .IncodePageContainer .IncodePageInner {
1677
+ max-width: 48rem;
1678
+ }
1679
+ }
1680
+ @media (min-width: 64rem) {
1681
+ .IncodePageContainer .IncodePageInner {
1682
+ max-width: 64rem;
1683
+ }
1684
+ }
1685
+ @media (min-width: 80rem) {
1686
+ .IncodePageContainer .IncodePageInner {
1687
+ max-width: 80rem;
1688
+ }
1689
+ }
1690
+ @media (min-width: 96rem) {
1691
+ .IncodePageContainer .IncodePageInner {
1692
+ max-width: 96rem;
1693
+ }
1694
+ }
1695
+ @media (min-width: 48rem) {
1696
+ .IncodePageContainer .IncodePageInner {
1697
+ height: 840px;
1698
+ }
1699
+ }
1700
+ @media (min-width: 40rem) {
1701
+ .IncodePageContainer .IncodePageInner {
1702
+ max-width: 40rem;
1703
+ }
1704
+ }
1705
+ @media (min-width: 48rem) {
1706
+ .IncodePageContainer .IncodePageInner {
1707
+ max-width: 48rem;
1708
+ }
1709
+ }
1710
+ @media (min-width: 64rem) {
1711
+ .IncodePageContainer .IncodePageInner {
1712
+ max-width: 64rem;
1713
+ }
1714
+ }
1715
+ @media (min-width: 80rem) {
1716
+ .IncodePageContainer .IncodePageInner {
1717
+ max-width: 80rem;
1718
+ }
1719
+ }
1720
+ @media (min-width: 96rem) {
1721
+ .IncodePageContainer .IncodePageInner {
1722
+ max-width: 96rem;
1723
+ }
1724
+ }
1725
+ @media (min-width: 48rem) {
1726
+ .IncodePageContainer .IncodePageInner {
1727
+ height: 840px;
1728
+ }
1729
+ }
1321
1730
  .IncodePageContainer .IncodePageInner {
1322
1731
  width: 100%;
1323
1732
  }
@@ -2011,6 +2420,10 @@
2011
2420
  syntax: "*";
2012
2421
  inherits: false
2013
2422
  }
2423
+ @property --tw-leading {
2424
+ syntax: "*";
2425
+ inherits: false
2426
+ }
2014
2427
  @property --tw-translate-x {
2015
2428
  syntax: "*";
2016
2429
  inherits: false;
@@ -2026,10 +2439,6 @@
2026
2439
  inherits: false;
2027
2440
  initial-value: 0;
2028
2441
  }
2029
- @property --tw-leading {
2030
- syntax: "*";
2031
- inherits: false
2032
- }
2033
2442
  @property --tw-tracking {
2034
2443
  syntax: "*";
2035
2444
  inherits: false