@macive/ui 0.0.10 → 0.0.12

package/dist/css/Frame.css

@@ -1,381 +0,0 @@
-.Frame-Frame {
-  --pc-frame-button-size: var(--p-space-8);
-  width: 100%;
-  min-height: 100vh;
-  min-height: 100svh;
-  display: flex;
-  background-color: var(--p-color-bg-app);
-}
-@media print {
-  .Frame-Frame {
-    background-color: transparent;
-  }
-}
-@media (min-width: 48em) {
-  .Frame-Frame {
-    width: calc(100% - var(--pc-frame-offset, 0px));
-    margin-left: var(--pc-frame-offset);
-  }
-}
-
-.Frame-Navigationsss {
-  position: fixed;
-}
-
-.Frame-Navigation {
-  position: fixed;
-  z-index: var(--p-z-index-11);
-  top: 0;
-  left: 0;
-  display: none;
-  flex: 0 0 auto;
-  align-items: stretch;
-  height: 100%;
-  outline: none;
-  transform: translateX(0%);
-}
-@media print {
-  .Frame-Navigation {
-    display: none !important;
-  }
-}
-@media (min-width: 48em) {
-  .Frame-Navigation {
-    z-index: 1;
-    left: var(--pc-frame-offset);
-    display: flex;
-  }
-  .Frame-hasTopBar .Frame-Navigation {
-    top: 56px;
-    height: calc(100% - 56px);
-  }
-}
-.Frame-Navigation:focus {
-  outline: none;
-}
-
-.Frame-Navigation-enter,
-.Frame-Navigation-enterActive,
-.Frame-Navigation-exit,
-.Frame-Navigation-exitActive {
-  display: flex;
-}
-
-.Frame-Navigation-enter {
-  transform: translateX(-100%);
-}
-
-.Frame-Navigation-enterActive {
-  transform: translateX(0%);
-  transition: transform var(--p-motion-duration-300) var(--p-motion-ease-out);
-}
-
-.Frame-Navigation-exit {
-  transform: translateX(0%);
-}
-
-.Frame-Navigation-exitActive {
-  transform: translateX(-100%);
-  transition: transform var(--p-motion-duration-300) var(--p-motion-ease-out);
-}
-
-.Frame-NavigationDismiss {
-  position: relative;
-  position: absolute;
-  top: 0;
-  left: 100%;
-  width: var(--pc-frame-button-size);
-  height: var(--pc-frame-button-size);
-  margin: var(--p-space-4);
-  padding: 0;
-  border: none;
-  border-radius: var(--p-border-radius-full);
-  background: none;
-  opacity: 0;
-  pointer-events: none;
-  will-change: opacity;
-  cursor: pointer;
-  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease);
-}
-.Frame-NavigationDismiss::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);
-}
-.Frame-NavigationDismiss svg {
-  fill: var(--p-color-bg);
-}
-@media print {
-  .Frame-NavigationDismiss {
-    display: none !important;
-  }
-}
-.Frame-Navigation-visible .Frame-NavigationDismiss {
-  pointer-events: all;
-  opacity: 1;
-}
-.Frame-NavigationDismiss:focus {
-  position: absolute;
-  border-radius: var(--p-border-radius-1);
-  outline: none;
-}
-.Frame-NavigationDismiss:focus::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-@media (min-width: 48em) {
-  .Frame-NavigationDismiss {
-    display: none;
-  }
-}
-.Frame-NavigationDismiss:hover {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-.Frame-NavigationDismiss:active {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.Frame-TopBar {
-  position: fixed;
-  z-index: var(--p-z-index-4);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 56px;
-}
-@media print {
-  .Frame-TopBar {
-    display: none !important;
-  }
-}
-@media (min-width: 48em) {
-  .Frame-TopBar {
-    left: var(--pc-frame-offset);
-    width: calc(100% - var(--pc-frame-offset, 0px));
-  }
-}
-
-.Frame-ContextualSaveBar {
-  position: fixed;
-  z-index: var(--p-z-index-5);
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-@media (min-width: 48em) {
-  .Frame-ContextualSaveBar {
-    left: var(--pc-frame-offset);
-    width: calc(100% - var(--pc-frame-offset, 0px));
-  }
-}
-
-.Frame-Main {
-  flex: 1;
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-  max-width: 100%;
-  padding-right: 0px;
-  padding-right: calc(0px + constant(safe-area-inset-right));
-  padding-right: calc(0px + env(safe-area-inset-right));
-  padding-left: 0px;
-  padding-left: calc(0px + constant(safe-area-inset-left));
-  padding-left: calc(0px + env(safe-area-inset-left));
-  padding-bottom: 0px;
-  padding-bottom: calc(0px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(0px + env(safe-area-inset-bottom));
-}
-@media (min-width: 48em) {
-  .Frame-hasNav .Frame-Main {
-    padding-left: 240px;
-    padding-left: 240px;
-    padding-left: calc(240px + constant(safe-area-inset-left));
-    padding-left: calc(240px + env(safe-area-inset-left));
-  }
-}
-@media print and (min-width: 48em) {
-  .Frame-hasNav .Frame-Main {
-    padding-left: 0;
-  }
-}
-.Frame-hasTopBar .Frame-Main {
-  padding-top: 56px;
-}
-@media print {
-  .Frame-hasTopBar .Frame-Main {
-    padding-top: 0;
-  }
-}
-
-.Frame-Content {
-  position: relative;
-  padding-bottom: var(--pc-frame-global-ribbon-height, 0);
-  flex: 1;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.Frame-GlobalRibbonContainer {
-  position: fixed;
-  z-index: var(--p-z-index-3);
-  bottom: 0;
-  width: 100%;
-}
-@media (min-width: 48em) {
-  .Frame-GlobalRibbonContainer {
-    left: var(--pc-frame-offset);
-  }
-  .Frame-hasNav .Frame-GlobalRibbonContainer {
-    left: calc(240px + var(--pc-frame-offset));
-    left: calc(240px + var(--pc-frame-offset));
-    left: calc(calc(240px + var(--pc-frame-offset)) + constant(safe-area-inset-left));
-    left: calc(calc(240px + var(--pc-frame-offset)) + env(safe-area-inset-left));
-    width: calc(100% - 240px - var(--pc-frame-offset, 0px));
-  }
-}
-
-.Frame-LoadingBar {
-  position: fixed;
-  z-index: var(--p-z-index-6);
-  top: 0;
-  right: 0;
-  left: 0;
-}
-@media print {
-  .Frame-LoadingBar {
-    display: none !important;
-  }
-}
-@media (min-width: 48em) {
-  .Frame-hasNav .Frame-LoadingBar {
-    left: var(--pc-frame-offset);
-  }
-  .Frame-hasTopBar .Frame-LoadingBar {
-    z-index: var(--p-z-index-6);
-  }
-}
-
-.Frame-Skip {
-  --pc-frame-skip-vertical-offset: 10px;
-  position: fixed;
-  z-index: var(--p-z-index-9);
-  top: var(--pc-frame-skip-vertical-offset);
-  left: calc(var(--p-space-2) + var(--pc-frame-offset));
-  opacity: 0;
-  pointer-events: none;
-}
-.Frame-Skip.Frame-focused {
-  pointer-events: all;
-  opacity: 1;
-}
-.Frame-Skip.Frame-focused > a::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Frame-Skip > a {
-  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;
-  position: relative;
-  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;
-  color: var(--p-color-text);
-}
-.Frame-Skip > a::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);
-}
-.Frame-Skip > a svg {
-  fill: var(--p-color-icon);
-}
-.Frame-Skip > a:hover {
-  background: var(--p-color-bg-hover);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Frame-Skip > a:focus-visible {
-  box-shadow: var(--p-shadow-sm);
-  outline: 0;
-}
-.Frame-Skip > a:focus-visible::after {
-  box-shadow: 0 0 0 2px var(--p-color-border-interactive-focus);
-  outline: var(--p-border-width-1) solid transparent;
-}
-.Frame-Skip > a:active {
-  background: var(--p-color-bg-subdued-active);
-  box-shadow: var(--p-shadow-sm);
-}
-.Frame-Skip > a:active::after {
-  border: none;
-  box-shadow: none;
-}
-.Frame-Skip > a.Frame-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);
-}
-.Frame-Skip > a.Frame-pressed svg {
-  fill: currentColor;
-}
-@media (-ms-high-contrast: active) {
-  .Frame-Skip > a {
-    border: var(--p-border-width-1) solid windowText;
-  }
-}
-.Frame-Skip > a::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);
-}
-.Frame-Skip > a:focus {
-  border-color: none;
-  box-shadow: none;
-}

