@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.80

package/README.md

@@ -1,14 +1,33 @@
 # X Components
 
-X Components is a library based on components, it offers you the possibility to combine these components
-in different ways to create your own search experience. These components can be used even if
-you don't want to build a search experience, they can be used to build a regular application
-but taking advantage of the flexibility of these components.
+This is a library based on components, it offers you the possibility to combine them in different
+ways to create your own search experience. These components can be used even if you don't want to
+build a search experience, they can be used to build a regular application but taking advantage of
+their flexibility.
 
-A documentation about how to install and use these components can be found here:
-[X Components]()
+## Set up development environment
 
-### Contributing
+### Local setup
+
+To start contributing on this project you need to understand how to see the X Components up and
+running.
+
+1. run `npm ci` at the project root
+2. set `packages/x-components` as working directory at the terminal
+3. run `npm run serve`
+
+The app will be launch in localhost. Every view available at the top tabs is set in
+`packages/x-components/src/router.ts`.
+
+The main tab is `Home`, pressing start you will see the contents of
+`packages/x-components/src/views/home/Home.vue` with most of the X Components presents on the view.
+
+### Use the X Components in your own project
+
+A documentation about how to install and use X components can be found
+[here](https://docs.empathy.co/develop-empathy-platform/build-search-ui/web-x-components-integration-guide.html).
+
+## Contributing
 
 To start contributing to project, please take a look to our
-[Contributing Guide](CONTRIBUTING.md).
+[Contributing Guidelines](CONTRIBUTING.md) for Interface X Components.

package/core/index.js

@@ -1,40 +1,25 @@
 export { default as AnimateWidth } from '../js/components/animations/animate-width.vue.js';
-export { default as CollapseFromTop } from '../js/components/animations/collapse-from-top.vue.js';
-export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
+export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
-export { arrayToObject, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
-export { noOp } from '../js/utils/function.js';
-export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
-export { clone } from '../js/utils/clone.js';
-export { currencyFormatter } from '../js/utils/currency-formatter.js';
-export { debounce as debounceFunction } from '../js/utils/debounce.js';
-export { extractFilters, isFilterPartiallySelected, isFilterSelected } from '../js/utils/filters.js';
-export { getURLParameter } from '../js/utils/get-url-parameters.js';
-export { isElementEqualOrContained } from '../js/utils/html.js';
-export { normalizeString } from '../js/utils/normalize.js';
-export { isInRange } from '../js/utils/number.js';
-export { cleanUndefined, forEach, map, objectFilter, reduce } from '../js/utils/object.js';
-export { sanitize } from '../js/utils/sanitize.js';
-export { localStorageService } from '../js/utils/storage.js';
-export { isStringEmpty, toKebabCase } from '../js/utils/string.js';
-export { throttle as throttleFunction } from '../js/utils/throttle.js';
-export { default as StaggeringTransitionGroup } from '../js/components/staggering-transition-group.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
-export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
-export { NoElement } from '../js/components/no-element.js';
-export { default as BaseDropdown } from '../js/components/base-dropdown.vue.js';
-export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
-export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';
+export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
+export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
+export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
+export { animateClipPath } from '../js/components/animations/animate-clip-path/animate-clip-path.factory.js';
+export { animateScale } from '../js/components/animations/animate-scale/animate-scale.factory.js';
+export { animateTranslate } from '../js/components/animations/animate-translate/animate-translate.factory.js';
 export { default as BaseColumnPickerDropdown } from '../js/components/column-picker/base-column-picker-dropdown.vue.js';
 export { default as BaseColumnPickerList } from '../js/components/column-picker/base-column-picker-list.vue.js';
+export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';
 export { default as BaseCurrency } from '../js/components/currency/base-currency.vue.js';
 export { default as BasePriceFilterLabel } from '../js/components/filters/labels/base-price-filter-label.vue.js';
-export { default as StarIcon } from '../js/components/icons/star.vue.js';
-export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseRatingFilterLabel } from '../js/components/filters/labels/base-rating-filter-label.vue.js';
-export { default as ArrowIcon } from '../js/components/icons/arrow.vue.js';
+export { default as ArrowDownIcon } from '../js/components/icons/arrow-down.vue.js';
+export { default as ArrowLeftIcon } from '../js/components/icons/arrow-left.vue.js';
+export { default as ArrowRightIcon } from '../js/components/icons/arrow-right.vue.js';
+export { default as ArrowUpIcon } from '../js/components/icons/arrow-up.vue.js';
 export { default as BagIcon } from '../js/components/icons/bag.vue.js';
 export { default as BarCodeIcon } from '../js/components/icons/bar-code.vue.js';
 export { default as BarcodeTinyIcon } from '../js/components/icons/barcode-tiny.vue.js';
@@ -55,12 +40,16 @@ export { default as ChevronTinyUpIcon } from '../js/components/icons/chevron-tin
 export { default as ChevronUpIcon } from '../js/components/icons/chevron-up.vue.js';
 export { default as CrossTinyIcon } from '../js/components/icons/cross-tiny.vue.js';
 export { default as CrossIcon } from '../js/components/icons/cross.vue.js';
+export { default as CuratedCheckIcon } from '../js/components/icons/curated-check.vue.js';
 export { default as FiltersIcon } from '../js/components/icons/filters.vue.js';
 export { default as Grid1ColIcon } from '../js/components/icons/grid-1-col.vue.js';
 export { default as Grid2ColIcon } from '../js/components/icons/grid-2-col.vue.js';
+export { default as Grid2RowsIcon } from '../js/components/icons/grid-2-rows.vue.js';
 export { default as HideIcon } from '../js/components/icons/hide.vue.js';
 export { default as HistoryTinyIcon } from '../js/components/icons/history-tiny.vue.js';
 export { default as HistoryIcon } from '../js/components/icons/history.vue.js';
+export { default as LightBulbOff } from '../js/components/icons/light-bulb-off.vue.js';
+export { default as LightBulbOn } from '../js/components/icons/light-bulb-on.vue.js';
 export { default as MenuIcon } from '../js/components/icons/menu.vue.js';
 export { default as MinusTinyIcon } from '../js/components/icons/minus-tiny.vue.js';
 export { default as MinusIcon } from '../js/components/icons/minus.vue.js';
@@ -71,21 +60,26 @@ export { default as Nq4Icon } from '../js/components/icons/nq-4.vue.js';
 export { default as PlusIcon } from '../js/components/icons/plus.vue.js';
 export { default as SearchIcon } from '../js/components/icons/search.vue.js';
 export { default as ShowIcon } from '../js/components/icons/show.vue.js';
+export { default as StarIcon } from '../js/components/icons/star.vue.js';
 export { default as SearchTinyIcon } from '../js/components/icons/search-tiny.vue.js';
+export { default as TagIcon } from '../js/components/icons/tag.vue.js';
 export { default as TrashOpenIcon } from '../js/components/icons/trash-open.vue.js';
 export { default as TrashIcon } from '../js/components/icons/trash.vue.js';
 export { default as TrendingTinyIcon } from '../js/components/icons/trending-tiny.vue.js';
 export { default as TrendingIcon } from '../js/components/icons/trending.vue.js';
 export { default as UserIcon } from '../js/components/icons/user.vue.js';
+export { default as FixedHeaderAndAsidesLayout } from '../js/components/layouts/fixed-header-and-asides-layout.vue.js';
+export { default as MultiColumnMaxWidthLayout } from '../js/components/layouts/multi-column-max-width-layout.vue.js';
+export { default as SingleColumnLayout } from '../js/components/layouts/single-column-layout.vue.js';
 export { default as BaseEventsModalClose } from '../js/components/modals/base-events-modal-close.vue.js';
-export { default as BaseModal } from '../js/components/modals/base-modal.vue.js';
 export { default as BaseEventsModal } from '../js/components/modals/base-events-modal.vue.js';
 export { default as BaseEventsModalOpen } from '../js/components/modals/base-events-modal-open.vue.js';
+export { default as BaseModal } from '../js/components/modals/base-modal.vue.js';
 export { default as BaseIdModal } from '../js/components/modals/base-id-modal.vue.js';
 export { default as BaseIdModalClose } from '../js/components/modals/base-id-modal-close.vue.js';
 export { default as BaseIdModalOpen } from '../js/components/modals/base-id-modal-open.vue.js';
-export { default as BaseTogglePanel } from '../js/components/panels/base-toggle-panel.vue.js';
 export { default as BaseHeaderTogglePanel } from '../js/components/panels/base-header-toggle-panel.vue.js';
+export { default as BaseTogglePanel } from '../js/components/panels/base-toggle-panel.vue.js';
 export { default as BaseIdTogglePanel } from '../js/components/panels/base-id-toggle-panel.vue.js';
 export { default as BaseIdTogglePanelButton } from '../js/components/panels/base-id-toggle-panel-button.vue.js';
 export { default as BaseAddToCart } from '../js/components/result/base-result-add-to-cart.vue.js';
@@ -95,36 +89,63 @@ export { default as BaseResultLink } from '../js/components/result/base-result-l
 export { default as BaseResultPreviousPrice } from '../js/components/result/base-result-previous-price.vue.js';
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
-export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
+export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
 export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
-export { default as BaseIdScroll } from '../js/components/scroll/base-id-scroll.vue.js';
-export { default as BaseScrollToTop } from '../js/components/scroll/base-scroll-to-top.vue.js';
-export { default as BaseMainScroll } from '../js/components/scroll/base-main-scroll.vue.js';
+export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
-export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
+export { default as AutoProgressBar } from '../js/components/auto-progress-bar.vue.js';
+export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
+export { default as BaseDropdown } from '../js/components/base-dropdown.vue.js';
 export { default as BaseGrid } from '../js/components/base-grid.vue.js';
-export { DirectionalFocusNavigationService } from '../js/services/directional-focus-navigation.service.js';
 export { default as BaseKeyboardNavigation } from '../js/components/base-keyboard-navigation.vue.js';
+export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseVariableColumnGrid } from '../js/components/base-variable-column-grid.vue.js';
-export { Debounce } from '../js/components/decorators/debounce.decorators.js';
+export { NoElement } from '../js/components/no-element.js';
 export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
