@vialiq/flux-ui 0.16.0 → 0.18.0

package/components/_index.scss

@@ -9,6 +9,7 @@
 @forward 'badge';
 
 @forward 'alert';
+@forward 'label';
 @forward 'modal';
 
 @forward 'chip';

package/components/_input.scss

@@ -60,6 +60,13 @@
     &::placeholder {
       color: var(--vi-input-placeholder-color, #{tokens.$text-secondary});
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: var(--vi-input-bg-disabled, #{tokens.$layer-disabled});
+      color: var(--vi-input-text-disabled, #{tokens.$text-disabled});
+      border-color: var(--vi-input-border-disabled, #{tokens.$border-02});
+    }
   }
 
   // -------------------------------------------------------------------------

package/components/_label.scss

@@ -0,0 +1,53 @@
+@use '../styles/variables' as tokens;
+
+@layer components {
+  .vi-label {
+    // --vi-label-font-size: var(--vi-font-size-sm)
+    --vi-label-font-size: var(--vi-font-size-sm, #{tokens.$font-size-sm});
+    // --vi-label-font-weight: var(--vi-font-weight-medium)
+    --vi-label-font-weight: var(--vi-font-weight-medium, #{tokens.$font-weight-medium});
+    // --vi-label-color: var(--vi-text-primary)
+    --vi-label-color: var(--vi-text-primary, #{tokens.$text-primary});
+    // --vi-label-color-disabled: var(--vi-text-disabled)
+    --vi-label-color-disabled: var(--vi-text-disabled, #{tokens.$text-disabled});
+    // --vi-label-required-color: var(--vi-color-error)
+    --vi-label-required-color: var(--vi-color-error, #{tokens.$color-error});
+    // --vi-label-optional-color: var(--vi-text-helper)
+    --vi-label-optional-color: var(--vi-text-helper, #{tokens.$text-helper});
+    // --vi-label-gap: 4px
+    --vi-label-gap: 4px;
+  }
+
+  .vi-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vi-label-gap);
+    font-size: var(--vi-label-font-size);
+    font-weight: var(--vi-label-font-weight);
+    color: var(--vi-label-color);
+    line-height: 1.5;
+    margin: 0;
+
+    &.size-sm {
+      --vi-label-font-size: var(--vi-font-size-xs, #{tokens.$font-size-xs});
+    }
+
+    &.size-lg {
+      --vi-label-font-size: var(--vi-font-size-base, #{tokens.$font-size-base});
+    }
+
+    &.is-disabled {
+      color: var(--vi-label-color-disabled);
+      cursor: default;
+    }
+  }
+
+  .vi-label-required {
+    color: var(--vi-label-required-color);
+  }
+
+  .vi-label-optional {
+    color: var(--vi-label-optional-color);
+    font-weight: normal;
+  }
+}

package/flux-ui.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YF6Je,8FE5Jf,UFiKa,+BEhKb,YF6KkB,kCE5KlB,MFqFe,oCEpFf,iBFmFe,oCElFf,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YF8Ge,wEE7Gf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IHkHW,0BG/Gb,QACE,IH+GW,2BG5Gb,QACE,IH4GW,2BGzGb,QACE,IHyGW,2BGtGb,QACE,IHsGW,2BGnGb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBC3LJ,+PACE,0GACA,mCACA,kCACA,SAQF,kBAIE,KACE,sIACA,iEACA,wEACA,yEACA,gFACA,mEACA,mCACA,kCAKF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,GAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,EAEE,iEACA,wEACA,yEACA,gFACA,mEAMF,MAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,MAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,SAEE,gDAGF,KAEE,kBAKF,WAEE,+DACA,wEACA,yEACA,kFACA,iEAKF,cAIE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAGF,IAEE,gHACA,4DACA,wEACA,gEACA,4BAKF,WAEE,+DACA,uEACA,2EACA,gFACA,iEACA,kBACA,UAKF,GAEE,gEACA,2EACA,yEACA,mFACA,oEAGF,GAEE,+DACA,wEACA,yEACA,kEAUJ,iBAIE,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,mEACA,6EACA,2EACA,sFACA,sEAKF,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,eAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,eAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,YAEE,+DACA,wEACA,2EACA,gFACA,mEAGF,YAEE,iEACA,wEACA,yEACA,gFACA,mEAGF,YAEE,+DACA,wEACA,yEACA,gFACA,iEAKF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAGF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,YAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,aAEE,gEACA,2EACA,yEACA,mFACA,yBACA,kEAGF,SACE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAKF,uDACA,wDACA,gEACA,0DACA,kCACA,kBACE,gBACA,mBACA,uBAEF,mCAIA,0EACA,wEACA,wEACA,yEACA,2ECjYF,iBAMI,MACE,OLyUQ,0BKtUV,OACE,YLqUQ,0BKpUR,aLoUQ,0BKjUV,OACE,WLgUQ,0BK/TR,cL+TQ,0BK5TV,OACE,WL2TQ,0BKxTV,OACE,aLuTQ,0BKpTV,OACE,cLmTQ,0BKhTV,OACE,YL+SQ,0BK1UV,MACE,OLyUQ,2BKtUV,OACE,YLqUQ,2BKpUR,aLoUQ,2BKjUV,OACE,WLgUQ,2BK/TR,cL+TQ,2BK5TV,OACE,WL2TQ,2BKxTV,OACE,aLuTQ,2BKpTV,OACE,cLmTQ,2BKhTV,OACE,YL+SQ,2BK1UV,MACE,OLyUQ,2BKtUV,OACE,YLqUQ,2BKpUR,aLoUQ,2BKjUV,OACE,WLgUQ,2BK/TR,cL+TQ,2BK5TV,OACE,WL2TQ,2BKxTV,OACE,aLuTQ,2BKpTV,OACE,cLmTQ,2BKhTV,OACE,YL+SQ,2BK1UV,MACE,OLyUQ,2BKtUV,OACE,YLqUQ,2BKpUR,aLoUQ,2BKjUV,OACE,WLgUQ,2BK/TR,cL+TQ,2BK5TV,OACE,WL2TQ,2BKxTV,OACE,aLuTQ,2BKpTV,OACE,cLmTQ,2BKhTV,OACE,YL+SQ,2BK1UV,MACE,OLyUQ,2BKtUV,OACE,YLqUQ,2BKpUR,aLoUQ,2BKjUV,OACE,WLgUQ,2BK/TR,cL+TQ,2BK5TV,OACE,WL2TQ,2BKxTV,OACE,aLuTQ,2BKpTV,OACE,cLmTQ,2BKhTV,OACE,YL+SQ,2BK1UV,OACE,OLyUQ,4BKtUV,QACE,YLqUQ,4BKpUR,aLoUQ,4BKjUV,QACE,WLgUQ,4BK/TR,cL+TQ,4BK5TV,QACE,WL2TQ,4BKxTV,QACE,aLuTQ,4BKpTV,QACE,cLmTQ,4BKhTV,QACE,YL+SQ,4BK1UV,OACE,OLyUQ,4BKtUV,QACE,YLqUQ,4BKpUR,aLoUQ,4BKjUV,QACE,WLgUQ,4BK/TR,cL+TQ,4BK5TV,QACE,WL2TQ,4BKxTV,QACE,aLuTQ,4BKpTV,QACE,cLmTQ,4BKhTV,QACE,YL+SQ,4BKtSV,MACE,QLqSQ,0BKlSV,OACE,aLiSQ,0BKhSR,cLgSQ,0BK7RV,OACE,YL4RQ,0BK3RR,eL2RQ,0BKxRV,OACE,YLuRQ,0BKpRV,OACE,cLmRQ,0BKhRV,OACE,eL+QQ,0BK5QV,OACE,aL2QQ,0BKtSV,MACE,QLqSQ,2BKlSV,OACE,aLiSQ,2BKhSR,cLgSQ,2BK7RV,OACE,YL4RQ,2BK3RR,eL2RQ,2BKxRV,OACE,YLuRQ,2BKpRV,OACE,cLmRQ,2BKhRV,OACE,eL+QQ,2BK5QV,OACE,aL2QQ,2BKtSV,MACE,QLqSQ,2BKlSV,OACE,aLiSQ,2BKhSR,cLgSQ,2BK7RV,OACE,YL4RQ,2BK3RR,eL2RQ,2BKxRV,OACE,YLuRQ,2BKpRV,OACE,cLmRQ,2BKhRV,OACE,eL+QQ,2BK5QV,OACE,aL2QQ,2BKtSV,MACE,QLqSQ,2BKlSV,OACE,aLiSQ,2BKhSR,cLgSQ,2BK7RV,OACE,YL4RQ,2BK3RR,eL2RQ,2BKxRV,OACE,YLuRQ,2BKpRV,OACE,cLmRQ,2BKhRV,OACE,eL+QQ,2BK5QV,OACE,aL2QQ,2BKtSV,MACE,QLqSQ,2BKlSV,OACE,aLiSQ,2BKhSR,cLgSQ,2BK7RV,OACE,YL4RQ,2BK3RR,eL2RQ,2BKxRV,OACE,YLuRQ,2BKpRV,OACE,cLmRQ,2BKhRV,OACE,eL+QQ,2BK5QV,OACE,aL2QQ,2BKtSV,OACE,QLqSQ,4BKlSV,QACE,aLiSQ,4BKhSR,cLgSQ,4BK7RV,QACE,YL4RQ,4BK3RR,eL2RQ,4BKxRV,QACE,YLuRQ,4BKpRV,QACE,cLmRQ,4BKhRV,QACE,eL+QQ,4BK5QV,QACE,aL2QQ,4BKtSV,OACE,QLqSQ,4BKlSV,QACE,aLiSQ,4BKhSR,cLgSQ,4BK7RV,QACE,YL4RQ,4BK3RR,eL2RQ,4BKxRV,QACE,YLuRQ,4BKpRV,QACE,cLmRQ,4BKhRV,QACE,eL+QQ,4BK5QV,QACE,aL2QQ,4BKnQZ,SACE,UL8Ga,6BK3Gf,SACE,UL2Ga,6BKxGf,WACE,ULwGa,+BKrGf,SACE,ULqGa,6BKlGf,SACE,ULkGa,6BK/Ff,UACE,UL+Fa,8BK5Ff,UACE,UL4Fa,8BKzFf,YACE,YL0FmB,iCKvFrB,aACE,YLuFmB,kCKpFrB,aACE,YLoFmB,kCKjFrB,eACE,YLiFmB,oCK9ErB,WACE,YL8EmB,gCK3ErB,eACE,YL4EkB,iCKzEpB,gBACE,YLyEkB,kCKtEpB,iBACE,YLsEkB,oCKnEpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,ML4KM,iCKzKR,YACE,iBLwKM,iCKrKR,gBACE,aLoKM,iCK7KR,gBACE,ML4KM,mCKzKR,cACE,iBLwKM,mCKrKR,kBACE,aLoKM,mCK7KR,cACE,ML4KM,iCKzKR,YACE,iBLwKM,iCKrKR,gBACE,aLoKM,iCK7KR,cACE,ML4KM,iCKzKR,YACE,iBLwKM,iCKrKR,gBACE,aLoKM,iCK7KR,YACE,ML4KM,+BKzKR,UACE,iBLwKM,+BKrKR,cACE,aLoKM,+BK7KR,WACE,ML4KM,8BKzKR,SACE,iBLwKM,8BKrKR,aACE,aLoKM,8BK5JN,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,cACE,MLiJO,iCK9IT,YACE,iBL6IO,iCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,gBACE,MLiJO,mCK9IT,cACE,iBL6IO,mCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,eACE,MLiJO,kCK9IT,aACE,iBL6IO,kCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKlJT,iBACE,MLiJO,oCK9IT,eACE,iBL6IO,oCKtIX,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK5Db,kBACE,ML2DW,kCKxDb,gBACE,iBLuDW,kCKpDb,oBACE,aLmDW,kCK1Cb,WACE,WLgJO,qDKjJT,WACE,WLgJO,uDKjJT,WACE,WLgJO,yDKjJT,WACE,WLgJO,yDKxIX,cACE,gBAGF,YACE,cLUe,gCKPjB,YACE,cLOe,gCKJjB,YACE,cLIe,gCKDjB,YACE,cLCe,iCKEjB,cACE,qBAOF,aACE,aLPiB,iCKQjB,mBAGF,aACE,aLXiB,iCKYjB,mBAGF,cACE,aLfiB,kCKgBjB,mBAQA,QACE,QL2HQ,GK5HV,QACE,QL2HQ,KK5HV,QACE,QL2HQ,EK5HV,YACE,QL2HQ,KK5HV,UACE,QL2HQ,KK5HV,SACE,QL2HQ,KK5HV,YACE,QL2HQ,KK5HV,SACE,QL2HQ,KK5HV,WACE,QL2HQ,KK5HV,WACE,QL2HQ,KKnHZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,ILzDQ,0BK4DV,UACE,WL7DQ,0BKgEV,UACE,QLjEQ,0BKwDV,QACE,ILzDQ,2BK4DV,UACE,WL7DQ,2BKgEV,UACE,QLjEQ,2BKwDV,QACE,ILzDQ,2BK4DV,UACE,WL7DQ,2BKgEV,UACE,QLjEQ,2BKwDV,QACE,ILzDQ,2BK4DV,UACE,WL7DQ,2BKgEV,UACE,QLjEQ,2BKwDV,QACE,ILzDQ,2BK4DV,UACE,WL7DQ,2BKgEV,UACE,QLjEQ,2BKwDV,SACE,ILzDQ,4BK4DV,WACE,WL7DQ,4BKgEV,WACE,QLjEQ,4BKwDV,SACE,ILzDQ,4BK4DV,WACE,WL7DQ,4BKgEV,WACE,QLjEQ,4BKyEZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}
+{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YF6Je,8FE5Jf,UFiKa,+BEhKb,YF6KkB,kCE5KlB,MFqFe,oCEpFf,iBFmFe,oCElFf,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YF8Ge,wEE7Gf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IHkHW,0BG/Gb,QACE,IH+GW,2BG5Gb,QACE,IH4GW,2BGzGb,QACE,IHyGW,2BGtGb,QACE,IHsGW,2BGnGb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBC3LJ,+PACE,0GACA,mCACA,kCACA,SAQF,kBAIE,KACE,sIACA,iEACA,wEACA,yEACA,gFACA,mEACA,mCACA,kCAKF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,GAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,EAEE,iEACA,wEACA,yEACA,gFACA,mEAMF,MAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,MAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,SAEE,gDAGF,KAEE,kBAKF,WAEE,+DACA,wEACA,yEACA,kFACA,iEAKF,cAIE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAGF,IAEE,gHACA,4DACA,wEACA,gEACA,4BAKF,WAEE,+DACA,uEACA,2EACA,gFACA,iEACA,kBACA,UAKF,GAEE,gEACA,2EACA,yEACA,mFACA,oEAGF,GAEE,+DACA,wEACA,yEACA,kEAUJ,iBAIE,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,mEACA,6EACA,2EACA,sFACA,sEAKF,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,eAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,eAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,YAEE,+DACA,wEACA,2EACA,gFACA,mEAGF,YAEE,iEACA,wEACA,yEACA,gFACA,mEAGF,YAEE,+DACA,wEACA,yEACA,gFACA,iEAKF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAGF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,YAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,aAEE,gEACA,2EACA,yEACA,mFACA,yBACA,kEAGF,SACE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAKF,uDACA,wDACA,gEACA,0DACA,kCACA,kBACE,gBACA,mBACA,uBAEF,mCAIA,0EACA,wEACA,wEACA,yEACA,2ECjYF,iBAMI,MACE,OL0UQ,0BKvUV,OACE,YLsUQ,0BKrUR,aLqUQ,0BKlUV,OACE,WLiUQ,0BKhUR,cLgUQ,0BK7TV,OACE,WL4TQ,0BKzTV,OACE,aLwTQ,0BKrTV,OACE,cLoTQ,0BKjTV,OACE,YLgTQ,0BK3UV,MACE,OL0UQ,2BKvUV,OACE,YLsUQ,2BKrUR,aLqUQ,2BKlUV,OACE,WLiUQ,2BKhUR,cLgUQ,2BK7TV,OACE,WL4TQ,2BKzTV,OACE,aLwTQ,2BKrTV,OACE,cLoTQ,2BKjTV,OACE,YLgTQ,2BK3UV,MACE,OL0UQ,2BKvUV,OACE,YLsUQ,2BKrUR,aLqUQ,2BKlUV,OACE,WLiUQ,2BKhUR,cLgUQ,2BK7TV,OACE,WL4TQ,2BKzTV,OACE,aLwTQ,2BKrTV,OACE,cLoTQ,2BKjTV,OACE,YLgTQ,2BK3UV,MACE,OL0UQ,2BKvUV,OACE,YLsUQ,2BKrUR,aLqUQ,2BKlUV,OACE,WLiUQ,2BKhUR,cLgUQ,2BK7TV,OACE,WL4TQ,2BKzTV,OACE,aLwTQ,2BKrTV,OACE,cLoTQ,2BKjTV,OACE,YLgTQ,2BK3UV,MACE,OL0UQ,2BKvUV,OACE,YLsUQ,2BKrUR,aLqUQ,2BKlUV,OACE,WLiUQ,2BKhUR,cLgUQ,2BK7TV,OACE,WL4TQ,2BKzTV,OACE,aLwTQ,2BKrTV,OACE,cLoTQ,2BKjTV,OACE,YLgTQ,2BK3UV,OACE,OL0UQ,4BKvUV,QACE,YLsUQ,4BKrUR,aLqUQ,4BKlUV,QACE,WLiUQ,4BKhUR,cLgUQ,4BK7TV,QACE,WL4TQ,4BKzTV,QACE,aLwTQ,4BKrTV,QACE,cLoTQ,4BKjTV,QACE,YLgTQ,4BK3UV,OACE,OL0UQ,4BKvUV,QACE,YLsUQ,4BKrUR,aLqUQ,4BKlUV,QACE,WLiUQ,4BKhUR,cLgUQ,4BK7TV,QACE,WL4TQ,4BKzTV,QACE,aLwTQ,4BKrTV,QACE,cLoTQ,4BKjTV,QACE,YLgTQ,4BKvSV,MACE,QLsSQ,0BKnSV,OACE,aLkSQ,0BKjSR,cLiSQ,0BK9RV,OACE,YL6RQ,0BK5RR,eL4RQ,0BKzRV,OACE,YLwRQ,0BKrRV,OACE,cLoRQ,0BKjRV,OACE,eLgRQ,0BK7QV,OACE,aL4QQ,0BKvSV,MACE,QLsSQ,2BKnSV,OACE,aLkSQ,2BKjSR,cLiSQ,2BK9RV,OACE,YL6RQ,2BK5RR,eL4RQ,2BKzRV,OACE,YLwRQ,2BKrRV,OACE,cLoRQ,2BKjRV,OACE,eLgRQ,2BK7QV,OACE,aL4QQ,2BKvSV,MACE,QLsSQ,2BKnSV,OACE,aLkSQ,2BKjSR,cLiSQ,2BK9RV,OACE,YL6RQ,2BK5RR,eL4RQ,2BKzRV,OACE,YLwRQ,2BKrRV,OACE,cLoRQ,2BKjRV,OACE,eLgRQ,2BK7QV,OACE,aL4QQ,2BKvSV,MACE,QLsSQ,2BKnSV,OACE,aLkSQ,2BKjSR,cLiSQ,2BK9RV,OACE,YL6RQ,2BK5RR,eL4RQ,2BKzRV,OACE,YLwRQ,2BKrRV,OACE,cLoRQ,2BKjRV,OACE,eLgRQ,2BK7QV,OACE,aL4QQ,2BKvSV,MACE,QLsSQ,2BKnSV,OACE,aLkSQ,2BKjSR,cLiSQ,2BK9RV,OACE,YL6RQ,2BK5RR,eL4RQ,2BKzRV,OACE,YLwRQ,2BKrRV,OACE,cLoRQ,2BKjRV,OACE,eLgRQ,2BK7QV,OACE,aL4QQ,2BKvSV,OACE,QLsSQ,4BKnSV,QACE,aLkSQ,4BKjSR,cLiSQ,4BK9RV,QACE,YL6RQ,4BK5RR,eL4RQ,4BKzRV,QACE,YLwRQ,4BKrRV,QACE,cLoRQ,4BKjRV,QACE,eLgRQ,4BK7QV,QACE,aL4QQ,4BKvSV,OACE,QLsSQ,4BKnSV,QACE,aLkSQ,4BKjSR,cLiSQ,4BK9RV,QACE,YL6RQ,4BK5RR,eL4RQ,4BKzRV,QACE,YLwRQ,4BKrRV,QACE,cLoRQ,4BKjRV,QACE,eLgRQ,4BK7QV,QACE,aL4QQ,4BKpQZ,SACE,UL8Ga,6BK3Gf,SACE,UL2Ga,6BKxGf,WACE,ULwGa,+BKrGf,SACE,ULqGa,6BKlGf,SACE,ULkGa,6BK/Ff,UACE,UL+Fa,8BK5Ff,UACE,UL4Fa,8BKzFf,YACE,YL0FmB,iCKvFrB,aACE,YLuFmB,kCKpFrB,aACE,YLoFmB,kCKjFrB,eACE,YLiFmB,oCK9ErB,WACE,YL8EmB,gCK3ErB,eACE,YL4EkB,iCKzEpB,gBACE,YLyEkB,kCKtEpB,iBACE,YLsEkB,oCKnEpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,ML6KM,iCK1KR,YACE,iBLyKM,iCKtKR,gBACE,aLqKM,iCK9KR,gBACE,ML6KM,mCK1KR,cACE,iBLyKM,mCKtKR,kBACE,aLqKM,mCK9KR,cACE,ML6KM,iCK1KR,YACE,iBLyKM,iCKtKR,gBACE,aLqKM,iCK9KR,cACE,ML6KM,iCK1KR,YACE,iBLyKM,iCKtKR,gBACE,aLqKM,iCK9KR,YACE,ML6KM,+BK1KR,UACE,iBLyKM,+BKtKR,cACE,aLqKM,+BK9KR,WACE,ML6KM,8BK1KR,SACE,iBLyKM,8BKtKR,aACE,aLqKM,8BK7JN,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,cACE,MLkJO,iCK/IT,YACE,iBL8IO,iCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,gBACE,MLkJO,mCK/IT,cACE,iBL8IO,mCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,eACE,MLkJO,kCK/IT,aACE,iBL8IO,kCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKnJT,iBACE,MLkJO,oCK/IT,eACE,iBL8IO,oCKvIX,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK7Db,kBACE,ML4DW,kCKzDb,gBACE,iBLwDW,kCKrDb,oBACE,aLoDW,kCK3Cb,WACE,WLiJO,qDKlJT,WACE,WLiJO,uDKlJT,WACE,WLiJO,yDKlJT,WACE,WLiJO,yDKzIX,cACE,gBAGF,YACE,cLUe,gCKPjB,YACE,cLOe,gCKJjB,YACE,cLIe,gCKDjB,YACE,cLCe,iCKEjB,cACE,qBAOF,aACE,aLNiB,iCKOjB,mBAGF,aACE,aLViB,iCKWjB,mBAGF,cACE,aLdiB,kCKejB,mBAQA,QACE,QL4HQ,GK7HV,QACE,QL4HQ,KK7HV,QACE,QL4HQ,EK7HV,YACE,QL4HQ,KK7HV,UACE,QL4HQ,KK7HV,SACE,QL4HQ,KK7HV,YACE,QL4HQ,KK7HV,SACE,QL4HQ,KK7HV,WACE,QL4HQ,KK7HV,WACE,QL4HQ,KKpHZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,ILxDQ,0BK2DV,UACE,WL5DQ,0BK+DV,UACE,QLhEQ,0BKuDV,QACE,ILxDQ,2BK2DV,UACE,WL5DQ,2BK+DV,UACE,QLhEQ,2BKuDV,QACE,ILxDQ,2BK2DV,UACE,WL5DQ,2BK+DV,UACE,QLhEQ,2BKuDV,QACE,ILxDQ,2BK2DV,UACE,WL5DQ,2BK+DV,UACE,QLhEQ,2BKuDV,QACE,ILxDQ,2BK2DV,UACE,WL5DQ,2BK+DV,UACE,QLhEQ,2BKuDV,SACE,ILxDQ,4BK2DV,WACE,WL5DQ,4BK+DV,WACE,QLhEQ,4BKuDV,SACE,ILxDQ,4BK2DV,WACE,WL5DQ,4BK+DV,WACE,QLhEQ,4BKwEZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/flux-ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/styles/_flatpickr-core.scss

@@ -0,0 +1,796 @@
+@use 'variables' as tokens;
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  background: #{tokens.$color-background};
+  -webkit-box-shadow: var(--vi-date-picker-calendar-shadow, #{tokens.$shadow-lg});
+          box-shadow: var(--vi-date-picker-calendar-shadow, #{tokens.$shadow-lg});
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #{tokens.$color-border};
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.arrowRight:before,
+.flatpickr-calendar.rightMost:after,
+.flatpickr-calendar.arrowRight:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar.arrowCenter:before,
+.flatpickr-calendar.arrowCenter:after {
+  left: 50%;
+  right: 50%;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #{tokens.$color-border};
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #{tokens.$color-background};
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #{tokens.$color-border};
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #{tokens.$color-background};
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  background: transparent;
+  color: #{tokens.$text-primary};
+  fill: #{tokens.$text-primary};
+  height: 34px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  height: 34px;
+  padding: 10px;
+  z-index: 3;
+  color: #{tokens.$text-primary};
+  fill: #{tokens.$text-primary};
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  display: none;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #{tokens.$text-secondary};
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #{tokens.$color-error};
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper input::-webkit-outer-spin-button,
+.numInputWrapper input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid #{tokens.$border-02};
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: #{tokens.$layer-hover-01};
+}
+.numInputWrapper span:active {
+  background: #{tokens.$layer-hover-02};
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #{tokens.$text-secondary};
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #{tokens.$text-secondary};
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: #{tokens.$text-secondary};
+}
+.numInputWrapper:hover {
+  background: #{tokens.$layer-hover-01};
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 7.48px 0 0 0;
+  line-height: 1;
+  height: 34px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: #{tokens.$layer-hover-01};
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #{tokens.$text-primary};
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: #{tokens.$text-primary};
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: #{tokens.$text-secondary};
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  appearance: menulist;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  height: auto;
+  line-height: inherit;
+  margin: -1px 0 0 0;
+  outline: none;
+  padding: 0 0 0 0.5ch;
+  position: relative;
+  vertical-align: initial;
+  -webkit-box-sizing: border-box;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  width: auto;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
+.flatpickr-current-month .flatpickr-monthDropdown-months:active {
+  outline: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: #{tokens.$layer-hover-01};
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: transparent;
+  outline: none;
+  padding: 0;
+}
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: transparent;
+  color: #{tokens.$text-secondary};
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 #{tokens.$color-border};
+          box-shadow: -1px 0 0 #{tokens.$color-border};
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #{tokens.$text-primary};
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #{tokens.$color-border};
+  border-color: #{tokens.$color-border};
+}
+.flatpickr-day.today {
+  border-color: #{tokens.$text-secondary};
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #{tokens.$text-secondary};
+  background: #{tokens.$text-secondary};
+  color: #{tokens.$color-background};
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #{tokens.$color-primary};
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #{tokens.$color-background};
+  border-color: #{tokens.$color-primary};
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: -10px 0 0 #{tokens.$color-primary};
+          box-shadow: -10px 0 0 #{tokens.$color-primary};
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #{tokens.$layer-03}, 5px 0 0 #{tokens.$layer-03};
+          box-shadow: -5px 0 0 #{tokens.$layer-03}, 5px 0 0 #{tokens.$layer-03};
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: #{tokens.$text-disabled};
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  cursor: not-allowed;
+  color: #{tokens.$layer-disabled};
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #{tokens.$color-primary}, 5px 0 0 #{tokens.$color-primary};
+          box-shadow: -5px 0 0 #{tokens.$color-primary}, 5px 0 0 #{tokens.$color-primary};
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  -webkit-box-shadow: 1px 0 0 #{tokens.$color-border};
+          box-shadow: 1px 0 0 #{tokens.$color-border};
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: #{tokens.$text-disabled};
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #{tokens.$text-primary};
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #{tokens.$text-primary};
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: #{tokens.$text-primary};
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  float: left;
+  line-height: inherit;
+  color: #{tokens.$text-primary};
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #{tokens.$layer-hover-01};
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}

package/styles/_flatpickr.scss

@@ -0,0 +1,382 @@
+@use './variables' as tokens;
+@use './flatpickr-core';
+
+/**
+ * Global Flatpickr Theme overrides using flux-ui tokens.
+ * This styles both popup calendars (appended to body) and inline calendars
+ * (when injected into the Light DOM of vi-date-picker).
+ */
+
+.flatpickr-calendar {
+  background: var(--vi-date-picker-calendar-bg, tokens.$layer-01);
+  box-shadow: var(--vi-date-picker-calendar-shadow, tokens.$shadow-lg);
+  border-radius: var(--vi-border-radius-lg, tokens.$border-radius-lg);
+  border: 1px solid var(--vi-border-03, tokens.$border-03);
+  font-family: var(--vi-font-family-base, tokens.$font-family-base);
+  color: var(--vi-text-primary, tokens.$text-primary);
+  padding: var(--vi-spacing-xs, tokens.$spacing-xs) 0;
+  width: max-content;
+
+  &.arrowTop:before { border-bottom-color: var(--vi-border-03, tokens.$border-03); }
+  &.arrowTop:after { border-bottom-color: var(--vi-date-picker-calendar-bg, tokens.$layer-01); }
+  &.arrowBottom:before { border-top-color: var(--vi-border-03, tokens.$border-03); }
+  &.arrowBottom:after { border-top-color: var(--vi-date-picker-calendar-bg, tokens.$layer-01); }
+
+  .flatpickr-innerContainer {
+    justify-content: center;
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-month {
+    color: var(--vi-text-primary, tokens.$text-primary);
+    fill: var(--vi-text-primary, tokens.$text-primary);
+  }
+  
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    color: var(--vi-text-secondary, tokens.$text-secondary);
+    fill: var(--vi-text-secondary, tokens.$text-secondary);
+    padding: var(--vi-spacing-xs, tokens.$spacing-xs);
+    border-radius: var(--vi-border-radius-md, tokens.$border-radius-md);
+    transition: background-color 0.2s ease;
+    
+    &:hover {
+      background-color: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+      color: var(--vi-text-primary, tokens.$text-primary);
+      fill: var(--vi-text-primary, tokens.$text-primary);
+    }
+  }
+}
+
+.flatpickr-current-month {
+  font-size: var(--vi-font-size-base, tokens.$font-size-base);
+  font-weight: var(--vi-font-weight-semibold, tokens.$font-weight-semibold);
+  color: inherit;
+  
+  .flatpickr-monthDropdown-months {
+    background: var(--vi-date-picker-calendar-bg, tokens.$layer-01);
+    border-radius: var(--vi-border-radius-md, tokens.$border-radius-md);
+    padding: 4px;
+    
+    &:hover {
+      background-color: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+    }
+  }
+  
+  input.cur-year {
+    font-weight: inherit;
+    color: inherit;
+    
+    &:hover {
+      background-color: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+    }
+  }
+}
+
+.flatpickr-weekdays {
+  .flatpickr-weekdaycontainer {
+    display: grid;
+    grid-template-columns: repeat(7, var(--vi-date-picker-day-size, 32px));
+    justify-items: center;
+    width: max-content;
+  }
+  .flatpickr-weekday {
+    color: var(--vi-text-secondary, tokens.$text-secondary);
+    font-size: var(--vi-font-size-xs, tokens.$font-size-xs);
+    font-weight: var(--vi-font-weight-medium, tokens.$font-weight-medium);
+  }
+}
+
+.flatpickr-days {
+  width: auto;
+}
+
+.dayContainer {
+  display: grid;
+  grid-template-columns: repeat(7, var(--vi-date-picker-day-size, 32px));
+  justify-items: center;
+  width: max-content;
+  min-width: auto;
+  max-width: none;
+}
+
+.flatpickr-day {
+  color: var(--vi-text-primary, tokens.$text-primary);
+  border-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+  margin: 0;
+  width: var(--vi-date-picker-day-size, 32px);
+  max-width: var(--vi-date-picker-day-size, 32px);
+  height: var(--vi-date-picker-day-size, 32px);
+  line-height: var(--vi-date-picker-day-size, 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  
+  &:hover,
+  &:focus {
+    background: var(--vi-date-picker-day-hover-bg, tokens.$layer-hover-01);
+    border-color: var(--vi-date-picker-day-hover-bg, tokens.$layer-hover-01);
+  }
+  
+  &.today {
+    border-color: var(--vi-date-picker-day-today-border, tokens.$color-primary);
+    
+    &:hover,
+    &:focus {
+      border-color: var(--vi-date-picker-day-today-border, tokens.$color-primary);
+      background: var(--vi-date-picker-day-hover-bg, tokens.$layer-hover-01);
+    }
+  }
+  
+  &.selected,
+  &.startRange,
+  &.endRange,
+  &.selected.inRange,
+  &.startRange.inRange,
+  &.endRange.inRange,
+  &.selected:focus,
+  &.startRange:focus,
+  &.endRange:focus,
+  &.selected:hover,
+  &.startRange:hover,
+  &.endRange:hover,
+  &.selected.prevMonthDay,
+  &.startRange.prevMonthDay,
+  &.endRange.prevMonthDay,
+  &.selected.nextMonthDay,
+  &.startRange.nextMonthDay,
+  &.endRange.nextMonthDay {
+    background: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+    border-color: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+    color: var(--vi-date-picker-day-selected-color, tokens.$text-primary-inverse);
+  }
+  
+  &.inRange,
+  &.prevMonthDay.inRange,
+  &.nextMonthDay.inRange,
+  &.today.inRange,
+  &.prevMonthDay.today.inRange,
+  &.nextMonthDay.today.inRange,
+  &:hover.inRange,
+  &.prevMonthDay:hover.inRange,
+  &.nextMonthDay:hover.inRange {
+    background: var(--vi-color-blue-100, tokens.$color-blue-100);
+    border-color: var(--vi-color-blue-100, tokens.$color-blue-100);
+    border-radius: 0;
+    box-shadow: none;
+    color: var(--vi-text-primary, tokens.$text-primary);
+  }
+  
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover,
+  &.prevMonthDay,
+  &.nextMonthDay,
+  &.notAllowed,
+  &.notAllowed.prevMonthDay,
+  &.notAllowed.nextMonthDay {
+    color: var(--vi-text-disabled, tokens.$text-disabled);
+    background: transparent;
+    border-color: transparent;
+  }
+  
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover {
+    cursor: not-allowed;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Custom vi-month-year-plugin Styles
+// ----------------------------------------------------------------------------
+
+.vi-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px var(--vi-spacing-xs, tokens.$spacing-xs);
+  border-bottom: 1px solid var(--vi-border-02, tokens.$border-02);
+  margin-bottom: var(--vi-spacing-xs, tokens.$spacing-xs);
+}
+
+.vi-calendar-selectors {
+  display: flex;
+  gap: var(--vi-spacing-xs, tokens.$spacing-xs);
+  align-items: center;
+}
+
+.vi-calendar-month-toggle {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--vi-border-radius-md, tokens.$border-radius-md);
+  padding: 4px 8px;
+  font-family: var(--vi-font-family-base, tokens.$font-family-base);
+  font-weight: var(--vi-font-weight-semibold, tokens.$font-weight-semibold);
+  font-size: var(--vi-font-size-base, tokens.$font-size-base);
+  color: var(--vi-text-primary, tokens.$text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+  }
+  
+  &:focus-visible {
+    outline: none;
+    background: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+    box-shadow: 0 0 0 2px var(--vi-focus, tokens.$focus);
+  }
+}
+
+.vi-calendar-year-select {
+  /* Using standard CSS since it renders in Light DOM, allowing it to look okay even if vi-select isn't loaded */
+  min-width: 76px;
+  --vi-select-spacing-padding-inline: 4px;
+  --vi-select-option-padding-inline: 8px;
+  --vi-select-sizing-min-height: 32px;
+}
+
+.vi-calendar-nav {
+  display: flex;
+  gap: 2px;
+}
+
+.vi-calendar-nav-btn {
+  background: transparent;
+  border: none;
+  border-radius: var(--vi-border-radius-md, tokens.$border-radius-md);
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vi-text-secondary, tokens.$text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--vi-layer-hover-02, tokens.$layer-hover-02);
+    color: var(--vi-text-primary, tokens.$text-primary);
+  }
+}
+
+.vi-calendar-month-grid {
+  position: absolute;
+  top: 50px; /* Below the header */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--vi-date-picker-calendar-bg, tokens.$layer-01);
+  z-index: 10;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: min-content;
+  gap: 4px;
+  padding: var(--vi-spacing-xs, tokens.$spacing-xs);
+  border-radius: 0 0 var(--vi-border-radius-lg, tokens.$border-radius-lg) var(--vi-border-radius-lg, tokens.$border-radius-lg);
+
+  /* When Days grid is hidden (Month Mode), we don't need position absolute over it */
+  .vi-month-mode & {
+    position: relative;
+    top: 0;
+    margin-top: var(--vi-spacing-xs, tokens.$spacing-xs);
+  }
+}
+
+.vi-calendar-month-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+  padding: var(--vi-spacing-xs, tokens.$spacing-xs) 0;
+  font-family: var(--vi-font-family-base, tokens.$font-family-base);
+  font-size: var(--vi-font-size-sm, tokens.$font-size-sm);
+  color: var(--vi-text-primary, tokens.$text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--vi-layer-hover-01, tokens.$layer-hover-01);
+  }
+
+  &.active {
+    background: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+    color: var(--vi-text-primary-inverse, tokens.$text-primary-inverse);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Week Mode Styles
+// ----------------------------------------------------------------------------
+
+.flatpickr-day {
+  // When hovering over a week, it adds .inRange to all 7 days
+  &.inRange,
+  &.inRange:hover {
+    // Add pill-like rounded corners to the start and end of the week row
+    &:nth-child(7n + 1) {
+      border-top-left-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+      border-bottom-left-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+    }
+    &:nth-child(7n) {
+      border-top-right-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+      border-bottom-right-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+    }
+  }
+
+  // When a week is selected, it adds .week.selected to all 7 days
+  &.week.selected {
+    // Middle days look like .inRange (light blue, no radius)
+    background: var(--vi-color-blue-100, tokens.$color-blue-100);
+    border-color: var(--vi-color-blue-100, tokens.$color-blue-100);
+    color: var(--vi-text-primary, tokens.$text-primary);
+    border-radius: 0;
+    box-shadow: none;
+
+    // First day looks like .startRange (dark blue, left rounded)
+    &:nth-child(7n + 1) {
+      background: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+      border-color: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+      color: var(--vi-date-picker-day-selected-color, tokens.$text-primary-inverse);
+      border-top-left-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+      border-bottom-left-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+    }
+
+    // Last day looks like .endRange (dark blue, right rounded)
+    &:nth-child(7n) {
+      background: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+      border-color: var(--vi-date-picker-day-selected-bg, tokens.$color-primary);
+      color: var(--vi-date-picker-day-selected-color, tokens.$text-primary-inverse);
+      border-top-right-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+      border-bottom-right-radius: var(--vi-border-radius-full, tokens.$border-radius-full);
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Date Mode - Today Button Styles
+// ----------------------------------------------------------------------------
+
+.vi-calendar-footer {
+  padding: 4px var(--vi-spacing-xs, tokens.$spacing-xs);
+  border-top: 1px solid var(--vi-border-02, tokens.$border-02);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.vi-calendar-today-btn {
+  background: transparent;
+  border: none;
+  color: var(--vi-color-primary, tokens.$color-primary);
+  font-family: var(--vi-font-family-base, tokens.$font-family-base);
+  font-weight: var(--vi-font-weight-medium, tokens.$font-weight-medium);
+  font-size: var(--vi-font-size-sm, tokens.$font-size-sm);
+  cursor: pointer;
+  padding: var(--vi-spacing-xs, tokens.$spacing-xs) var(--vi-spacing-sm, tokens.$spacing-sm);
+  border-radius: var(--vi-border-radius-md, tokens.$border-radius-md);
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: var(--vi-layer-hover-01, tokens.$layer-hover-01);
+  }
+}

package/styles/_index.scss

@@ -6,3 +6,4 @@
 @forward 'layout';
 @forward 'utilities';
 @forward 'typography';
+@forward 'flatpickr';

package/styles/_variables.scss

@@ -236,6 +236,7 @@ $border-radius-sm: var(--vi-border-radius-sm, 2px);
 $border-radius-md: var(--vi-border-radius-md, 4px);
 $border-radius-lg: var(--vi-border-radius-lg, 8px);
 $border-radius-xl: var(--vi-border-radius-xl, 12px);
+$border-radius-full: var(--vi-border-radius-full, 9999px);
 
 // -- Primitive: Border widths ------------------------------------------------