@aws-amplify/ui-react 5.3.1 → 6.0.0

package/dist/styles/switchField.layer.css

@@ -0,0 +1,78 @@
+@layer amplify.components {
+.amplify-switchfield {
+  display: inline-block;
+  font-size: var(--amplify-components-switchfield-font-size);
+  cursor: pointer;
+}
+.amplify-switchfield--small {
+  font-size: var(--amplify-components-switchfield-small-font-size);
+}
+.amplify-switchfield--large {
+  font-size: var(--amplify-components-switchfield-large-font-size);
+}
+
+.amplify-switch__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.amplify-switch__wrapper--start {
+  flex-direction: row;
+}
+.amplify-switch__wrapper--end {
+  flex-direction: row-reverse;
+}
+.amplify-switch__wrapper--top {
+  flex-direction: column;
+}
+.amplify-switch__wrapper--bottom {
+  flex-direction: column-reverse;
+}
+
+.amplify-switch__track {
+  display: inline-flex;
+  justify-content: flex-start;
+  box-sizing: content-box;
+  border-radius: var(--amplify-components-switchfield-track-border-radius);
+  padding: var(--amplify-components-switchfield-track-padding);
+  width: var(--amplify-components-switchfield-track-width);
+  height: var(--amplify-components-switchfield-track-height);
+  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
+  background-color: var(--amplify-components-switchfield-track-background-color);
+}
+.amplify-switch__track--checked {
+  background-color: var(--amplify-components-switchfield-track-checked-background-color);
+}
+.amplify-switch__track--disabled {
+  opacity: var(--amplify-components-switchfield-disabled-opacity);
+  cursor: not-allowed;
+}
+.amplify-switch__track--focused {
+  box-shadow: var(--amplify-components-switchfield-focused-shadow);
+}
+.amplify-switch__track--error {
+  background-color: var(--amplify-components-switchfield-track-error-background-color);
+}
+
+.amplify-switch__thumb {
+  background-color: var(--amplify-components-switchfield-thumb-background-color);
+  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
+  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
+  width: var(--amplify-components-switchfield-thumb-width);
+  height: var(--amplify-components-switchfield-thumb-width);
+  border-width: var(--amplify-components-switchfield-thumb-border-width);
+  border-style: var(--amplify-components-switchfield-thumb-border-style);
+  border-color: var(--amplify-components-switchfield-thumb-border-color);
+  overflow-wrap: break-word;
+}
+.amplify-switch__thumb--checked {
+  transform: var(--amplify-components-switchfield-thumb-checked-transform);
+}
+.amplify-switch__thumb--disabled {
+  cursor: not-allowed;
+}
+
+.amplify-switch__label {
+  padding: var(--amplify-components-switchfield-label-padding);
+  cursor: pointer;
+}
+}

package/dist/styles/table.css

