@ostack.tech/ui 0.10.5 → 0.11.0

package/scss/components/Field/_Field.scss

@@ -1,14 +1,12 @@
-@use "../ControlCode/ControlCode-variables" as *;
+@use "Field-variables" as *;
 @use "../../scss/base-variables" as *;
-@use "../../scss/utils/declare-var" as *;
-@use "../../scss/utils/spacing" as *;
 
 .#{$prefix}field {
   width: 100%;
   break-inside: avoid;
 
   & > :is(.#{$prefix}control-code, .#{$prefix}label__container) {
-    margin-bottom: spacing(1);
+    margin-bottom: $field-spacing-y;
   }
 
   :is(
@@ -16,14 +14,14 @@
     .#{$prefix}feedback-list:not(:empty),
     .#{$prefix}feedback
   ) {
-    margin-top: spacing(1);
+    margin-top: $field-spacing-y;
 
     ~ :is(
       .#{$prefix}helper-text,
       .#{$prefix}feedback-list:not(:empty),
       .#{$prefix}feedback
     ) {
-      margin-top: spacing(0.5);
+      margin-top: $field-feedback-spacing-y;
     }
   }
 
@@ -43,13 +41,13 @@
     & > .#{$prefix}label__container,
     .#{$prefix}helper-text,
     .#{$prefix}feedback {
-      margin-left: calc($control-code-width + spacing(0.5));
+      margin-left: $field-has-code-margin-left;
     }
 
     // Add a padding to to the feedback list instead of a margin so that we can
     // use `margin-left: auto;` when right-aligning feedbacks
     .#{$prefix}feedback-list {
-      padding-left: calc($control-code-width + spacing(0.5));
+      padding-left: $field-has-code-margin-left;
     }
   }
 }

package/scss/components/Input/_Input.scss

@@ -221,6 +221,11 @@
     }
   }
 
+  // We provide our own clear button implementation
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
   // Fix height of inputs with a type of datetime-local, date, month, week, or
   // time
   ::-webkit-datetime-edit-fields-wrapper,

package/scss/components/Label/_Label-variables.scss

@@ -22,5 +22,5 @@ $label-helper-button-color: null !default;
 // Helper popover
 $label-helper-popover-max-width: 500px !default;
 $label-helper-popover-max-height: 600px !default;
-$label-helper-popover-padding-y: spacing(1) !default;
+$label-helper-popover-padding-y: spacing(1.5) !default;
 $label-helper-popover-padding-x: spacing(2) !default;

package/scss/components/MenuList/_MenuList.scss

@@ -35,7 +35,10 @@
       &:not([data-state="checked"][data-hide-control]) {
         &:is([data-highlighted], [data-state="open"], [data-selected])
           #{$menu-list}__item-action--#{$variant},
-        #{$menu-list}__item-action--#{$variant}:not([data-loading]):hover {
+        #{$menu-list}__item-action--#{$variant}:not(
+            :disabled,
+            [data-disabled]
+          ):hover {
           @extend %#{$prefix}menu__item-action--#{$variant}--highlighted;
         }
       }

package/scss/components/RadioGroup/_Radio.scss

@@ -27,7 +27,7 @@
       @extend %#{$prefix}checkable__label--checked;
     }
 
-    #{$radio}:is(:disabled, [data-loading]) ~ &-container > & {
+    #{$radio}:is(:disabled, [data-disabled]) ~ &-container > & {
       @extend %#{$prefix}checkable__label--disabled;
     }
   }

package/scss/components/Separator/_Separator-variables.scss

@@ -0,0 +1,11 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$separator-thickness: 1px !default;
+$separator-color: var(--#{$prefix}accent-a6) !default;
+
+// Horizontal
+$separator-horizontal-default-length: 100% !default;
+
+// Vertical
+$separator-vertical-default-length: spacing(4) !default;

package/scss/components/Separator/_Separator.scss

@@ -1,16 +1,24 @@
+@use "Separator-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/animation" as *;
 
 .#{$prefix}separator {
-  flex-shrink: 0;
-  background-color: $neutral-7;
+  display: block;
+  background-color: $separator-color;
 
   &[data-orientation="horizontal"] {
-    height: 1px;
-    width: 100%;
+    height: $separator-thickness;
+    width: var(
+      --#{$prefix}separator-length,
+      $separator-horizontal-default-length
+    );
   }
 
   &[data-orientation="vertical"] {
-    width: 1px;
+    width: $separator-thickness;
+    height: var(
+      --#{$prefix}separator-length,
+      $separator-vertical-default-length
+    );
   }
 }

