@oslokommune/punkt-css 17.0.8 → 17.0.10

package/dist/css/pkt.css

@@ -555,6 +555,10 @@ body {
   scroll-behavior: smooth;
 }
 
+.pkt-contents {
+  display: contents;
+}
+
 /* 
  * Typografi
  * 
@@ -587,109 +591,6 @@ strong {
   font-weight: 500;
 }
 
-a,
-.pkt-link-button {
-  color: var(--pkt-color-text-action-normal);
-  text-decoration: underline;
-  word-wrap: break-word;
-  cursor: pointer;
-}
-a span,
-.pkt-link-button span {
-  color: inherit;
-  text-decoration: inherit;
-}
-a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
-.pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
-  color: inherit;
-}
-a:hover, a.pkt-link--hover,
-.pkt-link-button:hover,
-.pkt-link-button.pkt-link--hover {
-  color: var(--pkt-color-text-action-active);
-  text-decoration: underline;
-}
-a:hover svg, a.pkt-link--hover svg,
-.pkt-link-button:hover svg,
-.pkt-link-button.pkt-link--hover svg {
-  --fg-color: currentColor;
-}
-a:focus-visible, a.pkt-link--focus,
-.pkt-link-button:focus-visible,
-.pkt-link-button.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
-  outline: none;
-  color: var(--pkt-color-text-action-active);
-}
-a:focus:not(:focus-visible),
-.pkt-link-button:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0.125rem solid var(--pkt-color-text-action-active);
-  color: var(--pkt-color-text-action-active);
-}
-a:active, a.pkt-link--active,
-.pkt-link-button:active,
-.pkt-link-button.pkt-link--active {
-  color: var(--pkt-color-text-action-active);
-}
-
-.pkt-link {
-  display: inline;
-  text-align: left;
-  align-items: baseline;
-}
-
-.pkt-link__icon {
-  --fg-color: currentColor;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  margin-inline: 0.25rem;
-  align-self: center;
-}
-.pkt-link--icon-left, .pkt-link--icon-right {
-  display: inline-flex;
-  text-decoration: none;
-  align-items: baseline;
-}
-.pkt-link--icon-left {
-  flex-direction: row;
-}
-.pkt-link--icon-right {
-  flex-direction: row-reverse;
-}
-.pkt-link--external::after {
-  display: inline-block;
-  content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
-  background-image: var(--svg);
-  background-repeat: no-repeat;
-  background-size: 18px 18px;
-  width: 1.125rem;
-  height: 1.125rem;
-  vertical-align: middle;
-  align-self: center;
-}
-.pkt-link--external:hover::after {
-  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
-}
-
-button.pkt-link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: inherit;
-  cursor: pointer;
-  font-weight: inherit;
-}
-
-[data-mode=dark] .pkt-link--external::after {
-  filter: brightness(0) saturate(100%) invert(100%);
-}
-[data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
-  filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
-}
-
 /*
  * origo typography
  * prefix pkt
@@ -3142,11 +3043,109 @@ button.pkt-link {
 }
 
 /*
- * Display contents and disregard layout
+ * Link
  */
