@macive/ui 0.0.10 → 0.0.12

package/dist/css/TextField.css

@@ -1,372 +0,0 @@
-.TextField-TextField {
-  --pc-text-field-contents: 20;
-  --pc-text-field-backdrop: 10;
-  font-size: var(--p-font-size-200);
-  font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-3);
-  border: none;
-  text-transform: initial;
-  letter-spacing: initial;
-  position: relative;
-  display: flex;
-  align-items: center;
-  color: var(--p-color-text);
-  cursor: text;
-}
-@media (min-width: 48em) {
-  .TextField-TextField {
-    font-size: var(--p-font-size-100);
-  }
-}
-.TextField-TextField svg {
-  fill: var(--p-color-icon);
-}
-.TextField-TextField:focus-within .TextField-ClearButton {
-  visibility: visible;
-  opacity: 1;
-}
-.TextField-TextField:not(:focus-within) .TextField-ClearButton {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.TextField-multiline {
-  padding: 0;
-  flex-wrap: wrap;
-}
-.TextField-multiline > .TextField-Input {
-  overflow: auto;
-  padding-left: var(--p-space-3);
-  padding-right: var(--p-space-3);
-  resize: none;
-}
-
-.TextField-hasValue {
-  color: var(--p-color-text);
-}
-
-.TextField-focus > .TextField-Input,
-.TextField-focus > .TextField-VerticalContent,
-.TextField-Input:focus-visible {
-  outline: none;
-}
-.TextField-focus > .TextField-Input ~ .TextField-Backdrop::after,
-.TextField-focus > .TextField-VerticalContent ~ .TextField-Backdrop::after,
-.TextField-Input:focus-visible ~ .TextField-Backdrop::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-
-.TextField-error > .TextField-Input ~ .TextField-Backdrop {
-  background-color: var(--p-color-bg-critical-subdued);
-  border-color: var(--p-color-border-critical);
-}
-.TextField-error > .TextField-Input ~ .TextField-Backdrop::after {
-  border-color: var(--p-color-border-interactive-focus);
-}
-
-.TextField-readOnly > .TextField-Backdrop {
-  background-color: var(--p-color-bg-disabled);
-}
-
-.TextField-disabled {
-  color: var(--p-color-text-disabled);
-  cursor: initial;
-}
-.TextField-disabled > .TextField-Backdrop {
-  background-color: var(--p-color-bg-disabled);
-  border-color: var(--p-color-border-disabled);
-  border-top-color: var(--p-color-border-disabled);
-}
-.TextField-disabled svg {
-  fill: var(--p-color-icon-disabled);
-}
-
-.TextField-Input {
-  font-size: var(--p-font-size-200);
-  font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-2);
-  text-transform: initial;
-  letter-spacing: initial;
-  position: relative;
-  z-index: var(--pc-text-field-contents);
-  display: block;
-  flex: 1 1 0%;
-  width: 100%;
-  min-width: 0;
-  min-height: 36px;
-  margin: 0;
-  padding: calc((36px - var(--p-font-line-height-3) - var(--p-space-05)) / 2) var(--p-space-3);
-  background: none;
-  border: var(--p-border-width-1) solid transparent;
-  font-family: var(--p-font-family-sans);
-  appearance: none;
-  caret-color: var(--p-color-text);
-  color: var(--p-color-text);
-}
-@media (min-width: 48em) {
-  .TextField-Input {
-    font-size: var(--p-font-size-100);
-    line-height: var(--p-font-line-height-2);
-  }
-}
-.TextField-Prefix + .TextField-Input {
-  padding-left: 0;
-}
-.TextField-Input:disabled {
-  opacity: 1;
-  background: none;
-  color: var(--p-color-text-disabled);
-  -webkit-text-fill-color: var(--p-color-text-disabled);
-}
-.TextField-Input:invalid {
-  box-shadow: none;
-}
-.TextField-Input::placeholder {
-  color: var(--p-color-text-subdued);
-}
-.TextField-Input[type=number] {
-  appearance: textfield;
-}
-.TextField-Input[type=number]::-webkit-outer-spin-button, .TextField-Input[type=number]::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-.TextField-Input:-webkit-autofill {
-  border-radius: var(--p-border-radius-1);
-}
-.TextField-Input.TextField-suggestion::selection {
-  color: var(--p-color-text-disabled);
-  background: transparent;
-}
-
-.TextField-borderless .TextField-Input,
-.TextField-borderless .TextField-Backdrop {
-  border: none;
-  line-height: var(--p-font-line-height-1);
-  min-height: var(--p-space-8);
-}
-
-.TextField-Input-hasClearButton[type=search]::-webkit-search-cancel-button {
-  appearance: none;
-}
-
-.TextField-Input-suffixed {
-  padding-right: 0;
-}
-
-.TextField-Input-alignRight {
-  text-align: right;
-}
-
-.TextField-Input-alignLeft {
-  text-align: left;
-}
-
-.TextField-Input-alignCenter {
-  text-align: center;
-}
-
-.TextField-Backdrop {
-  position: relative;
-  position: absolute;
-  z-index: var(--pc-text-field-backdrop);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--p-color-bg);
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
-  border-top-color: #898f94;
-  border-radius: var(--p-border-radius-1);
-  pointer-events: none;
-}
-.TextField-Backdrop::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);
-}
-
-.TextField-Prefix,
-.TextField-Suffix {
-  position: relative;
-  z-index: var(--pc-text-field-contents);
-  flex: 0 0 auto;
-  color: var(--p-color-text-subdued);
-  user-select: none;
-}
-
-.TextField-Prefix {
-  margin-left: var(--p-space-3);
-  margin-right: var(--p-space-2);
-}
-
-.TextField-Suffix {
-  margin-left: var(--p-space-1);
-  margin-right: var(--p-space-3);
-}
-
-.TextField-VerticalContent {
-  position: relative;
-  z-index: var(--pc-text-field-contents);
-  color: var(--p-color-text-subdued);
-  padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2);
-  max-height: 140px;
-  overflow: scroll;
-  border: var(--p-border-width-1) solid transparent;
-  width: 100%;
-}
-.TextField-VerticalContent > .TextField-Input {
-  padding-left: 0;
-  padding-right: 0;
-}
-@media (min-width: 31em) {
-  .TextField-VerticalContent {
-    max-height: 328px;
-  }
-}
-
-.TextField-CharacterCount {
-  color: var(--p-color-text-subdued);
-  z-index: var(--pc-text-field-contents);
-  margin: 0 var(--p-space-3) 0 var(--p-space-1);
-  pointer-events: none;
-  text-align: right;
-}
-
-.TextField-AlignFieldBottom {
-  align-self: flex-end;
-  width: 100%;
-  padding-bottom: var(--p-space-2);
-}
-
-.TextField-ClearButton {
-  position: relative;
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  cursor: pointer;
-  z-index: var(--pc-text-field-contents);
-  margin: 0 var(--p-space-3) 0 var(--p-space-1);
-  transition: visibility var(--p-motion-duration-200) var(--p-motion-ease-in-out), opacity var(--p-motion-duration-200) var(--p-motion-ease-in-out);
-}
-.TextField-ClearButton::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);
-}
-.TextField-ClearButton:focus {
-  outline: none;
-}
-.TextField-ClearButton:focus-visible:enabled::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.TextField-ClearButton:disabled {
-  cursor: default;
-}
-
-.TextField-Spinner {
-  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-1));
-  z-index: var(--pc-text-field-contents);
-  margin: var(--pc-text-field-spinner-offset-large);
-  color: var(--p-color-icon);
-  display: flex;
-  visibility: hidden;
-  align-self: stretch;
-  flex-direction: column;
-  width: 22px;
-  cursor: pointer;
-}
-.TextField-focus .TextField-Spinner, .TextField-TextField:hover .TextField-Spinner {
-  visibility: visible;
-}
-
-.TextField-SpinnerIcon {
-  height: 12px;
-  width: 12px;
-}
-
-.TextField-Resizer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 0;
-  visibility: hidden;
-  overflow: hidden;
-}
-
-.TextField-DummyInput {
-  font-size: var(--p-font-size-200);
-  font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-3);
-  border: none;
-  text-transform: initial;
-  letter-spacing: initial;
-  padding: calc((36px - var(--p-font-line-height-3) - var(--p-space-05)) / 2) var(--p-space-3);
-  word-wrap: break-word;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-@media (min-width: 48em) {
-  .TextField-DummyInput {
-    font-size: var(--p-font-size-100);
-  }
-}
-
-.TextField-Segment {
-  --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-1) - 2px);
-  background: var(--p-color-bg-strong);
-  border-radius: var(--pc-text-field-spinner-border-radius);
-  display: flex;
-  flex: 1 1 0%;
-  justify-content: center;
-  align-items: center;
-  appearance: none;
-  border: none;
-}
-.TextField-Segment:focus {
-  outline: none;
-}
-.TextField-Segment:active {
-  background: var(--p-color-bg-strong-active);
-}
-.TextField-Segment:first-child {
-  border-top-right-radius: var(--pc-text-field-spinner-border-radius);
-  margin-bottom: var(--p-space-05);
-}
-.TextField-Segment:last-child {
-  border-bottom-right-radius: var(--pc-text-field-spinner-border-radius);
-}
-.TextField-Segment:not(:first-child) {
-  margin-top: 0;
-}
-
-.TextField-monospaced {
-  font-family: var(--p-font-family-mono);
-}

