@1money/component-ui 0.0.48 → 0.0.50

package/es/components/Select/style/Select.css

@@ -1 +1,468 @@
-.om-component-ui-select{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);width:100%}.om-component-ui-select-label-row{display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center}.om-component-ui-select-label-text{display:inline}.om-component-ui-select-required{color:var(--om-text-danger,#ae0000)}.om-component-ui-select-info{display:inline-flex;align-items:center;color:var(--om-icon-default-tertiary,#646465)}.om-component-ui-select-description-text{display:block}.om-component-ui-select-trigger{display:flex;gap:var(--om-spacing-200,8px);align-items:center;width:100%;min-width:120px;color:inherit;text-align:left;border:1px solid var(--om-border-default,#d1d2d2);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.om-component-ui-select-trigger-large{min-height:var(--om-component-height-3xl,56px);padding:var(--om-spacing-300,12px);border-radius:var(--om-radius-300,12px)}.om-component-ui-select-trigger-small{min-height:var(--om-component-height-lg,44px);padding:var(--om-spacing-200,8px) var(--om-spacing-300,12px);border-radius:var(--om-radius-200,8px)}.om-component-ui-select-trigger-fill{background-color:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-select-trigger-stroke{background-color:transparent}.om-component-ui-select-trigger-frameless{justify-content:flex-start;width:auto;min-width:auto;min-height:auto;padding:0;background:transparent;border:none;border-radius:0}.om-component-ui-select-trigger:not(.om-component-ui-select-trigger-disabled,.om-component-ui-select-trigger-readonly):hover{border-color:var(--om-border-default-tertiary,#404042)}.om-component-ui-select-trigger-open:focus-visible,.om-component-ui-select-trigger:focus-visible{outline:none}.om-component-ui-select-trigger-frameless:not(.om-component-ui-select-trigger-disabled,.om-component-ui-select-trigger-readonly):hover{border-color:transparent}.om-component-ui-select-trigger-open{border-color:var(--om-border-brand,#073387);box-shadow:inset 0 0 0 1px var(--om-border-brand,#073387)}.om-component-ui-select-trigger-error{border-color:var(--om-border-danger,#ae0000)}.om-component-ui-select-trigger-warning{border-color:var(--om-border-warning,#db8600)}.om-component-ui-select-trigger-success{border-color:var(--om-border-positive,#1f5800)}.om-component-ui-select-trigger-disabled{color:var(--om-text-disabled,#bbbdc1);background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4);box-shadow:none;cursor:not-allowed}.om-component-ui-select-trigger-readonly,.om-component-ui-select-trigger-readonly:focus,.om-component-ui-select-trigger-readonly:focus-visible,.om-component-ui-select-trigger-readonly:hover{background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-color:transparent;outline:none;box-shadow:none;cursor:default}.om-component-ui-select-trigger-error,.om-component-ui-select-trigger-frameless,.om-component-ui-select-trigger-success,.om-component-ui-select-trigger-warning{box-shadow:none}.om-component-ui-select-trigger-disabled .om-component-ui-select-icon,.om-component-ui-select-trigger-disabled .om-component-ui-select-prefix{color:var(--om-icon-disabled,#d1d2d2)}.om-component-ui-select-content{display:flex;flex:1 1 auto;gap:var(--om-spacing-200,8px);align-items:center;min-width:0}.om-component-ui-select-prefix{display:inline-flex;flex-shrink:0;align-items:center;color:var(--om-icon-default-tertiary,#646465)}.om-component-ui-select-placeholder,.om-component-ui-select-value{display:inline-flex;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-select-value-large{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-select-value-small{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-select-placeholder-large{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-select-placeholder-small{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-select-value{color:var(--om-text-default,#131313)}.om-component-ui-select-value-multiple{display:flex;flex-wrap:wrap;gap:var(--om-spacing-200,8px);align-content:flex-start;align-items:center;max-height:88px;overflow:hidden;white-space:normal;text-overflow:clip}.om-component-ui-select-placeholder{color:var(--om-text-neutral-secondary,#9fa3a3)}.om-component-ui-select-placeholder-disabled,.om-component-ui-select-value-disabled{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-select-icon{display:inline-flex;flex-shrink:0;align-items:center;color:var(--om-icon-default,#131313)}.om-component-ui-select-trigger-multiple-filled{padding-top:var(--om-spacing-200,8px);padding-bottom:var(--om-spacing-200,8px)}.om-component-ui-select-tag{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;gap:var(--om-spacing-100,4px);align-items:center;justify-content:center;max-width:100%;padding:var(--om-spacing-100,4px) var(--om-spacing-200,8px);color:var(--om-text-default-tertiary,#646465);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-radius:var(--om-radius-full,9999px)}.om-component-ui-select-tag-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-select-tag-remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:currentcolor}.om-component-ui-select-collapsed-values{display:inline-flex;flex:1 1 auto;gap:var(--om-spacing-100,4px);align-items:center;min-width:0}.om-component-ui-select-collapsed-values-list{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-select-collapsed-values-extra{flex-shrink:0;color:var(--om-text-default-secondary,#404042)}.om-component-ui-select-collapsed-values-extra-disabled{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-select-feedback{display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center;color:var(--om-text-default-secondary,#404042)}.om-component-ui-select-feedback-error{color:var(--om-text-danger,#ae0000)!important}.om-component-ui-select-feedback-warning{color:var(--om-text-warning,#db8600)}.om-component-ui-select-feedback-success{color:var(--om-text-positive,#1f5800)}.om-component-ui-select-feedback-disabled{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-select-feedback-icon{display:inline-flex;flex-shrink:0;align-items:center;margin-top:1px}.om-component-ui-select-panel{z-index:1500;display:flex;flex-direction:column;padding:var(--om-spacing-200,8px);overflow:hidden;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-component-ui-select-search{display:flex;flex-shrink:0;gap:var(--om-spacing-200,8px);align-items:center;width:100%;margin-bottom:var(--om-spacing-200,8px);background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default,#d1d2d2);transition:border-color .2s ease,box-shadow .2s ease}.om-component-ui-select-search-large{min-height:var(--om-component-height-3xl,56px);padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px);border-radius:var(--om-radius-300,12px)}.om-component-ui-select-search-small{min-height:var(--om-component-height-lg,44px);padding:var(--om-spacing-200,8px) var(--om-spacing-300,12px);border-radius:var(--om-radius-200,8px)}.om-component-ui-select-search:hover{border-color:var(--om-border-default-tertiary,#404042)}.om-component-ui-select-search:focus-within{border-color:var(--om-border-brand,#073387);box-shadow:inset 0 0 0 1px var(--om-border-brand,#073387)}.om-component-ui-select-search-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--om-icon-default,#131313)}.om-component-ui-select-search-input{flex:1 1 auto;min-width:0;color:var(--om-text-default,#131313);background:transparent;border:none;outline:none}.om-component-ui-select-search-input-large{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-select-search-input-small{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-select-search-input::placeholder{color:var(--om-text-neutral-secondary,#9fa3a3)}.om-component-ui-select-panel-body{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--om-spacing-050,2px);min-height:0;overflow-y:auto}.om-component-ui-select-panel-footer{flex-shrink:0;width:100%;padding-top:var(--om-spacing-300,12px);padding-bottom:var(--om-spacing-100,4px);border-top:1px solid var(--om-border-neutral-secondary,#f0f0f0)}.om-component-ui-select-group{display:flex;flex-direction:column;width:100%}.om-component-ui-select-group-label{padding:var(--om-spacing-200,8px) 0}.om-component-ui-select-group-label,.om-component-ui-select-option{display:flex;align-items:center;width:100%;color:var(--om-text-default,#131313)}.om-component-ui-select-option{gap:var(--om-spacing-300,12px);min-height:40px;margin:var(--om-spacing-100,4px) 0;padding:var(--om-spacing-200,8px);text-align:left;background:transparent;border:none;border-radius:var(--om-radius-200,8px);cursor:pointer;transition:background-color .2s ease}.om-component-ui-select-option:focus,.om-component-ui-select-option:focus-visible{outline:none;box-shadow:none}.om-component-ui-select-option-active,.om-component-ui-select-option-selected,.om-component-ui-select-option:hover{background-color:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-select-option-disabled{color:var(--om-text-disabled,#bbbdc1);background-color:transparent;cursor:not-allowed}.om-component-ui-select-option-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--om-spacing-050,2px);min-width:0}.om-component-ui-select-option-label{color:currentcolor}.om-component-ui-select-option-description,.om-component-ui-select-option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-select-option-check{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;margin-left:auto;color:var(--om-icon-brand,#073387)}.om-component-ui-select-empty{padding:var(--om-spacing-200,8px);text-align:center}.om-component-ui-select-frameless{width:auto}.om-component-ui-select-frameless .om-component-ui-select-placeholder-large,.om-component-ui-select-frameless .om-component-ui-select-value-large{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);color:var(--om-text-default-tertiary,#646465)}.om-component-ui-select-frameless .om-component-ui-select-placeholder-small,.om-component-ui-select-frameless .om-component-ui-select-value-small{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);color:var(--om-text-default-tertiary,#646465)}.om-component-ui-select-frameless.om-component-ui-select-disabled{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-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  width: 100%;
+}
+.om-component-ui-select-label-row {
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+}
+.om-component-ui-select-label-text {
+  display: inline;
+}
+.om-component-ui-select-required {
+  color: var(--om-text-danger, #ae0000);
+}
+.om-component-ui-select-info {
+  display: inline-flex;
+  align-items: center;
+  color: var(--om-icon-default-tertiary, #646465);
+}
+.om-component-ui-select-description-text {
+  display: block;
+}
+.om-component-ui-select-trigger {
+  display: flex;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  width: 100%;
+  min-width: 120px;
+  color: inherit;
+  text-align: left;
+  border: 1px solid var(--om-border-default, #d1d2d2);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-select-trigger-large {
+  min-height: var(--om-component-height-3xl, 56px);
+  padding: var(--om-spacing-300, 12px);
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-select-trigger-small {
+  min-height: var(--om-component-height-lg, 44px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+  border-radius: var(--om-radius-200, 8px);
+}
+.om-component-ui-select-trigger-fill {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-select-trigger-stroke {
+  background-color: transparent;
+}
+.om-component-ui-select-trigger-frameless {
+  justify-content: flex-start;
+  width: auto;
+  min-width: auto;
+  min-height: auto;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+.om-component-ui-select-trigger:not(.om-component-ui-select-trigger-disabled, .om-component-ui-select-trigger-readonly):hover {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-select-trigger:focus-visible {
+  outline: none;
+}
+.om-component-ui-select-trigger-open:focus-visible {
+  outline: none;
+}
+.om-component-ui-select-trigger-frameless:not(.om-component-ui-select-trigger-disabled, .om-component-ui-select-trigger-readonly):hover {
+  border-color: transparent;
+}
+.om-component-ui-select-trigger-open {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: inset 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-select-trigger-error {
+  border-color: var(--om-border-danger, #ae0000);
+}
+.om-component-ui-select-trigger-warning {
+  border-color: var(--om-border-warning, #db8600);
+}
+.om-component-ui-select-trigger-success {
+  border-color: var(--om-border-positive, #1f5800);
+}
+.om-component-ui-select-trigger-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.om-component-ui-select-trigger-readonly, .om-component-ui-select-trigger-readonly:hover, .om-component-ui-select-trigger-readonly:focus, .om-component-ui-select-trigger-readonly:focus-visible {
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-color: transparent;
+  outline: none;
+  box-shadow: none;
+  cursor: default;
+}
+.om-component-ui-select-trigger-error, .om-component-ui-select-trigger-warning, .om-component-ui-select-trigger-success, .om-component-ui-select-trigger-frameless {
+  box-shadow: none;
+}
+.om-component-ui-select-trigger-disabled .om-component-ui-select-prefix, .om-component-ui-select-trigger-disabled .om-component-ui-select-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-select-content {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-select-prefix {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--om-icon-default-tertiary, #646465);
+}
+.om-component-ui-select-value, .om-component-ui-select-placeholder {
+  display: inline-flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-select-value-large {
+  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-select-value-small {
+  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-select-placeholder-large {
+  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-select-placeholder-small {
+  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-select-value {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-select-value-multiple {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--om-spacing-200, 8px);
+  align-content: flex-start;
+  align-items: center;
+  max-height: 88px;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: clip;
+}
+.om-component-ui-select-placeholder {
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-select-value-disabled, .om-component-ui-select-placeholder-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-select-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-select-trigger-multiple-filled {
+  padding-top: var(--om-spacing-200, 8px);
+  padding-bottom: var(--om-spacing-200, 8px);
+}
+.om-component-ui-select-tag {
+  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;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  padding: var(--om-spacing-100, 4px) var(--om-spacing-200, 8px);
+  color: var(--om-text-default-tertiary, #646465);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-radius: var(--om-radius-full, 9999px);
+}
+.om-component-ui-select-tag-label {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-select-tag-remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: currentcolor;
+}
+.om-component-ui-select-collapsed-values {
+  display: inline-flex;
+  flex: 1 1 auto;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-select-collapsed-values-list {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-select-collapsed-values-extra {
+  flex-shrink: 0;
+  color: var(--om-text-default-secondary, #404042);
+}
+.om-component-ui-select-collapsed-values-extra-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-select-feedback {
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  color: var(--om-text-default-secondary, #404042);
+}
+.om-component-ui-select-feedback-error {
+  color: var(--om-text-danger, #ae0000) !important;
+}
+.om-component-ui-select-feedback-warning {
+  color: var(--om-text-warning, #db8600);
+}
+.om-component-ui-select-feedback-success {
+  color: var(--om-text-positive, #1f5800);
+}
+.om-component-ui-select-feedback-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-select-feedback-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: 1px;
+}
+.om-component-ui-select-panel {
+  z-index: 1500;
+  display: flex;
+  flex-direction: column;
+  padding: var(--om-spacing-200, 8px);
+  overflow: hidden;
+  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-component-ui-select-search {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  width: 100%;
+  margin-bottom: var(--om-spacing-200, 8px);
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default, #d1d2d2);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-select-search-large {
+  min-height: var(--om-component-height-3xl, 56px);
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-select-search-small {
+  min-height: var(--om-component-height-lg, 44px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+  border-radius: var(--om-radius-200, 8px);
+}
+.om-component-ui-select-search:hover {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-select-search:focus-within {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: inset 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-select-search-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-select-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--om-text-default, #131313);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.om-component-ui-select-search-input-large {
+  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-select-search-input-small {
+  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-select-search-input::-moz-placeholder {
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-select-search-input::placeholder {
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+}
+.om-component-ui-select-panel-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--om-spacing-050, 2px);
+  min-height: 0;
+  overflow-y: auto;
+}
+.om-component-ui-select-panel-footer {
+  flex-shrink: 0;
+  width: 100%;
+  padding-top: var(--om-spacing-300, 12px);
+  padding-bottom: var(--om-spacing-100, 4px);
+  border-top: 1px solid var(--om-border-neutral-secondary, #f0f0f0);
+}
+.om-component-ui-select-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.om-component-ui-select-group-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--om-spacing-200, 8px) 0;
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-select-option {
+  display: flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+  margin: var(--om-spacing-100, 4px) 0;
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-200, 8px);
+  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.2s ease;
+}
+.om-component-ui-select-option:focus, .om-component-ui-select-option:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.om-component-ui-select-option:hover, .om-component-ui-select-option-active, .om-component-ui-select-option-selected {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-select-option-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.om-component-ui-select-option-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--om-spacing-050, 2px);
+  min-width: 0;
+}
+.om-component-ui-select-option-label {
+  min-width: 0;
+  overflow: hidden;
+  color: currentcolor;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-select-option-description {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-select-option-check {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: var(--om-icon-brand, #073387);
+}
+.om-component-ui-select-empty {
+  padding: var(--om-spacing-200, 8px);
+  text-align: center;
+}
+.om-component-ui-select-frameless {
+  width: auto;
+}
+.om-component-ui-select-frameless .om-component-ui-select-value-large, .om-component-ui-select-frameless .om-component-ui-select-placeholder-large {
+  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);
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-select-frameless .om-component-ui-select-value-small, .om-component-ui-select-frameless .om-component-ui-select-placeholder-small {
+  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);
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-select-frameless.om-component-ui-select-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+}

package/es/components/Skeleton/style/Skeleton.css

@@ -1 +1,54 @@
-.om-component-ui-skeleton{position:relative;overflow:hidden;background-color:var(--om-bg-neutral-tertiary-hover,#e3e4e4);border-radius:var(--om-radius-100,4px)}.om-component-ui-skeleton:after{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent,var(--om-bg-scrim-light,hsla(0,0%,100%,.8)),transparent);transform:translateX(-100%);animation:om-skeleton-wave 1.2s infinite;content:""}.om-component-ui-skeleton-circle{border-radius:var(--om-radius-full,9999px)}.om-component-ui-skeleton-none:after{animation:none}@keyframes om-skeleton-wave{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}
+/**
+  * 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-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--om-bg-neutral-tertiary-hover, #e3e4e4);
+  border-radius: var(--om-radius-100, 4px);
+}
+.om-component-ui-skeleton::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(90deg, transparent, var(--om-bg-scrim-light, rgba(255, 255, 255, 0.8)), transparent);
+  transform: translateX(-100%);
+  animation: om-skeleton-wave 1.2s infinite;
+  content: "";
+}
+.om-component-ui-skeleton-circle {
+  border-radius: var(--om-radius-full, 9999px);
+}
+.om-component-ui-skeleton-none::after {
+  animation: none;
+}
+
+/* stylelint-disable at-rule-prelude-no-invalid */
+@keyframes om-skeleton-wave {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+/* stylelint-enable at-rule-prelude-no-invalid */