@@ -0,0 +1,146 @@
+.amplify-table {
+  /**
+   * Default Table primitive stylings
+   */
+  border-collapse: var(--amplify-components-table-border-collapse);
+  display: var(--amplify-components-table-display);
+  width: var(--amplify-components-table-width);
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-padding
+  );
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    0px var(--amplify-components-table-data-border-width) 0px;
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    0px var(--amplify-components-table-header-border-width) 0px;
+  /**
+   * Data attribute stylings
+   */
+}
+.amplify-table--small {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-small-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-small-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-small-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-small-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-small-padding
+  );
+}
+.amplify-table--large {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-large-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-large-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-large-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-large-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-large-padding
+  );
+}
+.amplify-table--bordered {
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width);
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width);
+}
+.amplify-table__caption {
+  caption-side: var(--amplify-components-table-caption-caption-side);
+  color: var(--amplify-components-table-caption-color);
+  display: var(--amplify-components-table-caption-display);
+  font-size: var(--amplify-internal-table-caption-font-size);
+  text-align: var(--amplify-components-table-caption-text-align);
+  word-break: var(--amplify-components-table-caption-word-break);
+}
+.amplify-table__head {
+  display: var(--amplify-components-table-head-display);
+  vertical-align: var(--amplify-components-table-head-vertical-align);
+}
+.amplify-table__body {
+  display: var(--amplify-components-table-body-display);
+  vertical-align: var(--amplify-components-table-body-vertical-align);
+}
+.amplify-table__foot {
+  display: var(--amplify-components-table-foot-display);
+  vertical-align: var(--amplify-components-table-foot-vertical-align);
+}
+.amplify-table__row {
+  display: var(--amplify-components-table-row-display);
+  vertical-align: var(--amplify-components-table-row-vertical-align);
+}
+.amplify-table__th {
+  border-color: var(--amplify-components-table-header-border-color);
+  border-style: var(--amplify-components-table-header-border-style);
+  border-width: var(--amplify-internal-table-th-border-width);
+  color: var(--amplify-components-table-header-color);
+  display: var(--amplify-components-table-header-display);
+  font-size: var(--amplify-internal-table-th-font-size);
+  font-weight: var(--amplify-components-table-header-font-weight);
+  padding: var(--amplify-internal-table-th-padding);
+  vertical-align: var(--amplify-components-table-header-vertical-align);
+}
+.amplify-table__th:first-child {
+  border-left-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__th:last-child {
+  border-right-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__td {
+  border-color: var(--amplify-components-table-data-border-color);
+  border-style: var(--amplify-components-table-data-border-style);
+  border-width: var(--amplify-internal-table-td-border-width);
+  color: var(--amplify-components-table-data-color);
+  display: var(--amplify-components-table-data-display);
+  font-size: var(--amplify-internal-table-td-font-size);
+  font-weight: var(--amplify-components-table-data-font-weight);
+  padding: var(--amplify-internal-table-td-padding);
+  vertical-align: var(--amplify-components-table-data-vertical-align);
+}
+.amplify-table__td:first-child {
+  border-left-width: var(--amplify-components-table-data-border-width);
+}
+.amplify-table__td:last-child {
+  border-right-width: var(--amplify-components-table-data-border-width);
+}
+.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
+.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
+  background-color: var(--amplify-components-table-row-hover-background-color);
+}

package/dist/styles/table.layer.css

@@ -0,0 +1,148 @@
+@layer amplify.components {
+.amplify-table {
+  /**
+   * Default Table primitive stylings
+   */
+  border-collapse: var(--amplify-components-table-border-collapse);
+  display: var(--amplify-components-table-display);
+  width: var(--amplify-components-table-width);
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-padding
+  );
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    0px var(--amplify-components-table-data-border-width) 0px;
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    0px var(--amplify-components-table-header-border-width) 0px;
+  /**
+   * Data attribute stylings
+   */
+}
+.amplify-table--small {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-small-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-small-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-small-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-small-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-small-padding
+  );
+}
+.amplify-table--large {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-large-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-large-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-large-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-large-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-large-padding
+  );
+}
+.amplify-table--bordered {
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width);
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width);
+}
+.amplify-table__caption {
+  caption-side: var(--amplify-components-table-caption-caption-side);
+  color: var(--amplify-components-table-caption-color);
+  display: var(--amplify-components-table-caption-display);
+  font-size: var(--amplify-internal-table-caption-font-size);
+  text-align: var(--amplify-components-table-caption-text-align);
+  word-break: var(--amplify-components-table-caption-word-break);
+}
+.amplify-table__head {
+  display: var(--amplify-components-table-head-display);
+  vertical-align: var(--amplify-components-table-head-vertical-align);
+}
+.amplify-table__body {
+  display: var(--amplify-components-table-body-display);
+  vertical-align: var(--amplify-components-table-body-vertical-align);
+}
+.amplify-table__foot {
+  display: var(--amplify-components-table-foot-display);
+  vertical-align: var(--amplify-components-table-foot-vertical-align);
+}
+.amplify-table__row {
+  display: var(--amplify-components-table-row-display);
+  vertical-align: var(--amplify-components-table-row-vertical-align);
+}
+.amplify-table__th {
+  border-color: var(--amplify-components-table-header-border-color);
+  border-style: var(--amplify-components-table-header-border-style);
+  border-width: var(--amplify-internal-table-th-border-width);
+  color: var(--amplify-components-table-header-color);
+  display: var(--amplify-components-table-header-display);
+  font-size: var(--amplify-internal-table-th-font-size);
+  font-weight: var(--amplify-components-table-header-font-weight);
+  padding: var(--amplify-internal-table-th-padding);
+  vertical-align: var(--amplify-components-table-header-vertical-align);
+}
+.amplify-table__th:first-child {
+  border-left-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__th:last-child {
+  border-right-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__td {
+  border-color: var(--amplify-components-table-data-border-color);
+  border-style: var(--amplify-components-table-data-border-style);
+  border-width: var(--amplify-internal-table-td-border-width);
+  color: var(--amplify-components-table-data-color);
+  display: var(--amplify-components-table-data-display);
+  font-size: var(--amplify-internal-table-td-font-size);
+  font-weight: var(--amplify-components-table-data-font-weight);
+  padding: var(--amplify-internal-table-td-padding);
+  vertical-align: var(--amplify-components-table-data-vertical-align);
+}
+.amplify-table__td:first-child {
+  border-left-width: var(--amplify-components-table-data-border-width);
+}
+.amplify-table__td:last-child {
+  border-right-width: var(--amplify-components-table-data-border-width);
+}
+.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
+  background-color: var(--amplify-components-table-row-striped-background-color);
+}
+.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
+  background-color: var(--amplify-components-table-row-hover-background-color);
+}
+}