package/dist/css/Header.css

@@ -1,107 +0,0 @@
-.Header-TitleWrapper {
-  grid-area: title;
-  margin-top: var(--p-space-1);
-  align-self: center;
-  flex: 1 1 auto;
-}
-@media (min-width: 31em) {
-  .Header-TitleWrapper {
-    margin-top: 0;
-  }
-}
-
-.Header-BreadcrumbWrapper {
-  grid-area: breadcrumbs;
-}
-
-.Header-PaginationWrapper {
-  margin-left: var(--p-space-1);
-  line-height: 1;
-}
-.Header-PaginationWrapper button {
-  border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
-  box-shadow: none !important;
-}
-.Header-PaginationWrapper button:hover, .Header-PaginationWrapper button:active, .Header-PaginationWrapper button:focus {
-  border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
-}
-
-.Header-PrimaryActionWrapper {
-  margin-top: 0;
-  margin-left: var(--p-space-1);
-}
-@media (min-width: 48em) {
-  .Header-PrimaryActionWrapper {
-    margin-left: var(--p-space-4);
-  }
-}
-
-.Header-Row {
-  display: flex;
-  justify-content: space-between;
-}
-.Header-Row:first-child {
-  min-height: 36px;
-}
-.Header-Row + .Header-Row {
-  margin-top: var(--p-space-1);
-}
-.Header-mobileView .Header-Row + .Header-Row {
-  margin-top: var(--p-space-2);
-}
-.Header-Row + .Header-Row .Header-RightAlign {
-  margin-left: 0;
-}
-
-.Header-RightAlign {
-  grid-area: actions;
-  display: flex;
-  align-content: flex-end;
-  flex: 1 1 auto;
-  align-items: center;
-  align-self: flex-start;
-  justify-content: flex-end;
-  margin-left: var(--p-space-4);
-  white-space: nowrap;
-}
-@media (max-width: 31em) {
-  .Header-noBreadcrumbs .Header-RightAlign {
-    margin-left: 0;
-  }
-}
-
-@media (min-width: 31em) {
-  .Header-AdditionalMetaData {
-    margin-left: calc(var(--p-space-5) * 2 + var(--p-space-2) + var(--p-space-1));
-  }
-}
-.Header-noBreadcrumbs .Header-AdditionalMetaData {
-  margin-left: 0;
-}
-
-.Header-Actions {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  text-align: right;
-}
-
-@media (max-width: 65em) {
-  .Header-longTitle .Header-AdditionalMetaData {
-    margin-left: 0;
-  }
-  .Header-longTitle .Header-Row {
-    display: grid;
-    gap: var(--p-space-2) var(--p-space-4);
-    grid-template-columns: auto 1fr;
-    grid-template-areas: "breadcrumbs actions" "title title";
-  }
-  .Header-longTitle .Header-Row + .Header-Row {
-    gap: 0;
-  }
-}
-
-.Header-isSingleRow .Header-Row {
-  gap: 0;
-}

