@fastwork/xosmoz-css 0.0.2 → 0.0.13

package/dist/component.css

@@ -0,0 +1 @@
+.trb-field{display:flex;flex-direction:column;gap:0.375em}.trb-field label{display:flex;gap:0.25em;align-items:baseline;font-weight:var(--form-element-label-font-weight);font-size:var(--form-element-label-font-size);font-family:var(--form-element-label-font-family)}.trb-field .description{color:var(--color-text-default-200);font-size:0.75rem}.trb-field .info{color:var(--color-text-default-200);font-size:0.75rem}.is-fluid.trb-field{width:100%}.trb-textarea textarea,.trb-input input{width:100%;height:100%;padding:0 0.75em;border:1px solid var(--color-neutral-300);border-radius:inherit;background-color:var(--color-white-100);outline:none;transition:border .16s ease-in-out;appearance:none}.trb-textarea textarea:hover,.trb-input input:hover{border-color:var(--color-neutral-500)}.trb-textarea textarea:focus,.trb-input input:focus,.trb-textarea textarea :active,.trb-input input :active{border-color:var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--button-border-radius);background:var(--color-primary-500);color:var(--color-text-invert-100);outline:none;font-weight:var(--button-font-weight);font-size:var(--button-medium-font-size);font-family:var(--button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.trb-button:hover::before{background:var(--color-shade-100)}.trb-button:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button>span{z-index:1}.trb-button .start-icon,.trb-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.trb-button .end-icon{justify-content:flex-end}.trb-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.trb-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.trb-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100);border-radius:999px;animation:button-loading-spin .48s infinite linear}.trb-button.is-size-small{min-height:var(--button-small-height);padding:0 1rem;font-size:var(--button-small-font-size)}.trb-button.is-size-small .start-icon,.trb-button.is-size-small .end-icon{min-width:1.125rem}.trb-button.is-size-medium{min-height:var(--button-medium-height);padding:0 1.125rem;font-size:var(--button-medium-font-size)}.trb-button.is-size-medium .start-icon,.trb-button.is-size-medium .end-icon{min-width:1.375rem}.trb-button.is-size-large{min-height:var(--button-large-height);padding:0 1.25rem;font-size:var(--button-large-font-size)}.trb-button.is-size-large .start-icon,.trb-button.is-size-large .end-icon{min-width:1.625rem}.trb-button.is-variant-negative{background:var(--color-negative-200)}@media(hover: hover){.trb-button.is-variant-negative:focus{box-shadow:0 0 0 .175rem var(--color-negative-100)}}.trb-button.is-variant-negative.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-negative.is-loading::after{border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100)}.trb-button.is-variant-positive{background:var(--color-positive-200)}@media(hover: hover){.trb-button.is-variant-positive:focus{box-shadow:0 0 0 .175rem var(--color-positive-100)}}.trb-button.is-variant-positive.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-positive.is-loading::after{border-top-color:var(--color-text-invert-100);border-right-color:var(--color-text-invert-100)}.trb-button.is-variant-secondary{border:1px solid var(--color-neutral-200);background:rgba(0,0,0,0);color:var(--color-primary-500)}@media(hover: hover){.trb-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-secondary:hover{border:1px solid var(--color-neutral-300);color:var(--color-primary-500)}.trb-button.is-variant-secondary:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-secondary.is-loading::after{border-top-color:var(--color-primary-500);border-right-color:var(--color-primary-500)}.trb-button.is-variant-outline{border:1px solid var(--color-neutral-200);background:rgba(0,0,0,0);color:var(--color-text-default-200)}@media(hover: hover){.trb-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-outline:hover{border:1px solid var(--color-neutral-300);color:var(--color-text-default-100)}.trb-button.is-variant-outline:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-outline.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-tertiary{border:unset;background:var(--color-neutral-100);color:var(--color-text-default-100)}@media(hover: hover){.trb-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-tertiary.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--color-text-default-200)}@media(hover: hover){.trb-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-ghost.is-loading::after{border-top-color:var(--color-text-default-200);border-right-color:var(--color-text-default-200)}.trb-button.is-variant-white{border:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-primary-500)}@media(hover: hover){.trb-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}.trb-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-white.is-loading::after{border-top-color:var(--color-primary-500);border-right-color:var(--color-primary-500)}.trb-button.is-variant-white-secondary{border:1px solid var(--color-white-100);background:rgba(0,0,0,0);color:var(--color-white-100)}@media(hover: hover){.trb-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}}@media(hover: hover){.trb-button.is-variant-white-secondary:hover{border:1px solid var(--color-neutral-300);color:var(--color-white-100)}.trb-button.is-variant-white-secondary:hover::before{background:var(--color-shade-100)}}.trb-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.trb-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--color-white-100);border-right-color:var(--color-white-100)}.trb-button[disabled],.trb-button.is-disabled{opacity:.6;cursor:not-allowed}.trb-button.is-fluid{width:100%}.trb-button.is-pill{border-radius:999px}.trb-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.trb-select-button{display:inline-flex;border:1px solid var(--color-neutral-200);border-radius:var(--button-border-radius);overflow:hidden}.trb-select-button-item{padding:0.5rem 1rem;border:none;border-right:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);cursor:pointer;transition:all .16s ease-in-out}.trb-select-button-item:last-child{border-right:none}.trb-select-button-item:hover{background:var(--color-neutral-50)}.trb-select-button-item.is-active{background:var(--color-primary-500);color:var(--color-white-100)}.trb-badge{display:inline-flex;justify-content:center;align-items:center;padding:0.25rem 0.625rem;border-radius:0.375rem;background:var(--color-primary-200);color:var(--color-primary-700);font-weight:600;font-size:var(--font-size-300);font-family:var(--font-family-primary)}.trb-badge.is-variant-primary-solid{background:var(--color-primary-500);color:var(--color-white-100)}.trb-badge.is-variant-positive{background:var(--color-positive-100);color:var(--color-positive-400)}.trb-badge.is-variant-positive-solid{background:var(--color-positive-200);color:var(--color-white-100)}.trb-badge.is-variant-negative{background:var(--color-negative-100);color:var(--color-negative-400)}.trb-badge.is-variant-negative-solid{background:var(--color-negative-200);color:var(--color-white-100)}.trb-badge.is-variant-warning{background:var(--color-warning-100);color:var(--color-warning-400)}.trb-badge.is-variant-warning-solid{background:var(--color-warning-200);color:var(--color-white-100)}.trb-badge.is-variant-info{background:var(--color-info-100);color:var(--color-info-400)}.trb-badge.is-variant-info-solid{background:var(--color-info-200);color:var(--color-white-100)}.trb-badge.is-variant-neutral{background:var(--color-neutral-200);color:var(--color-neutral-600)}.trb-badge.is-variant-neutral-solid{background:var(--color-neutral-400);color:var(--color-white-100)}.trb-message{display:flex;gap:0.75rem;padding:1rem;border-radius:0.5rem;background:var(--color-neutral-100);color:var(--color-text-default-100)}.trb-message-icon{flex-shrink:0}.trb-message-content{flex:1}.trb-message-title{font-weight:600;margin-bottom:0.25rem}.trb-message-text{font-size:var(--font-size-300);color:var(--color-text-default-200)}.trb-message.is-variant-info{background:var(--color-info-100)}.trb-message.is-variant-positive{background:var(--color-positive-100)}.trb-message.is-variant-warning{background:var(--color-warning-100)}.trb-message.is-variant-negative{background:var(--color-negative-100)}.trb-table{width:100%;border-collapse:collapse;font-size:var(--font-size-300)}.trb-table th,.trb-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-neutral-200)}.trb-table th{font-weight:600;color:var(--color-text-default-100);background:var(--color-neutral-50)}.trb-table td{color:var(--color-text-default-200)}.trb-table tbody tr:hover{background:var(--color-neutral-50)}.trb-table.is-striped tbody tr:nth-child(even){background:var(--color-neutral-50)}.trb-table.is-bordered{border:1px solid var(--color-neutral-200)}.trb-table.is-bordered th,.trb-table.is-bordered td{border:1px solid var(--color-neutral-200)}.trb-tag{display:inline-flex;justify-content:center;align-items:center;gap:0.25rem;padding:0.25rem 0.5rem;border-radius:0.25rem;background:var(--color-neutral-100);color:var(--color-text-default-100);font-weight:500;font-size:var(--font-size-200);font-family:var(--font-family-primary)}.trb-tag .tag-close{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:0.125rem;cursor:pointer;transition:background .16s ease-in-out}.trb-tag .tag-close:hover{background:var(--color-neutral-200)}.trb-input{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;height:var(--form-element-medium-height);padding-top:0;border-radius:var(--form-element-border-radius)}.trb-input .prefix,.trb-input .suffix,.trb-input .password-suffix{position:absolute;top:50%;color:var(--color-text-default-200);font-size:var(--form-element-medium-font-size);transform:translate3d(0, -50%, 0)}.trb-input .prefix{left:1em;pointer-events:none}.trb-input .suffix{right:1em;pointer-events:none}.trb-input .password-suffix{right:0;display:flex;justify-content:center;align-items:center;width:40px;height:100%;padding-right:12px;padding-left:12px;cursor:pointer}.trb-input input{font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary)}.trb-input input[readonly]{background:var(--color-neutral-100)}.trb-input input[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-textarea{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;border-radius:var(--form-element-border-radius)}.trb-textarea textarea{min-height:7.5rem;padding:0.75em;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary);line-height:1.5;resize:vertical}.trb-textarea textarea[readonly]{background:var(--color-neutral-100)}.trb-textarea textarea[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-select{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;height:var(--form-element-medium-height);border-radius:var(--form-element-border-radius)}.trb-select select{width:100%;height:100%;padding:0 2.25rem 0 0.75em;border:1px solid var(--color-neutral-300);border-radius:inherit;background-color:var(--color-white-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;outline:none;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--font-family-primary);cursor:pointer;transition:border .16s ease-in-out;appearance:none}.trb-select select:hover{border-color:var(--color-neutral-500)}.trb-select select:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-select select[disabled]{background:var(--color-neutral-100);cursor:not-allowed}.trb-checkbox{display:inline-flex;gap:0.5rem;align-items:center}.trb-checkbox input[type=checkbox]{flex-shrink:0;width:1.25rem;height:1.25rem;margin:0;border:2px solid var(--color-neutral-300);border-radius:0.25rem;background-color:var(--color-white-100);cursor:pointer;transition:all .16s ease-in-out;appearance:none}.trb-checkbox input[type=checkbox]:hover{border-color:var(--color-neutral-500)}.trb-checkbox input[type=checkbox]:checked{border-color:var(--color-primary-500);background-color:var(--color-primary-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}.trb-checkbox input[type=checkbox]:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-checkbox input[type=checkbox][disabled]{opacity:.6;cursor:not-allowed}.trb-checkbox label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-radio{display:inline-flex;gap:0.5rem;align-items:center}.trb-radio input[type=radio]{flex-shrink:0;width:1.25rem;height:1.25rem;margin:0;border:2px solid var(--color-neutral-300);border-radius:50%;background-color:var(--color-white-100);cursor:pointer;transition:all .16s ease-in-out;appearance:none}.trb-radio input[type=radio]:hover{border-color:var(--color-neutral-500)}.trb-radio input[type=radio]:checked{border-color:var(--color-primary-500);background-color:var(--color-white-100);box-shadow:inset 0 0 0 4px var(--color-primary-500)}.trb-radio input[type=radio]:focus{box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-radio input[type=radio][disabled]{opacity:.6;cursor:not-allowed}.trb-radio label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-radio-button{display:inline-flex;border:1px solid var(--color-neutral-200);border-radius:var(--button-border-radius);overflow:hidden}.trb-radio-button label{padding:0.5rem 1rem;border-right:1px solid var(--color-neutral-200);background:var(--color-white-100);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);cursor:pointer;transition:all .16s ease-in-out}.trb-radio-button label:last-of-type{border-right:none}.trb-radio-button label:hover{background:var(--color-neutral-50)}.trb-radio-button input[type=radio]{display:none}.trb-radio-button input[type=radio]:checked+label{background:var(--color-primary-500);color:var(--color-white-100)}@keyframes checkbox-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}@keyframes checkbox-int-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}.trb-switch{display:inline-flex;gap:0.5rem;align-items:center}.trb-switch input[type=checkbox]{--handleoffset: 1.5rem;--handleoffsetcalculator: calc(var(--handleoffset) * -1);--handle-color: var(--color-white-100);--handle-opacity: 1;--base-color: var(--color-neutral-200);--base-opacity: 1;flex-shrink:0;width:3rem;height:1.5rem;border-radius:999px;background-color:var(--handle-color)/var(--handle-opacity);box-shadow:var(--handleoffsetcalculator) 0 0 2px var(--base-color) inset,0 0 0 2px var(--base-color) inset,0 0;cursor:pointer;transition:all .16s ease-in-out;transition-timing-function:ease-in-out;transition-duration:.28s;appearance:none}.trb-switch input[type=checkbox]:checked{--handleoffsetcalculator: calc(var(--handleoffset));--handle-opacity: 1;--base-opacity: 1;--handle-color: var(--color-white-100);--base-color: var(--color-primary-500);--border-color: var(--color-primary-500)}.trb-switch input[type=checkbox][disabled]{opacity:.7;cursor:not-allowed}.trb-switch input[type=checkbox]:not(:checked)[disabled]{background-color:var(--color-neutral-100)}.trb-switch label{font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.trb-accordion{border:1px solid var(--color-neutral-200);border-radius:0.5rem;overflow:hidden}.trb-accordion-item{border-bottom:1px solid var(--color-neutral-200)}.trb-accordion-item:last-child{border-bottom:none}.trb-accordion-item.is-open .accordion-icon{transform:rotate(180deg)}.trb-accordion-item.is-open .trb-accordion-content{display:block}.trb-accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;border:none;background:var(--color-white-100);color:var(--color-text-default-100);font-weight:600;font-size:var(--font-size-400);text-align:left;cursor:pointer;transition:background .16s ease-in-out}.trb-accordion-header:hover{background:var(--color-neutral-50)}.trb-accordion-header .accordion-icon{transition:transform .16s ease-in-out}.trb-accordion-content{display:none;padding:1rem;background:var(--color-white-100)}.trb-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0;margin:0;list-style:none}.trb-breadcrumb-item{display:flex;align-items:center;gap:0.5rem;color:var(--color-text-default-200);font-size:var(--font-size-300)}.trb-breadcrumb-item a{color:var(--color-text-default-200);text-decoration:none;transition:color .16s ease-in-out}.trb-breadcrumb-item a:hover{color:var(--color-primary-500)}.trb-breadcrumb-item.is-active{color:var(--color-text-default-100);font-weight:500}.trb-breadcrumb-separator{color:var(--color-neutral-300)}.trb-tabs .tabs-menus{position:relative;z-index:1;display:flex;overflow:auto;transform:translate3d(0, var(--tabs-border-width), 0)}.trb-tabs .tabs-button{position:relative;display:flex;justify-content:center;align-items:center;height:var(--tabs-height);padding:var(--tabs-padding);border:none;border-top:var(--tabs-border-width) solid var(--ui-border-color-1);border-right:var(--tabs-border-width) solid var(--ui-border-color-1);border-left:var(--tabs-border-width) solid var(--ui-border-color-1);border-top-left-radius:var(--tabs-border-radius);border-top-right-radius:var(--tabs-border-radius);background:var(--color-neutral-100);color:var(--color-neutral-700);outline:none;font-weight:var(--tabs-font-weight);font-size:var(--tabs-font-size);font-family:var(--tabs-font-family);white-space:nowrap;cursor:pointer;transition:all .12s ease-in-out}.trb-tabs .tabs-button:focus{z-index:1;border-top:var(--tabs-border-width) solid var(--color-primary-500);border-right:var(--tabs-border-width) solid var(--color-primary-500);border-left:var(--tabs-border-width) solid var(--color-primary-500);box-shadow:0 0 0 .175rem var(--color-primary-300)}.trb-tabs .tabs-button.is-active{z-index:1;background:var(--ui-background-1);color:var(--color-primary-500)}.trb-tabs .tabs-button.is-active::after{display:none}.trb-tabs .tabs-button::after{content:" ";position:absolute;bottom:0;left:0;width:100%;height:0.0625rem;background:var(--ui-border-color-1)}.trb-tabs .tabs-button .tabs-button-icon{display:flex;min-width:1.5rem}.trb-tabs .tabs-contents{border:var(--tabs-border-width) solid var(--ui-border-color-1);border-top-right-radius:var(--tabs-content-border-radius);border-bottom-right-radius:var(--tabs-content-border-radius);border-bottom-left-radius:var(--tabs-content-border-radius);box-shadow:var(--tabs-box-shadow)}.trb-tabs .tabs-contents.is-hide-tab{border-top-left-radius:var(--tabs-content-border-radius)}.trb-tabs .tabs-content{position:relative;z-index:2;border-radius:inherit;background:var(--ui-background-1)}.trb-tab-menu{display:flex;gap:0.25rem;padding:0.25rem;background:var(--color-neutral-100);border-radius:0.5rem}.trb-tab-menu-item{flex:1;display:flex;justify-content:center;align-items:center;padding:0.5rem 1rem;border:none;background:rgba(0,0,0,0);color:var(--color-text-default-200);font-weight:500;font-size:var(--font-size-300);border-radius:0.375rem;cursor:pointer;transition:all .16s ease-in-out}.trb-tab-menu-item:hover{color:var(--color-text-default-100)}.trb-tab-menu-item.is-active{background:var(--color-white-100);color:var(--color-primary-500);box-shadow:var(--bsd-100)}.trb-link{color:var(--color-primary-500);font-weight:500;text-decoration:none;cursor:pointer;transition:color .16s ease-in-out}.trb-link:hover{color:var(--color-primary-600);text-decoration:underline}.trb-link.is-variant-secondary{color:var(--color-text-default-200)}.trb-link.is-variant-secondary:hover{color:var(--color-text-default-100)}.trb-menus{display:flex;flex-direction:column;gap:0.25rem;padding:0.5rem 0}.trb-menu-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 1rem;color:var(--color-text-default-100);font-size:var(--font-size-400);text-decoration:none;border-radius:0.5rem;cursor:pointer;transition:background .12s ease-in-out}.trb-menu-item:hover{background:var(--color-neutral-100)}.trb-menu-item.is-active{background:var(--color-primary-100);color:var(--color-primary-600);font-weight:500}.trb-menu-item-icon{flex-shrink:0}.trb-context-menu{position:absolute;z-index:1000;min-width:11.25rem;padding:0.5rem 0;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.5rem;box-shadow:var(--bsd-200)}.trb-context-menu-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--color-text-default-100);font-size:var(--font-size-300);cursor:pointer;transition:background .12s ease-in-out}.trb-context-menu-item:hover{background:var(--color-neutral-100)}.trb-context-menu-item.is-destructive{color:var(--color-negative-400)}.trb-context-menu-separator{height:1px;margin:0.5rem 0;background:var(--color-neutral-200)}input[type=checkbox].trb-modal-state{display:none}input[type=checkbox].trb-modal-state:checked+.trb-modal{opacity:1;visibility:visible;pointer-events:all}input[type=checkbox].trb-modal-state:checked+.trb-modal .trb-modal-panel{transform:translate3d(0, 0, 0)}.trb-modal{position:fixed;inset:0;z-index:var(--modal-z-index, 9999);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:hidden;background:var(--modal-background, hsla(0, 0%, 0%, 0.25));opacity:0;visibility:hidden;pointer-events:none;transition:all .16s ease;overscroll-behavior:contain}.trb-modal::before,.trb-modal::after{content:"";display:block;flex-grow:1;height:1.5rem;min-height:2rem}.trb-modal .trb-modal-panel{--bgcl-opacity: 1;position:relative;width:100%;max-width:var(--modal-panel-width, 32rem);padding:var(--modal-panel-padding, 1.5rem);border-radius:var(--modal-panel-border-radius, 0.75em);background:var(--modal-panel-background, hsl(0deg, 100%, 100%, var(--bgcl-opacity, 1)));box-shadow:var(--bsd-200);transition:all .16s ease-in-out;transform:translate3d(0, -12px, 0)}.trb-modal .trb-modal-close{position:absolute;top:.5rem;right:.5rem;display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;background:var(--color-neutral-100);color:var(--color-neutral-500);font-weight:600;cursor:pointer}.trb-modal .trb-modal-close:hover{background:var(--color-neutral-200)}.trb-modal.is-active{opacity:1;visibility:visible;pointer-events:all}.trb-modal.is-active .trb-modal-panel{transform:translate3d(0, 0, 0)}.trb-article{max-width:80ch;font-size:var(--font-size-400);line-height:1.65;color:var(--color-text-default-100)}.trb-article h1,.trb-article h2,.trb-article h3,.trb-article h4,.trb-article h5,.trb-article h6{margin-top:2em;margin-bottom:.5em;font-weight:600;line-height:1.25}.trb-article h1{font-size:var(--font-size-900)}.trb-article h2{font-size:var(--font-size-800)}.trb-article h3{font-size:var(--font-size-700)}.trb-article p{margin-bottom:1.5em}.trb-article a{color:var(--color-primary-500)}.trb-article a:hover{text-decoration:underline}.trb-article ul,.trb-article ol{margin-bottom:1.5em;padding-left:1.5em}.trb-article li{margin-bottom:.5em}.trb-article ul li{list-style-type:disc}.trb-article ol li{list-style-type:decimal}.trb-article blockquote{margin:1.5em 0;padding-left:1em;border-left:4px solid var(--color-neutral-200);color:var(--color-text-default-200);font-style:italic}.trb-article code{padding:.2em .4em;background:var(--color-neutral-100);border-radius:0.25rem;font-size:.9em;font-family:monospace}.trb-article pre{margin:1.5em 0;padding:1em;background:var(--color-neutral-100);border-radius:0.5rem;overflow-x:auto}.trb-article pre code{padding:0;background:none}.trb-article img{max-width:100%;height:auto;border-radius:0.5rem}.trb-article hr{margin:2em 0}.trb-panel{background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden}.trb-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--color-neutral-200)}.trb-panel-title{font-weight:600;font-size:var(--font-size-500)}.trb-panel-body{padding:1.25rem}.trb-panel-footer{display:flex;justify-content:flex-end;gap:0.75rem;padding:1rem 1.25rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}.trb-loader{display:inline-flex;justify-content:center;align-items:center}.trb-loader-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:loader-spin .8s linear infinite}.trb-loader.is-size-small .trb-loader-spinner{width:1rem;height:1rem}.trb-loader.is-size-large .trb-loader-spinner{width:2rem;height:2rem;border-width:3px}@keyframes loader-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.trb-product-card{display:flex;flex-direction:column;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden;transition:box-shadow .16s ease-in-out}.trb-product-card:hover{box-shadow:var(--bsd-200)}.trb-product-card-image{position:relative;aspect-ratio:4/3;overflow:hidden}.trb-product-card-image img{width:100%;height:100%;object-fit:cover}.trb-product-card-body{display:flex;flex-direction:column;gap:0.5rem;padding:1rem}.trb-product-card-title{font-weight:600;font-size:var(--font-size-400);color:var(--color-text-default-100)}.trb-product-card-description{font-size:var(--font-size-300);color:var(--color-text-default-200);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.trb-product-card-price{font-weight:600;font-size:var(--font-size-500);color:var(--color-primary-500)}.trb-notification-card{display:flex;gap:0.75rem;padding:1rem;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.5rem;transition:background .16s ease-in-out}.trb-notification-card:hover{background:var(--color-neutral-50)}.trb-notification-card.is-unread{background:var(--color-primary-50);border-color:var(--color-primary-200)}.trb-notification-card-avatar{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden}.trb-notification-card-avatar img{width:100%;height:100%;object-fit:cover}.trb-notification-card-content{flex:1;min-width:0}.trb-notification-card-title{font-weight:500;font-size:var(--font-size-300);color:var(--color-text-default-100)}.trb-notification-card-text{font-size:var(--font-size-200);color:var(--color-text-default-200);margin-top:0.25rem}.trb-notification-card-time{font-size:var(--font-size-100);color:var(--color-neutral-400);margin-top:0.25rem}.trb-skeleton{background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-text{height:1rem;margin-bottom:0.5rem}.trb-skeleton-text:last-child{width:60%;margin-bottom:0}.trb-skeleton-circle{border-radius:50%}.trb-skeleton-rect{border-radius:0.5rem}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.trb-skeleton-product-card{display:flex;flex-direction:column;background:var(--color-white-100);border:1px solid var(--color-neutral-200);border-radius:0.75rem;overflow:hidden}.trb-skeleton-product-card-image{aspect-ratio:4/3;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-product-card-body{display:flex;flex-direction:column;gap:0.5rem;padding:1rem}.trb-skeleton-product-card-title{height:1.25rem;width:80%;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-skeleton-product-card-text{height:1rem;width:60%;background:linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:0.25rem;animation:skeleton-shimmer 1.5s infinite}.trb-toast{display:flex;gap:0.75rem;padding:1rem;border-radius:0.5rem;background:var(--color-white-100);box-shadow:var(--bsd-300);max-width:25rem}.trb-toast-icon{flex-shrink:0}.trb-toast-content{flex:1}.trb-toast-title{font-weight:600;margin-bottom:0.25rem}.trb-toast-text{font-size:var(--font-size-300);color:var(--color-text-default-200)}.trb-toast-close{flex-shrink:0;display:flex;align-items:flex-start;cursor:pointer;color:var(--color-neutral-400);transition:color .16s ease-in-out}.trb-toast-close:hover{color:var(--color-neutral-600)}.trb-bottom-sheet{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:flex-end;background:var(--modal-background, hsla(0, 0%, 0%, 0.25));opacity:0;visibility:hidden;pointer-events:none;transition:all .24s ease}.trb-bottom-sheet.is-active{opacity:1;visibility:visible;pointer-events:all}.trb-bottom-sheet.is-active .trb-bottom-sheet-panel{transform:translateY(0)}.trb-bottom-sheet-panel{background:var(--color-white-100);border-top-left-radius:1rem;border-top-right-radius:1rem;padding:1.5rem;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform .24s ease}.trb-bottom-sheet-handle{width:2.5rem;height:0.25rem;margin:0 auto 1rem;background:var(--color-neutral-300);border-radius:0.125rem}.trb-hero{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:5rem 1.5rem;background:var(--color-neutral-50)}.trb-hero-title{font-size:var(--font-size-1000);font-weight:700;color:var(--color-text-default-100);margin-bottom:1rem}.trb-hero-subtitle{font-size:var(--font-size-500);color:var(--color-text-default-200);max-width:60ch;margin-bottom:2rem}.trb-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.trb-three-steps-guide{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem}.trb-three-steps-guide-item{display:flex;flex-direction:column;align-items:center;text-align:center}.trb-three-steps-guide-number{display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--color-primary-500);color:var(--color-white-100);font-weight:700;font-size:var(--font-size-500);margin-bottom:1rem}.trb-three-steps-guide-title{font-weight:600;font-size:var(--font-size-500);color:var(--color-text-default-100);margin-bottom:0.5rem}.trb-three-steps-guide-description{font-size:var(--font-size-300);color:var(--color-text-default-200)}

package/dist/index.css

@@ -11,4 +11,3 @@
  */
 
 @import './typography.css';
-@import './radius.css';

package/dist/reset.css

@@ -0,0 +1,275 @@
+/**
+ * CSS Reset
+ * Ported from @fastwork/turbine-css
+ */
+
+html {
+  font-size: 100%;
+  font-family: var(
+    --font-family-primary,
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
+  line-height: 1.15;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+  text-size-adjust: 100%;
+}
+
+html,
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--color-text-default-100, hsl(215deg 15% 28% / 96%));
+}
+
+main {
+  display: block;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family-primary);
+  line-height: 1.65;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  line-height: 1.15;
+}
+
+pre {
+  font-size: 1em;
+  font-family: monospace;
+}
+
+a {
+  background-color: transparent;
+  color: inherit;
+  text-decoration: none;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-size: 1em;
+  font-family: monospace;
+}
+
+sub,
+sup {
+  position: relative;
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+small {
+  font-size: 80%;
+}
+
+button,
+input,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  font-family: inherit;
+  line-height: 1.15;
+  text-transform: none;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  text-transform: none;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  appearance: button;
+}
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  display: table;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  outline-offset: -2px;
+  appearance: textfield;
+}
+
+[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  appearance: button;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+hr {
+  display: block;
+  overflow: visible;
+  box-sizing: content-box;
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  border: none;
+  background: var(--color-neutral-200);
+}
+
+img,
+video,
+object {
+  vertical-align: top;
+}
+
+progress[value] {
+  --color: hsl(var(--hsl-primary));
+
+  width: 100%;
+  border-radius: 10em;
+  background: var(--color-neutral-200);
+  appearance: none;
+}
+
+progress[value]::-webkit-progress-bar {
+  border-radius: 10em;
+  background: var(--background);
+}
+
+progress[value]::-webkit-progress-value {
+  border-radius: 10em;
+  background: var(--color);
+}
+
+progress[value]::-moz-progress-bar {
+  border-radius: 10em;
+  background: var(--color);
+}

package/dist/typography.css

@@ -4,145 +4,145 @@
  */
 
 /* Headings */
-.font-h1 {
-  font-family: var(--xz-heading-h1-font-family);
-  font-size: var(--xz-heading-h1-font-size);
-  font-weight: var(--xz-heading-h1-font-weight);
+.font-heading1 {
+  font-family: var(--xz-heading1-font-family);
+  font-size: var(--xz-heading1-font-size);
+  font-weight: var(--xz-heading1-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
-.font-h2 {
-  font-family: var(--xz-heading-h2-font-family);
-  font-size: var(--xz-heading-h2-font-size);
-  font-weight: var(--xz-heading-h2-font-weight);
+.font-heading2 {
+  font-family: var(--xz-heading2-font-family);
+  font-size: var(--xz-heading2-font-size);
+  font-weight: var(--xz-heading2-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
-.font-h3 {
-  font-family: var(--xz-heading-h3-font-family);
-  font-size: var(--xz-heading-h3-font-size);
-  font-weight: var(--xz-heading-h3-font-weight);
+.font-heading3 {
+  font-family: var(--xz-heading3-font-family);
+  font-size: var(--xz-heading3-font-size);
+  font-weight: var(--xz-heading3-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
-.font-h4 {
-  font-family: var(--xz-heading-h4-font-family);
-  font-size: var(--xz-heading-h4-font-size);
-  font-weight: var(--xz-heading-h4-font-weight);
+.font-heading4 {
+  font-family: var(--xz-heading4-font-family);
+  font-size: var(--xz-heading4-font-size);
+  font-weight: var(--xz-heading4-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
-.font-h5 {
-  font-family: var(--xz-heading-h5-font-family);
-  font-size: var(--xz-heading-h5-font-size);
-  font-weight: var(--xz-heading-h5-font-weight);
+.font-heading5 {
+  font-family: var(--xz-heading5-font-family);
+  font-size: var(--xz-heading5-font-size);
+  font-weight: var(--xz-heading5-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
-.font-h6 {
-  font-family: var(--xz-heading-h6-font-family);
-  font-size: var(--xz-heading-h6-font-size);
-  font-weight: var(--xz-heading-h6-font-weight);
+.font-heading6 {
+  font-family: var(--xz-heading6-font-family);
+  font-size: var(--xz-heading6-font-size);
+  font-weight: var(--xz-heading6-font-weight);
   line-height: var(--xz-line-height-125pct);
 }
 
 /* Titles */
-.font-title-1 {
-  font-family: var(--xz-title-title1-font-family);
-  font-size: var(--xz-title-title1-font-size);
-  font-weight: var(--xz-title-title1-font-weight);
+.font-title1 {
+  font-family: var(--xz-title1-font-family);
+  font-size: var(--xz-title1-font-size);
+  font-weight: var(--xz-title1-font-weight);
   line-height: var(--xz-line-height-135pct);
 }
 
-.font-title-2 {
-  font-family: var(--xz-title-title2-font-family);
-  font-size: var(--xz-title-title2-font-size);
-  font-weight: var(--xz-title-title2-font-weight);
+.font-title2 {
+  font-family: var(--xz-title2-font-family);
+  font-size: var(--xz-title2-font-size);
+  font-weight: var(--xz-title2-font-weight);
   line-height: var(--xz-line-height-135pct);
 }
 
-.font-title-3 {
-  font-family: var(--xz-title-title3-font-family);
-  font-size: var(--xz-title-title3-font-size);
-  font-weight: var(--xz-title-title3-font-weight);
+.font-title3 {
+  font-family: var(--xz-title3-font-family);
+  font-size: var(--xz-title3-font-size);
+  font-weight: var(--xz-title3-font-weight);
   line-height: var(--xz-line-height-135pct);
 }
 
-.font-title-4 {
-  font-family: var(--xz-title-title4-font-family);
-  font-size: var(--xz-title-title4-font-size);
-  font-weight: var(--xz-title-title4-font-weight);
+.font-title4 {
+  font-family: var(--xz-title4-font-family);
+  font-size: var(--xz-title4-font-size);
+  font-weight: var(--xz-title4-font-weight);
   line-height: var(--xz-line-height-135pct);
 }
 
 /* Subtitles */
-.font-subtitle-1-bold {
-  font-family: var(--xz-subtitle-subtitle1Bold-font-family);
-  font-size: var(--xz-subtitle-subtitle1Bold-font-size);
-  font-weight: var(--xz-subtitle-subtitle1Bold-font-weight);
+.font-subtitle1-bold {
+  font-family: var(--xz-subtitle1Bold-font-family);
+  font-size: var(--xz-subtitle1Bold-font-size);
+  font-weight: var(--xz-subtitle1Bold-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-subtitle-1-regular {
-  font-family: var(--xz-subtitle-subtitle1Regular-font-family);
-  font-size: var(--xz-subtitle-subtitle1Regular-font-size);
-  font-weight: var(--xz-subtitle-subtitle1Regular-font-weight);
+.font-subtitle1-regular {
+  font-family: var(--xz-subtitle1Regular-font-family);
+  font-size: var(--xz-subtitle1Regular-font-size);
+  font-weight: var(--xz-subtitle1Regular-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-subtitle-2-bold {
-  font-family: var(--xz-subtitle-subtitle2Bold-font-family);
-  font-size: var(--xz-subtitle-subtitle2Bold-font-size);
-  font-weight: var(--xz-subtitle-subtitle2Bold-font-weight);
+.font-subtitle2-bold {
+  font-family: var(--xz-subtitle2Bold-font-family);
+  font-size: var(--xz-subtitle2Bold-font-size);
+  font-weight: var(--xz-subtitle2Bold-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-subtitle-2-regular {
-  font-family: var(--xz-subtitle-subtitle2Regular-font-family);
-  font-size: var(--xz-subtitle-subtitle2Regular-font-size);
-  font-weight: var(--xz-subtitle-subtitle2Regular-font-weight);
+.font-subtitle2-regular {
+  font-family: var(--xz-subtitle2Regular-font-family);
+  font-size: var(--xz-subtitle2Regular-font-size);
+  font-weight: var(--xz-subtitle2Regular-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-subtitle-3-bold {
-  font-family: var(--xz-subtitle-subtitle3Bold-font-family);
-  font-size: var(--xz-subtitle-subtitle3Bold-font-size);
-  font-weight: var(--xz-subtitle-subtitle3Bold-font-weight);
+.font-subtitle3-bold {
+  font-family: var(--xz-subtitle3Bold-font-family);
+  font-size: var(--xz-subtitle3Bold-font-size);
+  font-weight: var(--xz-subtitle3Bold-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-subtitle-3-regular {
-  font-family: var(--xz-subtitle-subtitle3Regular-font-family);
-  font-size: var(--xz-subtitle-subtitle3Regular-font-size);
-  font-weight: var(--xz-subtitle-subtitle3Regular-font-weight);
+.font-subtitle3-regular {
+  font-family: var(--xz-subtitle3Regular-font-family);
+  font-size: var(--xz-subtitle3Regular-font-size);
+  font-weight: var(--xz-subtitle3Regular-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
 /* Body */
-.font-body-1 {
-  font-family: var(--xz-body-body1-font-family);
-  font-size: var(--xz-body-body1-font-size);
-  font-weight: var(--xz-body-body1-font-weight);
+.font-body1 {
+  font-family: var(--xz-body1-font-family);
+  font-size: var(--xz-body1-font-size);
+  font-weight: var(--xz-body1-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-body-2 {
-  font-family: var(--xz-body-body2-font-family);
-  font-size: var(--xz-body-body2-font-size);
-  font-weight: var(--xz-body-body2-font-weight);
+.font-body2 {
+  font-family: var(--xz-body2-font-family);
+  font-size: var(--xz-body2-font-size);
+  font-weight: var(--xz-body2-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-body-3 {
-  font-family: var(--xz-body-body3-font-family);
-  font-size: var(--xz-body-body3-font-size);
-  font-weight: var(--xz-body-body3-font-weight);
+.font-body3 {
+  font-family: var(--xz-body3-font-family);
+  font-size: var(--xz-body3-font-size);
+  font-weight: var(--xz-body3-font-weight);
   line-height: var(--xz-line-height-150pct);
 }
 
-.font-body-4 {
-  font-family: var(--xz-body-body4-font-family);
-  font-size: var(--xz-body-body4-font-size);
-  font-weight: var(--xz-body-body4-font-weight);
+.font-body4 {
+  font-family: var(--xz-body4-font-family);
+  font-size: var(--xz-body4-font-size);
+  font-weight: var(--xz-body4-font-weight);
   line-height: var(--xz-line-height-150pct);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@fastwork/xosmoz-css",
-	"version": "0.0.2",
-	"description": "CSS utility classes for Xosmoz design system",
+	"version": "0.0.13",
+	"description": "CSS utility classes and component styles for Xosmoz design system",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
 	"types": "./dist/index.d.ts",
@@ -11,15 +11,23 @@
 			"import": "./dist/index.mjs",
 			"require": "./dist/index.js"
 		},
+		"./reset.css": "./dist/reset.css",
+		"./atomic.css": "./dist/atomic.css",
+		"./component.css": "./dist/component.css",
 		"./typography.css": "./dist/typography.css",
 		"./radius.css": "./dist/radius.css",
-		"./index.css": "./dist/index.css"
+		"./index.css": "./dist/index.css",
+		"./all.css": "./dist/all.css"
 	},
 	"files": [
 		"dist"
 	],
 	"scripts": {
-		"build": "yarn build:utilities && yarn build:ts",
+		"build": "yarn build:css && yarn build:ts",
+		"build:css": "yarn build:reset && yarn build:atomic && yarn build:component && yarn build:utilities",
+		"build:reset": "node scripts/generate-reset.mjs",
+		"build:atomic": "node scripts/generate-atomic.mjs",
+		"build:component": "sass src/scss/component.scss dist/component.css --style=compressed --no-source-map",
 		"build:utilities": "node scripts/generate-utilities.mjs",
 		"build:ts": "tsup",
 		"dev": "tsup --watch",
@@ -27,10 +35,11 @@
 		"clean": "rm -rf dist"
 	},
 	"dependencies": {
-		"@fastwork/xosmoz-theme": "workspace:*"
+		"@fastwork/xosmoz-theme": "workspace:^"
 	},
 	"devDependencies": {
 		"@types/node": "^20.11.0",
+		"sass": "^1.94.0",
 		"tsup": "^8.0.0",
 		"typescript": "^5.4.0"
 	},
@@ -41,7 +50,9 @@
 		"design-system",
 		"css",
 		"utility-classes",
+		"components",
 		"xosmoz",
+		"turbine",
 		"ui"
 	],
 	"author": "",

package/dist/radius.css

@@ -1,40 +0,0 @@
-/**
- * Border Radius Utility Classes
- * Generated from @fastwork/xosmoz-theme
- */
-
-.rounded-none {
-  border-radius: var(--xz-radius-none);
-}
-
-.rounded-sm {
-  border-radius: var(--xz-radius-sm);
-}
-
-.rounded-base {
-  border-radius: var(--xz-radius-base);
-}
-
-.rounded-md {
-  border-radius: var(--xz-radius-md);
-}
-
-.rounded-lg {
-  border-radius: var(--xz-radius-lg);
-}
-
-.rounded-xl {
-  border-radius: var(--xz-radius-xl);
-}
-
-.rounded-2xl {
-  border-radius: var(--xz-radius-2xl);
-}
-
-.rounded-3xl {
-  border-radius: var(--xz-radius-3xl);
-}
-
-.rounded-full {
-  border-radius: var(--xz-radius-full);
-}