@oslokommune/punkt-css 16.26.2 → 17.0.0

package/CHANGELOG.md

@@ -5,6 +5,117 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [17.0.0](https://github.com/oslokommune/punkt/compare/16.26.7...17.0.0) (2026-07-10)
+
+### ⚠ BREAKING CHANGES
+* Punkt 17 – Ny global header og footer, kompakte skjemaelementer (#3553). BREAKING CHANGE: Ny global header og footer, kompakte skjemaelementer. Se changelog.
+  
+  # Punkt 17
+  
+  OBS! Dette er en major-versjon og selv om vi har forsøkt å unngå de største breaking changes, så anbefaler vi ikke at dere oppdaterer blindt. Se gjennom løsningen og pass på at alt fungerer som forventet etter oppdatering!
+  
+  ## Ny global header
+  
+  ```html
+  <pkt-header type="global"></pkt-header>
+  ```
+  
+  ```jsx
+  <PktHeader type="global" />
+  ```
+  
+  - Henter innhold fra Oslo kommunes felles CDN. Husk å justere CSP deretter! Dersom det ikke er mulig å hente data fra ekstern CDN, bruk header med type “service”.
+  - Bruk på alle løsninger som ikke krever custom header, og alle løsninger som har en naturlig inngang fra Oslo kommunes åpne nettsider.
+  - Global header har et betraktelig smalere mulighetsrom for justeringer, og anbefales brukt som den er. Innlogget bruker og representasjon fungerer likt som den andre header-varianten. Det er ikke mulig å legge inn annet innhold i denne headeren.
+  
+  ## Ny footer
+  
+  ```html
+  <pkt-footer></pkt-footer>
+  <pkt-footer-simple></pkt-footer-simple>
+  ```
+  
+  ```jsx
+  <PktFooter />
+  <PktFooterSimple />
+  ```
+  
+  - Footer er endelig tilgjengelig i Punkt Elements.
+  - Henter innhold fra Oslo kommunes felles CDN. Husk å justere CSP deretter! Dersom det ikke er mulig å hente data fra ekstern CDN, bruk attributten `skipGlobal` (React)/`skip-global` (Elements).
+  - Innstillinger for informasjonskapsler (cookie-banner-link) fungerer likt som før, så sørg for at `includeConsent`/`include-consent` er satt om dere bruker cookies.
+  - Custom innhold havner nå i en sekundær footer som stables oppå den globale footeren. Så om dere tidligere har lagt lenker og tekst i footer, vil dette nå dukke opp _over_ den blå globale footeren.
+  - I custom innhold er nå `columnOne` og `columnTwo` deprecated, og vi anbefaler at dere istedenfor sender inn disse som en array av objekter i `columns`.
+  - `socialLinks`, `personvernOgInfoLink` og `tilgjengelighetLink` er deprecated og vil fjernes i senere major-versjon. Disse kommer nå fra Oslo kommunes felles data.
+  - Lenker med `external: true` får nå toppdomenet i parentes etter lenketeksten (f.eks. «Munchmuseet (munch.no)») i stedet for eksternt lenkeikon.
+  - Footer-CSSen er skrevet om. Bruker dere ren CSS (uten komponentene), eller har egne overrides mot footer-klasser, må dere gå gjennom markup/selektorer på nytt — se «Endringer fra versjon 16 til versjon 17» på footer-dokumentasjonssiden. Farger styres nå med CSS-variablene `--pkt-footer-bg`, `--pkt-footer-fg` og `--pkt-footer-link-hover`.
+  
+  ## Kompakte skjemaelementer
+  
+  Alle skjemakomponenter har fått attributten `input-size` (Elements) / propen `inputSize` (React) med verdiene `medium` (standard), `small` og `xsmall`:
+  
+  ```html
+  <pkt-textinput label="Etikett" input-size="small"></pkt-textinput>
+  ```
+  
+  ```jsx
+  <PktTextinput label="Etikett" inputSize="small" />
+  ```
+  
+  - Gjelder Textinput, Textarea, Select, Combobox, SearchInput, Datepicker og Timepicker.
+  - Størrelsene er `medium` = 48px felthøyde med 18px tekst (som før — ingen endring om dere ikke setter noe), `small` = 42px med 16px tekst og `xsmall` = 36px med 14px tekst.
+  - Hele feltet skalerer: ledetekst, hjelpetekst, ikoner, prefix/suffix og feilmeldinger følger størrelsen automatisk via input-wrapperen.
+  - Alle skjemakomponentene i samme størrelse har lik høyde og matcher horisontalt, også på tvers av React og Elements.
+  
+  ## Andre endringer
+  
+  - Button i Elements har fått et betydelig UU-løft, samt litt endring i padding så den stemmer overens med Figma-varianten.
+  - Button har fått ny størrelse `xsmall` (36px). Samtidig er `small` justert mot Figma: 16px tekst og mer padding — small-knapper blir noe _bredere_ enn før (gamle `small` tilsvarer omtrent nye `xsmall` i bredde).
+  - I arbeidet med ny header fikk accordion en ny variant `plus-minus`.
+  - Alert sin attributt `compact` er nå deprecated, og erstattes med `size="small"`. Alert har fått `size` med `medium`/`small`/`xsmall`; settes både `compact` og `size`, vinner `size`. Small/xsmall-alerts har også fått justert padding og ikonstørrelse mot Figma.
+  - ARIA-attributter (`aria-haspopup`, `aria-expanded`, `aria-controls`) satt på `<pkt-button>` flyttes nå automatisk til den indre `<button>`-en, slik at skjermlesere får dem der de hører hjemme. Consent-triggerne har fått `aria-haspopup="dialog"`.
+  - React Select: den udokumenterte `options`-propen er fjernet fra typene — den var aldri implementert. Bruk `<option>`-elementer som children.
+  - Dokumentasjonen har fått et eget CSP-avsnitt under «Kom i gang», og CSP-seksjoner på header-, footer- og consent-sidene, for dere som bruker komponentene som henter data fra `cdn.web.oslo.kommune.no`.
+  
+  ## Breaking changes:
+  
+  - **Footer:** Custom innhold rendres nå i et sekundært bånd over den nye globale footeren, og footer-markupen/CSS-klassene er skrevet om — egne CSS-overrides mot footer må oppdateres.
+  - **Footer:** Lenker med `external: true` viser toppdomene i parentes i stedet for eksternt lenkeikon.
+  - **Footer:** Flere deprecated properties.
+  - **Alert:** `compact` er deprecated.
+  - **React Select:** `options`-propen er fjernet fra typene (var aldri implementert) — bruk `<option>`-children.
+  - **CSP:** Global header, footer og consent krever at `cdn.web.oslo.kommune.no` er åpnet i CSP — se dokumentasjonen.
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [16.27.0](https://github.com/oslokommune/punkt/compare/16.26.2...16.27.0) (2026-06-22)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Fiks tag i label og alert i input-wrapper (#3523). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.25.3](https://github.com/oslokommune/punkt/compare/16.25.2...16.25.3) (2026-06-18)
 
 ### ⚠ BREAKING CHANGES

package/dist/css/components/accordion.css

@@ -104,8 +104,8 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
 }
 
 .pkt-accordion-item {
-  color: var(--pkt-color-brand-dark-blue-1000);
-  background-color: var(--pkt-color-brand-neutrals-white);
+  color: var(--pkt-color-text-body-default);
+  background-color: var(--pkt-color-background-default);
   transition: transform 0.3s;
   appearance: none;
   text-align: left;
@@ -191,34 +191,48 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
 }
 
 .pkt-accordion--plus-minus,
-pkt-accordion[skin=plus-minus] {
+pkt-accordion[skin=plus-minus]::part(container) {
   row-gap: 0;
 }
 
+.pkt-accordion--plus-minus .pkt-accordion-item,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item,
 .pkt-accordion-item--plus-minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item {
   background-color: transparent;
   border: none;
   padding: 0;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title {
   padding: 0.5rem 1rem;
   justify-content: flex-start;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover {
   text-decoration: underline;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon {
-  transform: none;
+  transform: none !important;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__content,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__content,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__content,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__content {
   padding: 1rem;
-  background-color: var(--pkt-color-brand-neutrals-200);
+  background-color: var(--pkt-color-background-subtle);
 }
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--plus,
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--plus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--plus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--plus,
@@ -226,19 +240,27 @@ pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__i
   transition: none;
   transform: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--minus {
   display: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus {
   display: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus {
   display: inline-flex;
   transform: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus {
   transform: none;

package/dist/css/components/accordion.min.css

@@ -1 +1 @@
-pkt-accordion,pkt-accordion-item{display:block}pkt-accordion,pkt-accordion-item{display:block}.pkt-accordion,pkt-accordion::part(container){display:grid;grid-template-columns:1fr;grid-template-rows:0fr;row-gap:.5rem;transition:grid-template-rows 500ms}.pkt-accordion:focus-visible,pkt-accordion::part(container):focus-visible{border:.25rem solid var(--pkt-color-border-states-hover)}.pkt-accordion--borderless .pkt-accordion-item,pkt-accordion[skin=borderless] .pkt-accordion-item{color:var(--pkt-color-text-body-default);border:none;background-color:var(--pkt-color-background-default)}.pkt-accordion--borderless .pkt-accordion-item[open]>.pkt-accordion-item__title,pkt-accordion[skin=borderless] .pkt-accordion-item[open]>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .25rem var(--pkt-color-border-states-active)}.pkt-accordion--outlined .pkt-accordion-item,pkt-accordion[skin=outlined] .pkt-accordion-item{color:var(--pkt-color-text-body-default);border:2px solid var(--pkt-color-border-subtle);background-color:var(--pkt-color-background-default)}pkt-accordion[skin=beige]::part(container),pkt-accordion[skin=blue]::part(container){row-gap:0}.pkt-accordion--beige,pkt-accordion[skin=beige]{row-gap:0}.pkt-accordion--beige>.pkt-accordion-item:nth-of-type(odd),.pkt-accordion--beige pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item,pkt-accordion[skin=beige]>.pkt-accordion-item:nth-of-type(odd),pkt-accordion[skin=beige] pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item{background-color:var(--pkt-color-surface-default-light-beige)}.pkt-accordion--blue,pkt-accordion[skin=blue]{row-gap:0}.pkt-accordion--blue>.pkt-accordion-item:nth-of-type(odd),.pkt-accordion--blue pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item,pkt-accordion[skin=blue]>.pkt-accordion-item:nth-of-type(odd),pkt-accordion[skin=blue] pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item{background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item,.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless,pkt-accordion[compact][skin=borderless] .pkt-accordion-item,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless{border:none}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open>.pkt-accordion-item__title,.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless--open>.pkt-accordion-item__title,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--open>.pkt-accordion-item__title,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless--open>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .125rem var(--pkt-color-border-states-active)}.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__title,.pkt-accordion--compact pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__title,pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__title,pkt-accordion[compact] pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__content,.pkt-accordion--compact pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__content,pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__content,pkt-accordion[compact] pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion-item{color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-brand-neutrals-white);transition:transform .3s;appearance:none;text-align:left;position:relative}@supports(interpolate-size: allow-keywords){.pkt-accordion-item::details-content{transition:height .3s ease,content-visibility .3s ease;transition-behavior:allow-discrete;height:0;overflow:clip}}.pkt-accordion-item summary::-webkit-details-marker{display:none}.pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem;align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:1.5rem}.pkt-accordion-item__title .pkt-accordion-item__icon{--fg-color: var(--pkt-color-text-body-default);transition:transform .2s}.pkt-accordion-item__title:hover{text-decoration:underline}.pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:translateY(0.25rem)}.pkt-accordion-item__title:focus-visible{outline:.25rem solid var(--pkt-color-border-states-focus)}.pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;padding:1.5rem;border-top:none}.pkt-accordion-item--borderless,.pkt-accordion-item pkt-accordion-item[skin=borderless]{border:none}.pkt-accordion-item--borderless[open]>.pkt-accordion-item__title,.pkt-accordion-item pkt-accordion-item[skin=borderless][open]>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .25rem var(--pkt-color-border-states-active)}.pkt-accordion-item--outlined,.pkt-accordion-item pkt-accordion-item[skin=outlined]{border:2px solid var(--pkt-color-border-subtle)}.pkt-accordion-item--beige,.pkt-accordion-item pkt-accordion-item[skin=beige]{background-color:var(--pkt-color-surface-default-light-beige)}.pkt-accordion-item--blue,.pkt-accordion-item pkt-accordion-item[skin=blue]{background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-accordion-item--compact>.pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion-item--compact>.pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion--plus-minus,pkt-accordion[skin=plus-minus]{row-gap:0}.pkt-accordion-item--plus-minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item{background-color:rgba(0,0,0,0);border:none;padding:0}.pkt-accordion-item--plus-minus>.pkt-accordion-item__title,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title{padding:.5rem 1rem;justify-content:flex-start}.pkt-accordion-item--plus-minus>.pkt-accordion-item__title:hover,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title:hover{text-decoration:underline}.pkt-accordion-item--plus-minus>.pkt-accordion-item__title:hover .pkt-accordion-item__icon,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:none}.pkt-accordion-item--plus-minus>.pkt-accordion-item__content,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__content{padding:1rem;background-color:var(--pkt-color-brand-neutrals-200)}.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--plus,.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--plus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--minus{transition:none;transform:none}.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--minus{display:none}.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus{display:none}.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus{display:inline-flex;transform:none}.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus{transform:none}@supports(interpolate-size: allow-keywords){.pkt-accordion-item[open]::details-content{height:auto}@starting-style{.pkt-accordion-item[open]::details-content{height:0}}}.pkt-accordion-item[open]>.pkt-accordion-item__title{border-bottom:none}.pkt-accordion-item[open]>.pkt-accordion-item__title:hover>.pkt-accordion-item__icon{transform:rotate(180deg) translateY(0.25rem)}.pkt-accordion-item[open]>.pkt-accordion-item__title>.pkt-accordion-item__icon{transform:rotate(180deg) translateY(0)}.pkt-icon.pkt-accordion-item__icon svg{min-height:2rem;min-width:2rem}
+pkt-accordion,pkt-accordion-item{display:block}pkt-accordion,pkt-accordion-item{display:block}.pkt-accordion,pkt-accordion::part(container){display:grid;grid-template-columns:1fr;grid-template-rows:0fr;row-gap:.5rem;transition:grid-template-rows 500ms}.pkt-accordion:focus-visible,pkt-accordion::part(container):focus-visible{border:.25rem solid var(--pkt-color-border-states-hover)}.pkt-accordion--borderless .pkt-accordion-item,pkt-accordion[skin=borderless] .pkt-accordion-item{color:var(--pkt-color-text-body-default);border:none;background-color:var(--pkt-color-background-default)}.pkt-accordion--borderless .pkt-accordion-item[open]>.pkt-accordion-item__title,pkt-accordion[skin=borderless] .pkt-accordion-item[open]>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .25rem var(--pkt-color-border-states-active)}.pkt-accordion--outlined .pkt-accordion-item,pkt-accordion[skin=outlined] .pkt-accordion-item{color:var(--pkt-color-text-body-default);border:2px solid var(--pkt-color-border-subtle);background-color:var(--pkt-color-background-default)}pkt-accordion[skin=beige]::part(container),pkt-accordion[skin=blue]::part(container){row-gap:0}.pkt-accordion--beige,pkt-accordion[skin=beige]{row-gap:0}.pkt-accordion--beige>.pkt-accordion-item:nth-of-type(odd),.pkt-accordion--beige pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item,pkt-accordion[skin=beige]>.pkt-accordion-item:nth-of-type(odd),pkt-accordion[skin=beige] pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item{background-color:var(--pkt-color-surface-default-light-beige)}.pkt-accordion--blue,pkt-accordion[skin=blue]{row-gap:0}.pkt-accordion--blue>.pkt-accordion-item:nth-of-type(odd),.pkt-accordion--blue pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item,pkt-accordion[skin=blue]>.pkt-accordion-item:nth-of-type(odd),pkt-accordion[skin=blue] pkt-accordion-item:nth-of-type(odd)>.pkt-accordion-item{background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item,.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless,pkt-accordion[compact][skin=borderless] .pkt-accordion-item,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless{border:none}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open>.pkt-accordion-item__title,.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--compact.pkt-accordion-item--borderless--open>.pkt-accordion-item__title,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--open>.pkt-accordion-item__title,pkt-accordion[compact][skin=borderless] .pkt-accordion-item--compact.pkt-accordion-item--borderless--open>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .125rem var(--pkt-color-border-states-active)}.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__title,.pkt-accordion--compact pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__title,pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__title,pkt-accordion[compact] pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion--compact .pkt-accordion-item .pkt-accordion-item__content,.pkt-accordion--compact pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__content,pkt-accordion[compact] .pkt-accordion-item .pkt-accordion-item__content,pkt-accordion[compact] pkt-accordion-item>.pkt-accordion-item .pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion-item{color:var(--pkt-color-text-body-default);background-color:var(--pkt-color-background-default);transition:transform .3s;appearance:none;text-align:left;position:relative}@supports(interpolate-size: allow-keywords){.pkt-accordion-item::details-content{transition:height .3s ease,content-visibility .3s ease;transition-behavior:allow-discrete;height:0;overflow:clip}}.pkt-accordion-item summary::-webkit-details-marker{display:none}.pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem;align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:1.5rem}.pkt-accordion-item__title .pkt-accordion-item__icon{--fg-color: var(--pkt-color-text-body-default);transition:transform .2s}.pkt-accordion-item__title:hover{text-decoration:underline}.pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:translateY(0.25rem)}.pkt-accordion-item__title:focus-visible{outline:.25rem solid var(--pkt-color-border-states-focus)}.pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;padding:1.5rem;border-top:none}.pkt-accordion-item--borderless,.pkt-accordion-item pkt-accordion-item[skin=borderless]{border:none}.pkt-accordion-item--borderless[open]>.pkt-accordion-item__title,.pkt-accordion-item pkt-accordion-item[skin=borderless][open]>.pkt-accordion-item__title{box-shadow:inset 0 0 0 .25rem var(--pkt-color-border-states-active)}.pkt-accordion-item--outlined,.pkt-accordion-item pkt-accordion-item[skin=outlined]{border:2px solid var(--pkt-color-border-subtle)}.pkt-accordion-item--beige,.pkt-accordion-item pkt-accordion-item[skin=beige]{background-color:var(--pkt-color-surface-default-light-beige)}.pkt-accordion-item--blue,.pkt-accordion-item pkt-accordion-item[skin=blue]{background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-accordion-item--compact>.pkt-accordion-item__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion-item--compact>.pkt-accordion-item__content{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem;padding:1rem}.pkt-accordion--plus-minus,pkt-accordion[skin=plus-minus]::part(container){row-gap:0}.pkt-accordion--plus-minus .pkt-accordion-item,pkt-accordion[skin=plus-minus] .pkt-accordion-item,.pkt-accordion-item--plus-minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item{background-color:rgba(0,0,0,0);border:none;padding:0}.pkt-accordion--plus-minus .pkt-accordion-item>.pkt-accordion-item__title,pkt-accordion[skin=plus-minus] .pkt-accordion-item>.pkt-accordion-item__title,.pkt-accordion-item--plus-minus>.pkt-accordion-item__title,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title{padding:.5rem 1rem;justify-content:flex-start}.pkt-accordion--plus-minus .pkt-accordion-item>.pkt-accordion-item__title:hover,pkt-accordion[skin=plus-minus] .pkt-accordion-item>.pkt-accordion-item__title:hover,.pkt-accordion-item--plus-minus>.pkt-accordion-item__title:hover,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title:hover{text-decoration:underline}.pkt-accordion--plus-minus .pkt-accordion-item>.pkt-accordion-item__title:hover .pkt-accordion-item__icon,pkt-accordion[skin=plus-minus] .pkt-accordion-item>.pkt-accordion-item__title:hover .pkt-accordion-item__icon,.pkt-accordion-item--plus-minus>.pkt-accordion-item__title:hover .pkt-accordion-item__icon,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:none !important}.pkt-accordion--plus-minus .pkt-accordion-item>.pkt-accordion-item__content,pkt-accordion[skin=plus-minus] .pkt-accordion-item>.pkt-accordion-item__content,.pkt-accordion-item--plus-minus>.pkt-accordion-item__content,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item>.pkt-accordion-item__content{padding:1rem;background-color:var(--pkt-color-background-subtle)}.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--plus,.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--plus,pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--plus,.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--plus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--minus{transition:none;transform:none}.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,.pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item .pkt-accordion-item__icon--minus{display:none}.pkt-accordion--plus-minus .pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus,pkt-accordion[skin=plus-minus] .pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus,.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--plus{display:none}.pkt-accordion--plus-minus .pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus,pkt-accordion[skin=plus-minus] .pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus,.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title .pkt-accordion-item__icon--minus{display:inline-flex;transform:none}.pkt-accordion--plus-minus .pkt-accordion-item[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,pkt-accordion[skin=plus-minus] .pkt-accordion-item[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,.pkt-accordion-item--plus-minus[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,pkt-accordion-item[skin=plus-minus]>.pkt-accordion-item[open]>.pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus{transform:none}@supports(interpolate-size: allow-keywords){.pkt-accordion-item[open]::details-content{height:auto}@starting-style{.pkt-accordion-item[open]::details-content{height:0}}}.pkt-accordion-item[open]>.pkt-accordion-item__title{border-bottom:none}.pkt-accordion-item[open]>.pkt-accordion-item__title:hover>.pkt-accordion-item__icon{transform:rotate(180deg) translateY(0.25rem)}.pkt-accordion-item[open]>.pkt-accordion-item__title>.pkt-accordion-item__icon{transform:rotate(180deg) translateY(0)}.pkt-icon.pkt-accordion-item__icon svg{min-height:2rem;min-width:2rem}

package/dist/css/components/alert.css

@@ -46,12 +46,6 @@ pkt-alert {
   grid-row: 1/2;
   grid-column: 2/3;
 }
-@media (max-width: 768px) {
-  .pkt-alert__noTitle .pkt-alert__text {
-    grid-row: 2/3;
-    grid-column: 1/-1;
-  }
-}
 
 .pkt-alert {
   border-left: 0.25rem solid var(--pkt-color-alert-bc);
@@ -109,25 +103,59 @@ pkt-alert {
   --fg-color: var(--pkt-color-alert-close-fg);
 }
 
+.pkt-alert--small,
 .pkt-alert--compact {
-  padding: 0.75rem 1rem;
+  display: flex;
+  min-height: 3rem;
+  padding: 0.5rem 0.75rem;
 }
+.pkt-alert--small .pkt-alert__grid,
 .pkt-alert--compact .pkt-alert__grid {
   gap: 0.5rem;
+  width: 100%;
 }
+.pkt-alert--small .pkt-alert__icon,
 .pkt-alert--compact .pkt-alert__icon {
-  width: 1.375rem;
-  height: 1.375rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
+.pkt-alert--small .pkt-alert__title,
 .pkt-alert--compact .pkt-alert__title {
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.pkt-alert--small .pkt-alert__text,
 .pkt-alert--compact .pkt-alert__text {
   letter-spacing: -0.2px;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1.5rem;
+}
+
+.pkt-alert--xsmall {
+  display: flex;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.75rem;
+}
+.pkt-alert--xsmall .pkt-alert__grid {
+  gap: 0.375rem;
+  width: 100%;
+}
+.pkt-alert--xsmall .pkt-alert__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-alert--xsmall .pkt-alert__title {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-alert--xsmall .pkt-alert__text {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }

package/dist/css/components/alert.min.css

@@ -1 +1 @@
-.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}pkt-alert{display:block}.pkt-alert__grid{display:grid;grid-template-columns:min-content auto min-content;grid-row-gap:1rem;grid-column-gap:1.5rem;justify-items:left;align-items:center}.pkt-alert__noTitle .pkt-alert__text{grid-row:1/2;grid-column:2/3}@media(max-width: 768px){.pkt-alert__noTitle .pkt-alert__text{grid-row:2/3;grid-column:1/-1}}.pkt-alert{border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt);padding:1rem 1.5rem;display:block}.pkt-alert__title{grid-column:2/3;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text{grid-column:1/-1;grid-row:2/3;overflow-wrap:break-word;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__date{grid-column:1/-1;grid-row:3/4;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;grid-area:icon;grid-row:1/2;grid-column:1/2}.pkt-alert__close{grid-column:3/4;grid-row:1/2}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem}.pkt-alert--compact .pkt-alert__grid{gap:.5rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem}.pkt-alert--compact .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-alert--compact .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}
+.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}pkt-alert{display:block}.pkt-alert__grid{display:grid;grid-template-columns:min-content auto min-content;grid-row-gap:1rem;grid-column-gap:1.5rem;justify-items:left;align-items:center}.pkt-alert__noTitle .pkt-alert__text{grid-row:1/2;grid-column:2/3}.pkt-alert{border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt);padding:1rem 1.5rem;display:block}.pkt-alert__title{grid-column:2/3;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text{grid-column:1/-1;grid-row:2/3;overflow-wrap:break-word;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__date{grid-column:1/-1;grid-row:3/4;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;grid-area:icon;grid-row:1/2;grid-column:1/2}.pkt-alert__close{grid-column:3/4;grid-row:1/2}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--small,.pkt-alert--compact{display:flex;min-height:3rem;padding:.5rem .75rem}.pkt-alert--small .pkt-alert__grid,.pkt-alert--compact .pkt-alert__grid{gap:.5rem;width:100%}.pkt-alert--small .pkt-alert__icon,.pkt-alert--compact .pkt-alert__icon{width:1.5rem;height:1.5rem}.pkt-alert--small .pkt-alert__title,.pkt-alert--compact .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-alert--small .pkt-alert__text,.pkt-alert--compact .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-alert--xsmall{display:flex;min-height:2.5rem;padding:.375rem .75rem}.pkt-alert--xsmall .pkt-alert__grid{gap:.375rem;width:100%}.pkt-alert--xsmall .pkt-alert__icon{width:1.25rem;height:1.25rem}.pkt-alert--xsmall .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-alert--xsmall .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}

package/dist/css/components/calendar.css

@@ -74,6 +74,10 @@ pkt-calendar .pkt-cal-days {
 pkt-calendar .pkt-cal-days td {
   padding: 0;
 }
+.pkt-calendar .pkt-cal-days .pkt-btn,
+pkt-calendar .pkt-cal-days .pkt-btn {
+  padding: 0;
+}
 .pkt-calendar .pkt-cal-days button,
 .pkt-calendar .pkt-cal-days div,
 pkt-calendar .pkt-cal-days button,

package/dist/css/components/calendar.min.css

@@ -1 +1 @@
-.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range .pkt-btn,.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,pkt-calendar .pkt-cal-in-range .pkt-btn,pkt-calendar .pkt-cal-in-range .pkt-btn:focus,pkt-calendar .pkt-cal-in-range .pkt-btn:hover{color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}
+.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{padding:0}.pkt-calendar .pkt-cal-days button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range .pkt-btn,.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,pkt-calendar .pkt-cal-in-range .pkt-btn,pkt-calendar .pkt-cal-in-range .pkt-btn:focus,pkt-calendar .pkt-cal-in-range .pkt-btn:hover{color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}

package/dist/css/components/combobox.css

@@ -63,6 +63,33 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
 .pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
   width: 100%;
 }
+.pkt-combobox__wrapper .pkt-combobox__input--small {
+  min-height: 2.625rem;
+  padding: 0.375rem 2.5rem 0.375rem 0.375rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall {
+  min-height: 2.25rem;
+  padding: 0.25rem 2.25rem 0.25rem 0.25rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon {
+  padding: 0.25rem 0.5rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
 .pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) {
   border-color: var(--pkt-color-input-border-hover);
 }
@@ -170,4 +197,59 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
 
 .pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
   outline: 4px solid var(--pkt-color-border-states-focus);
+}
+
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
+  padding: 0.5rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
+  padding: 0.5rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
+  padding: 0.5rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
+  padding: 0.375rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
+  padding: 0.375rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
+  padding: 0.375rem 0.5rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }

package/dist/css/components/combobox.min.css

@@ -1 +1 @@
-pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-left:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-top:.5rem}.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}
+pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-left:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-top:.5rem}.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}

package/dist/css/components/datepicker.css

@@ -109,22 +109,101 @@ pkt-datepicker-multiple {
   -webkit-appearance: none;
 }
 
-@-moz-document url-prefix() {
+.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple {
+  flex: 1;
+  min-width: 0;
+}
+
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
+  min-height: 2.375rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+@supports not (-moz-appearance: none) {
+  .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
+    width: 7.3rem;
+  }
+  .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
+    max-width: calc(100% - 2.5rem);
+  }
+}
+
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
+  min-height: 2rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  line-height: 1rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+@supports not (-moz-appearance: none) {
+  .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
+    width: 6.5rem;
+  }
+  .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
+    max-width: calc(100% - 2rem);
+  }
+}
+
+@supports (-moz-appearance: none) {
   .pkt-datepicker__inputs .pkt-datepicker__input {
     padding-right: 0.5rem;
   }
   .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-    width: 10.5rem;
+    width: auto;
     max-width: 100%;
   }
   .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
     width: auto;
     flex: 1;
   }
