@primer/react-brand 0.3.1 → 0.4.0-rc.420e2e9

package/lib/css/main.css

@@ -91,7 +91,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -897,7 +897,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -922,7 +922,22 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
+ */
+
+:root {
+  --base-text-weight-heavy: 900;
+  --base-text-weight-extrabold: 800;
+  --base-text-weight-bold: 700;
+  --base-text-weight-semibold: 600;
+  --base-text-weight-medium: 500;
+  --base-text-weight-normal: 400;
+  --base-text-weight-light: 300;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -1101,7 +1116,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 :root {
@@ -1115,7 +1130,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 :root {
@@ -1133,10 +1148,18 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
+  --brand-color-success-fg: var(--base-color-scale-green-5);
+  --brand-color-success-emphasis: var(--base-color-scale-green-4);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+  --brand-color-success-subtle: var(--base-color-scale-green-0);
+  --brand-color-error-fg: var(--base-color-scale-red-5);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+  --brand-color-error-subtle: var(--base-color-scale-red-0);
   --brand-color-accent-fg: var(--base-color-scale-pink-5);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
@@ -1160,6 +1183,14 @@ select {
 }
 
 [data-color-mode="light"] {
+  --brand-color-success-fg: var(--base-color-scale-green-5);
+  --brand-color-success-emphasis: var(--base-color-scale-green-4);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+  --brand-color-success-subtle: var(--base-color-scale-green-0);
+  --brand-color-error-fg: var(--base-color-scale-red-5);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+  --brand-color-error-subtle: var(--base-color-scale-red-0);
   --brand-color-accent-fg: var(--base-color-scale-pink-5);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
@@ -1183,6 +1214,14 @@ select {
 }
 
 [data-color-mode="dark"] {
+  --brand-color-success-fg: var(--base-color-scale-green-3);
+  --brand-color-success-emphasis: var(--base-color-scale-green-5);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-4-hsl) / 60%);
+  --brand-color-success-subtle: hsl(var(--base-color-scale-green-4-hsl) / 85%);
+  --brand-color-error-fg: var(--base-color-scale-red-4);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
+  --brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
   --brand-color-accent-fg: var(--base-color-scale-pink-3);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);
@@ -1335,7 +1374,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -1474,7 +1513,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 :root {
@@ -1484,7 +1523,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 :root {
@@ -1607,7 +1646,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -1716,7 +1755,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -1872,7 +1911,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
  */
 
 :root {
@@ -1882,7 +1921,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
  */
 
 :root {
@@ -1953,3 +1992,733 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   }
 }
 
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:23 GMT
+ */
+
+:root {
+  --brand-control-animation-easing: cubic-bezier(0.33, 1, 0.68, 1);
+  --brand-control-animation-duration: 80ms;
+  --brand-control-border-radius: var(--brand-borderRadius-medium);
+  --brand-control-large-fontSize: var(--brand-text-size-300);
+  --brand-control-large-fontWeight: var(--brand-text-weight-300);
+  --brand-control-large-padding: var(--base-size-12);
+  --brand-control-large-size: var(--base-size-48);
+  --brand-control-medium-fontSize: var(--brand-text-size-200);
+  --brand-control-medium-fontWeight: var(--brand-text-weight-200);
+  --brand-control-medium-padding: 0.625rem;
+  --brand-control-medium-size: 2.5rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 12 Sep 2022 10:04:24 GMT
+ */
+
+:root {
+  --brand-control-color-border-default: var(--base-color-scale-gray-4);
+  --brand-control-color-border-disabled: var(--base-color-scale-gray-2);
+  --brand-control-color-canvas-disabled: var(--base-color-scale-gray-1);
+  --brand-control-color-fg-default: var(--brand-color-text-default);
+  --brand-control-color-fg-disabled: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-bg-default: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1);
+  --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-border-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2);
+}
+
+[data-color-mode="light"] {
+  --brand-control-color-border-default: var(--base-color-scale-gray-4);
+  --brand-control-color-border-disabled: var(--base-color-scale-gray-2);
+  --brand-control-color-canvas-disabled: var(--base-color-scale-gray-1);
+  --brand-control-color-fg-default: var(--brand-color-text-default);
+  --brand-control-color-fg-disabled: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-bg-default: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1);
+  --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-border-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2);
+}
+
+[data-color-mode="dark"] {
+  --brand-control-color-border-default: var(--base-color-scale-gray-4);
+  --brand-control-color-border-disabled: var(--base-color-scale-gray-5);
+  --brand-control-color-canvas-disabled: var(--base-color-scale-gray-8);
+  --brand-control-color-fg-default: var(--brand-color-text-default);
+  --brand-control-color-fg-disabled: var(--base-color-scale-gray-5);
+  --brand-control-checkbox-bg-default: var(--base-color-scale-gray-7);
+  --brand-control-checkbox-bg-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-fg-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-border-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-indeterminate: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4);
+}
+
+/*
+ * Default Checkbox styles
+ */
+.Primer_Brand__Checkbox-module__Checkbox-wrapper___qo8KL {
+  position: relative;
+}
+
+.Primer_Brand__Checkbox-module__Checkbox___T8FJa {
+  align-items: center;
+  background-color: var(--brand-control-checkbox-bg-default);
+  border: solid 1px var(--brand-control-color-border-default);
+  border: solid var(--brand-borderWidth-normal, 1px) var(--brand-control-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  cursor: pointer;
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  margin: 3px 0; /* mimic default browser-applied vertical margin */
+  transition: all 0.35s ease-out;
+  width: 20px;
+  outline: 1px solid var(--brand-control-checkbox-bg-default);
+  box-shadow: 0 0 0 3px transparent;
+}
+
+/**
+ * Checkbox native input - visually hidden
+ */
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.Primer_Brand__Checkbox-module__Checkbox-checkmark___atiwt {
+  height: 16px;
+  width: 16px;
+}
+
+.Primer_Brand__Checkbox-module__Checkbox-checkmark-path___qgsjb {
+  stroke: var(--brand-color-focus);
+  stroke-dashoffset: 111.46px;
+  stroke-dasharray: 111.46px;
+  transition: all 350ms var(--brand-control-animation-easing);
+}
+
+/*
+* Checked state
+*/
+
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s:checked + .Primer_Brand__Checkbox-module__Checkbox___T8FJa,
+.Primer_Brand__Checkbox-module__Checkbox--indeterminate___U5S6k {
+  background: var(--brand-control-checkbox-bg-checked);
+  border-color: var(--brand-control-checkbox-border-checked);
+}
+
+.Primer_Brand__Checkbox-module__Checkbox--indeterminate___U5S6k .Primer_Brand__Checkbox-module__Checkbox-checkmark___atiwt {
+  fill: var(--brand-control-checkbox-fg-checked);
+}
+
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s:checked + .Primer_Brand__Checkbox-module__Checkbox___T8FJa .Primer_Brand__Checkbox-module__Checkbox-checkmark-path___qgsjb,
+.Primer_Brand__Checkbox-module__Checkbox--indeterminate___U5S6k .Primer_Brand__Checkbox-module__Checkbox-checkmark-path___qgsjb {
+  stroke: var(--brand-control-checkbox-fg-checked);
+  stroke-dashoffset: 0;
+}
+
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s:focus + .Primer_Brand__Checkbox-module__Checkbox___T8FJa {
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+}
+
+/* TODO: Check with a11y team */
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s:checked:focus + .Primer_Brand__Checkbox-module__Checkbox___T8FJa,
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s:focus + .Primer_Brand__Checkbox-module__Checkbox--indeterminate___U5S6k {
+  border-color: var(--brand-control-checkbox-border-checked);
+}
+
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s[disabled] + .Primer_Brand__Checkbox-module__Checkbox___T8FJa,
+.Primer_Brand__Checkbox-module__Checkbox-input___sux6s[disabled]:checked + .Primer_Brand__Checkbox-module__Checkbox___T8FJa {
+  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
+  color: var(--brand-control-color-fg-disabled);
+  cursor: not-allowed;
+  background-color: var(--brand-control-checkbox-bg-disabled);
+  border-color: var(--brand-control-color-border-disabled);
+  opacity: 1;
+}
+
+/*
+ * Default TextInput styles
+ */
+.Primer_Brand__TextInput-module__TextInput___EtKj3 {
+  display: flex;
+  color: var(--brand-control-color-fg-default);
+  background-color: var(--brand-color-canvas-default);
+  border: none;
+  border-radius: var(--brand-control-border-radius);
+  line-height: var(--brand-text-lineHeight-200);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: color, background-color, box-shadow;
+}
+
+.Primer_Brand__TextInput-module__TextInput___EtKj3::-moz-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__TextInput-module__TextInput___EtKj3:-ms-input-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__TextInput-module__TextInput___EtKj3::placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__TextInput-module__TextInput___EtKj3[disabled] {
+  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
+  color: var(--brand-control-color-fg-disabled);
+  cursor: not-allowed;
+  background-color: var(--brand-control-color-canvas-disabled);
+  opacity: 1;
+}
+
+.Primer_Brand__TextInput-module__TextInput___EtKj3:focus {
+  outline: none;
+}
+
+/*
+ * Sizes
+ */
+.Primer_Brand__TextInput-module__TextInput--medium___kJrew {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  height: 40px;
+  height: var(--brand-control-medium-size, 40px);
+  padding: 12px 10px 10px;
+  padding: var(--brand-control-medium-padding, 12px 10px 10px);
+}
+
+.Primer_Brand__TextInput-module__TextInput--large___zpUvY {
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  height: 48px;
+  height: var(--brand-control-large-size, 48px);
+  padding: 12px;
+  padding: var(--brand-control-large-padding, 12px);
+}
+
+/*
+ * Visual states
+ */
+.Primer_Brand__TextInput-module__TextInput--fullWidth___rbllM {
+  width: 100%;
+}
+
+/*
+ * TextInput wrapper
+ */
+
+.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___HWTx_ {
+  border-color: var(--brand-control-color-border-disabled);
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper___HgxNu {
+  font-family: var(--brand-body-fontFamily);
+  display: inline-flex;
+  position: relative;
+  border: solid 1px var(--brand-control-color-border-default);
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);
+  border-radius: var(--brand-control-border-radius);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: border;
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper--fullWidth___eclO4 {
+  display: flex;
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper--monospace___y1fd6 {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper___HgxNu[focus-within] {
+  border-color: var(--brand-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  outline: none;
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper___HgxNu:focus-within {
+  border-color: var(--brand-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  outline: none;
+}
+
+/*
+ * Validation
+ */
+
+.Primer_Brand__TextInput-module__TextInput-wrapper--success___g5ODK,
+.Primer_Brand__TextInput-module__TextInput-wrapper--success___g5ODK.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___HWTx_ {
+  border-color: var(--brand-color-success-fg);
+}
+
+.Primer_Brand__TextInput-module__TextInput-wrapper--error___V7qtN,
+.Primer_Brand__TextInput-module__TextInput-wrapper--error___V7qtN.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___HWTx_ {
+  border-color: var(--brand-color-error-fg);
+}
+
+/*
+ * TextInput visuals
+ */
+[dir="ltr"] .Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___i7gLS {
+          padding-left: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+[dir="rtl"] .Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___i7gLS {
+          padding-right: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+.Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___i7gLS {
+  -webkit-padding-start: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+
+[dir="ltr"] .Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___nCVT9 {
+          padding-left: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+[dir="rtl"] .Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___nCVT9 {
+          padding-right: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+.Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___nCVT9 {
+  -webkit-padding-start: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+[dir="ltr"] .Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___pP4lM {
+          padding-right: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+
+[dir="rtl"] .Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___pP4lM {
+          padding-left: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+
+.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___pP4lM {
+  -webkit-padding-end: calc(var(--base-size-12) * 2 + var(--base-size-12));
+}
+
+[dir="ltr"] .Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___n1U0P {
+          padding-right: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+[dir="rtl"] .Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___n1U0P {
+          padding-left: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___n1U0P {
+  -webkit-padding-end: calc(var(--base-size-8) * 4 + var(--base-size-8));
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-visual___tk7Yz,
+.Primer_Brand__TextInput-module__TextInput-trailing-visual___k0E6L {
+  display: grid;
+  position: absolute;
+  top: 0;
+  display: flex;
+  width: var(--base-size-16);
+  height: 100%;
+  align-items: center;
+  color: var(--color-fg-muted);
+  pointer-events: none;
+  color: var(--brand-color-text-default);
+}
+.Primer_Brand__TextInput-module__TextInput-leading-visual___tk7Yz {
+  left: var(--base-size-12);
+}
+
+.Primer_Brand__TextInput-module__TextInput-trailing-visual___k0E6L {
+  right: var(--base-size-12);
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--medium___y_4Pu {
+  width: 16px;
+  height: 16px;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--large___VPOF7 {
+  width: 20px;
+  height: 20px;
+}
+
+/*
+ * TextInput leading and trailing text
+ */
+
+.Primer_Brand__TextInput-module__TextInput-leading-text___H5Cfr,
+.Primer_Brand__TextInput-module__TextInput-trailing-text___ikt8X {
+  display: flex;
+  align-items: center;
+  color: var(--brand-color-text-muted);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text--disabled___APVY0,
+.Primer_Brand__TextInput-module__TextInput-trailing-text--disabled___oM2Ls {
+  color: var(--brand-control-color-fg-disabled);
+  background-color: var(--brand-control-color-canvas-disabled);
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text___H5Cfr {
+  border-top-left-radius: 6px;
+  border-top-left-radius: var(--brand-borderRadius-medium, 6px);
+  border-bottom-left-radius: 6px;
+  border-bottom-left-radius: var(--brand-borderRadius-medium, 6px);
+  border-right: 0;
+}
+
+.Primer_Brand__TextInput-module__TextInput-trailing-text___ikt8X {
+  border-top-right-radius: 6px;
+  border-top-right-radius: var(--brand-borderRadius-medium, 6px);
+  border-bottom-right-radius: 6px;
+  border-bottom-right-radius: var(--brand-borderRadius-medium, 6px);
+  border-left: 0;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text-inner___wsz6j,
+.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___hHCPx {
+  display: inline-flex;
+  padding: 0 10px 0;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text-inner___wsz6j {
+  border-right: 1px solid var(--brand-color-border-default);
+}
+
+.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___hHCPx {
+  border-left: 1px solid var(--brand-color-border-default);
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text-inner--medium___B7Rra,
+.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--medium___P9cYA {
+  height: 20px; /*calc(fullheight / 2*/
+}
+.Primer_Brand__TextInput-module__TextInput-leading-text-inner--large___HfLcI,
+.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--large___LTt33 {
+  height: 22px; /*calc(fullheight / 2*/
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text--medium___AXLxn,
+.Primer_Brand__TextInput-module__TextInput-trailing-text--medium___o1pNj {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  height: 40px;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text--large___z8lZE,
+.Primer_Brand__TextInput-module__TextInput-trailing-text--large___nFFjq {
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  height: 48px;
+}
+
+.Primer_Brand__TextInput-module__TextInput--has-leading-text___u7qke {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.Primer_Brand__TextInput-module__TextInput--has-trailing-text___Rsoog {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text--success___LLFx7,
+.Primer_Brand__TextInput-module__TextInput-trailing-text--success___EfLVd {
+  border-color: var(--brand-color-success-fg);
+}
+
+.Primer_Brand__TextInput-module__TextInput-leading-text--error___TM77D,
+.Primer_Brand__TextInput-module__TextInput-trailing-text--error___R96jr {
+  border-color: var(--brand-color-error-fg);
+}
+
+/*
+ * Default Select styles
+ */
+.Primer_Brand__Select-module__Select___Jqn1f {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  display: flex;
+  color: var(--brand-control-color-fg-default);
+  cursor: pointer;
+  background-color: var(--brand-color-canvas-default);
+  border: none;
+  border-radius: var(--brand-control-border-radius);
+  line-height: var(--brand-text-lineHeight-200);
+  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);
+  transition-property: color, background-color, box-shadow, border-color;
+  width: 100%;
+}
+
+@media screen and (forced-colors: active) {
+  /* Maintain dark bg color in Firefox on Windows high-contrast mode */
+  .Primer_Brand__Select-module__Select___Jqn1f:disabled {
+    background-color: -moz-combobox;
+  }
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f::-moz-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f:-ms-input-placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f::placeholder {
+  color: var(--brand-color-text-subtle);
+  opacity: 1;
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f.Primer_Brand__Select-module__focus-visible___viA1m {
+  border-color: var(--brand-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-color-focus);
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f:focus-visible {
+  border-color: var(--brand-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-color-focus);
+}
+
+.Primer_Brand__Select-module__Select___Jqn1f[disabled] {
+  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
+  color: var(--brand-control-color-fg-disabled);
+  cursor: not-allowed;
+  background-color: var(--brand-control-color-canvas-disabled);
+  border-color: var(--brand-control-color-border-disabled);
+  opacity: 1;
+}
+
+.Primer_Brand__Select-module__Select-arrow-indicator___LTpJz {
+  display: flex;
+  height: 16px;
+  pointer-events: none;
+  position: absolute;
+  right: var(--base-size-12);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  color: var(--brand-control-color-fg-default);
+}
+
+.Primer_Brand__Select-module__Select-arrow-indicator--disabled___dLMeI {
+  color: var(--brand-control-color-fg-disabled);
+}
+
+.Primer_Brand__Select-module__Select-arrow-indicator___LTpJz svg {
+  pointer-events: none;
+}
+
+/*
+ * Sizes
+ */
+.Primer_Brand__Select-module__Select--medium___kckBr {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  height: calc(40px - 2px);
+  height: calc(var(--brand-control-medium-size, 40px) - 2px);
+  padding: 12px 10px 10px;
+  padding: var(--brand-control-medium-padding, 12px 10px 10px);
+  padding-right: var(--base-size-44);
+}
+
+.Primer_Brand__Select-module__Select--large___A7u6F {
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  height: calc(48px - 2px);
+  height: calc(var(--brand-control-large-size, 48px) - 2px);
+  padding: 12px;
+  padding: var(--brand-control-large-padding, 12px);
+  padding-right: var(--base-size-44);
+}
+
+/*
+ * Visual states
+ */
+
+.Primer_Brand__Select-module__Select--fullWidth___PLk5U {
+  width: 100%;
+}
+
+/*
+ * Select wrapper
+ */
+
+.Primer_Brand__Select-module__Select-wrapper___iV0Tg {
+  align-items: center;
+  border: solid 1px var(--brand-control-color-border-default);
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);
+  border-radius: 6px;
+  border-radius: var(--brand-borderRadius-medium, 6px);
+  font-family: var(--brand-body-fontFamily);
+  display: inline-flex;
+  position: relative;
+}
+
+.Primer_Brand__Select-module__Select-wrapper--disabled___Ka43y {
+  border-color: var(--brand-control-color-border-disabled);
+}
+
+.Primer_Brand__Select-module__Select-wrapper--fullWidth___oOOo4 {
+  display: flex;
+}
+
+/*
+ * Validation
+ */
+
+.Primer_Brand__Select-module__Select--success___pkmVg {
+  border-color: var(--brand-color-success-fg);
+}
+
+.Primer_Brand__Select-module__Select--error___A9JuG {
+  border-color: var(--brand-color-error-fg);
+}
+
+.Primer_Brand__FormControl-module__FormControl___ZJtXy {
+  display: inline-flex;
+  font-family: var(--brand-body-fontFamily);
+  flex-direction: column;
+  gap: var(--base-size-8);
+}
+
+.Primer_Brand__FormControl-module__FormControl--fullWidth___QyLCS {
+  width: 100%;
+}
+
+.Primer_Brand__FormControl-module__FormControl--checkbox___R2ng7 {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.Primer_Brand__FormControl-module__FormControl--border___CRSaq {
+  border: 1px solid var(--brand-color-border-default);
+  border-radius: var(--brand-control-border-radius);
+  padding: var(--base-size-12);
+}
+
+.Primer_Brand__FormControl-module__FormControl-label___meeuB {
+  color: var(--brand-color-text-default);
+  font-weight: var(--base-text-weight-semibold);
+  font-family: var(--brand-text-fontFamily);
+}
+
+.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___cFizI {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.Primer_Brand__FormControl-module__FormControl-label--medium___inrKd {
+  letter-spacing: var(--brand-text-letterSpacing-200);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+
+.Primer_Brand__FormControl-module__FormControl-label--large___okLn6 {
+  letter-spacing: var(--brand-text-letterSpacing-300);
+  font-size: var(--brand-text-size-300);
+  line-height: var(--brand-text-lineHeight-300);
+}
+
+.Primer_Brand__FormControl-module__FormControl-label--checkbox___x2U9X {
+  cursor: pointer;
+  font-size: var(--brand-text-size-300);
+  font-weight: var(--base-text-weight-semibold);
+  letter-spacing: var(--brand-text-letterSpacing-300);
+  line-height: var(--brand-text-lineHeight-300);
+  position: relative;
+  top: 1px;
+  width: 100%;
+}
+
+.Primer_Brand__FormControl-module__FormControl-hint___dbP0O {
+  color: var(--brand-color-text-muted);
+  display: block;
+  font-size: var(--brand-text-size-200);
+  font-weight: var(--base-text-weight-normal);
+  letter-spacing: var(--brand-text-letterSpacing-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+
+/*Validation*/
+.Primer_Brand__FormControl-module__FormControl-validation___vG5tm {
+  font-weight: var(--base-text-weight-normal);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  display: flex;
+  gap: var(--base-size-4);
+}
+
+.Primer_Brand__FormControl-module__FormControl-validation--success___fGV4L {
+  color: var(--brand-color-success-fg);
+}
+
+.Primer_Brand__FormControl-module__FormControl-validation--error___DJVR5 {
+  color: var(--brand-color-error-fg);
+}
+
+.Primer_Brand__FormControl-module__FormControl-validation-icon___xh1go {
+  padding-top: 1px;
+}
+
+.Primer_Brand__FormControl-module__FormControl-validation--animate-in___C_pxB {
+  -webkit-animation: 170ms Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R cubic-bezier(0.44, 0.74, 0.36, 1);
+          animation: 170ms Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R cubic-bezier(0.44, 0.74, 0.36, 1);
+}
+
+@-webkit-keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+