@popsure/dirty-swan 20.0.11 → 27.0.2

package/dist/index.css

@@ -80,7 +80,11 @@ summary,
 time,
 mark,
 audio,
-video {
+video,
+input,
+select,
+button,
+textarea {
   margin: 0;
   padding: 0;
   border: 0;
@@ -139,6 +143,11 @@ input[type=number]::-webkit-outer-spin-button {
   margin: 0;
 }
 
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 .d-block {
   display: block !important;
 }
@@ -171,249 +180,1068 @@ input[type=number]::-webkit-outer-spin-button {
   display: none !important;
 }
 
-@media (max-width: 34rem) {
-  .p-body {
-    margin: 0 1rem;
-  }
-}
-@media (min-width: 34rem) {
-  .p-body {
-    margin: 0 1.5rem;
-  }
+.d-grid {
+  display: grid !important;
+}
+
+@media (max-width: 34rem) {
+  .p-body {
+    margin: 0 1rem;
+  }
+}
+@media (min-width: 34rem) {
+  .p-body {
+    margin: 0 1.5rem;
+  }
+}
+@media (min-width: 64rem) {
+  .p-body {
+    width: 56rem;
+    margin: 0 auto;
+  }
+}
+
+.p-container {
+  max-width: 928px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/** Shared values across align and justify properties */
+.ai-start {
+  align-items: flex-start;
+}
+
+.ai-end {
+  align-items: flex-end;
+}
+
+.ai-center {
+  align-items: center;
+}
+
+.ai-stretch {
+  align-items: stretch;
+}
+
+.ai-baseline {
+  align-items: baseline;
+}
+
+.jc-start {
+  justify-content: flex-start;
+}
+
+.jc-end {
+  justify-content: flex-end;
+}
+
+.jc-center {
+  justify-content: center;
+}
+
+.jc-between {
+  justify-content: space-between;
+}
+
+.jc-around {
+  justify-content: space-around;
+}
+
+.jc-evenly {
+  justify-content: space-evenly;
+}
+
+.fd-row {
+  flex-direction: row !important;
+}
+
+.fd-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.fd-column {
+  flex-direction: column !important;
+}
+
+.fd-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.f-wrap {
+  flex-wrap: wrap;
+}
+
+.f-nowrap {
+  flex-wrap: nowrap;
+}
+
+.m0 {
+  margin: 0px;
+}
+
+.p0 {
+  padding: 0px;
+}
+
+.m8 {
+  margin: 8px;
+}
+
+.p8 {
+  padding: 8px;
+}
+
+.m16 {
+  margin: 16px;
+}
+
+.p16 {
+  padding: 16px;
+}
+
+.m24 {
+  margin: 24px;
+}
+
+.p24 {
+  padding: 24px;
+}
+
+.m32 {
+  margin: 32px;
+}
+
+.p32 {
+  padding: 32px;
+}
+
+.m40 {
+  margin: 40px;
+}
+
+.p40 {
+  padding: 40px;
+}
+
+.m48 {
+  margin: 48px;
+}
+
+.p48 {
+  padding: 48px;
+}
+
+.m56 {
+  margin: 56px;
+}
+
+.p56 {
+  padding: 56px;
+}
+
+.m64 {
+  margin: 64px;
+}
+
+.p64 {
+  padding: 64px;
+}
+
+.m72 {
+  margin: 72px;
+}
+
+.p72 {
+  padding: 72px;
+}
+
+.m80 {
+  margin: 80px;
+}
+
+.p80 {
+  padding: 80px;
+}
+
+.m88 {
+  margin: 88px;
+}
+
+.p88 {
+  padding: 88px;
+}
+
+.m96 {
+  margin: 96px;
+}
+
+.p96 {
+  padding: 96px;
+}
+
+.mx0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.px0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.mx8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.px8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.mx16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.px16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.mx24 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.px24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.mx32 {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.px32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.mx40 {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.px40 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.mx48 {
+  margin-left: 48px;
+  margin-right: 48px;
+}
+
+.px48 {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+
+.mx56 {
+  margin-left: 56px;
+  margin-right: 56px;
+}
+
+.px56 {
+  padding-left: 56px;
+  padding-right: 56px;
+}
+
+.mx64 {
+  margin-left: 64px;
+  margin-right: 64px;
+}
+
+.px64 {
+  padding-left: 64px;
+  padding-right: 64px;
+}
+
+.mx72 {
+  margin-left: 72px;
+  margin-right: 72px;
+}
+
+.px72 {
+  padding-left: 72px;
+  padding-right: 72px;
+}
+
+.mx80 {
+  margin-left: 80px;
+  margin-right: 80px;
+}
+
+.px80 {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+
+.mx88 {
+  margin-left: 88px;
+  margin-right: 88px;
+}
+
+.px88 {
+  padding-left: 88px;
+  padding-right: 88px;
+}
+
+.mx96 {
+  margin-left: 96px;
+  margin-right: 96px;
+}
+
+.px96 {
+  padding-left: 96px;
+  padding-right: 96px;
+}
+
+.my0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.py0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.my8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.py8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.my16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.py16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.my24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.py24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.my32 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.py32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.my40 {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.py40 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.my48 {
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+
+.py48 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+
+.my56 {
+  margin-top: 56px;
+  margin-bottom: 56px;
+}
+
+.py56 {
+  padding-top: 56px;
+  padding-bottom: 56px;
+}
+
+.my64 {
+  margin-top: 64px;
+  margin-bottom: 64px;
+}
+
+.py64 {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+
+.my72 {
+  margin-top: 72px;
+  margin-bottom: 72px;
+}
+
+.py72 {
+  padding-top: 72px;
+  padding-bottom: 72px;
+}
+
+.my80 {
+  margin-top: 80px;
+  margin-bottom: 80px;
+}
+
+.py80 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.my88 {
+  margin-top: 88px;
+  margin-bottom: 88px;
+}
+
+.py88 {
+  padding-top: 88px;
+  padding-bottom: 88px;
+}
+
+.my96 {
+  margin-top: 96px;
+  margin-bottom: 96px;
+}
+
+.py96 {
+  padding-top: 96px;
+  padding-bottom: 96px;
+}
+
+.mt0 {
+  margin-top: 0px;
+}
+
+.pt0 {
+  padding-top: 0px;
+}
+
+.mt8 {
+  margin-top: 8px;
+}
+
+.pt8 {
+  padding-top: 8px;
+}
+
+.mt16 {
+  margin-top: 16px;
+}
+
+.pt16 {
+  padding-top: 16px;
+}
+
+.mt24 {
+  margin-top: 24px;
+}
+
+.pt24 {
+  padding-top: 24px;
+}
+
+.mt32 {
+  margin-top: 32px;
+}
+
+.pt32 {
+  padding-top: 32px;
+}
+
+.mt40 {
+  margin-top: 40px;
+}
+
+.pt40 {
+  padding-top: 40px;
+}
+
+.mt48 {
+  margin-top: 48px;
+}
+
+.pt48 {
+  padding-top: 48px;
+}
+
+.mt56 {
+  margin-top: 56px;
+}
+
+.pt56 {
+  padding-top: 56px;
+}
+
+.mt64 {
+  margin-top: 64px;
+}
+
+.pt64 {
+  padding-top: 64px;
+}
+
+.mt72 {
+  margin-top: 72px;
+}
+
+.pt72 {
+  padding-top: 72px;
+}
+
+.mt80 {
+  margin-top: 80px;
+}
+
+.pt80 {
+  padding-top: 80px;
+}
+
+.mt88 {
+  margin-top: 88px;
+}
+
+.pt88 {
+  padding-top: 88px;
+}
+
+.mt96 {
+  margin-top: 96px;
+}
+
+.pt96 {
+  padding-top: 96px;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mb0 {
+  margin-bottom: 0px;
+}
+
+.pb0 {
+  padding-bottom: 0px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.pb8 {
+  padding-bottom: 8px;
+}
+
+.mb16 {
+  margin-bottom: 16px;
+}
+
+.pb16 {
+  padding-bottom: 16px;
+}
+
+.mb24 {
+  margin-bottom: 24px;
+}
+
+.pb24 {
+  padding-bottom: 24px;
+}
+
+.mb32 {
+  margin-bottom: 32px;
+}
+
+.pb32 {
+  padding-bottom: 32px;
+}
+
+.mb40 {
+  margin-bottom: 40px;
+}
+
+.pb40 {
+  padding-bottom: 40px;
+}
+
+.mb48 {
+  margin-bottom: 48px;
+}
+
+.pb48 {
+  padding-bottom: 48px;
+}
+
+.mb56 {
+  margin-bottom: 56px;
+}
+
+.pb56 {
+  padding-bottom: 56px;
+}
+
+.mb64 {
+  margin-bottom: 64px;
+}
+
+.pb64 {
+  padding-bottom: 64px;
+}
+
+.mb72 {
+  margin-bottom: 72px;
+}
+
+.pb72 {
+  padding-bottom: 72px;
+}
+
+.mb80 {
+  margin-bottom: 80px;
+}
+
+.pb80 {
+  padding-bottom: 80px;
+}
+
+.mb88 {
+  margin-bottom: 88px;
+}
+
+.pb88 {
+  padding-bottom: 88px;
+}
+
+.mb96 {
+  margin-bottom: 96px;
+}
+
+.pb96 {
+  padding-bottom: 96px;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml0 {
+  margin-left: 0px;
+}
+
+.pl0 {
+  padding-left: 0px;
+}
+
+.ml8 {
+  margin-left: 8px;
+}
+
+.pl8 {
+  padding-left: 8px;
+}
+
+.ml16 {
+  margin-left: 16px;
+}
+
+.pl16 {
+  padding-left: 16px;
+}
+
+.ml24 {
+  margin-left: 24px;
+}
+
+.pl24 {
+  padding-left: 24px;
+}
+
+.ml32 {
+  margin-left: 32px;
+}
+
+.pl32 {
+  padding-left: 32px;
+}
+
+.ml40 {
+  margin-left: 40px;
+}
+
+.pl40 {
+  padding-left: 40px;
+}
+
+.ml48 {
+  margin-left: 48px;
+}
+
+.pl48 {
+  padding-left: 48px;
+}
+
+.ml56 {
+  margin-left: 56px;
+}
+
+.pl56 {
+  padding-left: 56px;
+}
+
+.ml64 {
+  margin-left: 64px;
+}
+
+.pl64 {
+  padding-left: 64px;
+}
+
+.ml72 {
+  margin-left: 72px;
+}
+
+.pl72 {
+  padding-left: 72px;
+}
+
+.ml80 {
+  margin-left: 80px;
+}
+
+.pl80 {
+  padding-left: 80px;
+}
+
+.ml88 {
+  margin-left: 88px;
+}
+
+.pl88 {
+  padding-left: 88px;
+}
+
+.ml96 {
+  margin-left: 96px;
+}
+
+.pl96 {
+  padding-left: 96px;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr0 {
+  margin-right: 0px;
+}
+
+.pr0 {
+  padding-right: 0px;
+}
+
+.mr8 {
+  margin-right: 8px;
+}
+
+.pr8 {
+  padding-right: 8px;
+}
+
+.mr16 {
+  margin-right: 16px;
+}
+
+.pr16 {
+  padding-right: 16px;
+}
+
+.mr24 {
+  margin-right: 24px;
+}
+
+.pr24 {
+  padding-right: 24px;
+}
+
+.mr32 {
+  margin-right: 32px;
+}
+
+.pr32 {
+  padding-right: 32px;
+}
+
+.mr40 {
+  margin-right: 40px;
 }
-@media (min-width: 64rem) {
-  .p-body {
-    width: 56rem;
-    margin: 0 auto;
-  }
+
+.pr40 {
+  padding-right: 40px;
 }
 
-.mt0 {
-  margin-top: 0px;
+.mr48 {
+  margin-right: 48px;
 }
 
-.mt8 {
-  margin-top: 8px;
+.pr48 {
+  padding-right: 48px;
 }
 
-.mt16 {
-  margin-top: 16px;
+.mr56 {
+  margin-right: 56px;
 }
 
-.mt24 {
-  margin-top: 24px;
+.pr56 {
+  padding-right: 56px;
 }
 
-.mt32 {
-  margin-top: 32px;
+.mr64 {
+  margin-right: 64px;
 }
 
-.mt40 {
-  margin-top: 40px;
+.pr64 {
+  padding-right: 64px;
 }
 
-.mt48 {
-  margin-top: 48px;
+.mr72 {
+  margin-right: 72px;
 }
 
-.mt56 {
-  margin-top: 56px;
+.pr72 {
+  padding-right: 72px;
 }
 
-.mt64 {
-  margin-top: 64px;
+.mr80 {
+  margin-right: 80px;
 }
 
-.mt72 {
-  margin-top: 72px;
+.pr80 {
+  padding-right: 80px;
 }
 
-.mt80 {
-  margin-top: 80px;
+.mr88 {
+  margin-right: 88px;
 }
 
-.mt88 {
-  margin-top: 88px;
+.pr88 {
+  padding-right: 88px;
 }
 
-.mt96 {
-  margin-top: 96px;
+.mr96 {
+  margin-right: 96px;
 }
 
-.mb0 {
-  margin-bottom: 0px;
+.pr96 {
+  padding-right: 96px;
 }
 
-.mb8 {
-  margin-bottom: 8px;
+.mr-auto {
+  margin-right: auto;
 }
 
-.mb16 {
-  margin-bottom: 16px;
+.m-auto {
+  margin: auto;
 }
 
-.mb24 {
-  margin-bottom: 24px;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.mb32 {
-  margin-bottom: 32px;
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
-.mb40 {
-  margin-bottom: 40px;
+.gap0 {
+  gap: 0px;
 }
 
-.mb48 {
-  margin-bottom: 48px;
+.c-gap0 {
+  column-gap: 0px;
 }
 
-.mb56 {
-  margin-bottom: 56px;
+.r-gap0 {
+  row-gap: 0px;
 }
 
-.mb64 {
-  margin-bottom: 64px;
+.gap8 {
+  gap: 8px;
 }
 
-.mb72 {
-  margin-bottom: 72px;
+.c-gap8 {
+  column-gap: 8px;
 }
 
-.mb80 {
-  margin-bottom: 80px;
+.r-gap8 {
+  row-gap: 8px;
 }
 
-.mb88 {
-  margin-bottom: 88px;
+.gap16 {
+  gap: 16px;
 }
 
-.mb96 {
-  margin-bottom: 96px;
+.c-gap16 {
+  column-gap: 16px;
 }
 
-.mr0 {
-  margin-right: 0px;
+.r-gap16 {
+  row-gap: 16px;
 }
 
-.mr8 {
-  margin-right: 8px;
+.gap24 {
+  gap: 24px;
 }
 
-.mr16 {
-  margin-right: 16px;
+.c-gap24 {
+  column-gap: 24px;
 }
 
-.mr24 {
-  margin-right: 24px;
+.r-gap24 {
+  row-gap: 24px;
 }
 
-.mr32 {
-  margin-right: 32px;
+.gap32 {
+  gap: 32px;
 }
 
-.mr40 {
-  margin-right: 40px;
+.c-gap32 {
+  column-gap: 32px;
 }
 
-.mr48 {
-  margin-right: 48px;
+.r-gap32 {
+  row-gap: 32px;
 }
 
-.mr56 {
-  margin-right: 56px;
+.gap40 {
+  gap: 40px;
 }
 
-.mr64 {
-  margin-right: 64px;
+.c-gap40 {
+  column-gap: 40px;
 }
 
-.mr72 {
-  margin-right: 72px;
+.r-gap40 {
+  row-gap: 40px;
 }
 
-.mr80 {
-  margin-right: 80px;
+.gap48 {
+  gap: 48px;
 }
 
-.mr88 {
-  margin-right: 88px;
+.c-gap48 {
+  column-gap: 48px;
 }
 
-.mr96 {
-  margin-right: 96px;
+.r-gap48 {
+  row-gap: 48px;
 }
 
-.ml0 {
-  margin-left: 0px;
+.gap56 {
+  gap: 56px;
 }
 
-.ml8 {
-  margin-left: 8px;
+.c-gap56 {
+  column-gap: 56px;
 }
 
-.ml16 {
-  margin-left: 16px;
+.r-gap56 {
+  row-gap: 56px;
 }
 
-.ml24 {
-  margin-left: 24px;
+.gap64 {
+  gap: 64px;
 }
 
-.ml32 {
-  margin-left: 32px;
+.c-gap64 {
+  column-gap: 64px;
 }
 
-.ml40 {
-  margin-left: 40px;
+.r-gap64 {
+  row-gap: 64px;
 }
 
-.ml48 {
-  margin-left: 48px;
+.gap72 {
+  gap: 72px;
 }
 
-.ml56 {
-  margin-left: 56px;
+.c-gap72 {
+  column-gap: 72px;
 }
 
-.ml64 {
-  margin-left: 64px;
+.r-gap72 {
+  row-gap: 72px;
 }
 
-.ml72 {
-  margin-left: 72px;
+.gap80 {
+  gap: 80px;
 }
 
-.ml80 {
-  margin-left: 80px;
+.c-gap80 {
+  column-gap: 80px;
 }
 
-.ml88 {
-  margin-left: 88px;
+.r-gap80 {
+  row-gap: 80px;
 }
 
-.ml96 {
-  margin-left: 96px;
+.gap88 {
+  gap: 88px;
 }
 
-.m-auto {
-  margin: auto;
+.c-gap88 {
+  column-gap: 88px;
 }
 
-.mt-auto {
-  margin-top: auto;
+.r-gap88 {
+  row-gap: 88px;
 }
 
-.mb-auto {
-  margin-bottom: auto;
+.gap96 {
+  gap: 96px;
 }
 
-.mr-auto {
-  margin-right: auto;
+.c-gap96 {
+  column-gap: 96px;
 }
 
-.ml-auto {
-  margin-left: auto;
+.r-gap96 {
+  row-gap: 96px;
 }
 
 .ws1 {
@@ -608,6 +1436,14 @@ input[type=number]::-webkit-outer-spin-button {
   width: 100%;
 }
 
+.tc-white {
+  color: #fff !important;
+}
+
+.tc-transparent {
+  color: transparent !important;
+}
+
 .tc-blue-100 {
   color: #e5f0ff !important;
 }
@@ -752,6 +1588,66 @@ input[type=number]::-webkit-outer-spin-button {
   color: #354a2d !important;
 }
 
+.tc-glacier-100 {
+  color: #e0f7fe !important;
+}
+
+.tc-glacier-300 {
+  color: #aeddec !important;
+}
+
+.tc-glacier-500 {
+  color: #8bcbdf !important;
+}
+
+.tc-glacier-700 {
+  color: #5d8896 !important;
+}
+
+.tc-glacier-900 {
+  color: #2d4148 !important;
+}
+
+.tc-spearmint-100 {
+  color: #e3fff2 !important;
+}
+
+.tc-spearmint-300 {
+  color: #aaeacc !important;
+}
+
+.tc-spearmint-500 {
+  color: #85dcb4 !important;
+}
+
+.tc-spearmint-700 {
+  color: #599278 !important;
+}
+
+.tc-spearmint-900 {
+  color: #2b4639 !important;
+}
+
+.tc-pink-100 {
+  color: #ffebf1 !important;
+}
+
+.tc-pink-300 {
+  color: #ffb1cb !important;
+}
+
+.tc-pink-500 {
+  color: #f96092 !important;
+}
+
+.tc-pink-700 {
+  color: #c0305f !important;
+}
+
+.tc-pink-900 {
+  color: #700024 !important;
+}
+
 .tc-yellow-100 {
   color: #fff8e3 !important;
 }
@@ -772,6 +1668,14 @@ input[type=number]::-webkit-outer-spin-button {
   color: #4a3d10 !important;
 }
 
+.bg-white {
+  background-color: #fff !important;
+}
+
+.bg-transparent {
+  background-color: transparent !important;
+}
+
 .bg-blue-100 {
   background-color: #e5f0ff !important;
 }
@@ -916,6 +1820,66 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #354a2d !important;
 }
 
+.bg-glacier-100 {
+  background-color: #e0f7fe !important;
+}
+
+.bg-glacier-300 {
+  background-color: #aeddec !important;
+}
+
+.bg-glacier-500 {
+  background-color: #8bcbdf !important;
+}
+
+.bg-glacier-700 {
+  background-color: #5d8896 !important;
+}
+
+.bg-glacier-900 {
+  background-color: #2d4148 !important;
+}
+
+.bg-spearmint-100 {
+  background-color: #e3fff2 !important;
+}
+
+.bg-spearmint-300 {
+  background-color: #aaeacc !important;
+}
+
+.bg-spearmint-500 {
+  background-color: #85dcb4 !important;
+}
+
+.bg-spearmint-700 {
+  background-color: #599278 !important;
+}
+
+.bg-spearmint-900 {
+  background-color: #2b4639 !important;
+}
+
+.bg-pink-100 {
+  background-color: #ffebf1 !important;
+}
+
+.bg-pink-300 {
+  background-color: #ffb1cb !important;
+}
+
+.bg-pink-500 {
+  background-color: #f96092 !important;
+}
+
+.bg-pink-700 {
+  background-color: #c0305f !important;
+}
+
+.bg-pink-900 {
+  background-color: #700024 !important;
+}
+
 .bg-yellow-100 {
   background-color: #fff8e3 !important;
 }
@@ -937,6 +1901,8 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 :root {
+  --ds-white: #fff;
+  --ds-transparent: transparent;
   --ds-blue-100: #e5f0ff;
   --ds-blue-300: #b0cdf3;
   --ds-blue-500: #8bb4ea;
@@ -973,6 +1939,21 @@ input[type=number]::-webkit-outer-spin-button {
   --ds-green-500: #84de8a;
   --ds-green-700: #5b985f;
   --ds-green-900: #354a2d;
+  --ds-glacier-100: #e0f7fe;
+  --ds-glacier-300: #aeddec;
+  --ds-glacier-500: #8bcbdf;
+  --ds-glacier-700: #5d8896;
+  --ds-glacier-900: #2d4148;
+  --ds-spearmint-100: #e3fff2;
+  --ds-spearmint-300: #aaeacc;
+  --ds-spearmint-500: #85dcb4;
+  --ds-spearmint-700: #599278;
+  --ds-spearmint-900: #2b4639;
+  --ds-pink-100: #ffebf1;
+  --ds-pink-300: #ffb1cb;
+  --ds-pink-500: #f96092;
+  --ds-pink-700: #c0305f;
+  --ds-pink-900: #700024;
   --ds-yellow-100: #fff8e3;
   --ds-yellow-300: #fae3a5;
   --ds-yellow-500: #f7ce5c;
@@ -1083,6 +2064,11 @@ body {
 .p-a:hover, .p-a:focus {
   color: #6160a2;
 }
+.p-a:focus-visible {
+  outline: 2px solid #26262e;
+  border-radius: 2px;
+  outline-offset: 2px;
+}
 
 .ta-left {
   text-align: left;
@@ -1140,6 +2126,42 @@ body {
   cursor: help;
 }
 
+.br0 {
+  border-radius: 0px;
+}
+
+.br2 {
+  border-radius: 2px;
+}
+
+.br4 {
+  border-radius: 4px;
+}
+
+.br8 {
+  border-radius: 8px;
+}
+
+.br12 {
+  border-radius: 12px;
+}
+
+.br16 {
+  border-radius: 16px;
+}
+
+.br24 {
+  border-radius: 24px;
+}
+
+.br-circle {
+  border-radius: 50%;
+}
+
+.br-pill {
+  border-radius: 999px;
+}
+
 @keyframes spinner-rotate {
   from {
     transform: rotate(0deg);
@@ -1149,14 +2171,14 @@ body {
   }
 }
 .p-btn, .p-btn--outline-grey, .p-btn--outline, .p-btn--danger, .p-btn--secondary, .p-btn--primary {
-  position: relative;
   display: inline-block;
+  position: relative;
   cursor: pointer;
   height: 48px;
-  padding: 0 16px;
+  padding: 12px 24px;
+  line-height: 24px;
   font-size: 16px;
   font-family: inherit;
-  line-height: 48px;
   letter-spacing: 0.5px;
   text-decoration: none;
   text-align: center;
@@ -1313,6 +2335,10 @@ body {
 .p-input--error {
   border: 1px solid #e55454;
 }
+.p-input--error:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #e55454;
+}
 .p-input input, .p-input--error input {
   position: absolute;
   opacity: 0;
@@ -1348,9 +2374,7 @@ body {
 
 .p-radio:checked + label::before {
   border-color: #8e8cee;
-  background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="%238e8cee" /></svg>');
-  background-repeat: no-repeat;
-  background-position: center;
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="%238e8cee"/></svg>');
 }
 
 .p-checkbox + label::before {
@@ -1453,12 +2477,12 @@ input:checked[type=checkbox] + .p-label--bordered {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.p-notice, .p-notice--warning, .p-notice--danger, .p-notice--info {
+.p-notice, .p-notice--info, .p-notice--success, .p-notice--warning, .p-notice--danger, .p-notice--primary {
   padding: 8px 16px;
   border: 1px solid;
   border-radius: 8px;
 }
-.p-notice--info {
+.p-notice--primary {
   background-color: #e6e5ff;
   border-color: #8e8cee;
   color: #26262e;
@@ -1472,6 +2496,14 @@ input:checked[type=checkbox] + .p-label--bordered {
   background-color: #fff8e3;
   border-color: #f7ce5c;
 }
+.p-notice--success {
+  background-color: #e4ffe6;
+  border-color: #84de8a;
+}
+.p-notice--info {
+  background-color: #e5f0ff;
+  border-color: #8bb4ea;
+}
 
 .p-badge, .p-badge--info, .p-badge--danger, .p-badge--inactive, .p-badge--pending, .p-badge--active {
   display: inline-block;