@seed-design/lynx-css 0.8.0 → 0.9.0

package/all.css

@@ -580,6 +580,196 @@ text {
   --seed-scale-s98: .98;
 }
 
+.seed-accordion__root, .seed-accordion__item {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.seed-accordion__header {
+  width: 100%;
+  display: flex;
+}
+
+.seed-accordion__trigger {
+  width: 100%;
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  background-color: #0000;
+  border: none;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.seed-accordion__pressedOverlay {
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  background-color: #0000;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.seed-accordion__prefix {
+  color: var(--seed-color-fg-neutral);
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-accordion__body {
+  gap: var(--seed-dimension-x0_5);
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.seed-accordion__title {
+  color: var(--seed-color-fg-neutral);
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-accordion__description {
+  color: var(--seed-color-fg-neutral-subtle);
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-accordion__suffixIcon {
+  color: var(--seed-color-fg-neutral-subtle);
+  transition: transform var(--seed-duration-d6) var(--seed-timing-function-easing);
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: auto;
+  display: flex;
+  transform: rotate(0);
+}
+
+.seed-accordion__content {
+  opacity: 0;
+  width: 100%;
+  height: 0;
+  transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.seed-accordion__contentInner {
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+  height: max-content;
+  display: flex;
+}
+
+.seed-accordion__divider {
+  height: 1px;
+  margin-left: var(--seed-dimension-x3);
+  margin-right: var(--seed-dimension-x3);
+  background-color: var(--seed-color-stroke-neutral-subtle);
+}
+
+.seed-accordion__pressedOverlay--variant_inline {
+  right: var(--seed-dimension-x1_5);
+  left: var(--seed-dimension-x1_5);
+  border-radius: var(--seed-dimension-x2_5);
+}
+
+.seed-accordion__item--variant_separated {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+  border-radius: var(--seed-radius-r3);
+  overflow: hidden;
+}
+
+.seed-accordion__divider--variant_separated {
+  display: none;
+}
+
+.seed-accordion__trigger--size_medium {
+  padding-top: var(--seed-dimension-x4);
+  padding-bottom: var(--seed-dimension-x4);
+}
+
+.seed-accordion__prefix--size_medium {
+  width: 22px;
+  height: 22px;
+  margin-right: var(--seed-dimension-x3);
+}
+
+.seed-accordion__title--size_medium {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-accordion__description--size_medium {
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
+}
+
+.seed-accordion__suffixIcon--size_medium {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+  margin-left: var(--seed-dimension-x3);
+}
+
+.seed-accordion__trigger--size_large {
+  padding-top: var(--seed-dimension-x5);
+  padding-bottom: var(--seed-dimension-x5);
+}
+
+.seed-accordion__prefix--size_large {
+  width: 22px;
+  height: 22px;
+  margin-right: var(--seed-dimension-x3);
+}
+
+.seed-accordion__title--size_large {
+  font-size: var(--seed-font-size-t7);
+  line-height: var(--seed-line-height-t7);
+}
+
+.seed-accordion__description--size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-accordion__suffixIcon--size_large {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+  margin-left: var(--seed-dimension-x3);
+}
+
+.seed-accordion__suffixIcon--open_true {
+  transform: rotate(180deg);
+}
+
+.seed-accordion__content--open_true {
+  opacity: 1;
+  transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+}
+
+.seed-accordion__pressedOverlay--pressed_true {
+  background-color: var(--seed-color-bg-transparent-pressed);
+}
+
+.seed-accordion__title--disabled_true, .seed-accordion__description--disabled_true, .seed-accordion__prefix--disabled_true, .seed-accordion__suffixIcon--disabled_true {
+  color: var(--seed-color-fg-disabled);
+}
+
+.seed-accordion__root--variant_separated-size_medium {
+  gap: var(--seed-dimension-x3);
+}
+
+.seed-accordion__root--variant_separated-size_large {
+  gap: var(--seed-dimension-x4);
+}
+
 .seed-action-button__root {
   --seed-box-flex-grow: 0;
   flex-shrink: 0;
@@ -1414,6 +1604,7 @@ text {
   border-top-right-radius: var(--seed-radius-r6);
   flex-direction: column;
   flex: 1;
+  max-width: 480px;
   display: flex;
   position: relative;
   transform: translate3d(0, 100%, 0);
@@ -1510,142 +1701,349 @@ text {
   transform: translateX(-50%);
 }
 
-.seed-checkbox__root {
-  align-items: flex-start;
-  gap: var(--seed-dimension-x2);
+.seed-callout__root {
+  width: 100%;
+  min-height: 50px;
+  padding-left: var(--seed-dimension-x3_5);
+  padding-right: var(--seed-dimension-x3_5);
+  padding-top: var(--seed-dimension-x3_5);
+  padding-bottom: var(--seed-dimension-x3_5);
+  align-items: center;
+  gap: var(--seed-dimension-x3);
+  border-radius: var(--seed-radius-r2_5);
+  flex-direction: row;
   display: flex;
-  position: relative;
-}
-
-.seed-checkbox__label {
-  color: var(--seed-color-fg-neutral);
 }
 
-.seed-checkbox__label--weight_regular {
-  font-weight: var(--seed-font-weight-regular);
+.seed-callout__content {
+  line-height: var(--seed-line-height-t4);
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
-.seed-checkbox__label--weight_bold {
+.seed-callout__title {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-bold);
 }
 
-.seed-checkbox__root--size_medium {
-  min-height: var(--seed-dimension-x8);
-  --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
+.seed-callout__description {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-checkbox__label--size_medium {
+.seed-callout__link {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-regular);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
 }
 
-.seed-checkbox__root--size_large {
-  min-height: var(--seed-dimension-x9);
-  --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
+.seed-callout__closeButton {
+  margin-top: calc((undefined - var(--seed-dimension-x4)) * -.5);
+  margin-right: calc((undefined - var(--seed-dimension-x4)) * -.5);
+  margin-bottom: calc((undefined - var(--seed-dimension-x4)) * -.5);
+  margin-left: calc((undefined - var(--seed-dimension-x4)) * -.5);
+  border-radius: var(--seed-radius-r2_5);
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
-.seed-checkbox__label--size_large {
-  font-size: var(--seed-font-size-t5);
-  line-height: var(--seed-line-height-t5);
+.seed-callout__prefixIcon, .seed-callout__suffixIcon {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+  flex-shrink: 0;
 }
 
-.seed-checkbox__label--disabled_true {
-  color: var(--seed-color-fg-disabled);
+.seed-callout__root--tone_neutral {
+  background-color: var(--seed-color-bg-neutral-weak);
 }
 
-.seed-checkbox-group__root {
-  gap: var(--seed-dimension-x1);
-  flex-direction: column;
-  display: flex;
+.seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral {
+  color: var(--seed-color-fg-neutral);
 }
 
-.seed-checkmark__root {
-  margin-top: var(--checkmark-margin-top, 0);
-  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-  flex: none;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: relative;
+.seed-callout__link--tone_neutral {
+  color: var(--seed-color-fg-neutral);
+  border-bottom-color: var(--seed-color-fg-neutral);
 }
 
-.seed-checkmark__icon {
-  position: absolute;
+.seed-callout__prefixIcon--tone_neutral, .seed-callout__suffixIcon--tone_neutral {
+  color: var(--seed-color-fg-neutral);
 }
 
-.seed-checkmark__root--variant_square {
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--seed-color-stroke-neutral-weak);
+.seed-callout__root--tone_informative {
+  background-color: var(--seed-color-bg-informative-weak);
 }
 
-.seed-checkmark__icon--variant_ghost {
-  color: var(--seed-color-fg-placeholder);
-  transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+.seed-callout__title--tone_informative, .seed-callout__description--tone_informative {
+  color: var(--seed-color-fg-informative-contrast);
 }
 
-.seed-checkmark__root--size_medium {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
-  border-radius: var(--seed-radius-r1);
+.seed-callout__link--tone_informative {
+  color: var(--seed-color-fg-informative-contrast);
+  border-bottom-color: var(--seed-color-fg-informative-contrast);
 }
 
-.seed-checkmark__root--size_large {
-  width: var(--seed-dimension-x6);
-  height: var(--seed-dimension-x6);
-  border-radius: var(--seed-radius-r1);
+.seed-callout__prefixIcon--tone_informative, .seed-callout__suffixIcon--tone_informative {
+  color: var(--seed-color-fg-informative-contrast);
 }
 
-.seed-checkmark__icon--variant_square-size_medium {
-  width: 12px;
-  height: 12px;
+.seed-callout__root--tone_positive {
+  background-color: var(--seed-color-bg-positive-weak);
 }
 
-.seed-checkmark__icon--variant_square-size_large, .seed-checkmark__icon--variant_ghost-size_medium {
-  width: 14px;
-  height: 14px;
+.seed-callout__title--tone_positive, .seed-callout__description--tone_positive {
+  color: var(--seed-color-fg-positive-contrast);
 }
 
-.seed-checkmark__icon--variant_ghost-size_large {
-  width: 18px;
-  height: 18px;
+.seed-callout__link--tone_positive {
+  color: var(--seed-color-fg-positive-contrast);
+  border-bottom-color: var(--seed-color-fg-positive-contrast);
 }
 
-.seed-checkmark__icon--variant_square-checked_false-indeterminate_false {
-  opacity: 0;
+.seed-callout__prefixIcon--tone_positive, .seed-callout__suffixIcon--tone_positive {
+  color: var(--seed-color-fg-positive-contrast);
 }
 
-.seed-checkmark__root--variant_square-checked_true-disabled_false, .seed-checkmark__root--variant_square-indeterminate_true-disabled_false {
-  border-width: 0;
-  border-color: #0000;
+.seed-callout__root--tone_warning {
+  background-color: var(--seed-color-bg-warning-weak);
 }
 
-.seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
-  background-color: var(--seed-color-bg-brand-solid);
+.seed-callout__title--tone_warning, .seed-callout__description--tone_warning {
+  color: var(--seed-color-fg-warning-contrast);
 }
 
-.seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
-  color: var(--seed-color-palette-static-white);
+.seed-callout__link--tone_warning {
+  color: var(--seed-color-fg-warning-contrast);
+  border-bottom-color: var(--seed-color-fg-warning-contrast);
 }
 
-.seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
-  background-color: var(--seed-color-bg-neutral-inverted);
+.seed-callout__prefixIcon--tone_warning, .seed-callout__suffixIcon--tone_warning {
+  color: var(--seed-color-fg-warning-contrast);
 }
 
-.seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
-  color: var(--seed-color-fg-neutral-inverted);
+.seed-callout__root--tone_critical {
+  background-color: var(--seed-color-bg-critical-weak);
 }
 
-.seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
-  background-color: var(--seed-color-bg-brand-solid);
+.seed-callout__title--tone_critical, .seed-callout__description--tone_critical {
+  color: var(--seed-color-fg-critical-contrast);
 }
 
-.seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
-  color: var(--seed-color-palette-static-white);
+.seed-callout__link--tone_critical {
+  color: var(--seed-color-fg-critical-contrast);
+  border-bottom-color: var(--seed-color-fg-critical-contrast);
 }
 
-.seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
-  background-color: var(--seed-color-bg-neutral-inverted);
+.seed-callout__prefixIcon--tone_critical, .seed-callout__suffixIcon--tone_critical {
+  color: var(--seed-color-fg-critical-contrast);
+}
+
+.seed-callout__root--tone_magic {
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
+}
+
+.seed-callout__title--tone_magic, .seed-callout__description--tone_magic {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-callout__link--tone_magic {
+  color: var(--seed-color-fg-neutral);
+  border-bottom-color: var(--seed-color-fg-neutral);
+}
+
+.seed-callout__prefixIcon--tone_magic, .seed-callout__suffixIcon--tone_magic {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-callout__root--tone_neutral-pressed_true {
+  background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+
+.seed-callout__root--tone_informative-pressed_true {
+  background-color: var(--seed-color-bg-informative-weak-pressed);
+}
+
+.seed-callout__root--tone_positive-pressed_true {
+  background-color: var(--seed-color-bg-positive-weak-pressed);
+}
+
+.seed-callout__root--tone_warning-pressed_true {
+  background-color: var(--seed-color-bg-warning-weak-pressed);
+}
+
+.seed-callout__root--tone_critical-pressed_true {
+  background-color: var(--seed-color-bg-critical-weak-pressed);
+}
+
+.seed-callout__root--tone_magic-pressed_true {
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+}
+
+.seed-checkbox__root {
+  align-items: flex-start;
+  gap: var(--seed-dimension-x2);
+  display: flex;
+  position: relative;
+}
+
+.seed-checkbox__label {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-checkbox__label--weight_regular {
+  font-weight: var(--seed-font-weight-regular);
+}
+
+.seed-checkbox__label--weight_bold {
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-checkbox__root--size_medium {
+  min-height: var(--seed-dimension-x8);
+  --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
+}
+
+.seed-checkbox__label--size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-checkbox__root--size_large {
+  min-height: var(--seed-dimension-x9);
+  --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
+}
+
+.seed-checkbox__label--size_large {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-checkbox__label--disabled_true {
+  color: var(--seed-color-fg-disabled);
+}
+
+.seed-checkbox-group__root {
+  gap: var(--seed-dimension-x1);
+  flex-direction: column;
+  display: flex;
+}
+
+.seed-checkmark__root {
+  margin-top: var(--checkmark-margin-top, 0);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.seed-checkmark__background {
+  opacity: 0;
+  transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.seed-checkmark__icon {
+  position: absolute;
+}
+
+.seed-checkmark__root--variant_square {
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--seed-color-stroke-neutral-weak);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+}
+
+.seed-checkmark__background--variant_ghost {
+  background-color: var(--seed-color-bg-transparent-pressed);
+}
+
+.seed-checkmark__icon--variant_ghost {
+  color: var(--seed-color-fg-placeholder);
+}
+
+.seed-checkmark__root--size_medium {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  border-radius: var(--seed-radius-r1);
+}
+
+.seed-checkmark__background--size_medium {
+  border-radius: var(--seed-radius-r1);
+}
+
+.seed-checkmark__root--size_large {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+  border-radius: var(--seed-radius-r1);
+}
+
+.seed-checkmark__background--size_large {
+  border-radius: var(--seed-radius-r1);
+}
+
+.seed-checkmark__icon--variant_square-size_medium {
+  width: 12px;
+  height: 12px;
+}
+
+.seed-checkmark__icon--variant_square-size_large, .seed-checkmark__icon--variant_ghost-size_medium {
+  width: 14px;
+  height: 14px;
+}
+
+.seed-checkmark__icon--variant_ghost-size_large {
+  width: 18px;
+  height: 18px;
+}
+
+.seed-checkmark__icon--variant_square-checked_false-indeterminate_false {
+  opacity: 0;
+}
+
+.seed-checkmark__root--variant_square-checked_true-disabled_false, .seed-checkmark__root--variant_square-indeterminate_true-disabled_false {
+  border-width: 0;
+  border-color: #0000;
+}
+
+.seed-checkmark__root--variant_square-tone_brand-checked_true-disabled_false {
+  background-color: var(--seed-color-bg-brand-solid);
+}
+
+.seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
+  background-color: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
+  background-color: var(--seed-color-bg-brand-solid);
+}
+
+.seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
+  background-color: var(--seed-color-bg-neutral-inverted);
 }
 
 .seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
@@ -1661,6 +2059,22 @@ text {
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-checkmark__background--variant_ghost-tone_brand-checked_true {
+  background-color: var(--seed-color-palette-carrot-200);
+}
+
+.seed-checkmark__background--variant_ghost-tone_neutral-checked_true {
+  background-color: var(--seed-color-palette-gray-200);
+}
+
+.seed-checkmark__background--variant_ghost-tone_brand-indeterminate_true {
+  background-color: var(--seed-color-palette-carrot-200);
+}
+
+.seed-checkmark__background--variant_ghost-tone_neutral-indeterminate_true {
+  background-color: var(--seed-color-palette-gray-200);
+}
+
 .seed-checkmark__icon--variant_ghost-tone_brand-checked_true-disabled_false {
   color: var(--seed-color-fg-brand);
 }
@@ -1669,10 +2083,22 @@ text {
   color: var(--seed-color-fg-neutral);
 }
 
-.seed-checkmark__icon--variant_ghost-disabled_true, .seed-checkmark__icon--variant_ghost-checked_true-disabled_true {
+.seed-checkmark__icon--variant_ghost-tone_brand-indeterminate_true-disabled_false {
+  color: var(--seed-color-fg-brand);
+}
+
+.seed-checkmark__icon--variant_ghost-tone_neutral-indeterminate_true-disabled_false {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-checkmark__icon--variant_ghost-disabled_true, .seed-checkmark__icon--variant_ghost-checked_true-disabled_true, .seed-checkmark__icon--variant_ghost-indeterminate_true-disabled_true {
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-checkmark__background--variant_ghost-pressed_true-disabled_false {
+  opacity: 1;
+}
+
 .seed-checkmark__root--variant_square-pressed_true-checked_false-indeterminate_false-disabled_false {
   background-color: var(--seed-color-bg-transparent-pressed);
 }
@@ -1693,16 +2119,228 @@ text {
   background-color: var(--seed-color-bg-neutral-inverted-pressed);
 }
 
-.seed-checkmark__root--variant_ghost-pressed_true-checked_false-indeterminate_false-disabled_false {
-  background-color: var(--seed-color-bg-transparent-pressed);
+.seed-chip__root {
+  border-radius: var(--seed-radius-full);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  border: none;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
 }
 
-.seed-checkmark__root--variant_ghost-tone_brand-pressed_true-checked_true-disabled_false {
-  background-color: var(--seed-color-palette-carrot-200);
+.seed-chip__label {
+  font-weight: var(--seed-font-weight-medium);
+  padding-left: var(--seed-dimension-x1_5);
+  padding-right: var(--seed-dimension-x1_5);
+  white-space: nowrap;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
-.seed-checkmark__root--variant_ghost-tone_neutral-pressed_true-checked_true-disabled_false {
-  background-color: var(--seed-color-palette-gray-200);
+.seed-chip__prefixIcon {
+  margin-left: var(--seed-dimension-x1_5);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-chip__prefixAvatar {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-chip__suffixIcon {
+  margin-right: var(--seed-dimension-x1_5);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-chip__icon {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-chip__root--variant_solid {
+  background: var(--seed-color-bg-neutral-weak-alpha);
+}
+
+.seed-chip__label--variant_solid, .seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid, .seed-chip__icon--variant_solid {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong {
+  background: var(--seed-color-bg-transparent);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-chip__label--variant_outlineStrong, .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong, .seed-chip__icon--variant_outlineStrong {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak {
+  background: var(--seed-color-bg-transparent);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-chip__label--variant_outlineWeak, .seed-chip__prefixIcon--variant_outlineWeak, .seed-chip__suffixIcon--variant_outlineWeak, .seed-chip__icon--variant_outlineWeak {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--size_small {
+  height: 32px;
+  padding-left: var(--seed-dimension-x1_5);
+  padding-right: var(--seed-dimension-x1_5);
+}
+
+.seed-chip__label--size_small {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_small {
+  width: var(--seed-dimension-x3_5);
+  height: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__prefixAvatar--size_small {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+}
+
+.seed-chip__suffixIcon--size_small, .seed-chip__icon--size_small {
+  width: var(--seed-dimension-x3_5);
+  height: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__root--size_medium {
+  height: 36px;
+  padding-left: var(--seed-dimension-x2);
+  padding-right: var(--seed-dimension-x2);
+}
+
+.seed-chip__label--size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
+.seed-chip__prefixAvatar--size_medium {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+}
+
+.seed-chip__suffixIcon--size_medium {
+  width: var(--seed-dimension-x3_5);
+  height: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__icon--size_medium {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
+.seed-chip__root--size_large {
+  height: 40px;
+  padding-left: var(--seed-dimension-x2_5);
+  padding-right: var(--seed-dimension-x2_5);
+}
+
+.seed-chip__label--size_large {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_large {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+  margin-left: var(--seed-dimension-x1_5);
+}
+
+.seed-chip__prefixAvatar--size_large {
+  width: var(--seed-dimension-x7);
+  height: var(--seed-dimension-x7);
+}
+
+.seed-chip__suffixIcon--size_large, .seed-chip__icon--size_large {
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
+}
+
+.seed-chip__root--disabled_true {
+  opacity: .5;
+}
+
+.seed-chip__root--size_small-layout_withText {
+  min-width: 44px;
+}
+
+.seed-chip__root--size_medium-layout_withText {
+  min-width: var(--seed-dimension-x12);
+}
+
+.seed-chip__root--size_large-layout_withText {
+  min-width: var(--seed-dimension-x13);
+}
+
+.seed-chip__root--size_small-layout_iconOnly {
+  min-width: var(--seed-dimension-x8);
+}
+
+.seed-chip__root--size_medium-layout_iconOnly {
+  min-width: var(--seed-dimension-x9);
+}
+
+.seed-chip__root--size_large-layout_iconOnly {
+  min-width: var(--seed-dimension-x10);
+}
+
+.seed-chip__root--variant_solid-selected_true {
+  background: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-chip__label--variant_solid-selected_true, .seed-chip__prefixIcon--variant_solid-selected_true, .seed-chip__suffixIcon--variant_solid-selected_true, .seed-chip__icon--variant_solid-selected_true {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineStrong-selected_true {
+  background: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-chip__label--variant_outlineStrong-selected_true, .seed-chip__prefixIcon--variant_outlineStrong-selected_true, .seed-chip__suffixIcon--variant_outlineStrong-selected_true, .seed-chip__icon--variant_outlineStrong-selected_true {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineWeak-selected_true {
+  background: var(--seed-color-bg-neutral-weak);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
+}
+
+.seed-chip__root--variant_solid-pressed_true-selected_false {
+  background: var(--seed-color-bg-neutral-weak-alpha-pressed);
+}
+
+.seed-chip__root--variant_outlineStrong-pressed_true-selected_false, .seed-chip__root--variant_outlineWeak-pressed_true-selected_false {
+  background: var(--seed-color-bg-transparent-pressed);
+}
+
+.seed-chip__root--variant_solid-selected_true-pressed_true, .seed-chip__root--variant_outlineStrong-selected_true-pressed_true {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+}
+
+.seed-chip__root--variant_outlineWeak-selected_true-pressed_true {
+  background: var(--seed-color-bg-neutral-weak-pressed);
 }
 
 .seed-field__root {
@@ -2182,6 +2820,166 @@ text {
   color: var(--seed-color-fg-brand);
 }
 
+.seed-tabs__root {
+  position: relative;
+}
+
+.seed-tabs__list {
+  background-color: var(--seed-color-bg-layer-default);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--seed-color-stroke-neutral-muted);
+  position: relative;
+}
+
+.seed-tabs__listContent {
+  flex-flow: row;
+  align-items: stretch;
+  width: max-content;
+  min-width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.seed-tabs__carousel {
+  display: flex;
+  overflow: hidden;
+}
+
+.seed-tabs__carouselCamera {
+  width: 100%;
+}
+
+.seed-tabs__content {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.seed-tabs__indicator {
+  height: 2px;
+  width: var(--tabs-indicator-width, 0px);
+  background-color: var(--seed-color-fg-neutral);
+  transform: translateX(var(--tabs-indicator-x, 0px));
+  transition-property: transform, width;
+  transition-duration: var(--seed-duration-d4);
+  transition-timing-function: var(--seed-timing-function-easing);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.seed-tabs__trigger {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.seed-tabs__triggerLabel {
+  white-space: nowrap;
+  color: var(--seed-color-fg-neutral-subtle);
+}
+
+.seed-tabs__listContent--triggerLayout_fill {
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.seed-tabs__indicator--triggerLayout_fill {
+  transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
+  width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
+}
+
+.seed-tabs__trigger--triggerLayout_fill {
+  flex: 1;
+}
+
+.seed-tabs__listContent--triggerLayout_hug {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
+
+.seed-tabs__indicator--triggerLayout_hug {
+  transform: translateX(calc(var(--tabs-indicator-x, 0px) + 0px));
+  width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px);
+}
+
+.seed-tabs__root--contentLayout_fill {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+}
+
+.seed-tabs__carousel--contentLayout_fill {
+  flex: 1;
+}
+
+.seed-tabs__carouselCamera--contentLayout_fill, .seed-tabs__content--contentLayout_fill {
+  height: 100%;
+}
+
+.seed-tabs__list--size_small {
+  min-height: 40px;
+}
+
+.seed-tabs__trigger--size_small {
+  min-height: 40px;
+  padding-left: var(--seed-dimension-x2_5);
+  padding-right: var(--seed-dimension-x2_5);
+  padding-top: var(--seed-dimension-x2_5);
+  padding-bottom: var(--seed-dimension-x2_5);
+}
+
+.seed-tabs__triggerLabel--size_small {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-tabs__list--size_medium {
+  min-height: 44px;
+}
+
+.seed-tabs__trigger--size_medium {
+  min-height: 44px;
+  padding-left: var(--seed-dimension-x2_5);
+  padding-right: var(--seed-dimension-x2_5);
+  padding-top: var(--seed-dimension-x2_5);
+  padding-bottom: var(--seed-dimension-x2_5);
+}
+
+.seed-tabs__triggerLabel--size_medium {
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-tabs__list--stickyList_true {
+  z-index: 1;
+  position: sticky;
+  top: 0;
+}
+
+.seed-tabs__triggerLabel--selected_true {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-tabs__content--selected_false {
+  display: none;
+}
+
+.seed-tabs__triggerLabel--disabled_true {
+  color: var(--seed-color-fg-disabled);
+}
+
+.seed-tabs__content--selected_false-inCarousel_true {
+  display: flex;
+}
+
 .seed-text-input__root {
   flex-direction: row;
   align-items: center;