@1money/component-ui 0.0.48 → 0.0.50

package/lib/components/Divider/style/Divider.css

@@ -1 +1,128 @@
-.om-component-ui-divider{border-block-start:0;border-block-end:0;border-inline-start:0;border-inline-end:0;border-color:var(--om-border-default,#d1d2d2)}.om-component-ui-divider-horizontal{display:flex;align-items:center;clear:both;width:100%;min-width:100%;margin:var(--om-spacing-300,12px) 0;border-block-start:1px solid var(--om-border-default,#d1d2d2)}.om-component-ui-divider-horizontal.om-component-ui-divider-with-text{margin:var(--om-spacing-200,8px) 0;border-block-start:0;white-space:nowrap;text-align:center}.om-component-ui-divider-horizontal.om-component-ui-divider-with-text:after,.om-component-ui-divider-horizontal.om-component-ui-divider-with-text:before{position:relative;width:50%;border-block-start:1px solid transparent;border-block-start-color:inherit;border-block-end:0;transform:translateY(50%);content:""}.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-left:before{width:5%}.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-left:after,.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-right:before{width:95%}.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-right:after{width:5%}.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-left:before{width:0}.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-left:after,.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-right:before{width:100%}.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-right:after{width:0}.om-component-ui-divider-vertical{position:relative;display:inline-block;height:.9em;margin:0 var(--om-spacing-100,4px);vertical-align:middle;border-inline-start:1px solid var(--om-border-default,#d1d2d2)}.om-component-ui-divider-inner-text{display:inline-block;padding:0 var(--om-spacing-200,8px);color:var(--om-text-default,#131313);font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-font-weight)}.om-component-ui-divider-plain .om-component-ui-divider-inner-text{font-weight:400}.om-component-ui-divider-dashed{background:none;border-style:dashed;border-width:1px 0 0}.om-component-ui-divider-dashed.om-component-ui-divider-with-text{border-style:unset}.om-component-ui-divider-dashed.om-component-ui-divider-with-text:after,.om-component-ui-divider-dashed.om-component-ui-divider-with-text:before{border-style:dashed none none}.om-component-ui-divider-dashed.om-component-ui-divider-vertical{border-inline-start-style:dashed;border-width:0 0 0 1px}.om-component-ui-divider-dotted{background:none;border-style:dotted;border-width:1px 0 0}.om-component-ui-divider-dotted.om-component-ui-divider-with-text{border-style:unset}.om-component-ui-divider-dotted.om-component-ui-divider-with-text:after,.om-component-ui-divider-dotted.om-component-ui-divider-with-text:before{border-style:dotted none none}.om-component-ui-divider-dotted.om-component-ui-divider-vertical{border-inline-start-style:dotted;border-width:0 0 0 1px}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-divider {
+  border-block-start: 0;
+  border-block-end: 0;
+  border-inline-start: 0;
+  border-inline-end: 0;
+  border-color: var(--om-border-default, #d1d2d2);
+}
+.om-component-ui-divider-horizontal {
+  display: flex;
+  align-items: center;
+  clear: both;
+  width: 100%;
+  min-width: 100%;
+  margin: var(--om-spacing-300, 12px) 0;
+  border-block-start: 1px solid var(--om-border-default, #d1d2d2);
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text {
+  margin: var(--om-spacing-200, 8px) 0;
+  border-block-start: 0;
+  white-space: nowrap;
+  text-align: center;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text::before, .om-component-ui-divider-horizontal.om-component-ui-divider-with-text::after {
+  position: relative;
+  width: 50%;
+  border-block-start: 1px solid transparent;
+  border-block-start-color: inherit;
+  border-block-end: 0;
+  transform: translateY(50%);
+  content: "";
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-left::before {
+  width: 5%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-left::after {
+  width: 95%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-right::before {
+  width: 95%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-with-text-right::after {
+  width: 5%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-left::before {
+  width: 0;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-left::after {
+  width: 100%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-right::before {
+  width: 100%;
+}
+.om-component-ui-divider-horizontal.om-component-ui-divider-no-default-margin.om-component-ui-divider-with-text-right::after {
+  width: 0;
+}
+.om-component-ui-divider-vertical {
+  position: relative;
+  display: inline-block;
+  height: 0.9em;
+  margin: 0 var(--om-spacing-100, 4px);
+  vertical-align: middle;
+  border-inline-start: 1px solid var(--om-border-default, #d1d2d2);
+}
+.om-component-ui-divider-inner-text {
+  display: inline-block;
+  padding: 0 var(--om-spacing-200, 8px);
+  color: var(--om-text-default, #131313);
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-font-weight);
+}
+.om-component-ui-divider-plain .om-component-ui-divider-inner-text {
+  font-weight: 400;
+}
+.om-component-ui-divider-dashed {
+  background: none;
+  border-style: dashed;
+  border-width: 1px 0 0;
+}
+.om-component-ui-divider-dashed.om-component-ui-divider-with-text {
+  border-style: unset;
+}
+.om-component-ui-divider-dashed.om-component-ui-divider-with-text::before, .om-component-ui-divider-dashed.om-component-ui-divider-with-text::after {
+  border-style: dashed none none;
+}
+.om-component-ui-divider-dashed.om-component-ui-divider-vertical {
+  border-inline-start-style: dashed;
+  border-width: 0 0 0 1px;
+}
+.om-component-ui-divider-dotted {
+  background: none;
+  border-style: dotted;
+  border-width: 1px 0 0;
+}
+.om-component-ui-divider-dotted.om-component-ui-divider-with-text {
+  border-style: unset;
+}
+.om-component-ui-divider-dotted.om-component-ui-divider-with-text::before, .om-component-ui-divider-dotted.om-component-ui-divider-with-text::after {
+  border-style: dotted none none;
+}
+.om-component-ui-divider-dotted.om-component-ui-divider-vertical {
+  border-inline-start-style: dotted;
+  border-width: 0 0 0 1px;
+}

package/lib/components/Drawer/style/Drawer.css

@@ -1 +1,145 @@
-.om-component-ui-drawer-root{position:fixed;inset:0;z-index:1000}.om-component-ui-drawer-overlay{position:absolute;inset:0;background-color:var(--om-bg-scrim-dark,rgba(0,0,0,.2));opacity:0;transition:opacity .3s ease-in-out}.om-component-ui-drawer{position:fixed;z-index:1;display:flex;flex-direction:column;background-color:var(--om-bg-default,#fff);outline:none;box-shadow:var(--om-shadow-200,0 10px 22px rgba(0,0,0,.1));transition:transform .3s ease-in-out;pointer-events:auto}.om-component-ui-drawer-top{top:0;right:0;left:0;width:100%;transform:translate3d(0,-100%,0)}.om-component-ui-drawer-bottom{right:0;bottom:0;left:0;width:100%;transform:translate3d(0,100%,0)}.om-component-ui-drawer-left{top:0;bottom:0;left:0;transform:translate3d(-100%,0,0)}.om-component-ui-drawer-right{top:0;right:0;bottom:0;transform:translate3d(100%,0,0)}.om-component-ui-drawer-header{display:flex;flex-shrink:0;gap:var(--om-spacing-300,12px);align-items:flex-start;justify-content:space-between;padding:var(--om-spacing-600,24px) var(--om-spacing-400,16px) var(--om-spacing-400,16px)}.om-component-ui-drawer-header-main{display:flex;flex:1;gap:var(--om-spacing-200,8px);align-items:center;min-width:0}.om-component-ui-drawer-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-drawer-control{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--om-spacing-500,20px);height:var(--om-spacing-500,20px);padding:0;color:var(--om-icon-default-tertiary,#646465);background:transparent;border:none;cursor:pointer}.om-component-ui-drawer-control .om-component-ui-icons-wrapper{--icon-color:currentcolor}.om-component-ui-drawer-control:hover{color:var(--om-icon-default,#131313)}.om-component-ui-drawer-body{flex:1;min-height:0;padding:var(--om-spacing-400,16px);overflow:auto}.om-component-ui-drawer-footer{flex-shrink:0;padding:var(--om-spacing-400,16px) var(--om-spacing-400,16px) var(--om-spacing-600,24px);border-top:1px solid var(--om-border-neutral,#e3e4e4)}.om-component-ui-drawer-root-open .om-component-ui-drawer-overlay{opacity:1}.om-component-ui-drawer-root-open .om-component-ui-drawer{transform:translateZ(0)}.om-component-ui-drawer-root-closed{pointer-events:none}.om-component-ui-drawer-root-closed .om-component-ui-drawer-overlay{opacity:0}@media (max-width:767.98px){.om-component-ui-drawer-left,.om-component-ui-drawer-right{width:100%!important}}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.om-component-ui-drawer-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--om-bg-scrim-dark, rgba(0, 0, 0, 0.2));
+  opacity: 0;
+  transition: opacity 300ms ease-in-out;
+}
+
+.om-component-ui-drawer {
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--om-bg-default, #fff);
+  outline: none;
+  box-shadow: var(--om-shadow-200, 0 10px 22px rgba(0, 0, 0, 0.1));
+  transition: transform 300ms ease-in-out;
+  pointer-events: auto;
+}
+.om-component-ui-drawer-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  transform: translate3d(0, -100%, 0);
+}
+.om-component-ui-drawer-bottom {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translate3d(0, 100%, 0);
+}
+.om-component-ui-drawer-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.om-component-ui-drawer-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.om-component-ui-drawer-header {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--om-spacing-300, 12px);
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--om-spacing-600, 24px) var(--om-spacing-400, 16px) var(--om-spacing-400, 16px);
+}
+.om-component-ui-drawer-header-main {
+  display: flex;
+  flex: 1;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-drawer-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-drawer-control {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--om-spacing-500, 20px);
+  height: var(--om-spacing-500, 20px);
+  padding: 0;
+  color: var(--om-icon-default-tertiary, #646465);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.om-component-ui-drawer-control .om-component-ui-icons-wrapper {
+  --icon-color: currentcolor;
+}
+.om-component-ui-drawer-control:hover {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-drawer-body {
+  flex: 1;
+  min-height: 0;
+  padding: var(--om-spacing-400, 16px);
+  overflow: auto;
+}
+.om-component-ui-drawer-footer {
+  flex-shrink: 0;
+  padding: var(--om-spacing-400, 16px) var(--om-spacing-400, 16px) var(--om-spacing-600, 24px);
+  border-top: 1px solid var(--om-border-neutral, #e3e4e4);
+}
+
+.om-component-ui-drawer-root-open .om-component-ui-drawer-overlay {
+  opacity: 1;
+}
+.om-component-ui-drawer-root-open .om-component-ui-drawer {
+  transform: translate3d(0, 0, 0);
+}
+
+.om-component-ui-drawer-root-closed {
+  pointer-events: none;
+}
+.om-component-ui-drawer-root-closed .om-component-ui-drawer-overlay {
+  opacity: 0;
+}
+
+@media (max-width: 767.98px) {
+  .om-component-ui-drawer-right, .om-component-ui-drawer-left {
+    width: 100% !important;
+  }
+}

package/lib/components/Dropdown/style/Dropdown.css

@@ -1 +1,48 @@
-.om-dropdown-item{display:flex;gap:var(--om-spacing-300,12px);align-items:center;width:100%;min-height:40px;padding:var(--om-spacing-200,8px) var(--om-spacing-300,12px);color:var(--om-text-default,#131313);text-align:left;background:transparent;border:none;border-radius:var(--om-radius-200,8px);cursor:pointer;transition:background-color .15s ease;font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-strong-font-weight)}.om-dropdown-item--selected,.om-dropdown-item:hover{background-color:var(--om-bg-default-secondary,#f8f8f8)}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-dropdown-item {
+  display: flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+  color: var(--om-text-default, #131313);
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: var(--om-radius-200, 8px);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-strong-font-weight);
+}
+.om-dropdown-item:hover {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-dropdown-item--selected {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+}

package/lib/components/Empty/style/Empty.css

@@ -1 +1,58 @@
-.om-component-ui-empty{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);align-items:center;justify-content:center;padding:var(--om-spacing-800,32px) var(--om-spacing-600,24px);overflow:hidden;text-align:center;border-radius:var(--om-radius-300,12px)}.om-component-ui-empty-stroke{background-color:var(--om-bg-default-secondary,#f8f8f8);border:1px solid var(--om-border-neutral,#e3e4e4)}.om-component-ui-empty-fill{background-color:transparent;border:none}.om-component-ui-empty-icon{display:flex;align-items:center;justify-content:center;color:var(--om-icon-neutral-secondary,#9fa3a3)}.om-component-ui-empty-content{display:flex;flex-direction:column;width:100%;color:var(--om-text-neutral-secondary,#9fa3a3)}.om-component-ui-empty-action{display:flex;align-items:center;justify-content:center}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--om-spacing-800, 32px) var(--om-spacing-600, 24px);
+  overflow: hidden;
+  text-align: center;
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-empty-stroke {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border: 1px solid var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-empty-fill {
+  background-color: transparent;
+  border: none;
+}
+.om-component-ui-empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-empty-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-empty-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/Flex/style/Flex.css

@@ -1 +1,71 @@
-.om-component-ui-flex{display:flex;gap:var(--om-flex-gap,0)}.om-component-ui-flex-vertical{flex-direction:column}.om-component-ui-flex-wrap-wrap{flex-wrap:wrap}.om-component-ui-flex-wrap-nowrap{flex-wrap:nowrap}.om-component-ui-flex-wrap-wrap-reverse{flex-wrap:wrap-reverse}.om-component-ui-flex-justify-start{justify-content:flex-start}.om-component-ui-flex-justify-end{justify-content:flex-end}.om-component-ui-flex-justify-center{justify-content:center}.om-component-ui-flex-justify-space-between{justify-content:space-between}.om-component-ui-flex-justify-space-around{justify-content:space-around}.om-component-ui-flex-justify-space-evenly{justify-content:space-evenly}.om-component-ui-flex-align-start{align-items:flex-start}.om-component-ui-flex-align-end{align-items:flex-end}.om-component-ui-flex-align-center{align-items:center}.om-component-ui-flex-align-baseline{align-items:baseline}.om-component-ui-flex-align-stretch{align-items:stretch}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-flex {
+  display: flex;
+  gap: var(--om-flex-gap, 0px);
+}
+.om-component-ui-flex-vertical {
+  flex-direction: column;
+}
+.om-component-ui-flex-wrap-wrap {
+  flex-wrap: wrap;
+}
+.om-component-ui-flex-wrap-nowrap {
+  flex-wrap: nowrap;
+}
+.om-component-ui-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.om-component-ui-flex-justify-start {
+  justify-content: flex-start;
+}
+.om-component-ui-flex-justify-end {
+  justify-content: flex-end;
+}
+.om-component-ui-flex-justify-center {
+  justify-content: center;
+}
+.om-component-ui-flex-justify-space-between {
+  justify-content: space-between;
+}
+.om-component-ui-flex-justify-space-around {
+  justify-content: space-around;
+}
+.om-component-ui-flex-justify-space-evenly {
+  justify-content: space-evenly;
+}
+.om-component-ui-flex-align-start {
+  align-items: flex-start;
+}
+.om-component-ui-flex-align-end {
+  align-items: flex-end;
+}
+.om-component-ui-flex-align-center {
+  align-items: center;
+}
+.om-component-ui-flex-align-baseline {
+  align-items: baseline;
+}
+.om-component-ui-flex-align-stretch {
+  align-items: stretch;
+}