package/dist/css/TextOption.css

@@ -1,80 +0,0 @@
-.TextOption-TextOption {
-  margin: var(--p-space-1) var(--p-space-2) 0;
-  flex: 1;
-  border-radius: var(--p-border-radius-1);
-  padding: var(--p-space-2) var(--p-space-2);
-  cursor: pointer;
-  display: flex;
-  position: relative;
-}
-.TextOption-TextOption::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);
-}
-.TextOption-TextOption.TextOption-allowMultiple {
-  margin: var(--p-space-1) var(--p-space-2) 0;
-  padding: var(--p-space-1) var(--p-space-2);
-}
-.TextOption-TextOption.TextOption-isAction {
-  margin-top: 0;
-  padding: var(--p-space-2);
-}
-.TextOption-TextOption:hover {
-  background-color: var(--p-color-bg-hover);
-}
-.TextOption-TextOption:focus {
-  outline: none;
-}
-.TextOption-TextOption:active {
-  background-color: var(--p-color-bg-active);
-}
-.TextOption-TextOption.TextOption-selected {
-  background-color: var(--p-color-bg-interactive-selected);
-}
-.TextOption-TextOption.TextOption-selected::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(-1 * var(--p-space-1));
-  height: 100%;
-  width: var(--p-border-radius-1);
-  background-color: var(--p-color-bg-interactive);
-  border-top-right-radius: var(--p-border-radius-1);
-  border-bottom-right-radius: var(--p-border-radius-1);
-  transform: translateX(-100%);
-}
-.TextOption-TextOption.TextOption-disabled {
-  background-color: transparent;
-  color: var(--p-color-text-disabled);
-  cursor: default;
-}
-
-li:first-of-type > .TextOption-TextOption {
-  margin-top: 0;
-}
-
-[data-focused] .TextOption-TextOption:not(.TextOption-disabled) {
-  outline: none;
-  background-color: var(--p-color-bg-interactive-selected);
-  transition: background-color var(--p-motion-duration-400);
-}
-
-.TextOption-Content {
-  flex: 1 1 auto;
-  display: flex;
-}
-
-.TextOption-Checkbox {
-  pointer-events: none;
-}