-export { RootXStoreModule } from '../js/store/x.module.js';
-export { BaseXBus, bus } from '../js/plugins/x-bus.js';
-export { XComponentModule, getXComponentXModuleName, isXComponent, setXComponentXModuleName } from '../js/components/x-component.utils.js';
-export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';
-export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
-export { xComponentMixin } from '../js/components/x-component.mixin.js';
-export { createStoreEmitters } from '../js/store/store.utils.js';
-export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload } from '../js/wiring/wires.factory.js';
-export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
-export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.js';
-export { default as Layout } from '../js/components/layouts/layout.vue.js';
+export { default as ItemsList } from '../js/components/items-list.vue.js';
+export { default as LocationProvider } from '../js/components/location-provider.vue.js';
+export { default as GlobalXBus } from '../js/components/global-x-bus.vue.js';
+export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
+export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
+export { Debounce } from '../js/components/decorators/debounce.decorators.js';
+export { LIST_ITEMS_KEY } from '../js/components/decorators/injection.consts.js';
+export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
+export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
+export { xComponentMixin } from '../js/components/x-component.mixin.js';
+export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
 export { compileMessage } from '../js/filters/compile-message.filter.js';
-export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, throttle } from '../js/wiring/wires.operators.js';
+export { BaseXBus, bus } from '../js/plugins/x-bus.js';
+export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
+export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';
+export { DirectionalFocusNavigationService } from '../js/services/directional-focus-navigation.service.js';
+export { createFetchAndSaveActions } from '../js/store/utils/fetch-and-save-action.utils.js';
+export { setStatus } from '../js/store/utils/status-store.utils.js';
+export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
+export { RootXStoreModule } from '../js/store/x.module.js';
+export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
+export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
+export { clone } from '../js/utils/clone.js';
+export { currencyFormatter } from '../js/utils/currency-formatter.js';
+export { debounce as debounceFunction } from '../js/utils/debounce.js';
+export { areFiltersDifferent, createRawFilters } from '../js/utils/filters.js';
+export { noOp } from '../js/utils/function.js';
+export { getURLParameter } from '../js/utils/get-url-parameters.js';
+export { isElementEqualOrContained } from '../js/utils/html.js';
+export { normalizeString } from '../js/utils/normalize.js';
+export { isInRange } from '../js/utils/number.js';
+export { createOrigin } from '../js/utils/origin.js';
+export { sanitize } from '../js/utils/sanitize.js';
+export { localStorageService } from '../js/utils/storage.js';
+export { capitalize, isStringEmpty, toKebabCase } from '../js/utils/string.js';
+export { throttle as throttleFunction } from '../js/utils/throttle.js';
+export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.js';
 export { namespacedDebounce, namespacedThrottle } from '../js/wiring/namespaced-wires.operators.js';
