@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/styles/radio.layer.css

@@ -0,0 +1,84 @@
+@layer amplify.components {
+.amplify-radio {
+  align-items: var(--amplify-components-radio-align-items);
+  justify-content: var(--amplify-components-radio-justify-content);
+  gap: inherit;
+  flex-direction: row-reverse;
+  position: relative;
+}
+.amplify-radio--disabled {
+  cursor: var(--amplify-components-radio-disabled-cursor);
+}
+
+.amplify-radio__button {
+  flex-shrink: 0;
+  align-items: var(--amplify-components-radio-button-align-items);
+  justify-content: var(--amplify-components-radio-button-justify-content);
+  padding: var(--amplify-components-radio-button-padding);
+  box-sizing: var(--amplify-components-radio-button-box-sizing);
+  border-width: var(--amplify-components-radio-button-border-width);
+  border-style: var(--amplify-components-radio-button-border-style);
+  border-radius: var(--amplify-components-radio-button-border-radius);
+  border-color: var(--amplify-components-radio-button-border-color);
+  color: var(--amplify-components-radio-button-color);
+  background-color: var(--amplify-components-radio-button-background-color);
+  transition-property: var(--amplify-components-radio-button-transition-property);
+  transition-duration: var(--amplify-components-radio-button-transition-duration);
+  width: var(--amplify-components-radio-button-width);
+  height: var(--amplify-components-radio-button-height);
+  outline-color: var(--amplify-components-radio-button-outline-color);
+  outline-style: var(--amplify-components-radio-button-outline-style);
+  outline-width: var(--amplify-components-radio-button-outline-width);
+  outline-offset: var(--amplify-components-radio-button-outline-offset);
+}
+.amplify-radio__button::before {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--amplify-components-radio-button-before-border-radius);
+  background-color: currentColor;
+  border-radius: 50%;
+}
+.amplify-radio__button--small {
+  width: var(--amplify-components-radio-button-small-width);
+  height: var(--amplify-components-radio-button-small-height);
+}
+.amplify-radio__button--large {
+  width: var(--amplify-components-radio-button-large-width);
+  height: var(--amplify-components-radio-button-large-height);
+}
+
+.amplify-radio__input:checked + .amplify-radio__button {
+  color: var(--amplify-components-radio-button-checked-color);
+}
+
+.amplify-radio__input:checked:disabled + .amplify-radio__button {
+  color: var(--amplify-components-radio-button-checked-disabled-color);
+}
+
+.amplify-radio__input:focus + .amplify-radio__button {
+  border-color: var(--amplify-components-radio-button-focus-border-color);
+  box-shadow: var(--amplify-components-radio-button-focus-box-shadow);
+}
+
+.amplify-radio__input[aria-invalid=true] + .amplify-radio__button {
+  border-color: var(--amplify-components-radio-button-error-border-color);
+}
+
+.amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button {
+  box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow);
+}
+
+.amplify-radio__input:disabled + .amplify-radio__button {
+  border-color: var(--amplify-components-radio-button-disabled-border-color);
+  background-color: var(--amplify-components-radio-button-disabled-background-color);
+}
+
+.amplify-radio__label {
+  color: var(--amplify-components-radio-label-color);
+}
+.amplify-radio__label--disabled {
+  color: var(--amplify-components-radio-label-disabled-color);
+}
+}

package/dist/styles/radioGroupField.css

@@ -0,0 +1,25 @@
+.amplify-radiogroupfield {
+  flex-direction: column;
+  align-items: flex-start;
+  --amplify-components-fieldset-legend-color: var(
+    --amplify-components-radiogroup-legend-color
+  );
+  --amplify-components-fieldset-legend-font-weight: var(
+    --amplify-components-radiogroup-legend-font-weight
+  );
+  --amplify-components-radio-button-border-width: var(
+    --amplify-components-radiogroup-radio-border-width
+  );
+  --amplify-components-radio-button-border-color: var(
+    --amplify-components-radiogroup-radio-border-color
+  );
+  --amplify-components-radio-button-background-color: var(
+    --amplify-components-radiogroup-radio-background-color
+  );
+  --amplify-components-radio-label-color: var(
+    --amplify-components-radiogroup-radio-label-color
+  );
+  --amplify-components-radio-button-checked-color: var(
+    --amplify-components-radiogroup-radio-checked-color
+  );
+}

package/dist/styles/radioGroupField.layer.css

@@ -0,0 +1,27 @@
+@layer amplify.components {
+.amplify-radiogroupfield {
+  flex-direction: column;
+  align-items: flex-start;
+  --amplify-components-fieldset-legend-color: var(
+    --amplify-components-radiogroup-legend-color
+  );
+  --amplify-components-fieldset-legend-font-weight: var(
+    --amplify-components-radiogroup-legend-font-weight
+  );
+  --amplify-components-radio-button-border-width: var(
+    --amplify-components-radiogroup-radio-border-width
+  );
+  --amplify-components-radio-button-border-color: var(
+    --amplify-components-radiogroup-radio-border-color
+  );
+  --amplify-components-radio-button-background-color: var(
+    --amplify-components-radiogroup-radio-background-color
+  );
+  --amplify-components-radio-label-color: var(
+    --amplify-components-radiogroup-radio-label-color
+  );
+  --amplify-components-radio-button-checked-color: var(
+    --amplify-components-radiogroup-radio-checked-color
+  );
+}
+}

