@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/styles/select.layer.css

@@ -0,0 +1,130 @@
+@layer amplify.components {
+.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);
+}
+}

package/dist/styles/selectField.css

@@ -0,0 +1,18 @@
+.amplify-selectfield {
+  flex-direction: var(--amplify-components-selectfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-selectfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-selectfield-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-selectfield-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-selectfield-focus-border-color
+  );
+  --amplify-components-field-label-color: var(
+    --amplify-components-selectfield-label-color
+  );
+}

package/dist/styles/selectField.layer.css

@@ -0,0 +1,20 @@
+@layer amplify.components {
+.amplify-selectfield {
+  flex-direction: var(--amplify-components-selectfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-selectfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-selectfield-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-selectfield-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-selectfield-focus-border-color
+  );
+  --amplify-components-field-label-color: var(
+    --amplify-components-selectfield-label-color
+  );
+}
+}

package/dist/styles/sliderField.css

@@ -0,0 +1,143 @@
+.amplify-sliderfield {
+  flex-direction: column;
+}
+
+.amplify-sliderfield__label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.amplify-sliderfield__root {
+  align-items: center;
+  box-sizing: content-box;
+  display: flex;
+  padding-block: var(--amplify-components-sliderfield-padding-block);
+  position: relative;
+  touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+}
+.amplify-sliderfield__root--disabled {
+  cursor: not-allowed;
+}
+.amplify-sliderfield__root--horizontal {
+  height: var(--amplify-internal-sliderfield-root-height);
+}
+.amplify-sliderfield__root--vertical {
+  flex-direction: column;
+  width: var(--amplify-internal-sliderfield-root-width);
+}
+.amplify-sliderfield__root--large {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+}
+.amplify-sliderfield__root--small {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+}
+
+.amplify-sliderfield__track {
+  position: relative;
+  flex-grow: 1;
+  border-radius: var(--amplify-components-sliderfield-track-border-radius);
+  background-color: var(--amplify-components-sliderfield-track-background-color);
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-width: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-height: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+}
+.amplify-sliderfield__track--horizontal {
+  height: var(--amplify-internal-sliderfield-track-height);
+  min-width: var(--amplify-internal-sliderfield-track-min-width);
+}
+.amplify-sliderfield__track--vertical {
+  width: var(--amplify-internal-sliderfield-track-width);
+  min-height: var(--amplify-internal-sliderfield-track-min-height);
+}
+.amplify-sliderfield__track--large {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+}
+.amplify-sliderfield__track--small {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+}
+
+.amplify-sliderfield__range {
+  position: absolute;
+  border-radius: var(--amplify-components-sliderfield-range-border-radius);
+  background-color: var(--amplify-components-sliderfield-range-background-color);
+}
+.amplify-sliderfield__range--disabled {
+  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
+}
+.amplify-sliderfield__range--horizontal {
+  height: 100%;
+}
+.amplify-sliderfield__range--vertical {
+  width: 100%;
+}
+
+.amplify-sliderfield__thumb {
+  display: block;
+  width: var(--amplify-components-sliderfield-thumb-width);
+  height: var(--amplify-components-sliderfield-thumb-height);
+  background-color: var(--amplify-components-sliderfield-thumb-background-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
+  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
+  border-width: var(--amplify-components-sliderfield-thumb-border-width);
+  border-color: var(--amplify-components-sliderfield-thumb-border-color);
+  border-style: var(--amplify-components-sliderfield-thumb-border-style);
+}
+.amplify-sliderfield__thumb:hover {
+  background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
+  border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
+}
+.amplify-sliderfield__thumb:focus {
+  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
+}
+.amplify-sliderfield__thumb--disabled {
+  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
+  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
+}
+.amplify-sliderfield__thumb--large {
+  width: var(--amplify-components-sliderfield-large-thumb-width);
+  height: var(--amplify-components-sliderfield-large-thumb-height);
+}
+.amplify-sliderfield__thumb--small {
+  width: var(--amplify-components-sliderfield-small-thumb-width);
+  height: var(--amplify-components-sliderfield-small-thumb-height);
+}

package/dist/styles/sliderField.layer.css

@@ -0,0 +1,145 @@
+@layer amplify.components {
+.amplify-sliderfield {
+  flex-direction: column;
+}
+
+.amplify-sliderfield__label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.amplify-sliderfield__root {
+  align-items: center;
+  box-sizing: content-box;
+  display: flex;
+  padding-block: var(--amplify-components-sliderfield-padding-block);
+  position: relative;
+  touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+}
+.amplify-sliderfield__root--disabled {
+  cursor: not-allowed;
+}
+.amplify-sliderfield__root--horizontal {
+  height: var(--amplify-internal-sliderfield-root-height);
+}
+.amplify-sliderfield__root--vertical {
+  flex-direction: column;
+  width: var(--amplify-internal-sliderfield-root-width);
+}
+.amplify-sliderfield__root--large {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+}
+.amplify-sliderfield__root--small {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+}
+
+.amplify-sliderfield__track {
+  position: relative;
+  flex-grow: 1;
+  border-radius: var(--amplify-components-sliderfield-track-border-radius);
+  background-color: var(--amplify-components-sliderfield-track-background-color);
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-width: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-height: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+}
+.amplify-sliderfield__track--horizontal {
+  height: var(--amplify-internal-sliderfield-track-height);
+  min-width: var(--amplify-internal-sliderfield-track-min-width);
+}
+.amplify-sliderfield__track--vertical {
+  width: var(--amplify-internal-sliderfield-track-width);
+  min-height: var(--amplify-internal-sliderfield-track-min-height);
+}
+.amplify-sliderfield__track--large {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+}
+.amplify-sliderfield__track--small {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+}
+
+.amplify-sliderfield__range {
+  position: absolute;
+  border-radius: var(--amplify-components-sliderfield-range-border-radius);
+  background-color: var(--amplify-components-sliderfield-range-background-color);
+}
+.amplify-sliderfield__range--disabled {
+  background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
+}
+.amplify-sliderfield__range--horizontal {
+  height: 100%;
+}
+.amplify-sliderfield__range--vertical {
+  width: 100%;
+}
+
+.amplify-sliderfield__thumb {
+  display: block;
+  width: var(--amplify-components-sliderfield-thumb-width);
+  height: var(--amplify-components-sliderfield-thumb-height);
+  background-color: var(--amplify-components-sliderfield-thumb-background-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
+  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
+  border-width: var(--amplify-components-sliderfield-thumb-border-width);
+  border-color: var(--amplify-components-sliderfield-thumb-border-color);
+  border-style: var(--amplify-components-sliderfield-thumb-border-style);
+}
+.amplify-sliderfield__thumb:hover {
+  background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
+  border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
+}
+.amplify-sliderfield__thumb:focus {
+  border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
+}
+.amplify-sliderfield__thumb--disabled {
+  background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
+  border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
+  box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
+}
+.amplify-sliderfield__thumb--large {
+  width: var(--amplify-components-sliderfield-large-thumb-width);
+  height: var(--amplify-components-sliderfield-large-thumb-height);
+}
+.amplify-sliderfield__thumb--small {
+  width: var(--amplify-components-sliderfield-small-thumb-width);
+  height: var(--amplify-components-sliderfield-small-thumb-height);
+}
+}

package/dist/styles/stepperField.css

@@ -0,0 +1,77 @@
+.amplify-stepperfield {
+  flex-direction: var(--amplify-components-stepperfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-button-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-stepperfield-input-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-stepperfield-input-font-size
+  );
+  --amplify-components-button-color: var(
+    --amplify-components-stepperfield-button-color
+  );
+  --amplify-components-button-active-color: var(
+    --amplify-components-stepperfield-button-active-color
+  );
+  --amplify-components-button-active-background-color: var(
+    --amplify-components-stepperfield-button-active-background-color
+  );
+  --amplify-components-button-focus-color: var(
+    --amplify-components-stepperfield-button-focus-color
+  );
+  --amplify-components-button-focus-background-color: var(
+    --amplify-components-stepperfield-button-focus-background-color
+  );
+  --amplify-components-button-disabled-color: var(
+    --amplify-components-stepperfield-button-disabled-color
+  );
+  --amplify-components-button-disabled-background-color: var(
+    --amplify-components-stepperfield-button-disabled-background-color
+  );
+  --amplify-components-button-hover-color: var(
+    --amplify-components-stepperfield-button-hover-color
+  );
+  --amplify-components-button-hover-background-color: var(
+    --amplify-components-stepperfield-button-hover-background-color
+  );
+}
+
+.amplify-stepperfield__button--decrease,
+.amplify-stepperfield__button--increase {
+  background-color: var(--amplify-components-stepperfield-button-background-color);
+}
+.amplify-stepperfield__button--decrease--disabled,
+.amplify-stepperfield__button--increase--disabled {
+  background-color: var(--amplify-components-stepperfield-button-disabled-background-color);
+}
+.amplify-stepperfield__button--decrease--quiet,
+.amplify-stepperfield__button--increase--quiet {
+  border-width: 0 0 var(--amplify-components-button-border-width) 0;
+  border-radius: 0;
+}
+
+.amplify-stepperfield__button--decrease[data-invalid=true] {
+  border-inline-end: none;
+}
+
+.amplify-stepperfield__button--increase[data-invalid=true] {
+  border-inline-start: none;
+}
+
+.amplify-stepperfield__input {
+  -moz-appearance: textfield;
+  text-align: var(--amplify-components-stepperfield-input-text-align);
+}
+.amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
+  border-inline-start: none;
+  border-inline-end: none;
+}

package/dist/styles/stepperField.layer.css

@@ -0,0 +1,79 @@
+@layer amplify.components {
+.amplify-stepperfield {
+  flex-direction: var(--amplify-components-stepperfield-flex-direction);
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-button-border-color: var(
+    --amplify-components-stepperfield-border-color
+  );
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-stepperfield-input-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-stepperfield-input-font-size
+  );
+  --amplify-components-button-color: var(
+    --amplify-components-stepperfield-button-color
+  );
+  --amplify-components-button-active-color: var(
+    --amplify-components-stepperfield-button-active-color
+  );
+  --amplify-components-button-active-background-color: var(
+    --amplify-components-stepperfield-button-active-background-color
+  );
+  --amplify-components-button-focus-color: var(
+    --amplify-components-stepperfield-button-focus-color
+  );
+  --amplify-components-button-focus-background-color: var(
+    --amplify-components-stepperfield-button-focus-background-color
+  );
+  --amplify-components-button-disabled-color: var(
+    --amplify-components-stepperfield-button-disabled-color
+  );
+  --amplify-components-button-disabled-background-color: var(
+    --amplify-components-stepperfield-button-disabled-background-color
+  );
+  --amplify-components-button-hover-color: var(
+    --amplify-components-stepperfield-button-hover-color
+  );
+  --amplify-components-button-hover-background-color: var(
+    --amplify-components-stepperfield-button-hover-background-color
+  );
+}
+
+.amplify-stepperfield__button--decrease,
+.amplify-stepperfield__button--increase {
+  background-color: var(--amplify-components-stepperfield-button-background-color);
+}
+.amplify-stepperfield__button--decrease--disabled,
+.amplify-stepperfield__button--increase--disabled {
+  background-color: var(--amplify-components-stepperfield-button-disabled-background-color);
+}
+.amplify-stepperfield__button--decrease--quiet,
+.amplify-stepperfield__button--increase--quiet {
+  border-width: 0 0 var(--amplify-components-button-border-width) 0;
+  border-radius: 0;
+}
+
+.amplify-stepperfield__button--decrease[data-invalid=true] {
+  border-inline-end: none;
+}
+
+.amplify-stepperfield__button--increase[data-invalid=true] {
+  border-inline-start: none;
+}
+
+.amplify-stepperfield__input {
+  -moz-appearance: textfield;
+  text-align: var(--amplify-components-stepperfield-input-text-align);
+}
+.amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
+  border-inline-start: none;
+  border-inline-end: none;
+}
+}

package/dist/styles/switchField.css

@@ -0,0 +1,76 @@
+.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;
+}