@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/src/components/Reveal/Reveal.stories.tsx

@@ -0,0 +1,61 @@
+import { Box, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { Subtext, Text } from '../Typography';
+import { Reveal } from '.';
+
+/**
+ * Opens a block out of zero height instead of inserting it — for content that
+ * arrives *underneath* something the reader is already looking at.
+ *
+ * Opens through `grid-template-rows: 0fr → 1fr`, not through `height`.
+ * `height: auto` is not interpolable, which is the only reason this needed
+ * JavaScript before.
+ */
+const meta = {
+  title: 'Components/Motion/Reveal',
+  component: Reveal,
+} satisfies Meta<typeof Reveal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [shown, setShown] = useState(false);
+
+    return (
+      <Stack gap={3} align="flex-start" maxW="440px">
+        <Card p={4} w="100%">
+          <Text fontWeight="600" mb={0}>
+            지구의 대기는 78%가 질소다
+          </Text>
+        </Card>
+
+        <Button size="xs" variant="outline" onClick={() => setShown((v) => !v)}>
+          {shown ? '숨기기' : '근거 보기'}
+        </Button>
+
+        {shown && (
+          <Reveal>
+            <Card p={4} variant="default">
+              <Subtext mb={0}>
+                건조 공기 기준 질소 78.08%, 산소 20.95%, 아르곤 0.93%입니다.
+                수증기를 포함하면 비율이 달라집니다.
+              </Subtext>
+            </Card>
+          </Reveal>
+        )}
+
+        <Subtext color="fg.muted" mb={0}>
+          바로 렌더하면 아래 내용이 한 프레임에 밀립니다. 읽던 자리에서 그
+          프레임은 「도착」이 아니라 「페이지가 깨졌다」로 읽힙니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};

package/src/components/Reveal/Reveal.styles.ts

@@ -0,0 +1,38 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * Opening a block out of nothing.
+ *
+ * Through the grid track, not through `height`. `height: auto` is not
+ * interpolable, which is why the framer-motion version has to measure the
+ * content and animate to a pixel value; `grid-template-rows: 0fr → 1fr`
+ * interpolates and gets content-height for free. The Accordion and
+ * ExpandableText already open this way, so this is the library's existing
+ * answer rather than a second one.
+ *
+ * `emphasized` — the block is arriving at a size, and that is the curve for
+ * arriving at a value.
+ *
+ * Still a layout property every frame. That is inherent to opening to
+ * content-height and is why this is for *small* blocks: a rationale under an
+ * answer, a validation message under a field. Not a long list, not a table,
+ * not anything with nested scrolling.
+ *
+ * Under reduced motion it opens instantly. The content is the information; the
+ * opening is only there so the page does not appear to break under the reader's
+ * eye, and an instant open does not break anything.
+ */
+export const revealOpen: SystemStyleObject = {
+  display: 'grid',
+  // The closed state, so the first painted frame is already collapsed — without
+  // it the block flashes at full height before the animation's first frame.
+  gridTemplateRows: '0fr',
+  animationName: 'reveal-open',
+  animationDuration: 'motion.base',
+  animationTimingFunction: 'emphasized',
+  animationFillMode: 'forwards',
+  // Not optional: the child paints at its natural height from frame one and
+  // spills out of the collapsed track without it.
+  '& > *': { overflow: 'hidden', minHeight: 0 },
+  _motionReduce: { animationDuration: 'motion.instant' },
+};

package/src/components/Reveal/Reveal.test.tsx

@@ -0,0 +1,80 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Reveal } from './Reveal';
+
+/**
+ * `Reveal` renders two elements, and unlike `SwapTransition` — where the second
+ * one was an accident that swallowed the caller's layout — this one is load
+ * bearing. `grid-template-rows: 0fr → 1fr` has nothing to interpolate against
+ * without a child to clip, so the inner element cannot be removed.
+ *
+ * What it can do is stop being invisible. These pin the shape, so a future
+ * cleanup that "simplifies" it to one box, or that lets the child paint at full
+ * height before the track catches up, fails here instead of on a screen.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('Reveal', () => {
+  it('opens out of a collapsed grid track', () => {
+    const { container } = wrap(
+      <Reveal>
+        <p>rationale</p>
+      </Reveal>
+    );
+
+    const style = getComputedStyle(container.firstElementChild!);
+
+    // Grid rather than the caller's display: the animation IS the track, so a
+    // call site cannot opt out of it by passing `display`.
+    expect(style.display).toBe('grid');
+    // The closed state has to be painted, or the block flashes at full height
+    // for one frame before the animation's first frame lands.
+    expect(style.gridTemplateRows).toBe('0fr');
+    expect(style.animationName).toBe('reveal-open');
+  });
+
+  it('clips the content while the track is shorter than it', () => {
+    // The clipping element is the inner box, not the caller's node — `& > *`
+    // reaches one level, and the content sits inside it. Asserting here is what
+    // makes the second element's *purpose* explicit: without the clip, the
+    // content paints at its natural height from frame one and spills out of the
+    // collapsed track, which is the flash the `0fr` above exists to prevent,
+    // reintroduced one element further in.
+    const { container } = wrap(
+      <Reveal>
+        <p data-testid="content">rationale</p>
+      </Reveal>
+    );
+
+    const clipper = container.firstElementChild!.firstElementChild!;
+    expect(clipper).toContainElement(screen.getByTestId('content'));
+
+    const style = getComputedStyle(clipper);
+    expect(style.overflow).toBe('hidden');
+    // `'0'` rather than `'0px'` — jsdom does not normalise a unitless zero.
+    expect(parseFloat(style.minHeight)).toBe(0);
+  });
+
+  it('keeps the caller between itself and the content', () => {
+    // Reveal is for content-height blocks, so it takes no fill props — but the
+    // element the caller styles still has to be the one that animates, the
+    // property `SwapTransition` lost.
+    const { container } = wrap(
+      <Reveal data-testid="reveal" borderRadius="md">
+        <p>rationale</p>
+      </Reveal>
+    );
+
+    expect(container.firstElementChild).toHaveAttribute(
+      'data-testid',
+      'reveal'
+    );
+    expect(getComputedStyle(container.firstElementChild!).animationName).toBe(
+      'reveal-open'
+    );
+  });
+});

package/src/components/Reveal/Reveal.tsx

@@ -0,0 +1,62 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { revealOpen } from './Reveal.styles';
+import { RevealProps } from './Reveal.types';
+
+/**
+ * Opens a block out of zero height instead of inserting it — for content that
+ * arrives *underneath* something the reader is already looking at: an answer's
+ * rationale, a validation message under a field, a details panel.
+ *
+ * The problem it solves is a layout jump. Rendering the block directly moves
+ * everything below it in one frame, and if the reader's eye is on the element
+ * the content belongs to, that frame reads as the page breaking rather than as
+ * content arriving.
+ *
+ * The caller owns mounting — render it when the content should appear, the same
+ * contract `FlyTo` uses. It does not animate closed; a block that opens *and*
+ * closes is a Collapsible, which keeps its node mounted and can therefore use
+ * `presence`.
+ *
+ * ⚠️ **Costs layout on every frame**, unlike the transform-only primitives here.
+ * Inherent to opening to content-height. Keep it on small blocks — not a long
+ * list, a table, or anything with nested scroll.
+ *
+ * **Adds two elements** — the grid whose track animates, and the `div` inside it
+ * that clips. Layout props land on the outer one, and `children` is no longer a
+ * *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * {showRationale && <Reveal><Text>{rationale}</Text></Reveal>}
+ * ```
+ */
+export const Reveal = forwardRef(
+  (
+    { durationMs, children, css, ...rest }: RevealProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => (
+    <Box
+      ref={ref}
+      {...rest}
+      css={mergeCss(
+        revealOpen,
+        durationMs === undefined
+          ? undefined
+          : { animationDuration: `${durationMs}ms` },
+        css
+      )}
+    >
+      {/* The grid track animates; this holds the content and clips it while the
+          track is shorter than the content is tall. */}
+      <div>{children}</div>
+    </Box>
+  )
+);
+
+Reveal.displayName = 'Reveal';

package/src/components/Reveal/Reveal.types.ts

@@ -0,0 +1,6 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface RevealProps extends BoxProps {
+  /** Defaults to `motion.base` (300ms). */
+  durationMs?: number;
+}

package/src/components/Reveal/index.ts

@@ -0,0 +1,2 @@
+export { Reveal } from './Reveal';
+export type { RevealProps } from './Reveal.types';

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Button } from '@chakra-ui/react';
 