package/scss/components/Stepper/_Stepper-variables.scss

@@ -7,32 +7,60 @@ $stepper-step-list-margin-y: spacing(2) !default;
 // Step
 $stepper-step-size: 30px !default;
 $stepper-step-border-radius: 50% !default;
-$stepper-step-animation-duration: var(
-  --#{$prefix}animation-fade-duration
-) !default;
-$stepper-step-animation-timing-function: var(
-  --#{$prefix}animation-fade-timing-function
-) !default;
 
 // Step label
 $stepper-step-label-margin-y: spacing(2) !default;
 
 // Step label - Unvisited
-$stepper-step-label-unvisited-color: var(--#{$prefix}neutral-a9) !default;
+$stepper-step-label-incomplete-color: var(--#{$prefix}neutral-a9) !default;
 
 // Step line
 $stepper-step-line-height: 2px !default;
 $stepper-step-line-background-color: var(--#{$prefix}neutral-a3) !default;
+$stepper-step-line-transition-duration: 0.3s !default;
 
 // Step line - Status
 $stepper-step-line-status-background-color: var(--#{$prefix}accent-a3) !default;
 
 // Step line - Visited
-$stepper-step-line-visited-background-color: var(
+$stepper-step-line-completed-background-color: var(
   --#{$prefix}primary-a9
 ) !default;
 
 // Step line - Visited + status
-$stepper-step-line-visited-status-background-color: var(
+$stepper-step-line-completed-status-background-color: var(
   --#{$prefix}accent-a9
 ) !default;
+
+// Step content label
+$stepper-step-content-label-margin-bottom: spacing(1.5) !default;
+$stepper-step-content-label-font-size: var(--#{$prefix}font-size-sm) !default;
+$stepper-step-content-label-line-height: var(--#{$prefix}font-size-sm) !default;
+$stepper-step-content-label-font-weight: $font-weight-medium !default;
+
+// Step content label index
+$stepper-step-content-label-index-margin-right: spacing(2) !default;
+$stepper-step-content-label-index-size: $stepper-step-size !default;
+$stepper-step-content-label-index-border-radius: $stepper-step-border-radius !default;
+$stepper-step-content-label-index-background-color: var(
+  --#{$prefix}primary-9
+) !default;
+$stepper-step-content-label-index-color: var(
+  --#{$prefix}primary-contrast
+) !default;
+
+// Step content
+$stepper-step-content-gap-y: spacing(3) !default;
+$stepper-step-content-animation-duration: var(
+  --#{$prefix}animation-fade-duration
+) !default;
+$stepper-step-content-animation-timing-function: var(
+  --#{$prefix}animation-fade-timing-function
+) !default;
+
+// Step content - Focus
+$stepper-step-content-focus-outline-width: 2px !default;
+$stepper-step-content-focus-outline-color: var(--#{$prefix}primary-8) !default;
+
+// Stepper trigger
+$stepper-trigger-margin-x: spacing(2) !default;

package/scss/components/Stepper/_Stepper.scss

@@ -5,8 +5,13 @@
 
 .#{$prefix}stepper {
   $stepper: &;
+  display: flex;
+  flex-wrap: wrap;
 
   &__step-list {
+    width: 100%;
+    margin: 0;
+    padding: 0;
     display: flex;
     justify-content: center;
 
@@ -15,7 +20,7 @@
     }
   }
 
-  &__step-container {
+  &__step {
     position: relative;
     flex: 1 0;
     display: flex;
@@ -24,7 +29,7 @@
     justify-content: flex-end;
 
     // Line before the step number
-    &::before {
+    &:not(:first-child)::before {
       content: "";
       display: block;
       position: absolute;
@@ -34,29 +39,27 @@
       width: calc(100% - $stepper-step-size);
       background-color: $stepper-step-line-background-color;
 
-      @include accessible-transition($duration: 0.3s);
-    }
-
-    &:first-child::before {
-      display: none;
+      @include accessible-transition(
+        $duration: $stepper-step-line-transition-duration
+      );
     }
 
     &[data-status]::before {
       background-color: $stepper-step-line-status-background-color;
     }
 
-    &[data-visited] {
+    &:is([data-completed], [data-active]) {
       &::before {
-        background-color: $stepper-step-line-visited-background-color;
+        background-color: $stepper-step-line-completed-background-color;
       }
 
       &[data-status]::before {
-        background-color: $stepper-step-line-visited-status-background-color;
+        background-color: $stepper-step-line-completed-status-background-color;
       }
     }
   }
 
-  &__step {
+  &__step-button {
     min-width: $stepper-step-size;
     min-height: $stepper-step-size;
     border-radius: $stepper-step-border-radius;
@@ -67,20 +70,64 @@
     margin-bottom: $stepper-step-label-margin-y;
     text-align: center;
 
-    &:not([data-visited]) {
-      color: $stepper-step-label-unvisited-color;
+    &:not([data-completed], [data-active]) {
+      color: $stepper-step-label-incomplete-color;
     }
   }
 
-  // TODO: Improve animations
-  &__step-content[data-state="active"] {
-    @include accessible-animation(
-      $animation-fade-in $stepper-step-animation-duration
-        $stepper-step-animation-timing-function
-    );
+  // Step content label (print only)
+  &__step-content-label {
+    display: inline-flex;
+    align-items: center;
+
+    margin-bottom: $stepper-step-content-label-margin-bottom;
+    font-size: $stepper-step-content-label-font-size;
+    line-height: $stepper-step-content-label-line-height;
+    font-weight: $stepper-step-content-label-font-weight;
   }
+  &__step-content-label-index {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $stepper-step-content-label-index-margin-right;
+    min-width: $stepper-step-content-label-index-size;
+    min-height: $stepper-step-content-label-index-size;
+    border-radius: $stepper-step-content-label-index-border-radius;
+    background-color: $stepper-step-content-label-index-background-color;
+    color: $stepper-step-content-label-index-color;
+  }
+
+  &__step-content {
+    width: 100%;
 
-  //&__step-content[data-state="inactive"] {
-  //  @include accessible-animation-close();
-  //}
+    &:focus-visible {
+      outline: $stepper-step-content-focus-outline-width solid
+        $stepper-step-content-focus-outline-color;
+    }
+
+    // TODO: Improve animations
+    &[data-active] {
+      @include accessible-animation(
+        $animation-fade-in $stepper-step-content-animation-duration
+          $stepper-step-content-animation-timing-function
+      );
+    }
+    //&:not([data-active]) {
+    //  @include accessible-animation-close();
+    //}
+
+    & + .#{$prefix}stepper__step-content-label {
+      margin-top: $stepper-step-content-gap-y;
+    }
+  }
+
+  &__next-trigger,
+  &__finish-trigger {
+    margin-left: auto;
+  }
+
+  :is(&__next-trigger, &__finish-trigger)
+    + :is(&__next-trigger, &__finish-trigger) {
+    margin-left: $stepper-trigger-margin-x;
+  }
 }

package/scss/components/Tabs/_Tabs.scss

@@ -342,10 +342,6 @@
 
   // Tab inner
   &__tab-inner {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
     max-width: $tabs-tab-inner-max-width;
     min-width: var(--#{$prefix}tabs-tab-inner-min-width);
     min-height: var(--#{$prefix}tabs-tab-inner-min-height);
@@ -381,6 +377,12 @@
     @include accessible-transition();
   }
 
+  &__tab-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   // Scroll button
   &__scroll-button {
     position: relative;

package/scss/index.scss

@@ -23,6 +23,7 @@
 @forward "components/DataTable/DataTable";
 @forward "components/DateInput/DateInput";
 @forward "components/DateRangeInput/DateRangeInput";
+@forward "components/DescriptionList/DescriptionList";
 @forward "components/Dialog/Dialog";
 @forward "components/DropdownMenu/DropdownMenu";
 @forward "components/Feedback/Feedback";

package/scss/scss/placeholders/checkable/_checkable.scss

@@ -139,11 +139,11 @@
 
   @include accessible-transition();
 
-  &:not(:disabled, [data-loading], [data-readonly]) {
+  &:not(:disabled, [data-disabled], [data-readonly]) {
     cursor: pointer;
   }
 
-  &:is(:disabled, [data-loading]) {
+  &:is(:disabled, [data-disabled]) {
     cursor: $checkable-disabled-cursor;
     opacity: $checkable-disabled-opacity;
   }
@@ -283,7 +283,7 @@
     }
   }
 
-  &:active:not(:disabled, [data-loading], [data-readonly]) {
+  &:active:not(:disabled, [data-disabled], [data-readonly]) {
     background-color: var(--#{$prefix}checkable-active-background-color);
 
     &[data-status] {

package/scss/scss/placeholders/control/_control.scss

@@ -58,7 +58,7 @@
     outline: 0;
   }
 
-  &:is(:disabled, [data-loading]) {
+  &:is(:disabled, [data-disabled]) {
     opacity: $control-disabled-opacity;
     cursor: $control-disabled-cursor;
   }

package/scss/scss/placeholders/menu/_menu.scss

@@ -72,24 +72,15 @@
 
     @include accessible-transition();
 
-    &:is(button):not(:disabled):not([data-disabled=""]):not(
-        [data-disabled="true"]
-      ):not([data-loading]) {
+    &:is(button):not(:disabled, [data-disabled]) {
       cursor: $menu-item-button-cursor;
     }
 
-    &:any-link:not(:disabled):not([data-disabled=""]):not(
-        [data-disabled="true"]
-      ):not([data-loading]) {
+    &:any-link:not(:disabled, [data-disabled]) {
       cursor: $menu-item-link-cursor;
     }
 
-    &:is(
-      :disabled,
-      [data-disabled=""],
-      [data-disabled="true"],
-      [data-loading]
-    ) {
+    &:is(:disabled, [data-disabled]) {
       cursor: $menu-item-disabled-cursor;
       opacity: $menu-item-disabled-opacity;
     }
@@ -130,9 +121,7 @@
         }
 
         // Item - Highlighted
-        &--highlighted:not(:disabled):not([data-disabled=""]):not(
-            [data-disabled="true"]
-          ) {
+        &--highlighted:not(:disabled) {
           @include declare-var(
             --#{$prefix}menu-item-background-color,
             map.get(
@@ -276,7 +265,7 @@
         }
 
         // Item - Highlighted + Selected
-        &--highlighted:not(:disabled):not([data-disabled]):is(&--selected) {
+        &--highlighted:not(:disabled):is(&--selected) {
           @include declare-var(
             --#{$prefix}menu-item-background-color,
             map.get(

package/scss/scss/utils/_animation.scss

@@ -3,7 +3,7 @@
 // Mixin used to apply animations depending on the `prefers-reduced-motion`
 // user preference.
 @mixin accessible-animation($args...) {
-  @media (prefers-reduced-motion: no-preference) {
+  @media screen and (prefers-reduced-motion: no-preference) {
     animation: $args;
   }
 }

package/scss/scss/utils/_transition.scss

@@ -7,7 +7,7 @@
   $duration: var(--#{$prefix}transition-duration),
   $timing-function: var(--#{$prefix}transition-timing-function)
 ) {
-  @media (prefers-reduced-motion: no-preference) {
+  @media screen and (prefers-reduced-motion: no-preference) {
     transition-property: $property;
     transition-duration: $duration;
     transition-timing-function: $timing-function;

package/dist/chunks/en-DwZKZVGL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"en-DwZKZVGL.js","sources":["../../src/locales/en.tsx"],"sourcesContent":["import type { LocalizationObject } from \"../providers/LocalizationProvider\";\nimport { IS_APPLE } from \"../utils/platformUtils.ts\";\n\n/** `en` locale (partial). */\nexport const en: Omit<LocalizationObject, \"languageTag\" | \"dayPickerLocale\"> = {\n  AlertDialog: {\n    okText: \"OK\",\n  },\n  Calendar: {\n    monthSelectLabel: \"Month\",\n    yearSelectLabel: \"Year\",\n    previousMonthLabel: \"Previous month\",\n    nextMonthLabel: \"Next month\",\n  },\n  CloseButton: {\n    label: \"Close\",\n  },\n  CommandMenu: {\n    searchPlaceholder: \"Search…\",\n    listLabel: \"Suggestions\",\n    loadingLabel: \"Loading…\",\n    emptyMessage: \"No results found.\",\n  },\n  CommandMenuDialog: {\n    title: \"Command palette\",\n    description: \"Search for a command…\",\n  },\n  ConfirmDialog: {\n    cancelText: \"Cancel\",\n  },\n  ControlCode: {\n    visuallyHiddenPrefix: \"Field\",\n  },\n  DataTable: {\n    selectAllRowsLabel: \"Select all\",\n    selectRowLabel: \"Select\",\n  },\n  DataTableContent: {\n    emptyMessage: \"Nothing to show.\",\n  },\n  DataTableFilter: {\n    \"aria-label\": \"Table filter\",\n    placeholder: \"Filter\",\n  },\n  DataTablePagination: {\n    \"aria-label\": \"Table pagination\",\n    rowsRangeSelectLabel: (total) => `Visible rows out of ${total}`,\n    rowsRange: (range, total) => (\n      <>\n        Rows&nbsp;{range}&nbsp;of {total}\n      </>\n    ),\n    previousPageButtonLabel: \"Previous page\",\n    nextPageButtonLabel: \"Next page\",\n  },\n  DataTableRowsPerPage: {\n    label: \"Rows per page:\",\n  },\n  DateInput: {\n    selectedDateDescription: (date) => `Selected date, ${date}`,\n    calendarButtonLabel: \"Open calendar\",\n  },\n  DateRangeInput: {\n    startInputLabel: \"Start date\",\n    endInputLabel: \"End date\",\n    selectedDateRangeDescription: ({ start, end }) =>\n      `Selected date range, ${start || \"missing start date\"} to ${\n        end || \"missing end date\"\n      }`,\n  },\n  ErrorBoundary: {\n    fallbackMessage: (\n      <>\n        Something went wrong.\n        <br />\n        Press the button on the right to try again. If the problem persists,\n        please try again later.\n      </>\n    ),\n    resetButtonLabel: \"Retry\",\n  },\n  Feedback: {\n    visuallyHiddenPrefix: (type) =>\n      type === \"error\" ? \"Error,\" : type === \"warning\" ? \"Warning,\" : null,\n  },\n  FeedbackPopover: {\n    label: \"Show feedback\",\n  },\n  FieldGroupHeader: {\n    visuallyHiddenCodePrefix: \"Section\",\n  },\n  Input: {\n    loadingDescription: \"Loading…\",\n    clearButtonLabel: \"Clear\",\n  },\n  Keybinds: {\n    keybindsSeparatorLabel: \"or\",\n    keyPressesSeparatorLabel: \"then\",\n    keyLabels: {\n      Meta: IS_APPLE ? undefined : \"Windows Key\",\n    },\n  },\n  Label: {\n    helperButtonLabel: \"Show help\",\n  },\n  NumericInput: {\n    decimalSeparator: \".\",\n    groupingStyle: \"thousand\",\n    groupSeparator: \",\",\n  },\n  RadioGroup: {\n    clearDescription: \"Press Backspace or Delete to clear.\",\n  },\n  Select: {\n    placeholder: \"Select…\",\n    clearDescription: \"Press Backspace or Delete to clear.\",\n    searchLabel: \"Search options\",\n    optionsLabel: \"Options\",\n    valueTagCloseButtonLabel: \"Remove\",\n  },\n  TableColumn: {\n    helperButtonLabel: \"Show help\",\n  },\n  TableHead: {\n    sortByColumnDescription: (columnName, sortDirection) =>\n      sortDirection === null\n        ? `Stop sorting table by column “${columnName}”`\n        : `Sort table by column “${columnName}” in ${\n            sortDirection === \"asc\" ? \"ascending\" : \"descending\"\n          } order`,\n  },\n  TabList: {\n    scrollLeftButtonLabel: \"Scroll left\",\n    scrollRightButtonLabel: \"Scroll right\",\n  },\n  ToastProvider: {\n    label: \"Notification\",\n  },\n  ToastViewport: {\n    label: \"Notifications ({hotkey})\",\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,27 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { Calendar } from '../Calendar';
-/** Properties of the date picker component. */
-export interface DatePickerProps extends ComponentPropsWithoutRef<typeof Calendar> {
-    /** Default date value. */
-    defaultValue?: Date | null;
-    /** Controlled selected date value. */
-    value?: Date | null;
-    /** Action called whenever the date picker's value changes. */
-    onChange?: (value: Date | null) => void;
-}
-/**
- * Date picker component built on top of [React
- * DayPicker](https://react-day-picker.js.org) and
- * [Calendar](/docs/ostack-ui-forms-calendar--docs) component, providing an
- * intuitive and easy-to-use interface for selecting a date. It acts as a
- * higher-level abstraction that manages date selection while offering both
- * controlled and uncontrolled usage scenarios.
- *
- * The DatePicker allows users to easily select a date by responding to click
- * events on the calendar days. When a date is clicked, the component updates
- * the selected date and triggers a callback, making it simple to integrate into
- * forms or other applications that need to track a chosen date.
- *
- * For detailed customization options, refer to the Calendar component story.
- */
-export declare function DatePicker({ defaultValue, value: controlledValue, defaultMonth, onChange, onDayClick, ...otherProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/index.d.ts

@@ -1 +0,0 @@
-export * from './DatePicker.tsx';

package/dist/types/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,41 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { Calendar } from '../Calendar';
-/** A range of dates from a start date to an end date. */
-export interface DateRange {
-    start: Date | null;
-    end: Date | null;
-}
-/** Mode specifying which end of the range the user is controlling. */
-export type DateRangePickerSelectionMode = "start" | "end" | "both";
-/** Properties of the date-range picker component. */
-export interface DateRangePickerProps extends ComponentPropsWithoutRef<typeof Calendar> {
-    /** Default date-range value. */
-    defaultValue?: DateRange;
-    /** Controlled selected date-range value. */
-    value?: DateRange;
-    /** Action called whenever the date-range picker's value changes. */
-    onChange?: (value: DateRange) => void;
-    /**
-     * Specifies which end of the range the user is currently attempting to
-     * change.
-     *
-     * @default "both"
-     */
-    selectionMode?: DateRangePickerSelectionMode;
-}
-/**
- * Date-range picker component built on top of [React
- * DayPicker](https://react-day-picker.js.org) and
- * [Calendar](/docs/ostack-ui-forms-calendar--docs). Unlike the `Calendar`,
- * `DateRangePicker` provides its own default event handlers for date selection.
- * It supports controlled and uncontrolled states, logical constraints to ensure
- * valid ranges, and flexible selection modes for the start, end, or both dates.
- * Interactive hover feedback helps users visualize their selections in
- * real-time.
- *
- * This component doesn’t have dedicated stories as its functionality is covered
- * by [DatePicker](/docs/ostack-ui-forms-date-picker--docs) and `Calendar`
- * stories, avoiding redundancy. Ideal for booking systems, dashboards, and
- * forms, it simplifies workflows requiring precise date range inputs.
- */
-export declare function DateRangePicker({ defaultValue, value: controlledValue, onChange, selectionMode, defaultMonth, modifiers, onDayClick, onDayFocus, onDayMouseEnter, numberOfMonths, ...otherProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DateRangePicker/index.d.ts

@@ -1 +0,0 @@
-export * from './DateRangePicker.tsx';