package/dist/styles/radiogroup.css

@@ -0,0 +1,5 @@
+.amplify-radiogroup {
+  gap: inherit;
+  flex-direction: inherit;
+  align-items: inherit;
+}

package/dist/styles/radiogroup.layer.css

@@ -0,0 +1,7 @@
+@layer amplify.components {
+.amplify-radiogroup {
+  gap: inherit;
+  flex-direction: inherit;
+  align-items: inherit;
+}
+}

package/dist/styles/rating.css

@@ -0,0 +1,33 @@
+.amplify-rating {
+  display: inline-flex;
+  position: relative;
+  text-align: left;
+  font-size: var(--amplify-components-rating-default-size);
+  line-height: var(--amplify-components-rating-default-size);
+}
+.amplify-rating--small {
+  font-size: var(--amplify-components-rating-small-size);
+  line-height: var(--amplify-components-rating-small-size);
+}
+.amplify-rating--large {
+  font-size: var(--amplify-components-rating-large-size);
+  line-height: var(--amplify-components-rating-large-size);
+}
+.amplify-rating__item {
+  position: relative;
+  height: 1em;
+  width: 1em;
+}
+.amplify-rating__icon {
+  width: 1em;
+  height: 1em;
+  display: block;
+  position: absolute;
+  overflow: hidden;
+}
+.amplify-rating__icon--filled {
+  color: var(--amplify-components-rating-filled-color);
+}
+.amplify-rating__icon--empty {
+  color: var(--amplify-components-rating-empty-color);
+}

package/dist/styles/rating.layer.css

@@ -0,0 +1,35 @@
+@layer amplify.components {
+.amplify-rating {
+  display: inline-flex;
+  position: relative;
+  text-align: left;
+  font-size: var(--amplify-components-rating-default-size);
+  line-height: var(--amplify-components-rating-default-size);
+}
+.amplify-rating--small {
+  font-size: var(--amplify-components-rating-small-size);
+  line-height: var(--amplify-components-rating-small-size);
+}
+.amplify-rating--large {
+  font-size: var(--amplify-components-rating-large-size);
+  line-height: var(--amplify-components-rating-large-size);
+}
+.amplify-rating__item {
+  position: relative;
+  height: 1em;
+  width: 1em;
+}
+.amplify-rating__icon {
+  width: 1em;
+  height: 1em;
+  display: block;
+  position: absolute;
+  overflow: hidden;
+}
+.amplify-rating__icon--filled {
+  color: var(--amplify-components-rating-filled-color);
+}
+.amplify-rating__icon--empty {
+  color: var(--amplify-components-rating-empty-color);
+}
+}

package/dist/styles/reset.css

@@ -0,0 +1,76 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  -webkit-font-smoothing: antialiased;
+  line-height: var(--amplify-line-heights-medium, 1.5);
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+a:not([class]) {
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+}
+html,
+[data-amplify-theme] {
+  font-family: var(--amplify-fonts-default-static);
+}
+
+@supports (font-variation-settings: normal) {
+  html,
+  [data-amplify-theme] {
+    font-family: var(--amplify-fonts-default-variable);
+  }
+}

package/dist/styles/reset.layer.css

@@ -0,0 +1,78 @@
+@layer amplify.reset {
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  -webkit-font-smoothing: antialiased;
+  line-height: var(--amplify-line-heights-medium, 1.5);
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+a:not([class]) {
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+}
+html,
+[data-amplify-theme] {
+  font-family: var(--amplify-fonts-default-static);
+}
+
+@supports (font-variation-settings: normal) {
+  html,
+  [data-amplify-theme] {
+    font-family: var(--amplify-fonts-default-variable);
+  }
+}
+}

package/dist/styles/scrollView.css

@@ -0,0 +1,4 @@
+.amplify-scrollview {
+  display: block;
+  overflow: auto;
+}

package/dist/styles/scrollView.layer.css

@@ -0,0 +1,6 @@
+@layer amplify.components {
+.amplify-scrollview {
+  display: block;
+  overflow: auto;
+}
+}

package/dist/styles/searchField.css