package/dist/styles/tabs.css

@@ -0,0 +1,87 @@
+.amplify-tabs__list {
+  --internal-item-margin-start: 0;
+  --internal-item-margin-end: calc(
+    -1 * var(--amplify-components-tabs-item-border-width)
+  );
+  --internal-item-border-width: 0 0
+    var(--amplify-components-tabs-border-width) 0;
+  --internal-item-flex: initial;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--amplify-components-tabs-background-color);
+  box-shadow: var(--amplify-components-tabs-box-shadow);
+  border-width: var(--internal-item-border-width);
+  border-style: var(--amplify-components-tabs-border-style);
+  border-color: var(--amplify-components-tabs-border-color);
+  gap: var(--amplify-components-tabs-gap);
+}
+.amplify-tabs__list--top {
+  --internal-item-border-width: var(--amplify-components-tabs-border-width)
+    0 0 0;
+  --internal-item-margin-start: calc(
+    -1 * var(--amplify-components-tabs-item-border-width)
+  );
+  --internal-item-margin-end: 0;
+}
+.amplify-tabs__list--equal {
+  --internal-item-flex: 1 1 0;
+}
+.amplify-tabs__list--relative {
+  --internal-item-flex: 1 1 auto;
+}
+.amplify-tabs__panel {
+  display: none;
+  background-color: var(--amplify-components-tabs-panel-background-color);
+  padding-inline: var(--amplify-components-tabs-panel-padding-inline);
+  padding-block: var(--amplify-components-tabs-panel-padding-block);
+}
+.amplify-tabs__panel--active {
+  display: block;
+}
+.amplify-tabs__item {
+  position: relative;
+  background-color: var(--amplify-components-tabs-item-background-color);
+  box-sizing: border-box;
+  color: var(--amplify-components-tabs-item-color);
+  font-size: var(--amplify-components-tabs-item-font-size);
+  font-weight: var(--amplify-components-tabs-item-font-weight);
+  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
+  text-align: var(--amplify-components-tabs-item-text-align);
+  transition: all var(--amplify-components-tabs-item-transition-duration);
+  border-width: var(--internal-item-border-width);
+  border-style: var(--amplify-components-tabs-item-border-style);
+  border-color: var(--amplify-components-tabs-item-border-color);
+  flex: var(--internal-item-flex);
+  margin-block-start: var(--internal-item-margin-start);
+  margin-block-end: var(--internal-item-margin-end);
+}
+.amplify-tabs__item--active {
+  color: var(--amplify-components-tabs-item-active-color);
+  border-color: var(--amplify-components-tabs-item-active-border-color);
+  background-color: var(--amplify-components-tabs-item-active-background-color);
+  transition-property: none;
+}
+.amplify-tabs__item:hover {
+  color: var(--amplify-components-tabs-item-hover-color);
+  cursor: pointer;
+}
+.amplify-tabs__item:focus-visible {
+  z-index: 2;
+  color: var(--amplify-components-tabs-item-focus-color);
+  background-color: var(--amplify-components-tabs-item-focus-background-color);
+  border-color: var(--amplify-components-tabs-item-focus-border-color);
+  box-shadow: var(--amplify-components-tabs-item-focus-box-shadow);
+}
+.amplify-tabs__item:active {
+  background-color: var(--amplify-components-tabs-item-active-background-color);
+  border-color: var(--amplify-components-tabs-item-active-border-color);
+  box-shadow: var(--amplify-components-tabs-item-active-box-shadow);
+  color: var(--amplify-components-tabs-item-active-color);
+}
+.amplify-tabs__item[disabled] {
+  background-color: var(--amplify-components-tabs-item-disabled-background-color);
+  border-color: var(--amplify-components-tabs-item-disabled-border-color);
+  box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow);
+  color: var(--amplify-components-tabs-item-disabled-color);
+  cursor: not-allowed;
+}