package/dist/css/Thumbnail.css

@@ -1,54 +0,0 @@
-.Thumbnail-Thumbnail {
-  --pc-thumbnail-extra-small-size: 24px;
-  --pc-thumbnail-small-size: 40px;
-  --pc-thumbnail-medium-size: 60px;
-  --pc-thumbnail-large-size: 80px;
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background: var(--p-color-bg);
-  min-width: var(--pc-thumbnail-extra-small-size);
-  max-width: 100%;
-  border-radius: var(--p-border-radius-1);
-  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
-}
-.Thumbnail-Thumbnail::after {
-  content: "";
-  display: block;
-  padding-bottom: 100%;
-}
-
-.Thumbnail-sizeExtraSmall {
-  width: var(--pc-thumbnail-extra-small-size);
-}
-
-.Thumbnail-sizeSmall {
-  width: var(--pc-thumbnail-small-size);
-}
-
-.Thumbnail-sizeMedium {
-  width: var(--pc-thumbnail-medium-size);
-}
-
-.Thumbnail-sizeLarge {
-  width: var(--pc-thumbnail-large-size);
-}
-
-.Thumbnail-transparent {
-  background: transparent;
-}
-
-.Thumbnail-Thumbnail > * {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  max-width: 100%;
-  max-height: 100%;
-  color: var(--p-color-icon-subdued);
-}
-.Thumbnail-Thumbnail > * svg {
-  fill: currentColor;
-}

