@aws-amplify/ui-react 5.3.2 → 6.0.1

package/dist/styles/field.css

@@ -0,0 +1,17 @@
+.amplify-field {
+  font-size: var(--amplify-components-field-font-size);
+  gap: var(--amplify-components-field-gap);
+  flex-direction: var(--amplify-components-field-flex-direction);
+}
+.amplify-field--small {
+  font-size: var(--amplify-components-field-small-font-size);
+  gap: var(--amplify-components-field-small-gap);
+}
+.amplify-field--large {
+  font-size: var(--amplify-components-field-large-font-size);
+  gap: var(--amplify-components-field-large-gap);
+}
+
+.amplify-label {
+  color: var(--amplify-components-field-label-color);
+}

package/dist/styles/field.layer.css

@@ -0,0 +1,19 @@
+@layer amplify.components {
+.amplify-field {
+  font-size: var(--amplify-components-field-font-size);
+  gap: var(--amplify-components-field-gap);
+  flex-direction: var(--amplify-components-field-flex-direction);
+}
+.amplify-field--small {
+  font-size: var(--amplify-components-field-small-font-size);
+  gap: var(--amplify-components-field-small-gap);
+}
+.amplify-field--large {
+  font-size: var(--amplify-components-field-large-font-size);
+  gap: var(--amplify-components-field-large-gap);
+}
+
+.amplify-label {
+  color: var(--amplify-components-field-label-color);
+}
+}

package/dist/styles/fieldGroup.css