package/dist/css/HorizontalGrid.css

@@ -1,57 +0,0 @@
-.HorizontalGrid-HorizontalGrid {
-  --pc-horizontal-grid-gap-xs: initial;
-  --pc-horizontal-grid-gap-sm: initial;
-  --pc-horizontal-grid-gap-md: initial;
-  --pc-horizontal-grid-gap-lg: initial;
-  --pc-horizontal-grid-gap-xl: initial;
-  gap: var(--pc-horizontal-grid-gap-xs);
-  --pc-horizontal-grid-grid-template-columns-xs: initial;
-  --pc-horizontal-grid-grid-template-columns-sm: initial;
-  --pc-horizontal-grid-grid-template-columns-md: initial;
-  --pc-horizontal-grid-grid-template-columns-lg: initial;
-  --pc-horizontal-grid-grid-template-columns-xl: initial;
-  grid-template-columns: var(--pc-horizontal-grid-grid-template-columns-xs);
-  --pc-horizontal-grid-align-items: initial;
-  display: grid;
-  align-items: var(--pc-horizontal-grid-align-items);
-}
-@media (min-width: 31em) {
-  .HorizontalGrid-HorizontalGrid {
-    gap: var(--pc-horizontal-grid-gap-sm, var(--pc-horizontal-grid-gap-xs));
-  }
-}
-@media (min-width: 48em) {
-  .HorizontalGrid-HorizontalGrid {
-    gap: var(--pc-horizontal-grid-gap-md, var(--pc-horizontal-grid-gap-sm, var(--pc-horizontal-grid-gap-xs)));
-  }
-}
-@media (min-width: 65em) {
-  .HorizontalGrid-HorizontalGrid {
-    gap: var(--pc-horizontal-grid-gap-lg, var(--pc-horizontal-grid-gap-md, var(--pc-horizontal-grid-gap-sm, var(--pc-horizontal-grid-gap-xs))));
-  }
-}
-@media (min-width: 90em) {
-  .HorizontalGrid-HorizontalGrid {
-    gap: var(--pc-horizontal-grid-gap-xl, var(--pc-horizontal-grid-gap-lg, var(--pc-horizontal-grid-gap-md, var(--pc-horizontal-grid-gap-sm, var(--pc-horizontal-grid-gap-xs)))));
-  }
-}
-@media (min-width: 31em) {
-  .HorizontalGrid-HorizontalGrid {
-    grid-template-columns: var(--pc-horizontal-grid-grid-template-columns-sm, var(--pc-horizontal-grid-grid-template-columns-xs));
-  }
-}
-@media (min-width: 48em) {
-  .HorizontalGrid-HorizontalGrid {
-    grid-template-columns: var(--pc-horizontal-grid-grid-template-columns-md, var(--pc-horizontal-grid-grid-template-columns-sm, var(--pc-horizontal-grid-grid-template-columns-xs)));
-  }
-}
-@media (min-width: 65em) {
-  .HorizontalGrid-HorizontalGrid {
-    grid-template-columns: var(--pc-horizontal-grid-grid-template-columns-lg, var(--pc-horizontal-grid-grid-template-columns-md, var(--pc-horizontal-grid-grid-template-columns-sm, var(--pc-horizontal-grid-grid-template-columns-xs))));
-  }
-}
-@media (min-width: 90em) {
-  .HorizontalGrid-HorizontalGrid {
-    grid-template-columns: var(--pc-horizontal-grid-grid-template-columns-xl, var(--pc-horizontal-grid-grid-template-columns-lg, var(--pc-horizontal-grid-grid-template-columns-md, var(--pc-horizontal-grid-grid-template-columns-sm, var(--pc-horizontal-grid-grid-template-columns-xs)))));
-  }
-}