package/dist/css/Title.css

@@ -1,38 +0,0 @@
-.Title-Title {
-  word-wrap: break-word;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  font-weight: var(--p-font-weight-semibold);
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-3);
-}
-
-.Title-TitleWithSubtitle {
-  margin-top: var(--p-space-1);
-}
-
-.Title-SubTitle {
-  margin-top: var(--p-space-1);
-  color: var(--p-color-text-subdued);
-}
-.Title-SubTitle.Title-SubtitleCompact {
-  margin-top: 0;
-}
-
-.Title-TitleWithMetadataWrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  row-gap: var(--p-space-2);
-}
-.Title-TitleWithMetadataWrapper .Title-Title {
-  display: inline;
-  margin-right: var(--p-space-2);
-}
-.Title-TitleWithMetadataWrapper .Title-Title > * {
-  display: inline;
-}
-.Title-TitleWithMetadataWrapper .Title-TitleMetadata {
-  margin-top: 0;
-  vertical-align: bottom;
-}

package/dist/css/Toast.css

@@ -1,63 +0,0 @@
-.Toast-Toast {
-  display: inline-flex;
-  max-width: 500px;
-  padding: var(--p-space-2) var(--p-space-3);
-  border-radius: var(--p-border-radius-1);
-  background: var(--p-color-bg-inverse);
-  color: var(--p-color-text-on-color);
-  margin-bottom: var(--p-space-5);
-  box-shadow: var(--p-shadow-xl);
-}
-@media (min-width: 31em) {
-  .Toast-Toast {
-    padding: var(--p-space-3);
-  }
-}
-@media (forced-colors: active) {
-  .Toast-Toast {
-    border: var(--p-border-width-2) solid transparent;
-  }
-}
-
-.Toast-Action {
-  margin-left: var(--p-space-2);
-  color: var(--p-color-text-on-color);
-}
-
-.Toast-error {
-  background: var(--p-color-bg-critical-strong);
-  color: var(--p-color-text-on-color);
-}
-.Toast-error .Toast-CloseButton {
-  color: var(--p-color-icon-on-color);
-}
-
-.Toast-LeadingIcon {
-  margin-right: var(--p-space-2);
-}
-.Toast-LeadingIcon svg {
-  fill: currentColor;
-}
-
-.Toast-CloseButton {
-  display: flex;
-  align-self: center;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 0;
-  border: none;
-  appearance: none;
-  background: transparent;
-  color: var(--p-color-icon-subdued);
-  cursor: pointer;
-  margin-left: var(--p-space-2);
-}
-.Toast-CloseButton svg {
-  fill: currentColor;
-}
-.Toast-CloseButton:focus {
-  outline: none;
-}
-.Toast-CloseButton:focus, .Toast-CloseButton:hover {
-  color: var(--p-color-text-on-color);
-}

package/dist/css/ToastManager.css

@@ -1,35 +0,0 @@
-:root {
-  --pc-toast-manager-translate-y-out: 150px;
-  --pc-toast-manager-translate-y-in: 0;
-}
-
-.ToastManager-ToastManager {
-  position: fixed;
-  z-index: var(--p-z-index-12);
-  right: 0;
-  left: 0;
-  text-align: center;
-  bottom: var(--pc-frame-global-ribbon-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.ToastManager-ToastWrapper {
-  position: absolute;
-  display: inline-flex;
-  opacity: 0;
-  transition: transform var(--p-motion-duration-400) ease, opacity var(--p-motion-duration-400) ease;
-  transform: translateY(var(--pc-toast-manager-translate-y-out));
-}
-
-.ToastManager-ToastWrapper-enter,
-.ToastManager-ToastWrapper-exit {
-  transform: translateY(var(--pc-toast-manager-translate-y-out));
-  opacity: 0;
-}
-
-.ToastManager-ToastWrapper-enter-done {
-  transform: translateY(var(--pc-toast-manager-translate-y-in));
-  opacity: 1;
-}