@@ -0,0 +1,130 @@
+.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+@supports not (border-start-start-radius: 0) {
+  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.amplify-field-group {
+  gap: var(--amplify-components-fieldgroup-gap);
+  align-self: stretch;
+}
+.amplify-field-group--horizontal {
+  flex-direction: row;
+}
+.amplify-field-group--vertical {
+  flex-direction: column;
+  align-items: var(--amplify-components-fieldgroup-vertical-align-items);
+}
+.amplify-field-group__outer-start,
+.amplify-field-group__outer-end {
+  display: flex;
+  flex-shrink: 0;
+  align-items: var(--amplify-components-fieldgroup-outer-align-items);
+}
+.amplify-field-group__outer-start .amplify-field-group__control,
+.amplify-field-group__outer-end .amplify-field-group__control {
+  height: 100%;
+}
+
+/**
+ * Outer field group components
+ */
+.amplify-field-group__outer-start .amplify-field-group__control:not(:focus) {
+  border-inline-end-color: transparent;
+}
+.amplify-field-group__outer-start .amplify-field-group__control:focus {
+  z-index: 1;
+}
+.amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+}
+.amplify-field-group__outer-end .amplify-field-group__control:not(:focus) {
+  border-inline-start-color: transparent;
+}
+.amplify-field-group__outer-end .amplify-field-group__control:focus {
+  z-index: 1;
+}
+.amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-end-color: transparent;
+}
+/**
+ * Inner field group components
+ */
+.amplify-field-group__field-wrapper {
+  position: relative;
+  width: 100%;
+}
+.amplify-field-group__field-wrapper--vertical {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.amplify-field-group__inner-end,
+.amplify-field-group__inner-start {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.amplify-field-group__inner-end .amplify-button,
+.amplify-field-group__inner-start .amplify-button {
+  pointer-events: all;
+  height: 100%;
+}
+
+.amplify-field-group__inner-end {
+  right: 0;
+  left: auto;
+}
+
+.amplify-field-group__inner-start {
+  right: auto;
+  left: 0;
+}
+
+html[dir=rtl] .amplify-field-group__inner-end {
+  right: auto;
+  left: 0;
+}
+html[dir=rtl] .amplify-field-group__inner-start {
+  left: auto;
+  right: 0;
+}
+
+.amplify-field-group--has-inner-end .amplify-input {
+  padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
+}
+
+.amplify-field-group--has-inner-start .amplify-input {
+  padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
+}
+
+/**
+ * Inner icon (non-button) component styling requires additional styling
+ */
+.amplify-field-group__icon:not(.amplify-field-group__icon-button) {
+  display: flex;
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}

package/dist/styles/fieldGroup.layer.css

@@ -0,0 +1,132 @@
+@layer amplify.components {
+.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+@supports not (border-start-start-radius: 0) {
+  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.amplify-field-group {
+  gap: var(--amplify-components-fieldgroup-gap);
+  align-self: stretch;
+}
+.amplify-field-group--horizontal {
+  flex-direction: row;
+}
+.amplify-field-group--vertical {
+  flex-direction: column;
+  align-items: var(--amplify-components-fieldgroup-vertical-align-items);
+}
+.amplify-field-group__outer-start,
+.amplify-field-group__outer-end {
+  display: flex;
+  flex-shrink: 0;
+  align-items: var(--amplify-components-fieldgroup-outer-align-items);
+}
+.amplify-field-group__outer-start .amplify-field-group__control,
+.amplify-field-group__outer-end .amplify-field-group__control {
+  height: 100%;
+}
+
+/**
+ * Outer field group components
+ */
+.amplify-field-group__outer-start .amplify-field-group__control:not(:focus) {
+  border-inline-end-color: transparent;
+}
+.amplify-field-group__outer-start .amplify-field-group__control:focus {
+  z-index: 1;
+}
+.amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+}
+.amplify-field-group__outer-end .amplify-field-group__control:not(:focus) {
+  border-inline-start-color: transparent;
+}
+.amplify-field-group__outer-end .amplify-field-group__control:focus {
+  z-index: 1;
+}
+.amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-end-color: transparent;
+}
+/**
+ * Inner field group components
+ */
+.amplify-field-group__field-wrapper {
+  position: relative;
+  width: 100%;
+}
+.amplify-field-group__field-wrapper--vertical {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.amplify-field-group__inner-end,
+.amplify-field-group__inner-start {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.amplify-field-group__inner-end .amplify-button,
+.amplify-field-group__inner-start .amplify-button {
+  pointer-events: all;
+  height: 100%;
+}
+
+.amplify-field-group__inner-end {
+  right: 0;
+  left: auto;
+}
+
+.amplify-field-group__inner-start {
+  right: auto;
+  left: 0;
+}
+
+html[dir=rtl] .amplify-field-group__inner-end {
+  right: auto;
+  left: 0;
+}
+html[dir=rtl] .amplify-field-group__inner-start {
+  left: auto;
+  right: 0;
+}
+
+.amplify-field-group--has-inner-end .amplify-input {
+  padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
+}
+
+.amplify-field-group--has-inner-start .amplify-input {
+  padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
+}
+
+/**
+ * Inner icon (non-button) component styling requires additional styling
+ */
+.amplify-field-group__icon:not(.amplify-field-group__icon-button) {
+  display: flex;
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+}

package/dist/styles/fieldMessages.css

@@ -0,0 +1,10 @@
+.amplify-field__description {
+  color: var(--amplify-components-fieldmessages-description-color);
+  font-style: var(--amplify-components-fieldmessages-description-font-style);
+  font-size: var(--amplify-components-fieldmessages-description-font-size);
+}
+
+.amplify-field__error-message {
+  color: var(--amplify-components-fieldmessages-error-color);
+  font-size: var(--amplify-components-fieldmessages-error-font-size);
+}

package/dist/styles/fieldMessages.layer.css

@@ -0,0 +1,12 @@
+@layer amplify.components {
+.amplify-field__description {
+  color: var(--amplify-components-fieldmessages-description-color);
+  font-style: var(--amplify-components-fieldmessages-description-font-style);
+  font-size: var(--amplify-components-fieldmessages-description-font-size);
+}
+
+.amplify-field__error-message {
+  color: var(--amplify-components-fieldmessages-error-color);
+  font-size: var(--amplify-components-fieldmessages-error-font-size);
+}
+}

package/dist/styles/fieldModifiers.css

@@ -0,0 +1,15 @@
+.amplify-label-start {
+  flex-direction: row;
+}
+
+.amplify-label-end {
+  flex-direction: row-reverse;
+}
+
+.amplify-label-top {
+  flex-direction: column;
+}
+
+.amplify-label-bottom {
+  flex-direction: column-reverse;
+}

package/dist/styles/fieldModifiers.layer.css

@@ -0,0 +1,17 @@
+@layer amplify.components {
+.amplify-label-start {
+  flex-direction: row;
+}
+
+.amplify-label-end {
+  flex-direction: row-reverse;
+}
+
+.amplify-label-top {
+  flex-direction: column;
+}
+
+.amplify-label-bottom {
+  flex-direction: column-reverse;
+}
+}

package/dist/styles/fieldset.css

@@ -0,0 +1,37 @@
+.amplify-fieldset {
+  background-color: var(--amplify-components-fieldset-background-color);
+  border-radius: var(--amplify-components-fieldset-border-radius);
+  flex-direction: var(--amplify-components-fieldset-flex-direction);
+  gap: var(--amplify-components-fieldset-gap);
+  /* Sizes */
+  /* Variations */
+}
+.amplify-fieldset--small {
+  gap: var(--amplify-components-fieldset-small-gap);
+}
+.amplify-fieldset--large {
+  gap: var(--amplify-components-fieldset-large-gap);
+}
+.amplify-fieldset--outlined {
+  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
+  padding: var(--amplify-components-fieldset-outlined-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--small {
+  padding: var(--amplify-components-fieldset-outlined-small-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--large {
+  padding: var(--amplify-components-fieldset-outlined-large-padding);
+}
+
+.amplify-fieldset__legend {
+  color: var(--amplify-components-fieldset-legend-color);
+  font-weight: var(--amplify-components-fieldset-legend-font-weight);
+  line-height: var(--amplify-components-fieldset-legend-line-height);
+  font-size: var(--amplify-components-fieldset-legend-font-size);
+}
+.amplify-fieldset__legend--small {
+  font-size: var(--amplify-components-fieldset-legend-small-font-size);
+}
+.amplify-fieldset__legend--large {
+  font-size: var(--amplify-components-fieldset-legend-large-font-size);
+}

package/dist/styles/fieldset.layer.css

@@ -0,0 +1,39 @@
+@layer amplify.components {
+.amplify-fieldset {
+  background-color: var(--amplify-components-fieldset-background-color);
+  border-radius: var(--amplify-components-fieldset-border-radius);
+  flex-direction: var(--amplify-components-fieldset-flex-direction);
+  gap: var(--amplify-components-fieldset-gap);
+  /* Sizes */
+  /* Variations */
+}
+.amplify-fieldset--small {
+  gap: var(--amplify-components-fieldset-small-gap);
+}
+.amplify-fieldset--large {
+  gap: var(--amplify-components-fieldset-large-gap);
+}
+.amplify-fieldset--outlined {
+  border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
+  padding: var(--amplify-components-fieldset-outlined-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--small {
+  padding: var(--amplify-components-fieldset-outlined-small-padding);
+}
+.amplify-fieldset--outlined.amplify-fieldset--large {
+  padding: var(--amplify-components-fieldset-outlined-large-padding);
+}
+
+.amplify-fieldset__legend {
+  color: var(--amplify-components-fieldset-legend-color);
+  font-weight: var(--amplify-components-fieldset-legend-font-weight);
+  line-height: var(--amplify-components-fieldset-legend-line-height);
+  font-size: var(--amplify-components-fieldset-legend-font-size);
+}
+.amplify-fieldset__legend--small {
+  font-size: var(--amplify-components-fieldset-legend-small-font-size);
+}
+.amplify-fieldset__legend--large {
+  font-size: var(--amplify-components-fieldset-legend-large-font-size);
+}
+}

package/dist/styles/flex.css

@@ -0,0 +1,8 @@
+.amplify-flex {
+  align-content: var(--amplify-components-flex-align-content);
+  align-items: var(--amplify-components-flex-align-items);
+  display: flex;
+  flex-wrap: var(--amplify-components-flex-flex-wrap);
+  gap: var(--amplify-components-flex-gap);
+  justify-content: var(--amplify-components-flex-justify-content);
+}

package/dist/styles/flex.layer.css

@@ -0,0 +1,10 @@
+@layer amplify.components {
+.amplify-flex {
+  align-content: var(--amplify-components-flex-align-content);
+  align-items: var(--amplify-components-flex-align-items);
+  display: flex;
+  flex-wrap: var(--amplify-components-flex-flex-wrap);
+  gap: var(--amplify-components-flex-gap);
+  justify-content: var(--amplify-components-flex-justify-content);
+}
+}

package/dist/styles/grid.css

@@ -0,0 +1,3 @@
+.amplify-grid {
+  display: grid;
+}

package/dist/styles/grid.layer.css

@@ -0,0 +1,5 @@
+@layer amplify.components {
+.amplify-grid {
+  display: grid;
+}
+}

package/dist/styles/heading.css

@@ -0,0 +1,40 @@
+.amplify-heading {
+  color: var(--amplify-components-heading-color);
+  line-height: var(--amplify-components-heading-line-height);
+  display: block;
+}
+.amplify-heading--truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amplify-heading--1 {
+  font-size: var(--amplify-components-heading-1-font-size);
+  font-weight: var(--amplify-components-heading-1-font-weight);
+}
+
+.amplify-heading--2 {
+  font-size: var(--amplify-components-heading-2-font-size);
+  font-weight: var(--amplify-components-heading-2-font-weight);
+}
+
+.amplify-heading--3 {
+  font-size: var(--amplify-components-heading-3-font-size);
+  font-weight: var(--amplify-components-heading-3-font-weight);
+}
+
+.amplify-heading--4 {
+  font-size: var(--amplify-components-heading-4-font-size);
+  font-weight: var(--amplify-components-heading-4-font-weight);
+}
+
+.amplify-heading--5 {
+  font-size: var(--amplify-components-heading-5-font-size);
+  font-weight: var(--amplify-components-heading-5-font-weight);
+}
+
+.amplify-heading--6 {
+  font-size: var(--amplify-components-heading-6-font-size);
+  font-weight: var(--amplify-components-heading-6-font-weight);
+}

package/dist/styles/heading.layer.css

@@ -0,0 +1,42 @@
+@layer amplify.components {
+.amplify-heading {
+  color: var(--amplify-components-heading-color);
+  line-height: var(--amplify-components-heading-line-height);
+  display: block;
+}
+.amplify-heading--truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amplify-heading--1 {
+  font-size: var(--amplify-components-heading-1-font-size);
+  font-weight: var(--amplify-components-heading-1-font-weight);
+}
+
+.amplify-heading--2 {
+  font-size: var(--amplify-components-heading-2-font-size);
+  font-weight: var(--amplify-components-heading-2-font-weight);
+}
+
+.amplify-heading--3 {
+  font-size: var(--amplify-components-heading-3-font-size);
+  font-weight: var(--amplify-components-heading-3-font-weight);
+}
+
+.amplify-heading--4 {
+  font-size: var(--amplify-components-heading-4-font-size);
+  font-weight: var(--amplify-components-heading-4-font-weight);
+}
+
+.amplify-heading--5 {
+  font-size: var(--amplify-components-heading-5-font-size);
+  font-weight: var(--amplify-components-heading-5-font-weight);
+}
+
+.amplify-heading--6 {
+  font-size: var(--amplify-components-heading-6-font-size);
+  font-weight: var(--amplify-components-heading-6-font-weight);
+}
+}

package/dist/styles/highlightMatch.css

@@ -0,0 +1,3 @@
+.amplify-highlightmatch__highlighted {
+  font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight);
+}

package/dist/styles/highlightMatch.layer.css

@@ -0,0 +1,5 @@
+@layer amplify.components {
+.amplify-highlightmatch__highlighted {
+  font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight);
+}
+}

package/dist/styles/icon.css

@@ -0,0 +1,14 @@
+/*
+ * Icon base styles
+ */
+.amplify-icon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+  height: var(--amplify-components-icon-height);
+  line-height: var(--amplify-components-icon-line-height);
+}
+.amplify-icon > svg {
+  height: var(--amplify-components-icon-height);
+  width: var(--amplify-components-icon-height);
+}

package/dist/styles/icon.layer.css

@@ -0,0 +1,16 @@
+@layer amplify.components {
+/*
+ * Icon base styles
+ */
+.amplify-icon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+  height: var(--amplify-components-icon-height);
+  line-height: var(--amplify-components-icon-line-height);
+}
+.amplify-icon > svg {
+  height: var(--amplify-components-icon-height);
+  width: var(--amplify-components-icon-height);
+}
+}

package/dist/styles/image.css

@@ -0,0 +1,9 @@
+.amplify-image {
+  height: var(--amplify-components-image-height);
+  max-width: var(--amplify-components-image-max-width);
+  -o-object-fit: var(--amplify-components-image-object-fit);
+     object-fit: var(--amplify-components-image-object-fit);
+  -o-object-position: var(--amplify-components-image-object-position);
+     object-position: var(--amplify-components-image-object-position);
+  overflow: clip;
+}

package/dist/styles/image.layer.css

@@ -0,0 +1,11 @@
+@layer amplify.components {
+.amplify-image {
+  height: var(--amplify-components-image-height);
+  max-width: var(--amplify-components-image-max-width);
+  -o-object-fit: var(--amplify-components-image-object-fit);
+     object-fit: var(--amplify-components-image-object-fit);
+  -o-object-position: var(--amplify-components-image-object-position);
+     object-position: var(--amplify-components-image-object-position);
+  overflow: clip;
+}
+}