@incodetech/web 0.0.0-dev-20260223-3222aae → 0.0.0-dev-20260223-4e681c2

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
@@ -642,6 +642,241 @@
642
642
  font-family: inherit;
643
643
  display: inline-block;
644
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
+ }
645
880
  .IncodeOtpInput {
646
881
  flex-direction: column;
647
882
  flex: 1;
@@ -1462,6 +1697,36 @@
1462
1697
  height: 840px;
1463
1698
  }
1464
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
+ }
1465
1730
  .IncodePageContainer .IncodePageInner {
1466
1731
  width: 100%;
1467
1732
  }