package/dist/styles/tabs.layer.css

@@ -0,0 +1,89 @@
+@layer amplify.components {
+.amplify-tabs__list {
+  --internal-item-margin-start: 0;
+  --internal-item-margin-end: calc(
+    -1 * var(--amplify-components-tabs-item-border-width)
+  );
+  --internal-item-border-width: 0 0
+    var(--amplify-components-tabs-border-width) 0;
+  --internal-item-flex: initial;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--amplify-components-tabs-background-color);
+  box-shadow: var(--amplify-components-tabs-box-shadow);
+  border-width: var(--internal-item-border-width);
+  border-style: var(--amplify-components-tabs-border-style);
+  border-color: var(--amplify-components-tabs-border-color);
+  gap: var(--amplify-components-tabs-gap);
+}
+.amplify-tabs__list--top {
+  --internal-item-border-width: var(--amplify-components-tabs-border-width)
+    0 0 0;
+  --internal-item-margin-start: calc(
+    -1 * var(--amplify-components-tabs-item-border-width)
+  );
+  --internal-item-margin-end: 0;
+}
+.amplify-tabs__list--equal {
+  --internal-item-flex: 1 1 0;
+}
+.amplify-tabs__list--relative {
+  --internal-item-flex: 1 1 auto;
+}
+.amplify-tabs__panel {
+  display: none;
+  background-color: var(--amplify-components-tabs-panel-background-color);
+  padding-inline: var(--amplify-components-tabs-panel-padding-inline);
+  padding-block: var(--amplify-components-tabs-panel-padding-block);
+}
+.amplify-tabs__panel--active {
+  display: block;
+}
+.amplify-tabs__item {
+  position: relative;
+  background-color: var(--amplify-components-tabs-item-background-color);
+  box-sizing: border-box;
+  color: var(--amplify-components-tabs-item-color);
+  font-size: var(--amplify-components-tabs-item-font-size);
+  font-weight: var(--amplify-components-tabs-item-font-weight);
+  padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
+  text-align: var(--amplify-components-tabs-item-text-align);
+  transition: all var(--amplify-components-tabs-item-transition-duration);
+  border-width: var(--internal-item-border-width);
+  border-style: var(--amplify-components-tabs-item-border-style);
+  border-color: var(--amplify-components-tabs-item-border-color);
+  flex: var(--internal-item-flex);
+  margin-block-start: var(--internal-item-margin-start);
+  margin-block-end: var(--internal-item-margin-end);
+}
+.amplify-tabs__item--active {
+  color: var(--amplify-components-tabs-item-active-color);
+  border-color: var(--amplify-components-tabs-item-active-border-color);
+  background-color: var(--amplify-components-tabs-item-active-background-color);
+  transition-property: none;
+}
+.amplify-tabs__item:hover {
+  color: var(--amplify-components-tabs-item-hover-color);
+  cursor: pointer;
+}
+.amplify-tabs__item:focus-visible {
+  z-index: 2;
+  color: var(--amplify-components-tabs-item-focus-color);
+  background-color: var(--amplify-components-tabs-item-focus-background-color);
+  border-color: var(--amplify-components-tabs-item-focus-border-color);
+  box-shadow: var(--amplify-components-tabs-item-focus-box-shadow);
+}
+.amplify-tabs__item:active {
+  background-color: var(--amplify-components-tabs-item-active-background-color);
+  border-color: var(--amplify-components-tabs-item-active-border-color);
+  box-shadow: var(--amplify-components-tabs-item-active-box-shadow);
+  color: var(--amplify-components-tabs-item-active-color);
+}
+.amplify-tabs__item[disabled] {
+  background-color: var(--amplify-components-tabs-item-disabled-background-color);
+  border-color: var(--amplify-components-tabs-item-disabled-border-color);
+  box-shadow: var(--amplify-components-tabs-item-disabled-box-shadow);
+  color: var(--amplify-components-tabs-item-disabled-color);
+  cursor: not-allowed;
+}
+}