@@ -0,0 +1,29 @@
+.amplify-searchfield {
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-searchfield-input-color
+  );
+}
+.amplify-searchfield__search {
+  color: var(--amplify-components-searchfield-button-color);
+  background-color: var(--amplify-components-searchfield-button-background-color);
+}
+.amplify-searchfield__search:active {
+  background-color: var(--amplify-components-button-active-background-color);
+  border-color: var(--amplify-components-button-active-border-color);
+  color: var(--amplify-components-button-active-color);
+}
+.amplify-searchfield__search:focus {
+  background-color: var(--amplify-components-searchfield-button-focus-background-color);
+  border-color: var(--amplify-components-searchfield-button-focus-border-color);
+  color: var(--amplify-components-searchfield-button-focus-color);
+}
+.amplify-searchfield__search:hover {
+  background-color: var(--amplify-components-searchfield-button-hover-background-color);
+  border-color: var(--amplify-components-searchfield-button-hover-border-color);
+  color: var(--amplify-components-searchfield-button-hover-color);
+}
+.amplify-searchfield__search:disabled {
+  background-color: var(--amplify-components-searchfield-button-disabled-background-color);
+  border-color: var(--amplify-components-searchfield-button-disabled-border-color);
+  color: var(--amplify-components-searchfield-button-disabled-color);
+}

package/dist/styles/searchField.layer.css

@@ -0,0 +1,31 @@
+@layer amplify.components {
+.amplify-searchfield {
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-searchfield-input-color
+  );
+}
+.amplify-searchfield__search {
+  color: var(--amplify-components-searchfield-button-color);
+  background-color: var(--amplify-components-searchfield-button-background-color);
+}
+.amplify-searchfield__search:active {
+  background-color: var(--amplify-components-button-active-background-color);
+  border-color: var(--amplify-components-button-active-border-color);
+  color: var(--amplify-components-button-active-color);
+}
+.amplify-searchfield__search:focus {
+  background-color: var(--amplify-components-searchfield-button-focus-background-color);
+  border-color: var(--amplify-components-searchfield-button-focus-border-color);
+  color: var(--amplify-components-searchfield-button-focus-color);
+}
+.amplify-searchfield__search:hover {
+  background-color: var(--amplify-components-searchfield-button-hover-background-color);
+  border-color: var(--amplify-components-searchfield-button-hover-border-color);
+  color: var(--amplify-components-searchfield-button-hover-color);
+}
+.amplify-searchfield__search:disabled {
+  background-color: var(--amplify-components-searchfield-button-disabled-background-color);
+  border-color: var(--amplify-components-searchfield-button-disabled-border-color);
+  color: var(--amplify-components-searchfield-button-disabled-color);
+}
+}

package/dist/styles/select.css

@@ -0,0 +1,128 @@
+.amplify-select__wrapper {
+  flex: var(--amplify-components-select-wrapper-flex);
+  display: var(--amplify-components-select-wrapper-display);
+  position: var(--amplify-components-select-wrapper-position);
+  cursor: var(--amplify-components-select-wrapper-cursor);
+  align-self: stretch;
+}
+
+.amplify-select__icon {
+  color: var(--amplify-components-fieldcontrol-color);
+  align-items: var(--amplify-components-select-icon-wrapper-align-items);
+  position: var(--amplify-components-select-icon-wrapper-position);
+  top: var(--amplify-components-select-icon-wrapper-top);
+  right: var(--amplify-components-select-icon-wrapper-right);
+  transform: var(--amplify-components-select-icon-wrapper-transform);
+  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
+}
+.amplify-select__icon--small {
+  right: var(--amplify-components-select-icon-wrapper-small-right);
+}
+.amplify-select__icon--large {
+  right: var(--amplify-components-select-icon-wrapper-large-right);
+}
+
+.amplify-select {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  background-color: var(--amplify-components-select-background-color);
+  color: var(--amplify-components-select-color);
+  min-width: var(--amplify-components-select-min-width);
+  padding-inline-end: var(--amplify-components-select-padding-inline-end);
+  white-space: var(--amplify-components-select-white-space);
+}
+.amplify-select:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-select--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-select--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-select--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-select--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-select--quiet {
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-select--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-select--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-select--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+.amplify-select[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+.amplify-select option {
+  background-color: var(--amplify-components-select-option-background-color);
+  color: var(--amplify-components-select-option-color);
+}
+.amplify-select option[disabled=""] {
+  background-color: var(--amplify-components-select-option-disabled-background-color);
+  color: var(--amplify-components-select-option-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+}
+.amplify-select[disabled] {
+  background-color: var(--amplify-components-select-disabled-background-color);
+  color: var(--amplify-components-select-disabled-color);
+}
+.amplify-select[disabled] option {
+  color: inherit;
+  background-color: inherit;
+}
+.amplify-select--small {
+  min-width: var(--amplify-components-select-small-min-width);
+  padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
+}
+.amplify-select--large {
+  min-width: var(--amplify-components-select-large-min-width);
+  padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
+}
+.amplify-select--expanded {
+  overflow: auto;
+  padding: var(--amplify-components-select-expanded-padding-block) var(--amplify-components-select-expanded-padding-inline);
+}
+.amplify-select--expanded option {
+  padding: var(--amplify-components-select-expanded-option-padding-block) var(--amplify-components-select-expanded-option-padding-inline);
+}