@macive/ui 0.0.10 → 0.0.11

package/dist/css/Button.css

@@ -1,830 +0,0 @@
-.Button-Button {
-  --pc-button-micro-min-height: var(--p-font-line-height-2);
-  --pc-button-slim-min-height: var(--p-font-line-height-4);
-  --pc-button-large-min-height: 44px;
-  --pc-button-vertical-padding: calc((36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2);
-  --pc-button-slim-vertical-padding: calc((var(--pc-button-slim-min-height) - var(--p-font-line-height-2) - var(--p-space-05)) / 2);
-  --pc-button-large-vertical-padding: calc((var(--pc-button-large-min-height) - var(--p-font-line-height-2) - var(--p-space-05)) / 2);
-  --pc-button-spinner-size: 20px;
-  --pc-button-segment: 10;
-  --pc-button-focused: 20;
-  --pc-button-disclosure-icon-offset: -6px;
-  position: relative;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  min-width: 36px;
-  margin: 0;
-  padding: calc((36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2) var(--p-space-4);
-  background: var(--p-color-bg);
-  box-shadow: var(--p-shadow-sm);
-  border-radius: var(--p-border-radius-3);
-  color: var(--p-color-text);
-  border: var(--p-border-width-1) solid var(--p-color-border-strong);
-  line-height: 1;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-}
-.Button-Button::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: calc(-1 * calc(var(--p-border-width-1) + 1px));
-  right: calc(-1 * calc(var(--p-border-width-1) + 1px));
-  bottom: calc(-1 * calc(var(--p-border-width-1) + 1px));
-  left: calc(-1 * calc(var(--p-border-width-1) + 1px));
-  display: block;
-  pointer-events: none;
-  box-shadow: 0 0 0 calc(-1 * calc(var(--p-border-width-1) + 1px)) var(--p-color-border-interactive-focus);
-  transition: box-shadow var(--p-motion-duration-100) var(--p-motion-ease);
-  border-radius: var(--p-border-radius-1);
-}
-.Button-Button svg {
-  fill: var(--p-color-icon);
-}
-.Button-Button:hover {
-  background: var(--p-color-bg-hover);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-Button:focus-visible {
-  box-shadow: var(--p-shadow-sm);
-  outline: 0;
-}
-.Button-Button:focus-visible::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-Button:active {
-  background: var(--p-color-bg-subdued-active);
-  box-shadow: var(--p-shadow-sm);
-}
-.Button-Button:active::after {
-  border: none;
-  box-shadow: none;
-}
-.Button-Button.Button-pressed {
-  background: var(--p-color-bg-inset-strong);
-  box-shadow: var(--p-shadow-inset-md);
-  color: var(--p-color-text-on-color);
-  border-color: var(--p-color-border-inverse);
-}
-.Button-Button.Button-pressed svg {
-  fill: currentColor;
-}
-@media (-ms-high-contrast: active) {
-  .Button-Button {
-    border: var(--p-border-width-1) solid windowText;
-  }
-}
-.Button-Button.Button-disabled {
-  transition: none;
-  box-shadow: none;
-  border-color: var(--p-color-border-disabled);
-  background: var(--p-color-bg-disabled);
-  color: var(--p-color-text-disabled);
-}
-.Button-Button.Button-disabled svg {
-  fill: var(--p-color-icon-disabled);
-}
-.Button-Button.Button-connectedDisclosure {
-  z-index: var(--pc-button-segment);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.Button-Button.Button-connectedDisclosure::after {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.Button-Button.Button-connectedDisclosure:focus {
-  z-index: var(--pc-button-focused);
-}
-
-.Button-Content {
-  font-size: var(--p-font-size-100);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
-  text-transform: initial;
-  letter-spacing: initial;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 1px;
-  min-height: 1px;
-}
-.Button-Button:not(.Button-plain) .Button-Content {
-  width: 100%;
-}
-
-.Button-textAlignLeft {
-  justify-content: flex-start;
-  text-align: left;
-}
-.Button-textAlignLeft .Button-Content {
-  justify-content: flex-start;
-}
-
-.Button-textAlignStart {
-  justify-content: flex-start;
-  text-align: start;
-}
-.Button-textAlignStart .Button-Content {
-  justify-content: flex-start;
-}
-
-.Button-textAlignCenter {
-  justify-content: center;
-  text-align: center;
-}
-
-.Button-textAlignRight {
-  justify-content: flex-end;
-  text-align: right;
-}
-.Button-textAlignRight .Button-Content {
-  justify-content: flex-end;
-}
-
-.Button-textAlignEnd {
-  justify-content: flex-end;
-  text-align: end;
-}
-.Button-textAlignEnd .Button-Content {
-  justify-content: flex-end;
-}
-
-.Button-Icon {
-  margin-left: calc(-1 * (var(--p-space-1)));
-}
-.Button-Icon:last-child {
-  margin-right: var(--pc-button-disclosure-icon-offset);
-  margin-left: var(--p-space-1);
-}
-.Button-fullWidth.Button-textAlignLeft .Button-Icon:last-child:not(:only-child) {
-  margin-left: auto;
-}
-.Button-Icon + *:not(.Button-Icon) {
-  margin-left: var(--p-space-1);
-}
-
-.Button-hidden {
-  visibility: hidden;
-}
-
-.Button-Spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: calc(-1 * var(--pc-button-spinner-size) / 2);
-  margin-left: calc(-1 * var(--pc-button-spinner-size) / 2);
-}
-
-.Button-primary,
-.Button-destructive,
-.Button-primaryPlain {
-  position: relative;
-  background: var(--pc-button-color);
-  border-width: 0;
-  border-color: transparent;
-  box-shadow: var(--p-shadow-sm);
-  color: var(--pc-button-text);
-}
-.Button-primary::after,
-.Button-destructive::after,
-.Button-primaryPlain::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: calc(-1 * 1px);
-  right: calc(-1 * 1px);
-  bottom: calc(-1 * 1px);
-  left: calc(-1 * 1px);
-  display: block;
-  pointer-events: none;
-  box-shadow: 0 0 0 calc(-1 * 1px) var(--p-color-border-interactive-focus);
-  transition: box-shadow var(--p-motion-duration-100) var(--p-motion-ease);
-  border-radius: var(--p-border-radius-1);
-}
-.Button-primary:hover,
-.Button-destructive:hover,
-.Button-primaryPlain:hover {
-  background: var(--pc-button-color-hover);
-  border-color: transparent;
-  color: var(--pc-button-text);
-}
-.Button-primary:focus,
-.Button-destructive:focus,
-.Button-primaryPlain:focus {
-  border-color: transparent;
-  box-shadow: var(--p-shadow-sm);
-}
-.Button-primary:active,
-.Button-destructive:active,
-.Button-primaryPlain:active {
-  background: var(--pc-button-color-active);
-  border-color: transparent;
-  box-shadow: var(--p-shadow-sm);
-}
-.Button-primary.Button-pressed,
-.Button-destructive.Button-pressed,
-.Button-primaryPlain.Button-pressed {
-  color: var(--pc-button-text);
-  background: var(--pc-button-color-depressed);
-  border-color: transparent;
-  box-shadow: var(--p-shadow-sm);
-}
-.Button-primary.Button-pressed:hover, .Button-primary.Button-pressed:focus,
-.Button-destructive.Button-pressed:hover,
-.Button-destructive.Button-pressed:focus,
-.Button-primaryPlain.Button-pressed:hover,
-.Button-primaryPlain.Button-pressed:focus {
-  background: var(--pc-button-color-depressed);
-  box-shadow: var(--p-shadow-sm);
-}
-.Button-primary.Button-disabled,
-.Button-destructive.Button-disabled,
-.Button-primaryPlain.Button-disabled {
-  color: var(--p-color-text-disabled);
-  box-shadow: none;
-  border-color: transparent;
-}
-.Button-primary.Button-disabled svg,
-.Button-destructive.Button-disabled svg,
-.Button-primaryPlain.Button-disabled svg {
-  fill: var(--p-color-icon-disabled);
-}
-
-.Button-primary {
-  --pc-button-color: var(--p-color-bg-primary);
-  --pc-button-text: var(--p-color-text-on-color);
-  --pc-button-color-hover: var(--p-color-bg-primary-hover);
-  --pc-button-color-active: var(--p-color-bg-primary-active);
-  --pc-button-color-depressed: var(--p-color-bg-primary-active);
-}
-.Button-primary svg {
-  fill: var(--p-color-icon-on-color);
-}
-.Button-primary.Button-disabled {
-  background: var(--p-color-bg-disabled);
-}
-
-.Button-destructive {
-  --pc-button-color: var(--p-color-bg-critical-strong);
-  --pc-button-text: var(--p-color-text-on-color);
-  --pc-button-color-hover: var(--p-color-bg-critical-strong-hover);
-  --pc-button-color-active: var(--p-color-bg-critical-strong-active);
-  --pc-button-color-depressed: var(--p-color-bg-critical-strong-active);
-}
-.Button-destructive svg {
-  fill: var(--p-color-icon-on-color);
-}
-.Button-destructive.Button-disabled {
-  background: var(--p-color-bg-disabled);
-}
-
-.Button-primaryPlain {
-  --pc-button-color: var(--p-color-bg-interactive-subdued-active);
-  --pc-button-text: var(--p-color-text-interactive-hover);
-  --pc-button-color-hover: var(--p-color-bg-interactive-subdued-active);
-  --pc-button-color-active: var(--p-color-bg-interactive-subdued-active);
-  --pc-button-color-depressed: var(--p-surface-selected-depressed);
-  box-shadow: none;
-}
-.Button-primaryPlain path {
-  fill: var(--p-color-icon-on-color);
-}
-.Button-primaryPlain:is(:hover, :focus, :active) {
-  color: var(--p-color-text-interactive-active);
-  box-shadow: none;
-}
-.Button-primaryPlain.Button-disabled {
-  background: var(--p-color-bg-disabled);
-}
-
-.Button-outline {
-  background: transparent;
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-  color: var(--p-color-text);
-  position: relative;
-}
-.Button-outline::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: calc(-1 * calc(1px + 1px));
-  right: calc(-1 * calc(1px + 1px));
-  bottom: calc(-1 * calc(1px + 1px));
-  left: calc(-1 * calc(1px + 1px));
-  display: block;
-  pointer-events: none;
-  box-shadow: 0 0 0 calc(-1 * calc(1px + 1px)) var(--p-color-border-interactive-focus);
-  transition: box-shadow var(--p-motion-duration-100) var(--p-motion-ease);
-  border-radius: var(--p-border-radius-1);
-}
-.Button-outline:hover {
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-  background: var(--p-color-bg-hover);
-}
-.Button-outline:focus-visible {
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-}
-.Button-outline:focus-visible::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-outline:active {
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-  background: var(--p-color-bg-active);
-}
-.Button-outline:active::after {
-  box-shadow: none;
-}
-.Button-outline.Button-pressed {
-  background: var(--p-color-bg-subdued-active);
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  box-shadow: none;
-  color: var(--pc-button-text);
-}
-.Button-outline.Button-disabled {
-  border: var(--p-border-width-1) solid var(--p-color-border-disabled);
-  color: var(--p-color-text-disabled);
-  background: transparent;
-  box-shadow: none;
-}
-.Button-outline.Button-destructive {
-  background: transparent;
-  border: var(--p-border-width-1) solid var(--p-color-border-critical);
-  box-shadow: none;
-  color: var(--p-color-text-critical);
-}
-.Button-outline.Button-destructive svg {
-  fill: var(--p-color-icon-critical);
-}
-.Button-outline.Button-destructive:hover {
-  border: var(--p-border-width-1) solid var(--p-color-border-critical);
-  background: var(--p-color-bg-critical-subdued);
-}
-.Button-outline.Button-destructive:focus-visible {
-  border: var(--p-border-width-1) solid var(--p-color-border-critical);
-}
-.Button-outline.Button-destructive:focus-visible::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-outline.Button-destructive:active {
-  border: var(--p-border-width-1) solid var(--p-color-border-critical);
-  background: var(--p-color-bg-critical-subdued);
-}
-.Button-outline.Button-destructive.Button-disabled {
-  border: var(--p-border-width-1) solid var(--p-color-border-disabled);
-  background: transparent;
-  color: var(--p-color-text-disabled);
-}
-.Button-outline.Button-destructive.Button-pressed {
-  border: var(--p-border-width-1) solid var(--p-color-border-critical);
-  background: var(--p-color-bg-critical-subdued);
-  color: var(--p-color-text-critical);
-}
-
-.Button-disabled {
-  cursor: default;
-  pointer-events: none;
-}
-
-.Button-loading {
-  position: relative;
-}
-.Button-loading, .Button-loading:hover, .Button-loading.Button-disabled {
-  color: transparent;
-}
-
-.Button-loading.Button-disabled svg {
-  fill: var(--p-color-icon-subdued);
-}
-
-.Button-plain {
-  margin: calc(-1 * var(--pc-button-vertical-padding)) calc(-1 * var(--p-space-2));
-  padding-left: var(--p-space-2);
-  padding-right: var(--p-space-2);
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  color: var(--p-color-text-interactive);
-}
-.Button-plain svg {
-  fill: var(--p-color-icon-interactive);
-}
-.Button-plain > .Button-Content {
-  font-weight: var(--p-font-weight-regular);
-  position: relative;
-}
-.Button-plain > .Button-Content::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: calc(-1 * 1px);
-  right: calc(-1 * 1px);
-  bottom: calc(-1 * 1px);
-  left: calc(-1 * 1px);
-  display: block;
-  pointer-events: none;
-  box-shadow: 0 0 0 calc(-1 * 1px) var(--p-color-border-interactive-focus);
-  transition: box-shadow var(--p-motion-duration-100) var(--p-motion-ease);
-  border-radius: var(--p-border-radius-1);
-}
-.Button-plain:hover, .Button-plain:focus:not(.Button-disabled) {
-  color: var(--p-color-text-interactive-hover);
-  background: transparent;
-  box-shadow: none;
-}
-.Button-plain:hover svg, .Button-plain:focus:not(.Button-disabled) svg {
-  fill: var(--p-color-icon-interactive-hover);
-}
-.Button-plain:hover:not(.Button-removeUnderline), .Button-plain:focus:not(.Button-disabled):not(.Button-removeUnderline) {
-  text-decoration: underline;
-}
-.Button-plain.Button-pressed, .Button-plain:active {
-  color: var(--p-color-text-interactive-active);
-  background: transparent;
-  box-shadow: none;
-}
-.Button-plain.Button-pressed svg, .Button-plain:active svg {
-  fill: var(--p-color-icon-interactive-active);
-}
-@media (-ms-high-contrast: active) {
-  .Button-plain.Button-pressed, .Button-plain:active {
-    outline: none;
-  }
-}
-.Button-plain:focus-visible::after {
-  content: none;
-}
-@media (-ms-high-contrast: active) {
-  .Button-plain:focus-visible {
-    outline: none;
-  }
-}
-@media (-ms-high-contrast: active) {
-  .Button-plain:focus-visible > .Button-Content {
-    outline: var(--p-border-width-2) dotted;
-  }
-}
-.Button-plain:focus-visible:not(:active) > .Button-Content::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-plain:active:not(.Button-iconOnly) > .Button-Content, .Button-plain.Button-pressed:not(.Button-iconOnly) > .Button-Content {
-  padding: var(--p-space-05) var(--p-space-1);
-  margin: calc(-1 * var(--p-space-05)) calc(-1 * var(--p-space-1));
-  background: transparent;
-  border-radius: var(--p-border-radius-1);
-}
-.Button-plain.Button-fullWidth {
-  margin-left: 0;
-  margin-right: 0;
-}
-.Button-plain.Button-disabled {
-  color: var(--p-color-text-disabled);
-  background: none;
-}
-.Button-plain.Button-disabled.Button-loading {
-  color: transparent;
-}
-.Button-plain.Button-destructive {
-  color: var(--p-color-text-critical);
-}
-.Button-plain.Button-destructive svg {
-  fill: var(--p-color-icon-critical);
-}
-.Button-plain.Button-destructive:hover {
-  color: var(--p-color-bg-critical-strong-hover);
-}
-.Button-plain.Button-destructive:active, .Button-plain.Button-destructive.Button-pressed {
-  color: var(--p-color-text-critical-active);
-}
-.Button-plain.Button-destructive.Button-disabled {
-  color: var(--p-color-text-disabled);
-}
-.Button-plain.Button-sizeSlim {
-  margin-top: calc(-1 * var(--pc-button-slim-vertical-padding));
-  margin-bottom: calc(-1 * var(--pc-button-slim-vertical-padding));
-}
-.Button-plain.Button-sizeLarge {
-  margin: calc(-1 * var(--pc-button-large-vertical-padding)) calc(-1 * var(--p-space-5));
-}
-.Button-plain.Button-iconOnly {
-  margin: calc(-1 * var(--p-space-2));
-}
-.Button-plain.Button-iconOnly svg {
-  fill: var(--p-color-icon);
-}
-.Button-plain.Button-iconOnly:hover svg {
-  fill: var(--p-color-icon-hover);
-}
-.Button-plain.Button-iconOnly:active svg, .Button-plain.Button-iconOnly.Button-pressed svg {
-  fill: var(--p-color-icon-active);
-}
-.Button-plain.Button-iconOnly.Button-disabled svg {
-  fill: var(--p-color-icon-disabled);
-}
-.Button-plain.Button-destructive.Button-iconOnly svg {
-  fill: var(--p-color-bg-critical-strong);
-}
-.Button-plain.Button-destructive.Button-iconOnly:hover svg {
-  fill: var(--p-color-bg-critical-strong-hover);
-}
-.Button-plain.Button-destructive.Button-iconOnly:active svg, .Button-plain.Button-destructive.Button-iconOnly.Button-pressed svg {
-  fill: var(--p-color-bg-critical-strong-active);
-}
-.Button-plain.Button-destructive.Button-iconOnly.Button-disabled svg {
-  fill: var(--p-color-bg-disabled);
-}
-.Button-plain .Button-Icon {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.Button-fullWidth {
-  display: flex;
-  width: 100%;
-}
-
-.Button-iconOnly {
-  padding-left: var(--p-space-2);
-  padding-right: var(--p-space-2);
-}
-.Button-iconOnly.Button-sizeLarge {
-  padding-left: var(--p-space-3);
-  padding-right: var(--p-space-3);
-}
-.Button-iconOnly.Button-sizeSlim {
-  padding-left: var(--p-space-1);
-  padding-right: var(--p-space-1);
-}
-.Button-iconOnly .Button-Icon:first-child {
-  margin-left: 0;
-}
-.Button-iconOnly .Button-Icon:last-child {
-  margin-right: calc(-1 * var(--p-space-1));
-}
-.Button-iconOnly .Button-Icon:only-child {
-  margin-right: 0;
-}
-
-.Button-sizeMicro {
-  border-radius: var(--p-border-radius-1);
-  padding: var(--p-space-1) var(--p-space-2);
-  min-height: var(--pc-button-micro-min-height);
-}
-.Button-sizeMicro .Button-Content {
-  font-size: var(--p-font-size-100);
-  font-weight: var(--p-font-weight-semibold);
-  line-height: var(--p-font-line-height-2);
-}
-@media (min-width: 48em) {
-  .Button-sizeMicro {
-    padding: var(--p-space-05) var(--p-space-2);
-  }
-  .Button-sizeMicro .Button-Content {
-    font-size: var(--p-font-size-75);
-    line-height: var(--p-font-line-height-1);
-  }
-}
-
-.Button-sizeSlim {
-  min-height: var(--pc-button-slim-min-height);
-  padding: var(--pc-button-slim-vertical-padding) var(--p-space-3);
-}
-
-.Button-sizeLarge {
-  min-height: var(--pc-button-large-min-height);
-  min-width: var(--pc-button-large-min-height);
-  padding: var(--pc-button-large-vertical-padding) var(--p-space-6);
-}
-.Button-sizeLarge .Button-Content {
-  font-size: var(--p-font-size-200);
-  font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-2);
-  text-transform: initial;
-  letter-spacing: initial;
-}
-
-.Button-monochrome {
-  /* INTERACTION */
-  /* UTILITIES */
-}
-.Button-monochrome.Button-outline, .Button-monochrome.Button-plain {
-  color: currentColor;
-}
-.Button-monochrome.Button-outline svg, .Button-monochrome.Button-plain svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-outline:hover, .Button-monochrome.Button-outline:focus, .Button-monochrome.Button-outline:active, .Button-monochrome.Button-plain:hover, .Button-monochrome.Button-plain:focus, .Button-monochrome.Button-plain:active {
-  color: currentColor;
-}
-.Button-monochrome.Button-outline:hover svg, .Button-monochrome.Button-outline:focus svg, .Button-monochrome.Button-outline:active svg, .Button-monochrome.Button-plain:hover svg, .Button-monochrome.Button-plain:focus svg, .Button-monochrome.Button-plain:active svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-outline.Button-disabled, .Button-monochrome.Button-plain.Button-disabled {
-  color: currentColor;
-  opacity: 0.4;
-}
-.Button-monochrome.Button-outline.Button-disabled svg, .Button-monochrome.Button-plain.Button-disabled svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-outline.Button-loading .Button-Text, .Button-monochrome.Button-plain.Button-loading .Button-Text {
-  visibility: hidden;
-}
-.Button-monochrome.Button-outline.Button-iconOnly svg, .Button-monochrome.Button-plain.Button-iconOnly svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-outline.Button-iconOnly:focus svg, .Button-monochrome.Button-outline.Button-iconOnly:active svg, .Button-monochrome.Button-plain.Button-iconOnly:focus svg, .Button-monochrome.Button-plain.Button-iconOnly:active svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-outline.Button-iconOnly.Button-disabled svg, .Button-monochrome.Button-plain.Button-iconOnly.Button-disabled svg {
-  fill: currentColor;
-}
-.Button-monochrome.Button-plain .Button-Text:not(.Button-removeUnderline) {
-  text-decoration: underline;
-}
-.Button-monochrome .Button-pressable:active:not(.Button-variantTertiary, .Button-variantPlain, .Button-variantMonochromePlain) > * {
-  transform: translate3d(0, 1px, 0);
-}
-.Button-monochrome .Button-hidden {
-  visibility: hidden;
-}
-.Button-monochrome.Button-outline {
-  position: relative;
-  border-color: currentColor;
-  box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
-  position: relative;
-}
-.Button-monochrome.Button-outline::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: calc(-1 * calc(2px + 1px));
-  right: calc(-1 * calc(2px + 1px));
-  bottom: calc(-1 * calc(2px + 1px));
-  left: calc(-1 * calc(2px + 1px));
-  display: block;
-  pointer-events: none;
-  box-shadow: 0 0 0 calc(-1 * calc(2px + 1px)) var(--p-color-border-interactive-focus);
-  transition: box-shadow var(--p-motion-duration-100) var(--p-motion-ease);
-  border-radius: var(--p-border-radius-1);
-}
-.Button-monochrome.Button-outline::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: currentColor;
-  opacity: 0;
-  z-index: 0;
-}
-.Button-monochrome.Button-outline.Button-pressed {
-  background: transparent;
-  box-shadow: none;
-  color: currentColor;
-}
-.Button-monochrome.Button-outline.Button-pressed::before {
-  opacity: 0.2;
-}
-.Button-monochrome.Button-outline:hover, .Button-monochrome.Button-outline:focus, .Button-monochrome.Button-outline:active {
-  background-color: transparent;
-  border-color: currentColor;
-}
-.Button-monochrome.Button-outline:hover::before, .Button-monochrome.Button-outline:focus::before, .Button-monochrome.Button-outline:active::before {
-  opacity: 0.07;
-}
-.Button-monochrome.Button-outline:focus-visible {
-  box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
-}
-.Button-monochrome.Button-outline:focus-visible::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Button-monochrome.Button-outline:active::after {
-  box-shadow: none;
-}
-.Button-monochrome.Button-outline:hover::before, .Button-monochrome.Button-outline:active::before {
-  opacity: 0.05;
-}
-
-.Button-ConnectedDisclosureWrapper {
-  display: flex;
-}
-
-.Button-ConnectedDisclosure {
-  z-index: var(--pc-button-segment);
-  margin-left: calc(-1 * var(--p-space-025));
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  height: 100%;
-}
-.Button-ConnectedDisclosure:focus, .Button-ConnectedDisclosure:active {
-  z-index: var(--pc-button-focused);
-}
-.Button-ConnectedDisclosure.Button-primary, .Button-ConnectedDisclosure.Button-destructive {
-  margin-left: var(--p-space-025);
-}
-.Button-ConnectedDisclosure.Button-primary.Button-outline, .Button-ConnectedDisclosure.Button-destructive.Button-outline {
-  margin-left: 0;
-  border-left: 0;
-}
-.Button-ConnectedDisclosure::after {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-[data-buttongroup-segmented=true] .Button-Button,
-[data-buttongroup-segmented=true] .Button-Button::after {
-  border-radius: 0;
-}
-[data-buttongroup-segmented=true] > :first-child .Button-Button,
-[data-buttongroup-segmented=true] > :first-child .Button-Button::after {
-  border-radius: 0;
-  border-top-left-radius: var(--p-border-radius-1);
-  border-bottom-left-radius: var(--p-border-radius-1);
-}
-[data-buttongroup-segmented=true] > :last-child .Button-Button,
-[data-buttongroup-segmented=true] > :last-child .Button-Button::after {
-  border-radius: 0;
-  border-top-right-radius: var(--p-border-radius-1);
-  border-bottom-right-radius: var(--p-border-radius-1);
-}
-[data-buttongroup-segmented=true] > :last-child:first-child .Button-Button,
-[data-buttongroup-segmented=true] > :last-child:first-child .Button-Button::after {
-  border-radius: var(--p-border-radius-1);
-}
-
-[data-buttongroup-connected-top=true] > :first-child .Button-Button,
-[data-buttongroup-connected-top=true] > :first-child .Button-Button::after {
-  border-top-left-radius: 0;
-}
-[data-buttongroup-connected-top=true] > :last-child .Button-Button,
-[data-buttongroup-connected-top=true] > :last-child .Button-Button::after {
-  border-top-right-radius: 0;
-}
-
-[data-buttongroup-full-width=true] .Button-Button {
-  display: flex;
-  width: 100%;
-}
-
-/* TONES */
-.Button-toneSuccess:is(.variantSecondary, .variantTertiary, .variantPlain) {
-  --pc-button-color: var(--p-color-text-success);
-  --pc-button-color_hover: var(--p-color-text-success-hover);
-  --pc-button-color_active: var(--p-color-text-success-active);
-  --pc-button-icon-fill: currentColor;
-}
-
-.Button-toneCritical:is(.variantSecondary, .variantTertiary, .variantPlain) {
-  --pc-button-color: var(--p-color-text-critical);
-  --pc-button-color_hover: var(--p-color-text-critical-hover);
-  --pc-button-color_active: var(--p-color-text-critical-active);
-  --pc-button-icon-fill: currentColor;
-}
-
-.Button-toneSuccess:is(.variantPrimary) {
-  --pc-button-box-shadow: var(--p-shadow-button-primary-success);
-  --pc-button-box-shadow_active: var(--p-shadow-button-primary-success-inset);
-  --pc-button-bg: var(--p-color-bg-fill-success);
-  --pc-button-bg_hover: var(--p-color-bg-fill-success-hover);
-  --pc-button-bg_active: var(--p-color-bg-fill-success-active);
-  --pc-button-bg_pressed: var(--p-color-bg-fill-success-selected);
-}
-
-.Button-toneCritical:is(.variantPrimary) {
-  --pc-button-box-shadow: var(--p-shadow-button-primary-critical);
-  --pc-button-box-shadow_active: var(--p-shadow-button-primary-critical-inset);
-  --pc-button-bg: var(--p-color-bg-fill-critical);
-  --pc-button-bg_hover: var(--p-color-bg-fill-critical-hover);
-  --pc-button-bg_active: var(--p-color-bg-fill-critical-active);
-  --pc-button-bg_pressed: var(--p-color-bg-fill-critical-selected);
-}
-
-.Button-iconWithText:not(.Button-variantPlain, .Button-variantMonochromePlain) {
-  padding-left: calc(var(--pc-button-padding-inline) * 0.5);
-}
-
-/* DISCLOSURE */
-.Button-disclosure:not(.Button-variantPlain, .Button-variantMonochromePlain) {
-  padding-right: calc(var(--pc-button-padding-inline) * 0.5);
-}
-
-.Button-disclosure:is(.textAlignStart, .textAlignLeft) {
-  justify-content: space-between;
-}