@1money/component-ui 0.0.48 → 0.0.50

package/lib/components/Calendar/style/Calendar.css

@@ -1 +1,400 @@
-.om-component-ui-calendar-small input{height:var(--om-component-height-lg,44px)!important;line-height:18px!important}.om-component-ui-calendar.p-invalid input{color:var(--om-text-danger,#ae0000);box-shadow:none}.om-component-ui-calendar.p-invalid input,.om-component-ui-calendar.p-invalid input:hover{border-color:var(--om-border-danger,#ae0000)}.om-component-ui-calendar.om-component-ui-calendar-success input{color:var(--om-text-positive,#1f5800);border-color:var(--om-border-positive,#1f5800);box-shadow:none}.om-component-ui-calendar.om-component-ui-calendar-success input:hover{border-color:var(--om-border-positive,#1f5800)}.om-component-ui-calendar.p-calendar-disabled{cursor:not-allowed}.om-component-ui-calendar.p-calendar-disabled input{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4);opacity:1}.om-component-ui-calendar-filled.p-calendar-disabled input{background-color:var(--om-bg-default-secondary,#f8f8f8);border-color:var(--om-border-disabled,#e3e4e4)}.om-component-ui-calendar input{height:var(--om-component-height-3xl,56px);padding:var(--om-spacing-200,8px) var(--om-spacing-400,16px);color:var(--om-text-default,#131313);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);background-color:var(--om-bg-default-secondary,#f8f8f8);border:1px solid var(--om-border-default,#d1d2d2);border-radius:var(--om-radius-300,12px)}.om-component-ui-calendar input:hover{border-color:var(--om-border-brand,#073387)}.om-component-ui-calendar input::placeholder{color:var(--om-text-default-tertiary,#646465);font-weight:400;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-calendar.p-calendar:not(.p-calendar-disabled,.p-invalid,.om-component-ui-calendar-success).p-focus>.p-inputtext{padding:7px 15px;border-color:var(--om-border-brand,#073387);border-width:2px;box-shadow:none}.om-component-ui-calendar-panel{padding:var(--om-spacing-600,24px);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-calendar-panel .p-datepicker-buttonbar{padding:var(--om-spacing-200,8px) 0;border:none}.om-component-ui-calendar-panel .p-datepicker-buttonbar .p-button{padding:0 var(--om-spacing-400,16px);color:var(--om-text-default,#131313);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-calendar-panel .p-datepicker-buttonbar .p-button:hover{color:var(--om-text-brand,#073387);background-color:inherit}.om-component-ui-calendar-panel .p-datepicker-buttonbar .p-button span{font-weight:500}.om-component-ui-calendar-panel .p-datepicker-group-container{gap:var(--om-spacing-600,24px)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group{display:flex;flex-direction:column;gap:var(--om-spacing-300,12px);padding:0!important;border:0!important}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header{padding:0;border:none}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title{display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title>*{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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title>:hover{color:var(--om-text-brand,#073387)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-next:hover,.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-prev:hover{background-color:inherit}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-next:hover>i,.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-prev:hover>i{color:var(--om-icon-brand,#073387)!important}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container table{width:var(--content-width,280px);margin:0;table-layout:fixed;border-collapse:separate;border-spacing:0 var(--om-spacing-100,4px)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span{color:var(--om-text-default,#131313);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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td{width:var(--om-component-height-md,40px)!important;height:var(--om-component-height-md,40px);padding:0!important}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:first-child{border-radius:var(--om-radius-full,9999px) 0 0 var(--om-radius-full,9999px)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:first-child.om-component-ui-calendar-p-end:after{background-color:#fff}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:last-child{border-radius:0 var(--om-radius-full,9999px) var(--om-radius-full,9999px) 0}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:last-child.om-component-ui-calendar-p-start:after{background-color:#fff}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span{width:var(--om-component-height-md,40px)!important;max-width:var(--om-component-height-md,40px)!important;height:var(--om-component-height-md,40px)!important;max-height:var(--om-component-height-md,40px)!important;margin:0!important;padding:0!important;color:var(--om-text-default,#131313);border:none;border-radius:var(--om-radius-full,9999px);box-shadow:none;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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-highlight{color:var(--om-text-on-neutral,#fff);background-color:var(--om-bg-brand,#073387);border-radius:var(--om-radius-full,9999px)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-highlight:hover{color:var(--om-text-on-neutral,#fff);background-color:var(--om-bg-brand,#073387)}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-disabled{color:var(--om-text-disabled,#bbbdc1)!important}.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar .p-datepicker-today span,.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover{color:var(--om-text-brand,#073387);background-color:var(--om-bg-default,#fff)}.om-component-ui-calendar-panel .p-yearpicker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--om-spacing-400,16px);place-items:center center;text-align:center}.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year{width:auto;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);border:none;box-shadow:none}.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year.p-highlight,.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year.p-highlight:hover{color:var(--om-text-on-neutral,#fff);background-color:var(--om-bg-brand,#073387)}.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year:hover{color:var(--om-text-brand,#073387);background-color:var(--om-bg-default,#fff)}.om-component-ui-calendar-panel .p-monthpicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--om-spacing-400,16px);place-items:center center;text-align:center}.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month{width:auto;padding:var(--om-spacing-100,4px) var(--om-spacing-400,16px);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);border:none;box-shadow:none}.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month.p-highlight,.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month.p-highlight:hover{color:var(--om-text-on-neutral,#fff);background-color:var(--om-bg-brand,#073387)}.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month:hover{color:var(--om-text-brand,#073387);background-color:var(--om-bg-default,#fff)}.om-component-ui-calendar-wrapper{display:inline-flex;flex-direction:column}.om-component-ui-calendar-label{margin-bottom:var(--om-spacing-200,8px);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-calendar-label-required:after{margin-left:var(--om-spacing-100,4px);color:var(--om-text-danger,#ae0000);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);content:"*"}.om-component-ui-calendar-message{display:flex;gap:var(--om-spacing-100,4px);align-items:center;justify-content:flex-start;margin-top:var(--om-spacing-100,4px);color:var(--om-text-neutral-secondary,#9fa3a3);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);word-wrap:break-word;word-break:keep-all}.om-component-ui-calendar-message-success{color:var(--om-text-positive,#1f5800)}.om-component-ui-calendar-message-error{color:var(--om-text-danger,#ae0000)}.om-component-ui-calendar-p-start{position:relative;background-color:transparent!important;border-radius:0!important}.om-component-ui-calendar-p-start:after{position:absolute;top:0;right:0;z-index:0;width:50%;height:100%;background-color:var(--om-bg-brand-tertiary,#edf2f9);content:""}.om-component-ui-calendar-p-start .p-highlight{position:relative;z-index:1}.om-component-ui-calendar-p-start:last-child,.om-component-ui-calendar-p-start span{border-radius:var(--om-radius-full,9999px)!important}.om-component-ui-calendar-p-start span{color:var(--om-text-on-neutral,#fff)!important;background-color:var(--om-bg-brand,#073387)!important}.om-component-ui-calendar-p-end{position:relative;background-color:transparent!important;border-radius:0!important}.om-component-ui-calendar-p-end:after{position:absolute;top:0;left:0;z-index:0;width:50%;height:100%;background-color:var(--om-bg-brand-tertiary,#edf2f9);content:""}.om-component-ui-calendar-p-end .p-highlight{position:relative;z-index:1}.om-component-ui-calendar-p-end:first-child,.om-component-ui-calendar-p-end span{border-radius:var(--om-radius-full,9999px)!important}.om-component-ui-calendar-p-end span{color:var(--om-text-on-neutral,#fff)!important;background-color:var(--om-bg-brand,#073387)!important}.om-component-ui-calendar-p-range{color:var(--om-text-default,#131313)!important;background-color:var(--om-bg-brand-tertiary,#edf2f9)!important}.om-component-ui-calendar-p-range span.p-highlight{color:var(--om-text-default,#131313)!important;background-color:transparent!important}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-calendar-small input {
+  height: var(--om-component-height-lg, 44px) !important;
+  line-height: 18px !important;
+}
+.om-component-ui-calendar.p-invalid input {
+  color: var(--om-text-danger, #ae0000);
+  border-color: var(--om-border-danger, #ae0000);
+  box-shadow: none;
+}
+.om-component-ui-calendar.p-invalid input:hover {
+  border-color: var(--om-border-danger, #ae0000);
+}
+.om-component-ui-calendar.om-component-ui-calendar-success input {
+  color: var(--om-text-positive, #1f5800);
+  border-color: var(--om-border-positive, #1f5800);
+  box-shadow: none;
+}
+.om-component-ui-calendar.om-component-ui-calendar-success input:hover {
+  border-color: var(--om-border-positive, #1f5800);
+}
+.om-component-ui-calendar.p-calendar-disabled {
+  cursor: not-allowed;
+}
+.om-component-ui-calendar.p-calendar-disabled input {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+  opacity: 1;
+}
+.om-component-ui-calendar-filled.p-calendar-disabled input {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-calendar input {
+  height: var(--om-component-height-3xl, 56px);
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default, #131313);
+  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);
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-color: var(--om-border-default, #d1d2d2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-calendar input:hover {
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-calendar input::-moz-placeholder {
+  color: var(--om-text-default-tertiary, #646465);
+  font-weight: 400;
+  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-calendar input::placeholder {
+  color: var(--om-text-default-tertiary, #646465);
+  font-weight: 400;
+  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-calendar.p-calendar:not(.p-calendar-disabled, .p-invalid, .om-component-ui-calendar-success).p-focus > .p-inputtext {
+  padding: 7px 15px;
+  border-color: var(--om-border-brand, #073387);
+  border-width: 2px;
+  box-shadow: none;
+}
+
+.om-component-ui-calendar-panel {
+  padding: var(--om-spacing-600, 24px);
+  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-calendar-panel .p-datepicker-buttonbar {
+  padding: var(--om-spacing-200, 8px) 0;
+  border: none;
+}
+.om-component-ui-calendar-panel .p-datepicker-buttonbar .p-button {
+  padding: 0 var(--om-spacing-400, 16px);
+  color: var(--om-text-default, #131313);
+  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-calendar-panel .p-datepicker-buttonbar .p-button:hover {
+  color: var(--om-text-brand, #073387);
+  background-color: inherit;
+}
+.om-component-ui-calendar-panel .p-datepicker-buttonbar .p-button span {
+  font-weight: 500;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container {
+  gap: var(--om-spacing-600, 24px);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-300, 12px);
+  padding: 0 !important;
+  border: 0 !important;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header {
+  padding: 0;
+  border: none;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title {
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title > * {
+  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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-title > *:hover {
+  color: var(--om-text-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-prev:hover,
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-next:hover {
+  background-color: inherit;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-prev:hover > i,
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-header .p-datepicker-next:hover > i {
+  color: var(--om-icon-brand, #073387) !important;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container table {
+  width: var(--content-width, 280px);
+  margin: 0;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0 var(--om-spacing-100, 4px);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {
+  color: var(--om-text-default, #131313);
+  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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {
+  width: var(--om-component-height-md, 40px) !important;
+  height: var(--om-component-height-md, 40px);
+  padding: 0 !important;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:first-child {
+  border-radius: var(--om-radius-full, 9999px) 0 0 var(--om-radius-full, 9999px);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:first-child.om-component-ui-calendar-p-end::after {
+  background-color: #fff;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:last-child {
+  border-radius: 0 var(--om-radius-full, 9999px) var(--om-radius-full, 9999px) 0;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td:last-child.om-component-ui-calendar-p-start::after {
+  background-color: #fff;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {
+  width: var(--om-component-height-md, 40px) !important;
+  max-width: var(--om-component-height-md, 40px) !important;
+  height: var(--om-component-height-md, 40px) !important;
+  max-height: var(--om-component-height-md, 40px) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--om-text-default, #131313);
+  border: none;
+  border-radius: var(--om-radius-full, 9999px);
+  box-shadow: none;
+  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-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-highlight {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+  border-radius: var(--om-radius-full, 9999px);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-highlight:hover {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span.p-disabled {
+  color: var(--om-text-disabled, #bbbdc1) !important;
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {
+  color: var(--om-text-brand, #073387);
+  background-color: var(--om-bg-default, #fff);
+}
+.om-component-ui-calendar-panel .p-datepicker-group-container .p-datepicker-group .p-datepicker-calendar-container .p-datepicker-calendar .p-datepicker-today span {
+  color: var(--om-text-brand, #073387);
+  background-color: var(--om-bg-default, #fff);
+}
+.om-component-ui-calendar-panel .p-yearpicker {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--om-spacing-400, 16px);
+  place-items: center center;
+  text-align: center;
+}
+.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year {
+  width: auto;
+  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);
+  border: none;
+  box-shadow: none;
+}
+.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year.p-highlight {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year.p-highlight:hover {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-yearpicker .p-yearpicker-year:hover {
+  color: var(--om-text-brand, #073387);
+  background-color: var(--om-bg-default, #fff);
+}
+.om-component-ui-calendar-panel .p-monthpicker {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--om-spacing-400, 16px);
+  place-items: center center;
+  text-align: center;
+}
+.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month {
+  width: auto;
+  padding: var(--om-spacing-100, 4px) var(--om-spacing-400, 16px);
+  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);
+  border: none;
+  box-shadow: none;
+}
+.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month.p-highlight {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month.p-highlight:hover {
+  color: var(--om-text-on-neutral, #fff);
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-calendar-panel .p-monthpicker .p-monthpicker-month:hover {
+  color: var(--om-text-brand, #073387);
+  background-color: var(--om-bg-default, #fff);
+}
+
+.om-component-ui-calendar-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.om-component-ui-calendar-label {
+  margin-bottom: var(--om-spacing-200, 8px);
+  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-calendar-label-required::after {
+  margin-left: var(--om-spacing-100, 4px);
+  color: var(--om-text-danger, #ae0000);
+  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);
+  content: "*";
+}
+
+.om-component-ui-calendar-message {
+  display: flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: var(--om-spacing-100, 4px);
+  color: var(--om-text-neutral-secondary, #9fa3a3);
+  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);
+  word-wrap: break-word;
+  word-break: keep-all;
+}
+.om-component-ui-calendar-message-success {
+  color: var(--om-text-positive, #1f5800);
+}
+.om-component-ui-calendar-message-error {
+  color: var(--om-text-danger, #ae0000);
+}
+
+.om-component-ui-calendar-p-start {
+  position: relative;
+  background-color: transparent !important;
+  border-radius: 0 !important;
+}
+.om-component-ui-calendar-p-start::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 0;
+  width: 50%;
+  height: 100%;
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+  content: "";
+}
+.om-component-ui-calendar-p-start .p-highlight {
+  position: relative;
+  z-index: 1;
+}
+.om-component-ui-calendar-p-start:last-child {
+  border-radius: var(--om-radius-full, 9999px) !important;
+}
+.om-component-ui-calendar-p-start span {
+  color: var(--om-text-on-neutral, #fff) !important;
+  background-color: var(--om-bg-brand, #073387) !important;
+  border-radius: var(--om-radius-full, 9999px) !important;
+}
+
+.om-component-ui-calendar-p-end {
+  position: relative;
+  background-color: transparent !important;
+  border-radius: 0 !important;
+}
+.om-component-ui-calendar-p-end::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 50%;
+  height: 100%;
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+  content: "";
+}
+.om-component-ui-calendar-p-end .p-highlight {
+  position: relative;
+  z-index: 1;
+}
+.om-component-ui-calendar-p-end:first-child {
+  border-radius: var(--om-radius-full, 9999px) !important;
+}
+.om-component-ui-calendar-p-end span {
+  color: var(--om-text-on-neutral, #fff) !important;
+  background-color: var(--om-bg-brand, #073387) !important;
+  border-radius: var(--om-radius-full, 9999px) !important;
+}
+
+.om-component-ui-calendar-p-range {
+  color: var(--om-text-default, #131313) !important;
+  background-color: var(--om-bg-brand-tertiary, #edf2f9) !important;
+}
+.om-component-ui-calendar-p-range span.p-highlight {
+  color: var(--om-text-default, #131313) !important;
+  background-color: transparent !important;
+}

package/lib/components/Carousel/style/Carousel.css

@@ -1 +1,57 @@
-.om-component-ui-carousel{display:flex;gap:var(--om-spacing-100,4px);align-items:center}.om-component-ui-carousel-dot{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;transition:transform .2s ease}.om-component-ui-carousel-dot:before{display:block;width:8px;height:8px;background-color:var(--om-bg-neutral-secondary,#e3e4e4);transition:width .2s ease,height .2s ease,background-color .2s ease;content:"";clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}.om-component-ui-carousel-dot:hover:before{background-color:var(--om-bg-neutral-secondary-hover,#d1d2d2)}.om-component-ui-carousel-dot-active:before{width:12px;height:12px;background-color:var(--om-bg-brand,#073387)}.om-component-ui-carousel-dot-active:hover:before{background-color:var(--om-bg-brand,#073387)}
+/**
+  * 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-carousel {
+  display: flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+}
+.om-component-ui-carousel-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+.om-component-ui-carousel-dot::before {
+  display: block;
+  width: 8px;
+  height: 8px;
+  background-color: var(--om-bg-neutral-secondary, #e3e4e4);
+  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
+  content: "";
+  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
+}
+.om-component-ui-carousel-dot:hover::before {
+  background-color: var(--om-bg-neutral-secondary-hover, #d1d2d2);
+}
+.om-component-ui-carousel-dot-active::before {
+  width: 12px;
+  height: 12px;
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-carousel-dot-active:hover::before {
+  background-color: var(--om-bg-brand, #073387);
+}

package/lib/components/Cell/style/Cell.css

@@ -1 +1,80 @@
-.om-component-ui-cell{display:inline-flex;gap:var(--om-spacing-200,8px);align-items:center;justify-content:space-between;width:100%;min-height:var(--om-spacing-1600,64px);padding:var(--om-spacing-400,16px);color:var(--om-text-default,#131313);text-align:left;background-color:var(--om-bg-default-secondary,#f8f8f8);border:none;border-radius:var(--om-radius-300,12px);cursor:pointer}.om-component-ui-cell-hovered,.om-component-ui-cell:hover:not(:disabled){background-color:var(--om-bg-default-secondary-hover,#e3e4e4)}.om-component-ui-cell:focus-visible{outline:2px solid var(--om-border-brand,#073387);outline-offset:2px}.om-component-ui-cell-active,.om-component-ui-cell-active:hover:not(:disabled){background-color:var(--om-bg-brand-tertiary,#edf2f9)}.om-component-ui-cell-disabled,.om-component-ui-cell:disabled{color:var(--om-text-disabled,#bbbdc1);background-color:var(--om-bg-default-secondary-hover,#e3e4e4);cursor:not-allowed}.om-component-ui-cell-content{display:inline-flex;flex:1 1 auto;gap:var(--om-spacing-200,8px);align-items:center;min-width:0}.om-component-ui-cell-label{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);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.om-component-ui-cell-icon-end,.om-component-ui-cell-icon-start{flex:0 0 auto;color:var(--om-icon-default,#131313)}.om-component-ui-cell-disabled .om-component-ui-cell-icon-end,.om-component-ui-cell-disabled .om-component-ui-cell-icon-start,.om-component-ui-cell:disabled .om-component-ui-cell-icon-end,.om-component-ui-cell:disabled .om-component-ui-cell-icon-start{color:var(--om-icon-disabled,#d1d2d2)}
+/**
+  * 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-cell {
+  display: inline-flex;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--om-spacing-1600, 64px);
+  padding: var(--om-spacing-400, 16px);
+  color: var(--om-text-default, #131313);
+  text-align: left;
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border: none;
+  border-radius: var(--om-radius-300, 12px);
+  cursor: pointer;
+}
+.om-component-ui-cell:hover:not(:disabled) {
+  background-color: var(--om-bg-default-secondary-hover, #e3e4e4);
+}
+.om-component-ui-cell-hovered {
+  background-color: var(--om-bg-default-secondary-hover, #e3e4e4);
+}
+.om-component-ui-cell:focus-visible {
+  outline: 2px solid var(--om-border-brand, #073387);
+  outline-offset: 2px;
+}
+.om-component-ui-cell-active, .om-component-ui-cell-active:hover:not(:disabled) {
+  background-color: var(--om-bg-brand-tertiary, #edf2f9);
+}
+.om-component-ui-cell-disabled, .om-component-ui-cell:disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  background-color: var(--om-bg-default-secondary-hover, #e3e4e4);
+  cursor: not-allowed;
+}
+.om-component-ui-cell-content {
+  display: inline-flex;
+  flex: 1 1 auto;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  min-width: 0;
+}
+.om-component-ui-cell-label {
+  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);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.om-component-ui-cell-icon-start, .om-component-ui-cell-icon-end {
+  flex: 0 0 auto;
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-cell-disabled .om-component-ui-cell-icon-start, .om-component-ui-cell-disabled .om-component-ui-cell-icon-end, .om-component-ui-cell:disabled .om-component-ui-cell-icon-start, .om-component-ui-cell:disabled .om-component-ui-cell-icon-end {
+  color: var(--om-icon-disabled, #d1d2d2);
+}