-.pkt-display-contents,
-.pkt-contents {
-  display: contents;
+a,
+.pkt-link-button {
+  color: var(--pkt-color-text-action-normal);
+  text-decoration: underline;
+  word-wrap: break-word;
+  cursor: pointer;
+}
+a span,
+.pkt-link-button span {
+  color: inherit;
+  text-decoration: inherit;
+}
+a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
+.pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
+  color: inherit;
+}
+a:hover, a.pkt-link--hover,
+.pkt-link-button:hover,
+.pkt-link-button.pkt-link--hover {
+  color: var(--pkt-color-text-action-active);
+  text-decoration: underline;
+}
+a:hover svg, a.pkt-link--hover svg,
+.pkt-link-button:hover svg,
+.pkt-link-button.pkt-link--hover svg {
+  --fg-color: currentColor;
+}
+a:focus-visible, a.pkt-link--focus,
+.pkt-link-button:focus-visible,
+.pkt-link-button.pkt-link--focus {
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
+  outline: none;
+  color: var(--pkt-color-text-action-active);
+}
+a:focus:not(:focus-visible),
+.pkt-link-button:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0.125rem solid var(--pkt-color-text-action-active);
+  color: var(--pkt-color-text-action-active);
+}
+a:active, a.pkt-link--active,
+.pkt-link-button:active,
+.pkt-link-button.pkt-link--active {
+  color: var(--pkt-color-text-action-active);
+}
+
+.pkt-link {
+  display: inline;
+  text-align: left;
+  align-items: baseline;
+}
+
+.pkt-link__icon {
+  --fg-color: currentColor;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  margin-inline: 0.25rem;
+  align-self: center;
+}
+.pkt-link--icon-left, .pkt-link--icon-right {
+  display: inline-flex;
+  text-decoration: none;
+  align-items: baseline;
+}
+.pkt-link--icon-left {
+  flex-direction: row;
+}
+.pkt-link--icon-right {
+  flex-direction: row-reverse;
+}
+.pkt-link--external::after {
+  display: inline-block;
+  content: " ";
+  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
+  background-image: var(--svg);
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+  width: 1.125rem;
+  height: 1.125rem;
+  vertical-align: middle;
+  align-self: center;
+}
+.pkt-link--external:hover::after {
+  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+}
+
+button.pkt-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+[data-mode=dark] .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(100%);
+}
+[data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
+  filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
 }
 
 /* 
@@ -19830,59 +19829,53 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
 .pkt-combobox__wrapper .pkt-listbox__open {
   margin-block-start: 0.5rem;
 }
-
-.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
+.pkt-combobox__wrapper.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) {
+.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search), .pkt-combobox__wrapper.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 {
+.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
+.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-combobox__wrapper.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 {
+.pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input, .pkt-combobox__wrapper.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) {
+.pkt-combobox__wrapper.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 {
+.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-combobox__wrapper.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 {
+.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
+.pkt-combobox__wrapper.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 {
+.pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
   padding: 0.375rem 0.5rem;
   letter-spacing: -0.2px;
   font-weight: 300;

package/dist/css/pkt.layer.css

@@ -525,6 +525,9 @@
     text-rendering: optimizeSpeed;
     scroll-behavior: smooth;
   }
+  .pkt-contents {
+    display: contents;
+  }
   /* 
    * Typografi
    * 
@@ -552,104 +555,6 @@
   strong {
     font-weight: 500;
   }
-  a,
-  .pkt-link-button {
-    color: var(--pkt-color-text-action-normal);
-    text-decoration: underline;
-    word-wrap: break-word;
-    cursor: pointer;
-  }
-  a span,
-  .pkt-link-button span {
-    color: inherit;
-    text-decoration: inherit;
-  }
-  a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
-  .pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
-    color: inherit;
-  }
-  a:hover, a.pkt-link--hover,
-  .pkt-link-button:hover,
-  .pkt-link-button.pkt-link--hover {
-    color: var(--pkt-color-text-action-active);
-    text-decoration: underline;
-  }
-  a:hover svg, a.pkt-link--hover svg,
-  .pkt-link-button:hover svg,
-  .pkt-link-button.pkt-link--hover svg {
-    --fg-color: currentColor;
-  }
-  a:focus-visible, a.pkt-link--focus,
-  .pkt-link-button:focus-visible,
-  .pkt-link-button.pkt-link--focus {
-    box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
-    outline: none;
-    color: var(--pkt-color-text-action-active);
-  }
-  a:focus:not(:focus-visible),
-  .pkt-link-button:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0.125rem solid var(--pkt-color-text-action-active);
-    color: var(--pkt-color-text-action-active);
-  }
-  a:active, a.pkt-link--active,
-  .pkt-link-button:active,
-  .pkt-link-button.pkt-link--active {
-    color: var(--pkt-color-text-action-active);
-  }
-  .pkt-link {
-    display: inline;
-    text-align: left;
-    align-items: baseline;
-  }
-  .pkt-link__icon {
-    --fg-color: currentColor;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-    margin-inline: 0.25rem;
-    align-self: center;
-  }
-  .pkt-link--icon-left, .pkt-link--icon-right {
-    display: inline-flex;
-    text-decoration: none;
-    align-items: baseline;
-  }
-  .pkt-link--icon-left {
-    flex-direction: row;
-  }
-  .pkt-link--icon-right {
-    flex-direction: row-reverse;
-  }
-  .pkt-link--external::after {
-    display: inline-block;
-    content: " ";
-    --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
-    background-image: var(--svg);
-    background-repeat: no-repeat;
-    background-size: 18px 18px;
-    width: 1.125rem;
-    height: 1.125rem;
-    vertical-align: middle;
-    align-self: center;
-  }
-  .pkt-link--external:hover::after {
-    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
-  }
-  button.pkt-link {
-    background: none;
-    border: none;
-    padding: 0;
-    font-family: inherit;
-    cursor: pointer;
-    font-weight: inherit;
-  }
-  [data-mode=dark] .pkt-link--external::after {
-    filter: brightness(0) saturate(100%) invert(100%);
-  }
-  [data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
-    filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
-  }
   /*
    * origo typography
    * prefix pkt
@@ -3040,11 +2945,105 @@
     white-space: nowrap;
   }
   /*
-   * Display contents and disregard layout
+   * Link
    */