+export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload, wireService, wireServiceWithoutPayload } from '../js/wiring/wires.factory.js';
+export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, mapWire, throttle } from '../js/wiring/wires.operators.js';
+export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
 export { BaseXAPI } from '../js/x-installer/api/base-api.js';
 export { XInstaller } from '../js/x-installer/x-installer/x-installer.js';
 //# sourceMappingURL=index.js.map

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/.-mixins.css

@@ -1 +0,0 @@
-@use 'sass:string';

package/design-system/badge-default.css

@@ -0,0 +1,49 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
+
+.x-badge-container {
+  position: relative;
+}

package/design-system/base.css

@@ -1,9 +1,10 @@
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px; }
-
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #36515b;
   --x-color-base-auxiliary: #667981;
@@ -11,8 +12,12 @@
   --x-color-base-neutral-35: #595959;
   --x-color-base-neutral-70: #b3b3b3;
   --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff; }
-
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -23,10 +28,20 @@
   --x-size-base-07: 32px;
   --x-size-base-08: 40px;
   --x-size-base-09: 48px;
-  --x-size-base-10: 56px; }
-
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 72px;
+  --x-size-base-13: 80px;
+  --x-size-base-14: 96px;
+  --x-size-base-15: 112px;
+  --x-size-base-16: 144px;
+  --x-size-base-17: 176px;
+  --x-size-base-18: 208px;
+  --x-size-base-19: 240px;
+  --x-size-base-20: 272px;
+}
 :root {
-  --x-font-family-base: 'Montserrat', sans-serif;
+  --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
   --x-size-font-base-s: 14px;
   --x-size-font-base-m: 16px;
@@ -37,4 +52,5 @@
   --x-number-font-weight-base-bold: 600;
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px; }
+  --x-size-line-height-base-l: 32px;
+}