-import { IoChevronDownOutline } from '@/components/Icon';
+import { ChevronDownIcon } from '@/components/Icon';
 import { useTranslate } from '@/hooks/useTranslate';
 
+import { polymorphic } from '../../types/polymorphic';
 import { seeMoreButtonStyles } from './SeeMoreButton.styles';
-import { SeeMoreButtonProps } from './SeeMoreButton.types';
+import { SeeMoreButtonOwnProps } from './SeeMoreButton.types';
 
 /**
  * A button component that allows users to load or see more items.
@@ -15,17 +16,23 @@ import { SeeMoreButtonProps } from './SeeMoreButton.types';
  * @param {number} props.currentCount - The current number of items shown.
  * @param {number} props.maxCount - The maximum number of items available.
  */
-export const SeeMoreButton = ({
+const SeeMoreButtonImpl = ({
   currentCount,
   maxCount,
   ...rest
-}: SeeMoreButtonProps) => {
+}: SeeMoreButtonOwnProps) => {
   const translate = useTranslate();
 
   return (
     <Button {...seeMoreButtonStyles} {...rest}>
       {translate('see_more')} ({currentCount}/{maxCount}){' '}
-      <IoChevronDownOutline color="inherit" />
+      <ChevronDownIcon color="inherit" />
     </Button>
   );
 };
+
+SeeMoreButtonImpl.displayName = 'SeeMoreButton';
+
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+export const SeeMoreButton =
+  polymorphic<SeeMoreButtonOwnProps>(SeeMoreButtonImpl);

package/src/components/SeeMoreButton/SeeMoreButton.types.ts

@@ -1,6 +1,17 @@
-import { ButtonProps } from '@chakra-ui/react';
+import type { ElementType } from 'react';
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
-export interface SeeMoreButtonProps extends ButtonProps {
+// Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
+export type SeeMoreButtonOwnProps = Omit<ChakraButtonProps, 'as'> & {
   currentCount: number;
   maxCount: number;
-}
+};
+
+/**
+ * Props for `SeeMoreButton`, typed for whatever element `as` renders.
+ * Defaults to `'button'`, so the bare type is unchanged.
+ */
+export type SeeMoreButtonProps<TElement extends ElementType = 'button'> =
+  PolymorphicProps<TElement, SeeMoreButtonOwnProps>;

package/src/components/SegmentedControl/SegmentedControl.styles.ts

@@ -0,0 +1,22 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * `travel`, but delivered through custom properties.
+ *
+ * Ark writes this part's `transition-*` **inline**, and an inline declaration
+ * beats any class, so the ordinary preset never reaches the indicator. The two
+ * halves it does leave reachable are the duration and the timing function, both
+ * read from custom properties — which is the only seam available.
+ *
+ * Local rather than shared for the same reason it exists at all: it is a
+ * workaround for one library part, not a motion anyone should be choosing.
+ * If a second Ark part turns out to need the identical hatch, that is the
+ * moment to promote it.
+ */
+export const indicatorTravel: SystemStyleObject = {
+  '--transition-duration': 'var(--chakra-durations-motion-base)',
+  '--transition-timing-function': 'var(--chakra-easings-emphasized)',
+  _motionReduce: {
+    '--transition-duration': 'var(--chakra-durations-motion-instant)',
+  },
+};

package/src/components/SegmentedControl/SegmentedControl.timing.test.tsx

@@ -0,0 +1,81 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { SegmentedControl } from './SegmentedControl';
+
+/**
+ * Ark writes this part's `transition-*` declarations **inline**, and an inline
+ * declaration beats any class rule — so the ordinary preset props never reach
+ * the indicator, and a change made that way looks identical to `dev`. Retiming
+ * has to go through the custom properties Ark's inline `var()`s read.
+ *
+ * These tests exist because that failure is invisible: the code reads as though
+ * it applied, the component still animates (on Ark's 150ms default), and only a
+ * side-by-side comparison gives it away.
+ */
+const setup = () =>
+  render(
+    <ChakraProvider value={system}>
+      <SegmentedControl
+        options={[
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+        ]}
+      />
+    </ChakraProvider>
+  );
+
+const rulesFor = (el: Element) => {
+  const css = Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+  return el.className
+    .split(' ')
+    .filter((c) => c.startsWith('css-'))
+    .flatMap((c) => [...css.matchAll(new RegExp(`\\.${c}\\{([^}]*)\\}`, 'g'))])
+    .map((m) => m[1])
+    .join('\n');
+};
+
+describe('SegmentedControl indicator timing', () => {
+  it('Ark still reads the duration from a custom property', async () => {
+    const { container } = setup();
+    // Since zag 1.43 (Ark 5.39) the indicator only carries its transition
+    // while it is travelling between two values — at rest the inline duration
+    // is a flat `0ms`. Move it once so the declaration under test exists.
+    const radios = container.querySelectorAll('input[type="radio"]');
+    await act(async () => {
+      fireEvent.click(radios[1]);
+    });
+    const inline =
+      container
+        .querySelector('[data-part="indicator"]')
+        ?.getAttribute('style') ?? '';
+    // If Ark ever inlines a concrete duration instead, our override stops
+    // working and this is the line that says so.
+    expect(inline).toContain('var(--transition-duration');
+    expect(inline).not.toMatch(/transition-duration:\s*\d/);
+  });
+
+  it('we define that custom property, so the indicator runs on our timing', () => {
+    const { container } = setup();
+    const el = container.querySelector('[data-part="indicator"]')!;
+    const rules = rulesFor(el);
+    expect(rules).toContain(
+      '--transition-duration:var(--chakra-durations-motion-base)'
+    );
+    expect(rules).toContain(
+      '--transition-timing-function:var(--chakra-easings-emphasized)'
+    );
+  });
+
+  it('and drops to instant under reduced motion', () => {
+    const { container } = setup();
+    const rules = rulesFor(container.querySelector('[data-part="indicator"]')!);
+    expect(rules).toContain(
+      '--transition-duration:var(--chakra-durations-motion-instant)'
+    );
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { SegmentGroup } from '@chakra-ui/react';
 
 import { mergeCss } from '@/utils/mergeCss';
 
+import { indicatorTravel } from './SegmentedControl.styles';
 import {
   SegmentedControlOption,
   SegmentedControlProps,
@@ -107,7 +108,12 @@ export const SegmentedControl = forwardRef<
         css
       )}
     >
-      <SegmentGroup.Indicator borderRadius={indicatorRadius} />
+      <SegmentGroup.Indicator
+        borderRadius={indicatorRadius}
+        // `travel`, delivered through custom properties — see the comment on
+        // `indicatorTravel` for why the ordinary preset cannot reach this part.
+        css={indicatorTravel}
+      />
       {items.map((item) => (
         <SegmentGroup.Item
           key={item.value}

package/src/components/Select/Combobox.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Combobox as ChakraCombobox } from '@chakra-ui/react';
 
+import { noZoomOnFocus } from '@/theme/formControls';
 import { mergeCss } from '@/utils/mergeCss';
 
 import { contentStyles, inputStyles, itemStyles } from './Select.styles';
@@ -11,7 +12,9 @@ const Input = forwardRef<HTMLInputElement, ChakraCombobox.InputProps>(
       <ChakraCombobox.Input
         ref={ref}
         {...props}
-        css={mergeCss(inputStyles, css)}
+        // The one typeable listbox: unlike Select's button trigger, iOS Safari
+        // zooms toward this input when its text is under 16px.
+        css={mergeCss(noZoomOnFocus, inputStyles, css)}
       />
     );
   }
@@ -22,6 +25,9 @@ const Content = forwardRef<HTMLDivElement, ChakraCombobox.ContentProps>(
     return (
       <ChakraCombobox.Content
         ref={ref}
+        // Chakra gives this one `animationDuration: 0s` on close — the list
+        // vanishes mid-keystroke with no exit at all. Same policy as Select.
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/ComboboxField.tsx

@@ -19,6 +19,7 @@ export function ComboboxField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -60,7 +61,16 @@ export function ComboboxField<T = string>({
       }}
       onInputValueChange={(details) => filter(details.inputValue)}
     >
-      {label != null && <Combobox.Label>{label}</Combobox.Label>}
+      {/* Same as `SelectField`: the label part is the target of the input's
+          `aria-labelledby`, so omitting it leaves the control unnamed rather
+          than unlabelled (KWCAG 5.3.4.1 레이블 제공). */}
+      {label != null ? (
+        <Combobox.Label>{label}</Combobox.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Combobox.Label srOnly>{ariaLabel ?? placeholder}</Combobox.Label>
+        )
+      )}
       <Combobox.Control>
         <Combobox.Input placeholder={placeholder} />
         <Combobox.IndicatorGroup>

package/src/components/Select/Comparison.stories.tsx

@@ -61,3 +61,22 @@ export const SideBySide = () => (
     </Row>
   </Stack>
 );
+
+/**
+ * The four form-control sizes, Input / Select / Textarea per row.
+ */
+export const SizeProgression = () => (
+  <Stack gap={8} maxW="360px">
+    {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+      <Row key={size} label={`size="${size}"`}>
+        <Input size={size} placeholder={`Input ${size}`} />
+        <SelectField
+          size={size}
+          options={categoryOptions}
+          placeholder={`Select ${size}`}
+        />
+        <Textarea size={size} placeholder={`Textarea ${size}`} />
+      </Row>
+    ))}
+  </Stack>
+);

package/src/components/Select/Select.tsx

@@ -27,6 +27,9 @@ const Content = forwardRef<HTMLDivElement, ChakraSelect.ContentProps>(
     return (
       <ChakraSelect.Content
         ref={ref}
+        // Chakra closes this one over `fastest` (50ms), which is fast enough to
+        // read as the list being cut off rather than dismissed.
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/Select.types.ts

@@ -20,6 +20,22 @@ interface FieldBaseProps<T> {
   placeholder?: string;
   /** Optional label rendered above the control. */
   label?: ReactNode;
+  /**
+   * Accessible name for the trigger when no visible `label` is rendered — a
+   * field labelled by a table column header, a `FieldRow`, or the sentence
+   * around it.
+   *
+   * Without one of `label` / `ariaLabel` / `placeholder` the trigger has **no
+   * accessible name at all**: the composition points `aria-labelledby` at a
+   * label part that is not rendered, the reference dangles, and the control
+   * announces as a bare "button" however much text it shows (KWCAG 2.1
+   * 5.3.4.1 레이블 제공, axe `button-name`).
+   *
+   * Rendered as a visually hidden label rather than an `aria-label` so the name
+   * is in the server-rendered markup — an attribute applied after hydration
+   * leaves a window in which the control is nameless.
+   */
+  ariaLabel?: string;
   size?: SelectSize;
   invalid?: boolean;
   disabled?: boolean;
@@ -29,7 +45,16 @@ interface FieldBaseProps<T> {
   width?: string | number;
 }
 
-export type SelectFieldProps<T = string> = FieldBaseProps<T>;
+export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
+  /**
+   * Deal the options in one after another when the list opens.
+   *
+   * Deliberately absent from `ComboboxField`, which is the same list behind a
+   * filter: its options remount on every keystroke, so each character typed
+   * would re-deal the results the reader is trying to read.
+   */
+  stagger?: boolean;
+}
 
 export interface ComboboxFieldProps<T = string> extends FieldBaseProps<T> {
   /** Content shown when no option matches the typed query. */

package/src/components/Select/SelectField.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { createListCollection, Portal } from '@chakra-ui/react';
 
+import { staggerProps } from '@/utils/staggerProps';
+
 import { Select } from './Select';
 import { SelectFieldProps } from './Select.types';
 
@@ -19,6 +21,7 @@ export function SelectField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -26,6 +29,7 @@ export function SelectField<T = string>({
   required,
   name,
   width = 'full',
+  stagger = false,
 }: SelectFieldProps<T>) {
   const collection = useMemo(
     () =>
@@ -61,7 +65,19 @@ export function SelectField<T = string>({
       }}
     >
       <Select.HiddenSelect />
-      {label != null && <Select.Label>{label}</Select.Label>}
+      {/* The label part is what the trigger's `aria-labelledby` points at, and
+          Chakra emits that reference whether or not the part is rendered. Leave
+          it out and the reference dangles, so the trigger resolves to no name —
+          a "button" to a screen reader, whatever the selected option says
+          (KWCAG 5.3.4.1 레이블 제공). So it is always rendered: visibly when the
+          field has a label, hidden when the name lives elsewhere on screen. */}
+      {label != null ? (
+        <Select.Label>{label}</Select.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Select.Label srOnly>{ariaLabel ?? placeholder}</Select.Label>
+        )
+      )}
       <Select.Control>
         <Select.Trigger>
           <Select.ValueText placeholder={placeholder} />
@@ -73,8 +89,12 @@ export function SelectField<T = string>({
       <Portal>
         <Select.Positioner>
           <Select.Content>
-            {options.map((option) => (
-              <Select.Item item={option} key={String(option.value)}>
+            {options.map((option, index) => (
+              <Select.Item
+                item={option}
+                key={String(option.value)}
+                {...(stagger ? staggerProps(index) : {})}
+              >
                 <Select.ItemText>{option.label}</Select.ItemText>
                 <Select.ItemIndicator />
               </Select.Item>