-  .pkt-display-contents,
-  .pkt-contents {
-    display: contents;
+  a,
+  .pkt-link-button {
+    color: var(--pkt-color-text-action-normal);
+    text-decoration: underline;
+    word-wrap: break-word;
+    cursor: pointer;
+  }
+  a span,
+  .pkt-link-button span {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
+  .pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
+    color: inherit;
+  }
+  a:hover, a.pkt-link--hover,
+  .pkt-link-button:hover,
+  .pkt-link-button.pkt-link--hover {
+    color: var(--pkt-color-text-action-active);
+    text-decoration: underline;
+  }
+  a:hover svg, a.pkt-link--hover svg,
+  .pkt-link-button:hover svg,
+  .pkt-link-button.pkt-link--hover svg {
+    --fg-color: currentColor;
+  }
+  a:focus-visible, a.pkt-link--focus,
+  .pkt-link-button:focus-visible,
+  .pkt-link-button.pkt-link--focus {
+    box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
+    outline: none;
+    color: var(--pkt-color-text-action-active);
+  }
+  a:focus:not(:focus-visible),
+  .pkt-link-button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0.125rem solid var(--pkt-color-text-action-active);
+    color: var(--pkt-color-text-action-active);
+  }
+  a:active, a.pkt-link--active,
+  .pkt-link-button:active,
+  .pkt-link-button.pkt-link--active {
+    color: var(--pkt-color-text-action-active);
+  }
+  .pkt-link {
+    display: inline;
+    text-align: left;
+    align-items: baseline;
+  }
+  .pkt-link__icon {
+    --fg-color: currentColor;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    margin-inline: 0.25rem;
+    align-self: center;
+  }
+  .pkt-link--icon-left, .pkt-link--icon-right {
+    display: inline-flex;
+    text-decoration: none;
+    align-items: baseline;
+  }
+  .pkt-link--icon-left {
+    flex-direction: row;
+  }
+  .pkt-link--icon-right {
+    flex-direction: row-reverse;
+  }
+  .pkt-link--external::after {
+    display: inline-block;
+    content: " ";
+    --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
+    background-image: var(--svg);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    width: 1.125rem;
+    height: 1.125rem;
+    vertical-align: middle;
+    align-self: center;
+  }
+  .pkt-link--external:hover::after {
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+  }
+  button.pkt-link {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    cursor: pointer;
+    font-weight: inherit;
+  }
+  [data-mode=dark] .pkt-link--external::after {
+    filter: brightness(0) saturate(100%) invert(100%);
+  }
+  [data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
+    filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
   }
   /* 
    * Containers
@@ -18785,56 +18784,53 @@
   .pkt-combobox__wrapper .pkt-listbox__open {
     margin-block-start: 0.5rem;
   }
-  .pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
+  .pkt-combobox__wrapper.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) {
+  .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search), .pkt-combobox__wrapper.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 {
+  .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
+  .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner, .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+  .pkt-combobox__wrapper.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 {
+  .pkt-combobox__wrapper.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input, .pkt-combobox__wrapper.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) {
+  .pkt-combobox__wrapper.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 {
+  .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+  .pkt-combobox__wrapper.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 {
+  .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
+  .pkt-combobox__wrapper.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 {
+  .pkt-combobox__wrapper.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
     padding: 0.375rem 0.5rem;
     letter-spacing: -0.2px;
     font-weight: 300;