package/dist/styles/text.css

@@ -0,0 +1,40 @@
+.amplify-text {
+  display: block;
+  color: var(--amplify-components-text-color);
+}
+b.amplify-text,
+em.amplify-text,
+i.amplify-text,
+span.amplify-text,
+strong.amplify-text {
+  display: inline;
+}
+
+.amplify-text--truncated {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.amplify-text--primary {
+  color: var(--amplify-components-text-primary-color);
+}
+.amplify-text--secondary {
+  color: var(--amplify-components-text-secondary-color);
+}
+.amplify-text--tertiary {
+  color: var(--amplify-components-text-tertiary-color);
+}
+.amplify-text--error {
+  color: var(--amplify-components-text-error-color);
+}
+.amplify-text--info {
+  color: var(--amplify-components-text-info-color);
+}
+.amplify-text--success {
+  color: var(--amplify-components-text-success-color);
+}
+.amplify-text--warning {
+  color: var(--amplify-components-text-warning-color);
+}

package/dist/styles/text.layer.css

@@ -0,0 +1,42 @@
+@layer amplify.components {
+.amplify-text {
+  display: block;
+  color: var(--amplify-components-text-color);
+}
+b.amplify-text,
+em.amplify-text,
+i.amplify-text,
+span.amplify-text,
+strong.amplify-text {
+  display: inline;
+}
+
+.amplify-text--truncated {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.amplify-text--primary {
+  color: var(--amplify-components-text-primary-color);
+}
+.amplify-text--secondary {
+  color: var(--amplify-components-text-secondary-color);
+}
+.amplify-text--tertiary {
+  color: var(--amplify-components-text-tertiary-color);
+}
+.amplify-text--error {
+  color: var(--amplify-components-text-error-color);
+}
+.amplify-text--info {
+  color: var(--amplify-components-text-info-color);
+}
+.amplify-text--success {
+  color: var(--amplify-components-text-success-color);
+}
+.amplify-text--warning {
+  color: var(--amplify-components-text-warning-color);
+}
+}