package/design-system/button-card.css

@@ -3,7 +3,8 @@
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card); }
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
 
 .x-button--card.x-button,
 .x-button--card .x-button {
@@ -17,4 +18,5 @@
   );
   --x-size-border-radius-bottom-left-button-default: var(
     --x-size-border-radius-bottom-left-button-card
-  ); }
+  );
+}

package/design-system/button-default.css

@@ -12,49 +12,56 @@
   --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
   --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-padding-top-button-default: var(--x-size-base-04);
+  --x-size-height-button-default: var(--x-size-base-08);
   --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-bottom-button-default: var(--x-size-base-04);
   --x-size-padding-left-button-default: var(--x-size-base-05);
   --x-size-gap-button-default: var(--x-size-base-03);
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-button {
-          padding-right: var(--x-size-padding-right-button-default); }
+  padding-right: var(--x-size-padding-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-          padding-left: var(--x-size-padding-right-button-default); }
+  padding-left: var(--x-size-padding-right-button-default);
+}
+
 [dir="ltr"] .x-button {
-          padding-left: var(--x-size-padding-left-button-default); }
+  padding-left: var(--x-size-padding-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-          padding-right: var(--x-size-padding-left-button-default); }
+  padding-right: var(--x-size-padding-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-left-width: var(--x-size-border-width-left-button-default); }
+  border-left-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-right-width: var(--x-size-border-width-left-button-default); }
+  border-right-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-right-width: var(--x-size-border-width-right-button-default); }
+  border-right-width: var(--x-size-border-width-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-left-width: var(--x-size-border-width-right-button-default); }
+  border-left-width: var(--x-size-border-width-right-button-default);
+}
+
 .x-button {
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   margin: 0;
   gap: var(--x-size-gap-button-default);
-  -webkit-padding-before: var(--x-size-padding-top-button-default);
-          padding-top: var(--x-size-padding-top-button-default);
-  -webkit-padding-after: var(--x-size-padding-bottom-button-default);
-          padding-bottom: var(--x-size-padding-bottom-button-default);
-  -webkit-padding-end: var(--x-size-padding-right-button-default);
-  -webkit-padding-start: var(--x-size-padding-left-button-default);
+  min-height: var(--x-size-height-button-default);
   background-color: var(--x-color-background-button-default);
   border-color: var(--x-color-border-button-default);
   color: var(--x-color-text-button-default);
@@ -66,9 +73,13 @@
   font-size: var(--x-size-font-button-default);
   font-weight: var(--x-number-font-weight-button-default);
   line-height: var(--x-size-line-height-button-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-button {
-      gap: 0; }
-      .x-button > *:not(:last-child) {
-        margin-right: var(--x-size-gap-button-default); } }
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-button {
+    gap: 0;
+  }
+  .x-button > *:not(:last-child) {
+    margin-right: var(--x-size-gap-button-default);
+  }
+}