-  .pkt-datepicker__inputs button.pkt-input-icon {
+  .pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon {
     display: none;
   }
   .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
     border-right-width: 2px !important;
   }
+  @media screen and (max-width: 30rem) {
+    .pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range {
+      justify-self: start;
+    }
+  }
 }

package/dist/css/components/datepicker.min.css

@@ -1 +1 @@
-.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)){width:fit-content}.pkt-datepicker__inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal)}.pkt-datepicker__inputs .pkt-input__container .pkt-input,.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator{border:0;height:100%;min-height:2.75rem}.pkt-datepicker__inputs .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:has(input:disabled),.pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-disabled)}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-left:.75rem;padding-right:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:0;background-image:none;width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-top:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){flex:1}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}@-moz-document url-prefix(){.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:10.5rem;max-width:100%}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__inputs button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}}
+.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)){width:fit-content}.pkt-datepicker__inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal)}.pkt-datepicker__inputs .pkt-input__container .pkt-input,.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator{border:0;height:100%;min-height:2.75rem}.pkt-datepicker__inputs .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:has(input:disabled),.pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-disabled)}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-left:.75rem;padding-right:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:0;background-image:none;width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-top:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){flex:1}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple{flex:1;min-width:0}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{min-height:2.375rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon{padding-left:.5rem;padding-right:.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.25rem;height:1.25rem}@supports not (-moz-appearance: none){.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:7.3rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2.5rem)}}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{min-height:2rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem;line-height:1rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon{padding-left:.5rem;padding-right:.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.125rem;height:1.125rem}@supports not (-moz-appearance: none){.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:6.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2rem)}}@supports(-moz-appearance: none){.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:auto;max-width:100%}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}@media screen and (max-width: 30rem){.pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range{justify-self:start}}}