package/dist/css/HorizontalStack.css

@@ -1,32 +0,0 @@
-.HorizontalStack-HorizontalStack {
-  --pc-horizontal-stack-gap-xs: initial;
-  --pc-horizontal-stack-gap-sm: initial;
-  --pc-horizontal-stack-gap-md: initial;
-  --pc-horizontal-stack-gap-lg: initial;
-  --pc-horizontal-stack-gap-xl: initial;
-  gap: var(--pc-horizontal-stack-gap-xs);
-  display: flex;
-  flex-wrap: var(--pc-horizontal-stack-wrap);
-  align-items: var(--pc-horizontal-stack-block-align);
-  justify-content: var(--pc-horizontal-stack-align);
-}
-@media (min-width: 31em) {
-  .HorizontalStack-HorizontalStack {
-    gap: var(--pc-horizontal-stack-gap-sm, var(--pc-horizontal-stack-gap-xs));
-  }
-}
-@media (min-width: 48em) {
-  .HorizontalStack-HorizontalStack {
-    gap: var(--pc-horizontal-stack-gap-md, var(--pc-horizontal-stack-gap-sm, var(--pc-horizontal-stack-gap-xs)));
-  }
-}
-@media (min-width: 65em) {
-  .HorizontalStack-HorizontalStack {
-    gap: var(--pc-horizontal-stack-gap-lg, var(--pc-horizontal-stack-gap-md, var(--pc-horizontal-stack-gap-sm, var(--pc-horizontal-stack-gap-xs))));
-  }
-}
-@media (min-width: 90em) {
-  .HorizontalStack-HorizontalStack {
-    gap: var(--pc-horizontal-stack-gap-xl, var(--pc-horizontal-stack-gap-lg, var(--pc-horizontal-stack-gap-md, var(--pc-horizontal-stack-gap-sm, var(--pc-horizontal-stack-gap-xs)))));
-  }
-}

