@1money/component-ui 0.0.48 → 0.0.50

package/es/components/Tooltip/style/Tooltip.css

@@ -1 +1,98 @@
-.om-component-ui-tooltip[role=tooltip]{display:flex;flex-direction:column;gap:var(--om-spacing-0,0);align-items:center;min-width:48px;max-width:400px;padding:var(--om-spacing-200,8px) var(--om-spacing-300,12px);color:var(--om-text-on-neutral,#fff);background-color:var(--om-bg-neutral,#131313);border-radius:var(--om-radius-200,8px);box-shadow:var(--om-shadow-200,0 10px 22px rgba(0,0,0,.1));opacity:1}.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-title{font-size:var(--om-title-sm-font-size);font-family:var(--om-title-sm-font-family);line-height:var(--om-title-sm-line-height);letter-spacing:var(--om-title-sm-letter-spacing);font-weight:var(--om-title-sm-strong-font-weight)}.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-body{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)}.om-component-ui-tooltip[role=tooltip].om-component-ui-tooltip-with-title{align-items:flex-start;text-align:left}.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-arrow{background-color:var(--om-bg-neutral,#131313);border-radius:0;mask-position:center;mask-repeat:no-repeat;mask-size:100% 100%}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-bottom]>.om-component-ui-tooltip-arrow,.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-top]>.om-component-ui-tooltip-arrow{width:36px;height:9px;mask-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMzE0NiA3LjM1NDk1TDEwLjM2NjQgMC44MTU0QzkuODA5ODcgMC4yOTE2NDIgOS4wNzQ0NyAwIDguMzEwMjcgMEgyNy42ODk3QzI2LjkyNTUgMCAyNi4xOTAxIDAuMjkxNjQyIDI1LjYzMzYgMC44MTU0MDFMMTguNjg1NCA3LjM1NDk1QzE4LjMwMDMgNy43MTczNSAxNy42OTk3IDcuNzE3MzUgMTcuMzE0NiA3LjM1NDk1WiIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Ik04IDAuNUg4LjM0MzE1QzkuNDA0MDEgMC41IDEwLjQyMTQgMC45MjE0MjcgMTEuMTcxNiAxLjY3MTU3TDE3LjI5MjkgNy43OTI4OUMxNy42ODM0IDguMTgzNDIgMTguMzE2NiA4LjE4MzQyIDE4LjcwNzEgNy43OTI4OUwyNC44Mjg0IDEuNjcxNTdDMjUuNTc4NiAwLjkyMTQyNiAyNi41OTYgMC41IDI3LjY1NjkgMC41SDI4IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==")}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-left]>.om-component-ui-tooltip-arrow,.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-right]>.om-component-ui-tooltip-arrow{width:9px;height:36px;mask-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOSAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDM2KSByb3RhdGUoLTkwKSI+PHBhdGggZD0iTTE3LjMxNDYgNy4zNTQ5NUwxMC4zNjY0IDAuODE1NEM5LjgwOTg3IDAuMjkxNjQyIDkuMDc0NDcgMCA4LjMxMDI3IDBIMjcuNjg5N0MyNi45MjU1IDAgMjYuMTkwMSAwLjI5MTY0MiAyNS42MzM2IDAuODE1NDAxTDE4LjY4NTQgNy4zNTQ5NUMxOC4zMDAzIDcuNzE3MzUgMTcuNjk5NyA3LjcxNzM1IDE3LjMxNDYgNy4zNTQ5NVoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNOCAwLjVIOC4zNDMxNUM5LjQwNDAxIDAuNSAxMC40MjE0IDAuOTIxNDI3IDExLjE3MTYgMS42NzE1N0wxNy4yOTI5IDcuNzkyODlDMTcuNjgzNCA4LjE4MzQyIDE4LjMxNjYgOC4xODM0MiAxOC43MDcxIDcuNzkyODlMMjQuODI4NCAxLjY3MTU3QzI1LjU3ODYgMC45MjE0MjYgMjYuNTk2IDAuNSAyNy42NTY5IDAuNUgyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PC9zdmc+")}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-top]>.om-component-ui-tooltip-arrow{bottom:-8px!important;transform:none}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-bottom]>.om-component-ui-tooltip-arrow{top:-8px!important;transform:rotate(180deg)}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-left]>.om-component-ui-tooltip-arrow{right:-8px!important;transform:none}.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-right]>.om-component-ui-tooltip-arrow{left:-8px!important;transform:rotate(180deg)}@media (max-width:767.98px){.om-component-ui-tooltip[role=tooltip]{max-width:300px}}
+/**
+  * 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-tooltip[role=tooltip] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-0, 0px);
+  align-items: center;
+  min-width: 48px;
+  max-width: 400px;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-neutral, #131313);
+  border-radius: var(--om-radius-200, 8px);
+  box-shadow: var(--om-shadow-200, 0 10px 22px rgba(0, 0, 0, 0.1));
+  opacity: 1;
+}
+.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-title {
+  font-size: var(--om-title-sm-font-size);
+  font-family: var(--om-title-sm-font-family);
+  line-height: var(--om-title-sm-line-height);
+  letter-spacing: var(--om-title-sm-letter-spacing);
+  font-weight: var(--om-title-sm-strong-font-weight);
+}
+.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-body {
+  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);
+}
+.om-component-ui-tooltip[role=tooltip].om-component-ui-tooltip-with-title {
+  align-items: flex-start;
+  text-align: left;
+}
+.om-component-ui-tooltip[role=tooltip] .om-component-ui-tooltip-arrow {
+  background-color: var(--om-bg-neutral, #131313);
+  border-radius: 0;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-top] > .om-component-ui-tooltip-arrow, .om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-bottom] > .om-component-ui-tooltip-arrow {
+  width: 36px;
+  height: 9px;
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMzE0NiA3LjM1NDk1TDEwLjM2NjQgMC44MTU0QzkuODA5ODcgMC4yOTE2NDIgOS4wNzQ0NyAwIDguMzEwMjcgMEgyNy42ODk3QzI2LjkyNTUgMCAyNi4xOTAxIDAuMjkxNjQyIDI1LjYzMzYgMC44MTU0MDFMMTguNjg1NCA3LjM1NDk1QzE4LjMwMDMgNy43MTczNSAxNy42OTk3IDcuNzE3MzUgMTcuMzE0NiA3LjM1NDk1WiIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Ik04IDAuNUg4LjM0MzE1QzkuNDA0MDEgMC41IDEwLjQyMTQgMC45MjE0MjcgMTEuMTcxNiAxLjY3MTU3TDE3LjI5MjkgNy43OTI4OUMxNy42ODM0IDguMTgzNDIgMTguMzE2NiA4LjE4MzQyIDE4LjcwNzEgNy43OTI4OUwyNC44Mjg0IDEuNjcxNTdDMjUuNTc4NiAwLjkyMTQyNiAyNi41OTYgMC41IDI3LjY1NjkgMC41SDI4IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMzE0NiA3LjM1NDk1TDEwLjM2NjQgMC44MTU0QzkuODA5ODcgMC4yOTE2NDIgOS4wNzQ0NyAwIDguMzEwMjcgMEgyNy42ODk3QzI2LjkyNTUgMCAyNi4xOTAxIDAuMjkxNjQyIDI1LjYzMzYgMC44MTU0MDFMMTguNjg1NCA3LjM1NDk1QzE4LjMwMDMgNy43MTczNSAxNy42OTk3IDcuNzE3MzUgMTcuMzE0NiA3LjM1NDk1WiIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Ik04IDAuNUg4LjM0MzE1QzkuNDA0MDEgMC41IDEwLjQyMTQgMC45MjE0MjcgMTEuMTcxNiAxLjY3MTU3TDE3LjI5MjkgNy43OTI4OUMxNy42ODM0IDguMTgzNDIgMTguMzE2NiA4LjE4MzQyIDE4LjcwNzEgNy43OTI4OUwyNC44Mjg0IDEuNjcxNTdDMjUuNTc4NiAwLjkyMTQyNiAyNi41OTYgMC41IDI3LjY1NjkgMC41SDI4IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==");
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-left] > .om-component-ui-tooltip-arrow, .om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-right] > .om-component-ui-tooltip-arrow {
+  width: 9px;
+  height: 36px;
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOSAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDM2KSByb3RhdGUoLTkwKSI+PHBhdGggZD0iTTE3LjMxNDYgNy4zNTQ5NUwxMC4zNjY0IDAuODE1NEM5LjgwOTg3IDAuMjkxNjQyIDkuMDc0NDcgMCA4LjMxMDI3IDBIMjcuNjg5N0MyNi45MjU1IDAgMjYuMTkwMSAwLjI5MTY0MiAyNS42MzM2IDAuODE1NDAxTDE4LjY4NTQgNy4zNTQ5NUMxOC4zMDAzIDcuNzE3MzUgMTcuNjk5NyA3LjcxNzM1IDE3LjMxNDYgNy4zNTQ5NVoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNOCAwLjVIOC4zNDMxNUM5LjQwNDAxIDAuNSAxMC40MjE0IDAuOTIxNDI3IDExLjE3MTYgMS42NzE1N0wxNy4yOTI5IDcuNzkyODlDMTcuNjgzNCA4LjE4MzQyIDE4LjMxNjYgOC4xODM0MiAxOC43MDcxIDcuNzkyODlMMjQuODI4NCAxLjY3MTU3QzI1LjU3ODYgMC45MjE0MjYgMjYuNTk2IDAuNSAyNy42NTY5IDAuNUgyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PC9zdmc+");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOSAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDM2KSByb3RhdGUoLTkwKSI+PHBhdGggZD0iTTE3LjMxNDYgNy4zNTQ5NUwxMC4zNjY0IDAuODE1NEM5LjgwOTg3IDAuMjkxNjQyIDkuMDc0NDcgMCA4LjMxMDI3IDBIMjcuNjg5N0MyNi45MjU1IDAgMjYuMTkwMSAwLjI5MTY0MiAyNS42MzM2IDAuODE1NDAxTDE4LjY4NTQgNy4zNTQ5NUMxOC4zMDAzIDcuNzE3MzUgMTcuNjk5NyA3LjcxNzM1IDE3LjMxNDYgNy4zNTQ5NVoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNOCAwLjVIOC4zNDMxNUM5LjQwNDAxIDAuNSAxMC40MjE0IDAuOTIxNDI3IDExLjE3MTYgMS42NzE1N0wxNy4yOTI5IDcuNzkyODlDMTcuNjgzNCA4LjE4MzQyIDE4LjMxNjYgOC4xODM0MiAxOC43MDcxIDcuNzkyODlMMjQuODI4NCAxLjY3MTU3QzI1LjU3ODYgMC45MjE0MjYgMjYuNTk2IDAuNSAyNy42NTY5IDAuNUgyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PC9zdmc+");
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-top] > .om-component-ui-tooltip-arrow {
+  bottom: -8px !important;
+  transform: none;
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-bottom] > .om-component-ui-tooltip-arrow {
+  top: -8px !important;
+  transform: rotate(180deg);
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-left] > .om-component-ui-tooltip-arrow {
+  right: -8px !important;
+  transform: none;
+}
+.om-component-ui-tooltip[role=tooltip][class*=react-tooltip__place-right] > .om-component-ui-tooltip-arrow {
+  left: -8px !important;
+  transform: rotate(180deg);
+}
+
+@media (max-width: 767.98px) {
+  .om-component-ui-tooltip[role=tooltip] {
+    max-width: 300px;
+  }
+}

package/es/components/Trigger/style/Trigger.css

@@ -1 +1,35 @@
-.om-trigger-panel{z-index:1500;padding:var(--om-spacing-200,8px);background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-neutral-tertiary,#f8f8f8);border-radius:var(--om-radius-300,12px);box-shadow:var(--om-shadow-100,0 4px 8px rgba(65,91,130,.12))}.om-trigger-arrow{fill:var(--om-bg-default,#fff);stroke:var(--om-border-neutral-tertiary,#f8f8f8);stroke-width: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-trigger-panel {
+  z-index: 1500;
+  padding: var(--om-spacing-200, 8px);
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-neutral-tertiary, #f8f8f8);
+  border-radius: var(--om-radius-300, 12px);
+  box-shadow: var(--om-shadow-100, 0 4px 8px rgba(65, 91, 130, 0.12));
+}
+.om-trigger-arrow {
+  fill: var(--om-bg-default, #fff);
+  stroke: var(--om-border-neutral-tertiary, #f8f8f8);
+  stroke-width: 1px;
+}

package/es/components/Typography/style/Typography.css

@@ -1 +1,444 @@
-.om-component-ui-typography{margin:0;color:inherit;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}.om-component-ui-typography-display-xl{font-size:var(--om-display-xl-font-size);font-family:var(--om-display-xl-font-family);line-height:var(--om-display-xl-line-height);letter-spacing:var(--om-display-xl-letter-spacing);font-weight:var(--om-display-xl-font-weight)}.om-component-ui-typography-display-lg{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)}.om-component-ui-typography-display-md{font-size:var(--om-display-md-font-size);font-family:var(--om-display-md-font-family);line-height:var(--om-display-md-line-height);letter-spacing:var(--om-display-md-letter-spacing);font-weight:var(--om-display-md-font-weight)}.om-component-ui-typography-display-sm{font-size:var(--om-display-sm-font-size);font-family:var(--om-display-sm-font-family);line-height:var(--om-display-sm-line-height);letter-spacing:var(--om-display-sm-letter-spacing);font-weight:var(--om-display-sm-font-weight)}.om-component-ui-typography-display-xs{font-size:var(--om-display-xs-font-size);font-family:var(--om-display-xs-font-family);line-height:var(--om-display-xs-line-height);letter-spacing:var(--om-display-xs-letter-spacing);font-weight:var(--om-display-xs-font-weight)}.om-component-ui-typography-headline-lg{font-size:var(--om-headline-lg-font-size);font-family:var(--om-headline-lg-font-family);line-height:var(--om-headline-lg-line-height);letter-spacing:var(--om-headline-lg-letter-spacing);font-weight:var(--om-headline-lg-font-weight)}.om-component-ui-typography-headline-md{font-size:var(--om-headline-md-font-size);font-family:var(--om-headline-md-font-family);line-height:var(--om-headline-md-line-height);letter-spacing:var(--om-headline-md-letter-spacing);font-weight:var(--om-headline-md-font-weight)}.om-component-ui-typography-headline-sm{font-size:var(--om-headline-sm-font-size);font-family:var(--om-headline-sm-font-family);line-height:var(--om-headline-sm-line-height);letter-spacing:var(--om-headline-sm-letter-spacing);font-weight:var(--om-headline-sm-font-weight)}.om-component-ui-typography-headline-xs{font-size:var(--om-headline-xs-font-size);font-family:var(--om-headline-xs-font-family);line-height:var(--om-headline-xs-line-height);letter-spacing:var(--om-headline-xs-letter-spacing);font-weight:var(--om-headline-xs-font-weight)}.om-component-ui-typography-title-lg{font-size:var(--om-title-lg-font-size);font-family:var(--om-title-lg-font-family);line-height:var(--om-title-lg-line-height);letter-spacing:var(--om-title-lg-letter-spacing);font-weight:var(--om-title-lg-font-weight)}.om-component-ui-typography-title-md{font-size:var(--om-title-md-font-size);font-family:var(--om-title-md-font-family);line-height:var(--om-title-md-line-height);letter-spacing:var(--om-title-md-letter-spacing);font-weight:var(--om-title-md-font-weight)}.om-component-ui-typography-title-sm{font-size:var(--om-title-sm-font-size);font-family:var(--om-title-sm-font-family);line-height:var(--om-title-sm-line-height);letter-spacing:var(--om-title-sm-letter-spacing);font-weight:var(--om-title-sm-font-weight)}.om-component-ui-typography-body-lg{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-font-weight)}.om-component-ui-typography-body-md{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-typography-body-sm{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)}.om-component-ui-typography-label-xl{font-size:var(--om-label-xl-font-size);font-family:var(--om-label-xl-font-family);line-height:var(--om-label-xl-line-height);letter-spacing:var(--om-label-xl-letter-spacing);font-weight:var(--om-label-xl-font-weight)}.om-component-ui-typography-label-lg{font-size:var(--om-label-lg-font-size);font-family:var(--om-label-lg-font-family);line-height:var(--om-label-lg-line-height);letter-spacing:var(--om-label-lg-letter-spacing);font-weight:var(--om-label-lg-font-weight)}.om-component-ui-typography-label-md{font-size:var(--om-label-md-font-size);font-family:var(--om-label-md-font-family);line-height:var(--om-label-md-line-height);letter-spacing:var(--om-label-md-letter-spacing);font-weight:var(--om-label-md-font-weight)}.om-component-ui-typography-label-sm{font-size:var(--om-label-sm-font-size);font-family:var(--om-label-sm-font-family);line-height:var(--om-label-sm-line-height);letter-spacing:var(--om-label-sm-letter-spacing);font-weight:var(--om-label-sm-font-weight)}.om-component-ui-typography-label-xs{font-size:var(--om-label-xs-font-size);font-family:var(--om-label-xs-font-family);line-height:var(--om-label-xs-line-height);letter-spacing:var(--om-label-xs-letter-spacing);font-weight:var(--om-label-xs-font-weight)}.om-component-ui-typography-link-md{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);color:var(--om-text-brand,#073387)}.om-component-ui-typography-link-sm{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);color:var(--om-text-brand,#073387)}.om-component-ui-typography-title-lg.om-component-ui-typography-strong{font-size:var(--om-title-lg-font-size);font-family:var(--om-title-lg-font-family);line-height:var(--om-title-lg-line-height);letter-spacing:var(--om-title-lg-letter-spacing);font-weight:var(--om-title-lg-strong-font-weight)}.om-component-ui-typography-title-md.om-component-ui-typography-strong{font-size:var(--om-title-md-font-size);font-family:var(--om-title-md-font-family);line-height:var(--om-title-md-line-height);letter-spacing:var(--om-title-md-letter-spacing);font-weight:var(--om-title-md-strong-font-weight)}.om-component-ui-typography-title-sm.om-component-ui-typography-strong{font-size:var(--om-title-sm-font-size);font-family:var(--om-title-sm-font-family);line-height:var(--om-title-sm-line-height);letter-spacing:var(--om-title-sm-letter-spacing);font-weight:var(--om-title-sm-strong-font-weight)}.om-component-ui-typography-body-lg.om-component-ui-typography-strong{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)}.om-component-ui-typography-body-md.om-component-ui-typography-strong{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-component-ui-typography-body-sm.om-component-ui-typography-strong{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)}.om-component-ui-typography-label-xl.om-component-ui-typography-strong{font-size:var(--om-label-xl-font-size);font-family:var(--om-label-xl-font-family);line-height:var(--om-label-xl-line-height);letter-spacing:var(--om-label-xl-letter-spacing);font-weight:var(--om-label-xl-strong-font-weight)}.om-component-ui-typography-label-lg.om-component-ui-typography-strong{font-size:var(--om-label-lg-font-size);font-family:var(--om-label-lg-font-family);line-height:var(--om-label-lg-line-height);letter-spacing:var(--om-label-lg-letter-spacing);font-weight:var(--om-label-lg-strong-font-weight)}.om-component-ui-typography-label-md.om-component-ui-typography-strong{font-size:var(--om-label-md-font-size);font-family:var(--om-label-md-font-family);line-height:var(--om-label-md-line-height);letter-spacing:var(--om-label-md-letter-spacing);font-weight:var(--om-label-md-strong-font-weight)}.om-component-ui-typography-label-sm.om-component-ui-typography-strong{font-size:var(--om-label-sm-font-size);font-family:var(--om-label-sm-font-family);line-height:var(--om-label-sm-line-height);letter-spacing:var(--om-label-sm-letter-spacing);font-weight:var(--om-label-sm-strong-font-weight)}.om-component-ui-typography-label-xs.om-component-ui-typography-strong{font-size:var(--om-label-xs-font-size);font-family:var(--om-label-xs-font-family);line-height:var(--om-label-xs-line-height);letter-spacing:var(--om-label-xs-letter-spacing);font-weight:var(--om-label-xs-strong-font-weight)}.om-component-ui-typography-italic{font-style:italic}.om-component-ui-typography-underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.om-component-ui-typography-delete{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.om-component-ui-typography-underline-delete{-webkit-text-decoration-line:underline line-through;text-decoration-line:underline line-through}.om-component-ui-typography-ellipsis{position:relative;display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}.om-component-ui-typography-ellipsis-measure{position:absolute;top:0;right:0;left:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.om-component-ui-typography-copyable-wrapper{display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center;min-width:0;max-width:100%}.om-component-ui-typography-copyable-wrapper-inline{display:inline-flex;vertical-align:bottom}.om-component-ui-typography-copyable-wrapper-block{display:flex;align-items:flex-start;width:100%}.om-component-ui-typography-copyable-content{flex:1 1 auto;min-width:0}.om-component-ui-typography-color-default{color:var(--om-text-default,#131313)}.om-component-ui-typography-color-default-secondary{color:var(--om-text-default-secondary,#404042)}.om-component-ui-typography-color-default-tertiary{color:var(--om-text-default-tertiary,#646465)}.om-component-ui-typography-color-disabled{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-typography-color-disabled-black{color:var(--om-text-disabled-black,#bbbdc1)}.om-component-ui-typography-color-disabled-white{color:var(--om-text-disabled-white,#f8f8f8)}.om-component-ui-typography-color-brand{color:var(--om-text-brand,#073387)}.om-component-ui-typography-color-brand-secondary{color:var(--om-text-brand-secondary,#a4bbe1)}.om-component-ui-typography-color-brand-tertiary{color:var(--om-text-brand-tertiary,#c1d0eb)}.om-component-ui-typography-color-on-brand{color:var(--om-text-on-brand,#dde6f4)}.om-component-ui-typography-color-on-brand-secondary{color:var(--om-text-on-brand-secondary,#052561)}.om-component-ui-typography-color-on-brand-tertiary{color:var(--om-text-on-brand-tertiary,#03163a)}.om-component-ui-typography-color-neutral{color:var(--om-text-neutral,#404042)}.om-component-ui-typography-color-neutral-secondary{color:var(--om-text-neutral-secondary,#9fa3a3)}.om-component-ui-typography-color-neutral-tertiary{color:var(--om-text-neutral-tertiary,#bbbdc1)}.om-component-ui-typography-color-on-neutral{color:var(--om-text-on-neutral,#fff)}.om-component-ui-typography-color-on-neutral-secondary{color:var(--om-text-on-neutral-secondary,#d1d2d2)}.om-component-ui-typography-color-on-neutral-tertiary{color:var(--om-text-on-neutral-tertiary,#e3e4e4)}.om-component-ui-typography-color-positive{color:var(--om-text-positive,#1f5800)}.om-component-ui-typography-color-positive-secondary{color:var(--om-text-positive-secondary,rgba(31,88,0,.2))}.om-component-ui-typography-color-positive-tertiary{color:var(--om-text-positive-tertiary,rgba(31,88,0,.1))}.om-component-ui-typography-color-on-positive{color:var(--om-text-on-positive,rgba(31,88,0,.05))}.om-component-ui-typography-color-on-positive-secondary{color:var(--om-text-on-positive-secondary,#1b4404)}.om-component-ui-typography-color-on-positive-tertiary{color:var(--om-text-on-positive-tertiary,#003104)}.om-component-ui-typography-color-warning{color:var(--om-text-warning,#db8600)}.om-component-ui-typography-color-warning-secondary{color:var(--om-text-warning-secondary,rgba(244,198,0,.2))}.om-component-ui-typography-color-warning-tertiary{color:var(--om-text-warning-tertiary,rgba(244,198,0,.1))}.om-component-ui-typography-color-on-warning{color:var(--om-text-on-warning,rgba(244,198,0,.05))}.om-component-ui-typography-color-on-warning-secondary{color:var(--om-text-on-warning-secondary,#ffa000)}.om-component-ui-typography-color-on-warning-tertiary{color:var(--om-text-on-warning-tertiary,#db8600)}.om-component-ui-typography-color-danger{color:var(--om-text-danger,#ae0000)}.om-component-ui-typography-color-danger-secondary{color:var(--om-text-danger-secondary,rgba(174,0,0,.2))}.om-component-ui-typography-color-danger-tertiary{color:var(--om-text-danger-tertiary,rgba(174,0,0,.1))}.om-component-ui-typography-color-on-danger{color:var(--om-text-on-danger,rgba(174,0,0,.05))}.om-component-ui-typography-color-on-danger-secondary{color:var(--om-text-on-danger-secondary,#920000)}.om-component-ui-typography-color-on-danger-tertiary{color:var(--om-text-on-danger-tertiary,#780000)}.om-component-ui-typography-disabled{color:var(--om-text-disabled,#bbbdc1);cursor:not-allowed}.om-component-ui-typography-link-md:hover{color:var(--om-text-brand,#073387)}.om-component-ui-typography-link-md.om-component-ui-typography-disabled{color:var(--om-text-disabled,#bbbdc1);pointer-events:none}.om-component-ui-typography-link-sm:hover{color:var(--om-text-brand,#073387)}.om-component-ui-typography-link-sm.om-component-ui-typography-disabled{color:var(--om-text-disabled,#bbbdc1);pointer-events:none}
+/**
+  * 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-typography {
+  margin: 0;
+  color: inherit;
+  text-decoration-color: currentcolor;
+}
+.om-component-ui-typography-display-xl {
+  font-size: var(--om-display-xl-font-size);
+  font-family: var(--om-display-xl-font-family);
+  line-height: var(--om-display-xl-line-height);
+  letter-spacing: var(--om-display-xl-letter-spacing);
+  font-weight: var(--om-display-xl-font-weight);
+}
+.om-component-ui-typography-display-lg {
+  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);
+}
+.om-component-ui-typography-display-md {
+  font-size: var(--om-display-md-font-size);
+  font-family: var(--om-display-md-font-family);
+  line-height: var(--om-display-md-line-height);
+  letter-spacing: var(--om-display-md-letter-spacing);
+  font-weight: var(--om-display-md-font-weight);
+}
+.om-component-ui-typography-display-sm {
+  font-size: var(--om-display-sm-font-size);
+  font-family: var(--om-display-sm-font-family);
+  line-height: var(--om-display-sm-line-height);
+  letter-spacing: var(--om-display-sm-letter-spacing);
+  font-weight: var(--om-display-sm-font-weight);
+}
+.om-component-ui-typography-display-xs {
+  font-size: var(--om-display-xs-font-size);
+  font-family: var(--om-display-xs-font-family);
+  line-height: var(--om-display-xs-line-height);
+  letter-spacing: var(--om-display-xs-letter-spacing);
+  font-weight: var(--om-display-xs-font-weight);
+}
+.om-component-ui-typography-headline-lg {
+  font-size: var(--om-headline-lg-font-size);
+  font-family: var(--om-headline-lg-font-family);
+  line-height: var(--om-headline-lg-line-height);
+  letter-spacing: var(--om-headline-lg-letter-spacing);
+  font-weight: var(--om-headline-lg-font-weight);
+}
+.om-component-ui-typography-headline-md {
+  font-size: var(--om-headline-md-font-size);
+  font-family: var(--om-headline-md-font-family);
+  line-height: var(--om-headline-md-line-height);
+  letter-spacing: var(--om-headline-md-letter-spacing);
+  font-weight: var(--om-headline-md-font-weight);
+}
+.om-component-ui-typography-headline-sm {
+  font-size: var(--om-headline-sm-font-size);
+  font-family: var(--om-headline-sm-font-family);
+  line-height: var(--om-headline-sm-line-height);
+  letter-spacing: var(--om-headline-sm-letter-spacing);
+  font-weight: var(--om-headline-sm-font-weight);
+}
+.om-component-ui-typography-headline-xs {
+  font-size: var(--om-headline-xs-font-size);
+  font-family: var(--om-headline-xs-font-family);
+  line-height: var(--om-headline-xs-line-height);
+  letter-spacing: var(--om-headline-xs-letter-spacing);
+  font-weight: var(--om-headline-xs-font-weight);
+}
+.om-component-ui-typography-title-lg {
+  font-size: var(--om-title-lg-font-size);
+  font-family: var(--om-title-lg-font-family);
+  line-height: var(--om-title-lg-line-height);
+  letter-spacing: var(--om-title-lg-letter-spacing);
+  font-weight: var(--om-title-lg-font-weight);
+}
+.om-component-ui-typography-title-md {
+  font-size: var(--om-title-md-font-size);
+  font-family: var(--om-title-md-font-family);
+  line-height: var(--om-title-md-line-height);
+  letter-spacing: var(--om-title-md-letter-spacing);
+  font-weight: var(--om-title-md-font-weight);
+}
+.om-component-ui-typography-title-sm {
+  font-size: var(--om-title-sm-font-size);
+  font-family: var(--om-title-sm-font-family);
+  line-height: var(--om-title-sm-line-height);
+  letter-spacing: var(--om-title-sm-letter-spacing);
+  font-weight: var(--om-title-sm-font-weight);
+}
+.om-component-ui-typography-body-lg {
+  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-font-weight);
+}
+.om-component-ui-typography-body-md {
+  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-typography-body-sm {
+  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);
+}
+.om-component-ui-typography-label-xl {
+  font-size: var(--om-label-xl-font-size);
+  font-family: var(--om-label-xl-font-family);
+  line-height: var(--om-label-xl-line-height);
+  letter-spacing: var(--om-label-xl-letter-spacing);
+  font-weight: var(--om-label-xl-font-weight);
+}
+.om-component-ui-typography-label-lg {
+  font-size: var(--om-label-lg-font-size);
+  font-family: var(--om-label-lg-font-family);
+  line-height: var(--om-label-lg-line-height);
+  letter-spacing: var(--om-label-lg-letter-spacing);
+  font-weight: var(--om-label-lg-font-weight);
+}
+.om-component-ui-typography-label-md {
+  font-size: var(--om-label-md-font-size);
+  font-family: var(--om-label-md-font-family);
+  line-height: var(--om-label-md-line-height);
+  letter-spacing: var(--om-label-md-letter-spacing);
+  font-weight: var(--om-label-md-font-weight);
+}
+.om-component-ui-typography-label-sm {
+  font-size: var(--om-label-sm-font-size);
+  font-family: var(--om-label-sm-font-family);
+  line-height: var(--om-label-sm-line-height);
+  letter-spacing: var(--om-label-sm-letter-spacing);
+  font-weight: var(--om-label-sm-font-weight);
+}
+.om-component-ui-typography-label-xs {
+  font-size: var(--om-label-xs-font-size);
+  font-family: var(--om-label-xs-font-family);
+  line-height: var(--om-label-xs-line-height);
+  letter-spacing: var(--om-label-xs-letter-spacing);
+  font-weight: var(--om-label-xs-font-weight);
+}
+.om-component-ui-typography-link-md {
+  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);
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-typography-link-sm {
+  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);
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-typography-title-lg.om-component-ui-typography-strong {
+  font-size: var(--om-title-lg-font-size);
+  font-family: var(--om-title-lg-font-family);
+  line-height: var(--om-title-lg-line-height);
+  letter-spacing: var(--om-title-lg-letter-spacing);
+  font-weight: var(--om-title-lg-strong-font-weight);
+}
+.om-component-ui-typography-title-md.om-component-ui-typography-strong {
+  font-size: var(--om-title-md-font-size);
+  font-family: var(--om-title-md-font-family);
+  line-height: var(--om-title-md-line-height);
+  letter-spacing: var(--om-title-md-letter-spacing);
+  font-weight: var(--om-title-md-strong-font-weight);
+}
+.om-component-ui-typography-title-sm.om-component-ui-typography-strong {
+  font-size: var(--om-title-sm-font-size);
+  font-family: var(--om-title-sm-font-family);
+  line-height: var(--om-title-sm-line-height);
+  letter-spacing: var(--om-title-sm-letter-spacing);
+  font-weight: var(--om-title-sm-strong-font-weight);
+}
+.om-component-ui-typography-body-lg.om-component-ui-typography-strong {
+  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);
+}
+.om-component-ui-typography-body-md.om-component-ui-typography-strong {
+  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-component-ui-typography-body-sm.om-component-ui-typography-strong {
+  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);
+}
+.om-component-ui-typography-label-xl.om-component-ui-typography-strong {
+  font-size: var(--om-label-xl-font-size);
+  font-family: var(--om-label-xl-font-family);
+  line-height: var(--om-label-xl-line-height);
+  letter-spacing: var(--om-label-xl-letter-spacing);
+  font-weight: var(--om-label-xl-strong-font-weight);
+}
+.om-component-ui-typography-label-lg.om-component-ui-typography-strong {
+  font-size: var(--om-label-lg-font-size);
+  font-family: var(--om-label-lg-font-family);
+  line-height: var(--om-label-lg-line-height);
+  letter-spacing: var(--om-label-lg-letter-spacing);
+  font-weight: var(--om-label-lg-strong-font-weight);
+}
+.om-component-ui-typography-label-md.om-component-ui-typography-strong {
+  font-size: var(--om-label-md-font-size);
+  font-family: var(--om-label-md-font-family);
+  line-height: var(--om-label-md-line-height);
+  letter-spacing: var(--om-label-md-letter-spacing);
+  font-weight: var(--om-label-md-strong-font-weight);
+}
+.om-component-ui-typography-label-sm.om-component-ui-typography-strong {
+  font-size: var(--om-label-sm-font-size);
+  font-family: var(--om-label-sm-font-family);
+  line-height: var(--om-label-sm-line-height);
+  letter-spacing: var(--om-label-sm-letter-spacing);
+  font-weight: var(--om-label-sm-strong-font-weight);
+}
+.om-component-ui-typography-label-xs.om-component-ui-typography-strong {
+  font-size: var(--om-label-xs-font-size);
+  font-family: var(--om-label-xs-font-family);
+  line-height: var(--om-label-xs-line-height);
+  letter-spacing: var(--om-label-xs-letter-spacing);
+  font-weight: var(--om-label-xs-strong-font-weight);
+}
+.om-component-ui-typography-italic {
+  font-style: italic;
+}
+.om-component-ui-typography-underline {
+  text-decoration-line: underline;
+}
+.om-component-ui-typography-delete {
+  text-decoration-line: line-through;
+}
+.om-component-ui-typography-underline-delete {
+  text-decoration-line: underline line-through;
+}
+.om-component-ui-typography-ellipsis {
+  position: relative;
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.om-component-ui-typography-ellipsis-measure {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.om-component-ui-typography-copyable-wrapper {
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+.om-component-ui-typography-copyable-wrapper-inline {
+  display: inline-flex;
+  vertical-align: bottom;
+}
+.om-component-ui-typography-copyable-wrapper-block {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.om-component-ui-typography-copyable-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.om-component-ui-typography-color-default {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-typography-color-default-secondary {
+  color: var(--om-text-default-secondary, #404042);
+}
+.om-component-ui-typography-color-default-tertiary {
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-typography-color-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-typography-color-disabled-black {
+  color: var(--om-text-disabled-black, #bbbdc1);
+}
+.om-component-ui-typography-color-disabled-white {
+  color: var(--om-text-disabled-white, #f8f8f8);
+}
+.om-component-ui-typography-color-brand {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-typography-color-brand-secondary {
+  color: var(--om-text-brand-secondary, #a4bbe1);
+}
+.om-component-ui-typography-color-brand-tertiary {
+  color: var(--om-text-brand-tertiary, #c1d0eb);
+}
+.om-component-ui-typography-color-on-brand {
+  color: var(--om-text-on-brand, #dde6f4);
+}
+.om-component-ui-typography-color-on-brand-secondary {
+  color: var(--om-text-on-brand-secondary, #052561);
+}
+.om-component-ui-typography-color-on-brand-tertiary {
+  color: var(--om-text-on-brand-tertiary, #03163a);
+}
+.om-component-ui-typography-color-neutral {
+  color: var(--om-text-neutral, #404042);
+}
+.om-component-ui-typography-color-neutral-secondary {
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-typography-color-neutral-tertiary {
+  color: var(--om-text-neutral-tertiary, #bbbdc1);
+}
+.om-component-ui-typography-color-on-neutral {
+  color: var(--om-text-on-neutral, #fff);
+}
+.om-component-ui-typography-color-on-neutral-secondary {
+  color: var(--om-text-on-neutral-secondary, #d1d2d2);
+}
+.om-component-ui-typography-color-on-neutral-tertiary {
+  color: var(--om-text-on-neutral-tertiary, #e3e4e4);
+}
+.om-component-ui-typography-color-positive {
+  color: var(--om-text-positive, #1f5800);
+}
+.om-component-ui-typography-color-positive-secondary {
+  color: var(--om-text-positive-secondary, rgba(31, 88, 0, 0.2));
+}
+.om-component-ui-typography-color-positive-tertiary {
+  color: var(--om-text-positive-tertiary, rgba(31, 88, 0, 0.1));
+}
+.om-component-ui-typography-color-on-positive {
+  color: var(--om-text-on-positive, rgba(31, 88, 0, 0.05));
+}
+.om-component-ui-typography-color-on-positive-secondary {
+  color: var(--om-text-on-positive-secondary, #1b4404);
+}
+.om-component-ui-typography-color-on-positive-tertiary {
+  color: var(--om-text-on-positive-tertiary, #003104);
+}
+.om-component-ui-typography-color-warning {
+  color: var(--om-text-warning, #db8600);
+}
+.om-component-ui-typography-color-warning-secondary {
+  color: var(--om-text-warning-secondary, rgba(244, 198, 0, 0.2));
+}
+.om-component-ui-typography-color-warning-tertiary {
+  color: var(--om-text-warning-tertiary, rgba(244, 198, 0, 0.1));
+}
+.om-component-ui-typography-color-on-warning {
+  color: var(--om-text-on-warning, rgba(244, 198, 0, 0.05));
+}
+.om-component-ui-typography-color-on-warning-secondary {
+  color: var(--om-text-on-warning-secondary, #ffa000);
+}
+.om-component-ui-typography-color-on-warning-tertiary {
+  color: var(--om-text-on-warning-tertiary, #db8600);
+}
+.om-component-ui-typography-color-danger {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-typography-color-danger-secondary {
+  color: var(--om-text-danger-secondary, rgba(174, 0, 0, 0.2));
+}
+.om-component-ui-typography-color-danger-tertiary {
+  color: var(--om-text-danger-tertiary, rgba(174, 0, 0, 0.1));
+}
+.om-component-ui-typography-color-on-danger {
+  color: var(--om-text-on-danger, rgba(174, 0, 0, 0.05));
+}
+.om-component-ui-typography-color-on-danger-secondary {
+  color: var(--om-text-on-danger-secondary, #920000);
+}
+.om-component-ui-typography-color-on-danger-tertiary {
+  color: var(--om-text-on-danger-tertiary, #780000);
+}
+.om-component-ui-typography-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-typography-link-md:hover {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-typography-link-md.om-component-ui-typography-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  pointer-events: none;
+}
+.om-component-ui-typography-link-sm:hover {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-typography-link-sm.om-component-ui-typography-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  pointer-events: none;
+}

package/es/components/Upload/style/Upload.css

@@ -1 +1,55 @@
-.om-component-ui-upload{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);align-items:flex-start}.om-component-ui-upload-input{display:none}.om-component-ui-upload-label{color:var(--om-text-default,#131313)}.om-component-ui-upload-description{color:var(--om-text-default-tertiary,#646465)}.om-component-ui-upload-slot{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);width:100%}.om-component-ui-upload-error-msg{display:flex;gap:var(--om-spacing-100,4px);align-items:flex-start;color:var(--om-text-danger,#ae0000)}.om-component-ui-upload-error-msg-text{color:inherit!important}.om-component-ui-upload-disabled{cursor:not-allowed}
+/**
+  * 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-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  align-items: flex-start;
+}
+.om-component-ui-upload-input {
+  display: none;
+}
+.om-component-ui-upload-label {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-upload-description {
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-upload-slot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  width: 100%;
+}
+.om-component-ui-upload-error-msg {
+  display: flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: flex-start;
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-upload-error-msg-text {
+  color: inherit !important;
+}
+.om-component-ui-upload-disabled {
+  cursor: not-allowed;
+}