@1money/component-ui 0.0.48 → 0.0.50

package/lib/components/Input/Trade/Trade.css

@@ -1 +1,192 @@
-.om-component-ui-input-trade{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);width:100%}.om-component-ui-input-trade-main{padding-bottom:var(--om-spacing-200,8px);border-bottom:1px solid var(--om-border-default,#d1d2d2);transition:border-color .2s ease}.om-component-ui-input-trade-value-line{display:flex;gap:var(--om-spacing-200,8px);align-items:center}.om-component-ui-input-trade-symbol{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex-shrink:0;color:var(--om-text-brand,#073387)}.om-component-ui-input-trade-input-wrapper{display:flex;flex:1 1 auto;align-items:center;min-width:0}.om-component-ui-input-trade-field{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex:1 1 auto;width:100%;min-width:0;color:var(--om-text-brand,#073387);background:transparent;border:none;outline:none}.om-component-ui-input-trade-field::placeholder{color:var(--om-text-brand,#073387)}.om-component-ui-input-trade-unit{font-size:var(--om-display-lg-font-size);font-family:var(--om-display-lg-font-family);line-height:var(--om-display-lg-line-height);letter-spacing:var(--om-display-lg-letter-spacing);font-weight:var(--om-display-lg-font-weight);flex-shrink:0;color:var(--om-text-brand,#073387)}.om-component-ui-input-trade-unit-placeholder{color:var(--om-text-neutral-tertiary,#bbbdc1)}.om-component-ui-input-trade-max{font-size:var(--om-body-sm-font-size);font-family:var(--om-body-sm-font-family);line-height:var(--om-body-sm-line-height);letter-spacing:var(--om-body-sm-letter-spacing);font-weight:var(--om-body-sm-strong-font-weight);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--om-spacing-200,8px);color:var(--om-text-default,#131313);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border:none;border-radius:var(--om-radius-200,8px);cursor:pointer}.om-component-ui-input-trade-max:hover:not(:disabled){background-color:var(--om-bg-neutral-tertiary-hover,#e3e4e4)}.om-component-ui-input-trade-max:disabled{color:var(--om-text-disabled,#bbbdc1);background-color:var(--om-bg-disabled,#f0f0f0);cursor:not-allowed}.om-component-ui-input-trade-subline{display:flex;gap:var(--om-spacing-100,4px);align-items:center;padding-top:var(--om-spacing-200,8px)}.om-component-ui-input-trade-swap{display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--om-icon-default-tertiary,#646465);background:transparent;border:none;transform:rotate(-90deg);cursor:pointer}.om-component-ui-input-trade-swap:disabled{color:var(--om-icon-disabled,#d1d2d2);cursor:not-allowed}.om-component-ui-input-trade-exchange{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight);color:var(--om-text-brand,#073387)}.om-component-ui-input-trade-error-msg{font-size:var(--om-body-sm-font-size);font-family:var(--om-body-sm-font-family);line-height:var(--om-body-sm-line-height);letter-spacing:var(--om-body-sm-letter-spacing);font-weight:var(--om-body-sm-font-weight);display:flex;gap:var(--om-spacing-100,4px);align-items:center;color:var(--om-text-default-tertiary,#646465)}.om-component-ui-input-trade:focus-within .om-component-ui-input-trade-main{padding-bottom:calc(var(--om-spacing-200, 8px) - 1px);border-bottom:2px solid var(--om-border-brand,#073387)}.om-component-ui-input-trade-error .om-component-ui-input-trade-field,.om-component-ui-input-trade-error .om-component-ui-input-trade-symbol,.om-component-ui-input-trade-error .om-component-ui-input-trade-unit{color:var(--om-text-danger,#ae0000)}.om-component-ui-input-trade-error .om-component-ui-input-trade-field::placeholder{color:var(--om-text-danger,#ae0000)}.om-component-ui-input-trade-error .om-component-ui-input-trade-main{border-bottom-color:var(--om-border-danger,#ae0000)}.om-component-ui-input-trade-error .om-component-ui-input-trade-error-msg{color:var(--om-text-danger,#ae0000)}.om-component-ui-input-trade-disabled .om-component-ui-input-trade-field,.om-component-ui-input-trade-disabled .om-component-ui-input-trade-symbol,.om-component-ui-input-trade-disabled .om-component-ui-input-trade-unit,.om-component-ui-input-trade-disabled .om-component-ui-input-trade-unit-placeholder{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-input-trade-disabled .om-component-ui-input-trade-field::placeholder{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-input-trade-disabled .om-component-ui-input-trade-main{border-bottom-color:var(--om-border-disabled,#e3e4e4)}.om-component-ui-input-trade-disabled .om-component-ui-input-trade-error-msg,.om-component-ui-input-trade-disabled .om-component-ui-input-trade-exchange{color:var(--om-text-disabled,#bbbdc1)}
+/**
+  * 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-input-trade {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  width: 100%;
+}
+.om-component-ui-input-trade-main {
+  padding-bottom: var(--om-spacing-200, 8px);
+  border-bottom: 1px solid var(--om-border-default, #d1d2d2);
+  transition: border-color 0.2s ease;
+}
+.om-component-ui-input-trade-value-line {
+  display: flex;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+}
+.om-component-ui-input-trade-symbol {
+  font-size: var(--om-display-lg-font-size);
+  font-family: var(--om-display-lg-font-family);
+  line-height: var(--om-display-lg-line-height);
+  letter-spacing: var(--om-display-lg-letter-spacing);
+  font-weight: var(--om-display-lg-font-weight);
+  flex-shrink: 0;
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-input-trade-input-wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-input-trade-field {
+  font-size: var(--om-display-lg-font-size);
+  font-family: var(--om-display-lg-font-family);
+  line-height: var(--om-display-lg-line-height);
+  letter-spacing: var(--om-display-lg-letter-spacing);
+  font-weight: var(--om-display-lg-font-weight);
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  color: var(--om-text-brand, #073387);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.om-component-ui-input-trade-field::-moz-placeholder {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-input-trade-field::placeholder {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-input-trade-unit {
+  font-size: var(--om-display-lg-font-size);
+  font-family: var(--om-display-lg-font-family);
+  line-height: var(--om-display-lg-line-height);
+  letter-spacing: var(--om-display-lg-letter-spacing);
+  font-weight: var(--om-display-lg-font-weight);
+  flex-shrink: 0;
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-input-trade-unit-placeholder {
+  color: var(--om-text-neutral-tertiary, #bbbdc1);
+}
+.om-component-ui-input-trade-max {
+  font-size: var(--om-body-sm-font-size);
+  font-family: var(--om-body-sm-font-family);
+  line-height: var(--om-body-sm-line-height);
+  letter-spacing: var(--om-body-sm-letter-spacing);
+  font-weight: var(--om-body-sm-strong-font-weight);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: var(--om-spacing-200, 8px);
+  color: var(--om-text-default, #131313);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border: none;
+  border-radius: var(--om-radius-200, 8px);
+  cursor: pointer;
+}
+.om-component-ui-input-trade-max:hover:not(:disabled) {
+  background-color: var(--om-bg-neutral-tertiary-hover, #e3e4e4);
+}
+.om-component-ui-input-trade-max:disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  cursor: not-allowed;
+}
+.om-component-ui-input-trade-subline {
+  display: flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  padding-top: var(--om-spacing-200, 8px);
+}
+.om-component-ui-input-trade-swap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--om-icon-default-tertiary, #646465);
+  background: transparent;
+  border: none;
+  transform: rotate(-90deg);
+  cursor: pointer;
+}
+.om-component-ui-input-trade-swap:disabled {
+  color: var(--om-icon-disabled, #d1d2d2);
+  cursor: not-allowed;
+}
+.om-component-ui-input-trade-exchange {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-input-trade-error-msg {
+  font-size: var(--om-body-sm-font-size);
+  font-family: var(--om-body-sm-font-family);
+  line-height: var(--om-body-sm-line-height);
+  letter-spacing: var(--om-body-sm-letter-spacing);
+  font-weight: var(--om-body-sm-font-weight);
+  display: flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-input-trade:focus-within .om-component-ui-input-trade-main {
+  padding-bottom: calc(var(--om-spacing-200, 8px) - 1px);
+  border-bottom: 2px solid var(--om-border-brand, #073387);
+}
+.om-component-ui-input-trade-error .om-component-ui-input-trade-symbol,
+.om-component-ui-input-trade-error .om-component-ui-input-trade-field,
+.om-component-ui-input-trade-error .om-component-ui-input-trade-unit {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-input-trade-error .om-component-ui-input-trade-field::-moz-placeholder {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-input-trade-error .om-component-ui-input-trade-field::placeholder {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-input-trade-error .om-component-ui-input-trade-main {
+  border-bottom-color: var(--om-border-danger, #ae0000);
+}
+.om-component-ui-input-trade-error .om-component-ui-input-trade-error-msg {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-symbol,
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-field,
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-unit,
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-unit-placeholder {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-field::-moz-placeholder {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-field::placeholder {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-main {
+  border-bottom-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-exchange {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-input-trade-disabled .om-component-ui-input-trade-error-msg {
+  color: var(--om-text-disabled, #bbbdc1);
+}

package/lib/components/Link/style/Link.css

@@ -1 +1,70 @@
-.om-component-ui-link{--om-link-text:var(--om-text-brand,#073387);--om-link-hover-text:var(--om-text-on-brand-secondary,#052561);--om-link-disabled-text:var(--om-text-brand-secondary,#a4bbe1);display:inline-flex;align-items:center;color:var(--om-link-text);cursor:pointer;transition:color .2s ease;font-size:var(--om-link-md-font-size);font-family:var(--om-link-md-font-family);line-height:var(--om-link-md-line-height);letter-spacing:var(--om-link-md-letter-spacing);font-weight:var(--om-link-md-font-weight);-webkit-text-decoration:var(--om-link-md-text-decoration);text-decoration:var(--om-link-md-text-decoration);-webkit-text-decoration-skip-ink:var(--om-link-md-text-decoration-skip-ink);text-decoration-skip-ink:var(--om-link-md-text-decoration-skip-ink)}.om-component-ui-link:hover:not(.om-component-ui-link-disabled){color:var(--om-link-hover-text)}.om-component-ui-link-disabled{color:var(--om-link-disabled-text);cursor:not-allowed;pointer-events:none}.om-component-ui-link-small{font-size:var(--om-link-sm-font-size);font-family:var(--om-link-sm-font-family);line-height:var(--om-link-sm-line-height);letter-spacing:var(--om-link-sm-letter-spacing);font-weight:var(--om-link-sm-font-weight);-webkit-text-decoration:var(--om-link-sm-text-decoration);text-decoration:var(--om-link-sm-text-decoration);-webkit-text-decoration-skip-ink:var(--om-link-sm-text-decoration-skip-ink);text-decoration-skip-ink:var(--om-link-sm-text-decoration-skip-ink)}.om-component-ui-link-black{--om-link-text:var(--om-text-default,#131313);--om-link-hover-text:var(--om-text-default-secondary,#404042);--om-link-disabled-text:var(--om-text-disabled,#bbbdc1)}.om-component-ui-link-grey{--om-link-text:var(--om-text-default-tertiary,#646465);--om-link-hover-text:var(--om-text-default-secondary,#404042);--om-link-disabled-text:var(--om-text-disabled,#bbbdc1)}
+/**
+  * 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-link {
+  --om-link-text: var(--om-text-brand, #073387);
+  --om-link-hover-text: var(--om-text-on-brand-secondary, #052561);
+  --om-link-disabled-text: var(--om-text-brand-secondary, #a4bbe1);
+  display: inline-flex;
+  align-items: center;
+  color: var(--om-link-text);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: var(--om-link-md-font-size);
+  font-family: var(--om-link-md-font-family);
+  line-height: var(--om-link-md-line-height);
+  letter-spacing: var(--om-link-md-letter-spacing);
+  font-weight: var(--om-link-md-font-weight);
+  -webkit-text-decoration: var(--om-link-md-text-decoration);
+          text-decoration: var(--om-link-md-text-decoration);
+  -webkit-text-decoration-skip-ink: var(--om-link-md-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--om-link-md-text-decoration-skip-ink);
+}
+.om-component-ui-link:hover:not(.om-component-ui-link-disabled) {
+  color: var(--om-link-hover-text);
+}
+.om-component-ui-link-disabled {
+  color: var(--om-link-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.om-component-ui-link-small {
+  font-size: var(--om-link-sm-font-size);
+  font-family: var(--om-link-sm-font-family);
+  line-height: var(--om-link-sm-line-height);
+  letter-spacing: var(--om-link-sm-letter-spacing);
+  font-weight: var(--om-link-sm-font-weight);
+  -webkit-text-decoration: var(--om-link-sm-text-decoration);
+          text-decoration: var(--om-link-sm-text-decoration);
+  -webkit-text-decoration-skip-ink: var(--om-link-sm-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--om-link-sm-text-decoration-skip-ink);
+}
+.om-component-ui-link-black {
+  --om-link-text: var(--om-text-default, #131313);
+  --om-link-hover-text: var(--om-text-default-secondary, #404042);
+  --om-link-disabled-text: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-link-grey {
+  --om-link-text: var(--om-text-default-tertiary, #646465);
+  --om-link-hover-text: var(--om-text-default-secondary, #404042);
+  --om-link-disabled-text: var(--om-text-disabled, #bbbdc1);
+}

package/lib/components/Navigation/style/Nav.css

@@ -1 +1,158 @@
-.om-component-ui-nav{display:flex;flex-direction:column;width:280px;height:100%;padding:var(--om-spacing-1000,40px) var(--om-spacing-400,16px) var(--om-spacing-600,24px);background-color:var(--om-bg-default,#fff);border-right:1px solid var(--om-border-neutral,#e3e4e4)}.om-component-ui-nav-content{display:flex;flex:1;flex-direction:column;min-height:0;overflow-y:auto}.om-component-ui-nav-divider{height:1px;background-color:var(--om-border-neutral,#e3e4e4)}.om-component-ui-nav-group{display:flex;flex-direction:column}.om-component-ui-nav-group-header{display:flex;align-items:center;min-height:var(--om-component-height-md,40px);padding:var(--om-spacing-200,8px) var(--om-spacing-400,16px);color:var(--om-text-default-secondary,#404042);border-radius:var(--om-radius-300,12px)}.om-component-ui-nav-group-header-content{display:flex;flex:1;gap:var(--om-spacing-200,8px);align-items:center;min-width:0}.om-component-ui-nav-group-header-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--om-icon-default-secondary,#404042)}.om-component-ui-nav-group-header-label{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.om-component-ui-nav-group-header .om-component-ui-typography{color:inherit}.om-component-ui-nav-item-wrapper{display:flex;flex-direction:column}.om-component-ui-nav-item{display:flex;gap:var(--om-spacing-600,24px);align-items:center;width:100%;min-height:var(--om-component-height-md,40px);padding:var(--om-spacing-200,8px) var(--om-spacing-400,16px);padding-left:calc(var(--om-spacing-400, 16px) + var(--om-nav-indent, 0) * var(--om-spacing-600, 24px));color:var(--om-text-default-secondary,#404042);background-color:transparent;border:none;border-radius:var(--om-radius-300,12px);cursor:pointer}.om-component-ui-nav-item .om-component-ui-typography{color:inherit}.om-component-ui-nav-item[data-depth="1"]:hover:not(:disabled){color:var(--om-text-brand,#073387)}.om-component-ui-nav-item:not([data-depth="1"]):hover:not(:disabled){color:var(--om-text-default,#131313)}.om-component-ui-nav-item-content{display:flex;flex:1;align-items:center;min-width:0}.om-component-ui-nav-item-label{flex:1;min-width:0;white-space:normal;text-align:left;overflow-wrap:anywhere}.om-component-ui-nav-item-suffix{flex-shrink:0}.om-component-ui-nav-item-arrow{display:inline-flex;flex-shrink:0;align-items:center;color:var(--om-icon-default-secondary,#404042);transition:transform .2s ease-in-out}.om-component-ui-nav-item-arrow-open{transform:rotate(-180deg)}.om-component-ui-nav-item-link{display:flex;color:inherit;text-decoration:none}.om-component-ui-nav-item-active{color:var(--om-text-brand,#073387)}.om-component-ui-nav-item-disabled{cursor:not-allowed}.om-component-ui-nav-item-disabled,.om-component-ui-nav-item-disabled:hover{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-nav-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-in-out}.om-component-ui-nav-submenu-open{grid-template-rows:1fr}.om-component-ui-nav-submenu-inner{display:flex;flex-direction:column;overflow:hidden}
+/**
+  * 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-nav {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  height: 100%;
+  padding: var(--om-spacing-1000, 40px) var(--om-spacing-400, 16px) var(--om-spacing-600, 24px);
+  background-color: var(--om-bg-default, #fff);
+  border-right: 1px solid var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-nav-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+.om-component-ui-nav-divider {
+  height: 1px;
+  background-color: var(--om-border-neutral, #e3e4e4);
+}
+.om-component-ui-nav-group {
+  display: flex;
+  flex-direction: column;
+}
+.om-component-ui-nav-group-header {
+  display: flex;
+  align-items: center;
+  min-height: var(--om-component-height-md, 40px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default-secondary, #404042);
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-nav-group-header-content {
+  display: flex;
+  flex: 1;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-nav-group-header-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-nav-group-header-label {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.om-component-ui-nav-group-header .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-nav-item-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.om-component-ui-nav-item {
+  display: flex;
+  gap: var(--om-spacing-600, 24px);
+  align-items: center;
+  width: 100%;
+  min-height: var(--om-component-height-md, 40px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  padding-left: calc(var(--om-spacing-400, 16px) + var(--om-nav-indent, 0) * var(--om-spacing-600, 24px));
+  color: var(--om-text-default-secondary, #404042);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-nav-item .om-component-ui-typography {
+  color: inherit;
+}
+.om-component-ui-nav-item[data-depth="1"]:hover:not(:disabled) {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-nav-item:not([data-depth="1"]):hover:not(:disabled) {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-nav-item-content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-nav-item-label {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.om-component-ui-nav-item-suffix {
+  flex-shrink: 0;
+}
+.om-component-ui-nav-item-arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--om-icon-default-secondary, #404042);
+  transition: transform 200ms ease-in-out;
+}
+.om-component-ui-nav-item-arrow-open {
+  transform: rotate(-180deg);
+}
+.om-component-ui-nav-item-link {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+}
+.om-component-ui-nav-item-active {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-nav-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-nav-item-disabled:hover {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-nav-submenu {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease-in-out;
+}
+.om-component-ui-nav-submenu-open {
+  grid-template-rows: 1fr;
+}
+.om-component-ui-nav-submenu-inner {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}