package/dist/css/Icon.css

@@ -1,100 +0,0 @@
-.Icon-Icon {
-  display: block;
-  height: 20px;
-  width: 20px;
-  max-height: 100%;
-  max-width: 100%;
-  margin: auto;
-}
-
-.Icon-applyColor {
-  color: var(--p-color-bg);
-}
-
-.Icon-hasBackdrop {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: var(--p-space-1);
-}
-.Icon-hasBackdrop::before {
-  content: "";
-  position: absolute;
-  top: calc(-1 * var(--p-space-1));
-  bottom: calc(-1 * var(--p-space-1));
-  left: calc(-1 * var(--p-space-1));
-  right: calc(-1 * var(--p-space-1));
-  border-radius: var(--p-border-radius-full);
-}
-
-.Icon-colorBase svg {
-  fill: var(--p-color-icon);
-}
-.Icon-colorBase::before {
-  background-color: var(--p-color-bg-strong);
-}
-
-.Icon-colorSubdued svg {
-  fill: var(--p-color-icon-subdued);
-}
-
-.Icon-colorCritical svg {
-  fill: var(--p-color-icon-critical);
-}
-.Icon-colorCritical::before {
-  background-color: var(--p-color-bg-critical);
-}
-
-.Icon-colorInteractive svg {
-  fill: var(--p-color-icon-interactive);
-}
-
-.Icon-colorWarning svg {
-  fill: var(--p-color-icon-caution);
-}
-.Icon-colorWarning::before {
-  background-color: var(--p-color-bg-warning);
-}
-
-.Icon-colorHighlight svg {
-  fill: var(--p-color-icon-info);
-}
-.Icon-colorHighlight::before {
-  background-color: var(--p-color-bg-info);
-}
-
-.Icon-colorSuccess svg {
-  fill: var(--p-color-icon-success);
-}
-.Icon-colorSuccess::before {
-  background-color: var(--p-color-bg-success);
-}
-
-.Icon-colorPrimary svg {
-  fill: var(--p-color-icon-primary);
-}
-
-.Icon-colorMagic svg {
-  fill: var(--p-color-icon-magic);
-}
-
-.Icon-Svg {
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.Icon-Img {
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.Icon-Placeholder {
-  padding-bottom: 100%;
-  background: currentColor;
-}