package/design-system/button-ghost.css

@@ -1,18 +1,22 @@
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead); }
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
   --x-color-background-button-default: var(--x-color-background-button-ghost);
   --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost); }
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
 
 .x-button--ghost.x-button--ghost-start.x-button,
 .x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0; }
+  --x-size-padding-left-button-default: 0;
+}
 
 .x-button--ghost.x-button--ghost-end.x-button,
 .x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0; }
+  --x-size-padding-right-button-default: 0;
+}

package/design-system/button-pill.css

@@ -3,7 +3,8 @@
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill); }
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -17,4 +18,5 @@
   );
   --x-size-border-radius-bottom-left-button-default: var(
       --x-size-border-radius-bottom-left-button-pill
-  ); }
+  );
+}

package/design-system/button-primary.css

@@ -1,10 +1,21 @@
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
-  --x-color-text-button-primary: var(--x-color-text-button-default); }
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
 
 .x-button--primary.x-button,
 .x-button--primary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-primary);
   --x-color-border-button-default: var(--x-color-border-button-primary);
-  --x-color-text-button-default: var(--x-color-text-button-primary); }
+  --x-color-text-button-default: var(--x-color-text-button-primary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
+}

package/design-system/button-round.css

@@ -4,11 +4,7 @@
   --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-  --x-space-padding-button-round: var(--x-size-base-04);
-  --x-size-padding-left-button-round: var(--x-space-padding-button-round);
-  --x-size-padding-bottom-button-round: var(--x-space-padding-button-round);
-  --x-size-padding-right-button-round: var(--x-space-padding-button-round);
-  --x-size-padding-top-button-round: var(--x-space-padding-button-round); }
+}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -23,10 +19,7 @@
   --x-size-border-radius-bottom-left-button-default: var(
     --x-size-border-radius-bottom-left-button-round
   );
-  --x-size-padding-top-button-default: var(--x-size-padding-top-button-round);
-  --x-size-padding-right-button-default: var(--x-size-padding-right-button-round);
-  --x-size-padding-bottom-button-default: var(--x-size-padding-bottom-button-round);
-  --x-size-padding-left-button-default: var(--x-size-padding-left-button-round);
-  min-width: var(--x-size-width-icon);
-  min-height: var(--x-size-height-icon);
-  box-sizing: content-box; }
+  min-width: var(--x-size-height-button-default);
+  --x-size-padding-left-button-default: 0;
+  --x-size-padding-right-button-default: 0;
+}

package/design-system/button-secondary.css

@@ -1,10 +1,21 @@
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default); }
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
 
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-secondary);
-  --x-color-border-butto-defaultn: var(--x-color-border-button-secondary);
-  --x-color-text-button-default: var(--x-color-text-button-secondary); }
+  --x-color-border-button-default: var(--x-color-border-button-secondary);
+  --x-color-text-button-default: var(--x-color-text-button-secondary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
+}

package/design-system/button-tertiary.css

@@ -1,10 +1,21 @@
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default); }
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-tertiary);
   --x-color-border-button-default: var(--x-color-border-button-tertiary);
-  --x-color-text-button-default: var(--x-color-text-button-tertiary); }
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}