@mindlogic-ai/logician-ui 3.2.0-alpha.5 → 4.0.0-alpha.11

package/src/components/Icon/ICON_MANAGEMENT.md

@@ -78,6 +78,7 @@ Override per usage: `<MyIcon color="primary.main" />`.
 
 | boxSize | px  |
 |---------|-----|
+| `2xs`   | 14px |
 | `xs`    | 16px |
 | `sm`    | 20px |
 | `md`    | 24px |

package/src/components/Icon/Icon.stories.tsx

@@ -155,7 +155,7 @@ export const Sizes: Story = {
       <VStack maxW="1400px" gap={4} align="start">
         <Text fontWeight="bold">크기 조절</Text>
         <HStack gap={4} align="center">
-          {['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
+          {['2xs', 'xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
             <VStack key={size}>
               <SampleIcon boxSize={size} color="blue.500" />
               <Text textStyle="subtext">{size}</Text>
@@ -223,6 +223,10 @@ const CustomBuildingIcon = createIcon(
       <Box borderTop="1px solid" borderColor="gray.200" pt={4}>
         <Text fontWeight="semibold" mb={3}>결과:</Text>
         <HStack gap={6}>
+          <VStack>
+            <CustomBuildingIcon boxSize="2xs" color="blue.500" />
+            <Text textStyle="subtext">2xs (14px)</Text>
+          </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="xs" color="blue.500" />
             <Text textStyle="subtext">xs (16px)</Text>
@@ -305,7 +309,7 @@ const MyCustomIcon = createIcon(
     <Box w="100%" bg="blue.50" p={4} borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
       <Text fontWeight="bold" mb={2}>✨ 주요 기능</Text>
       <VStack align="start" gap={2} textStyle="subtext">
-        <Text>• <strong>boxSize 지원:</strong> xs, sm, md, lg, xl (16px ~ 40px)</Text>
+        <Text>• <strong>boxSize 지원:</strong> 2xs, xs, sm, md, lg, xl (14px ~ 40px)</Text>
         <Text>• <strong>Chakra UI 스타일링:</strong> color, bg, margin, padding 등 모든 Box props 사용 가능</Text>
         <Text>• <strong>Tree shaking:</strong> 사용하지 않는 아이콘은 번들에서 제외됨</Text>
         <Text>• <strong>TypeScript 지원:</strong> 완전한 타입 안전성 제공</Text>

package/src/components/Icon/_utils/createIcon.tsx

@@ -7,6 +7,7 @@ export type IconProps = Partial<SVGProps<SVGElement>> &
 
 // Static size mapping (SSR-safe)
 const sizeMapping: Record<string, string> = {
+  '2xs': '3.5',
   xs: '4',
   sm: '5',
   md: '6',

package/src/components/Loaders/PageLoader.tsx

@@ -1,6 +1,7 @@
-import BounceLoader from 'react-spinners/BounceLoader';
 import { Box, Flex, FlexProps } from '@chakra-ui/react';
 
+import { Spinner } from '@/components/Spinner';
+
 export const PageLoader = ({
   isLoading,
   ...rest
@@ -21,10 +22,7 @@ export const PageLoader = ({
       {...rest}
     >
       <Box position="relative">
-        <BounceLoader
-          color="var(--chakra-colors-primary-main)"
-          style={{ zIndex: 999 }}
-        />
+        <Spinner boxSize="60px" borderWidth="6px" css={{ zIndex: 999 }} />
       </Box>
     </Flex>
   );

package/src/components/Loaders/SectionLoader.tsx

@@ -1,6 +1,7 @@
-import DotLoader from 'react-spinners/DotLoader';
 import { Flex, FlexProps } from '@chakra-ui/react';
 
+import { Spinner } from '@/components/Spinner';
+
 export const SectionLoader = ({
   isLoading,
   ...rest
@@ -20,7 +21,7 @@ export const SectionLoader = ({
       zIndex={9999}
       {...rest}
     >
-      <DotLoader color="var(--chakra-colors-primary-main)" />
+      <Spinner boxSize="60px" borderWidth="6px" />
     </Flex>
   );
 };

package/src/components/Tag/Tag.styles.ts

@@ -17,7 +17,7 @@ export const tagColorPaletteStyles: Record<
     soft: {
       bgColor: 'primary.extralight',
       borderColor: 'primary.light',
-      color: 'primary.dark',
+      color: 'primary.darker',
     },
     solid: {
       bgColor: 'blue.500',
@@ -27,14 +27,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'primary.main',
-      color: 'primary.main',
+      color: 'primary.dark',
     },
   },
   secondary: {
     soft: {
       bgColor: 'secondary.extralight',
       borderColor: 'secondary.light',
-      color: 'secondary.dark',
+      color: 'secondary.darker',
     },
     solid: {
       bgColor: 'violet.500',
@@ -44,14 +44,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'secondary.main',
-      color: 'secondary.main',
+      color: 'secondary.dark',
     },
   },
   danger: {
     soft: {
       bgColor: 'danger.extralight',
       borderColor: 'danger.light',
-      color: 'danger.dark',
+      color: 'danger.darker',
     },
     solid: {
       bgColor: 'rose.500',
@@ -61,14 +61,14 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'danger.main',
-      color: 'danger.main',
+      color: 'danger.dark',
     },
   },
   success: {
     soft: {
       bgColor: 'success.extralight',
       borderColor: 'success.light',
-      color: 'success.dark',
+      color: 'success.darker',
     },
     solid: {
       bgColor: 'green.600',
@@ -78,34 +78,40 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'success.main',
-      color: 'success.main',
+      color: 'success.dark',
     },
   },
   warning: {
     soft: {
       bgColor: 'warning.extralight',
       borderColor: 'warning.light',
-      color: 'warning.dark',
+      color: 'warning.darker',
     },
     solid: {
-      bgColor: 'gold.500',
-      borderColor: 'gold.500',
-      color: 'gold.900', // dark text: white/gold.500 was 2.39:1; gold.900 = 6.73:1
+      // Deepened from gold.500 so white text clears AA and the chip matches the
+      // other solids (white on a saturated fill). White/gold.500 was only
+      // 2.39:1; white/gold.700 = 5.86:1 ✓ AA. Bright gold + near-black text read
+      // harsh on the dark canvas.
+      bgColor: 'gold.700',
+      borderColor: 'gold.700',
+      color: 'white',
     },
     outline: {
       bgColor: 'transparent',
       borderColor: 'warning.main',
-      color: 'warning.main',
+      // warning.dark (gold.700, 5.8:1 AA) over warning.main (gold.500, 3.0:1) —
+      // darker text also lifts this off the palette's AA-risk step.
+      color: 'warning.dark',
     },
   },
   neutral: {
     soft: {
-      // Flip surface + border with the mode so the fg.muted text stays legible
+      // Flip surface + border with the mode so the fg.default text stays legible
       // in dark. Light values preserved (bg.muted → gray.100, border.default →
       // gray.300).
       bgColor: 'bg.muted',
       borderColor: 'border.default',
-      color: 'fg.muted',
+      color: 'fg.default',
     },
     solid: {
       bgColor: 'gray.800',
@@ -115,7 +121,7 @@ export const tagColorPaletteStyles: Record<
     outline: {
       bgColor: 'transparent',
       borderColor: 'border.strong', // gray.500 / gray.900 (_dark)
-      color: 'fg.subtle',
+      color: 'fg.muted',
     },
   },
 };

package/src/components/Tag/Tag.tsx

@@ -36,6 +36,7 @@ export const Tag = forwardRef(
         borderRadius="md"
         boxShadow="none"
         fontSize="sm"
+        fontWeight="semibold"
         {...styles}
         {...rest}
         ref={ref}

package/src/components/Tree/Tree.GuideElbow.stories.tsx

@@ -0,0 +1,220 @@
+import { Box, HStack, Stack, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tree } from './Tree';
+import { createTreeCollection } from './index';
+
+/**
+ * Stories for the `elbow` option on `Tree.BranchIndentGuide`.
+ *
+ * `elbow` turns the plain vertical rails into `├` / `└` guide lines:
+ * every row gets a horizontal foot joining it to its parent rail, and
+ * the last row of each group stops at its centre (`└`). `guideColor`
+ * customizes the line color (default `border.default`, which flips
+ * with color mode). Pass both through the `indentGuide` element:
+ *
+ *   <Tree.Node indentGuide={<Tree.BranchIndentGuide elbow />} ... />
+ */
+
+interface Node {
+  id: string;
+  name: string;
+  children?: Node[];
+}
+
+const orgSample: Node = {
+  id: 'ROOT',
+  name: '',
+  children: [
+    {
+      id: 'hq',
+      name: '본사',
+      children: [
+        {
+          id: 'hq-dev',
+          name: '개발본부',
+          children: [
+            {
+              id: 'hq-dev-backend',
+              name: '백엔드그룹',
+              children: [
+                { id: 'hq-dev-backend-api', name: 'API팀' },
+                { id: 'hq-dev-backend-db', name: 'DB팀' },
+                { id: 'hq-dev-backend-platform', name: '플랫폼팀' },
+              ],
+            },
+            {
+              id: 'hq-dev-frontend',
+              name: '프론트엔드그룹',
+              children: [
+                { id: 'hq-dev-frontend-web', name: '웹팀' },
+                { id: 'hq-dev-frontend-mobile', name: '모바일팀' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'hq-sales',
+          name: '영업본부',
+          children: [
+            { id: 'hq-sales-domestic', name: '국내영업팀' },
+            { id: 'hq-sales-global', name: '해외영업팀' },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'rnd',
+      name: 'R&D센터',
+      children: [
+        { id: 'rnd-ml', name: '머신러닝팀' },
+        { id: 'rnd-data', name: '데이터팀' },
+      ],
+    },
+  ],
+};
+
+const orgCollection = createTreeCollection<Node>({
+  rootNode: orgSample,
+  nodeToValue: (node) => node.id,
+  nodeToString: (node) => node.name,
+});
+
+const allBranchIds = (function collect(n: Node): string[] {
+  if (!n.children) return [];
+  return n.children.flatMap((c) => (c.children ? [c.id, ...collect(c)] : []));
+})(orgSample);
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: Node;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchIndicator />
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+const meta = {
+  title: 'Components/Tree',
+  component: Tree.Root,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tree.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * `elbow` guides — the innermost rail grows a horizontal foot so each
+ * row connects to its parent column like a classic file-tree.
+ */
+export const WithElbowGuides: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+    defaultSelectedValue: ['hq-dev-frontend-web'],
+  },
+  render: (args) => (
+    <Box maxWidth="360px">
+      <Tree.Root {...args}>
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={<Tree.BranchIndentGuide elbow />}
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </Box>
+  ),
+};
+
+/**
+ * `guideColor` — customize the guide line color with any Chakra color
+ * token. The default `border.default` flips with color mode; pick a
+ * stronger token (or any palette color) for more contrast.
+ */
+export const GuideColor: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      {(
+        [
+          ['border.default (기본)', undefined],
+          ['border.strong', 'border.strong'],
+          ['primary.light', 'primary.light'],
+        ] as const
+      ).map(([label, guideColor]) => (
+        <Stack key={label} gap={2} width="280px">
+          <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+            {label}
+          </Text>
+          <Tree.Root {...args}>
+            <Tree.Tree>
+              <Tree.Node
+                indentGuide={
+                  <Tree.BranchIndentGuide elbow guideColor={guideColor} />
+                }
+                render={renderNode}
+              />
+            </Tree.Tree>
+          </Tree.Root>
+        </Stack>
+      ))}
+    </HStack>
+  ),
+};
+
+/**
+ * Plain vertical rails (default) vs. `elbow` guides, side by side.
+ */
+export const ElbowGuideComparison: Story = {
+  args: {
+    collection: orgCollection,
+    'aria-label': '조직',
+    defaultExpandedValue: allBranchIds,
+  },
+  render: (args) => (
+    <HStack align="flex-start" gap={8}>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          기본 — 수직 레일
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+      <Stack gap={2} width="320px">
+        <Text fontSize="sm" fontWeight="semibold" color="fg.muted">
+          elbow — ├ / └ 가이드 라인
+        </Text>
+        <Tree.Root {...args}>
+          <Tree.Tree>
+            <Tree.Node
+              indentGuide={<Tree.BranchIndentGuide elbow />}
+              render={renderNode}
+            />
+          </Tree.Tree>
+        </Tree.Root>
+      </Stack>
+    </HStack>
+  ),
+};

package/src/components/Tree/Tree.types.ts

@@ -23,7 +23,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
 export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
 export type TreeBranchTextProps = TreeViewBranchTextProps;
 export type TreeBranchContentProps = TreeViewBranchContentProps;
-export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
+  /**
+   * Draw `├` / `└` guide lines instead of a plain vertical rail: every
+   * row gets a horizontal foot joining it to its parent rail, middle
+   * rows keep the vertical (`├`), and the last row of each group stops
+   * at its centre (`└`). Off by default to preserve the existing
+   * plain-vertical-rail look. See `TreeBranchIndentGuide`.
+   * @default false
+   */
+  elbow?: boolean;
+  /**
+   * Length of the elbow foot — the horizontal cross-stroke that joins
+   * the rail to the row content, drawn from the parent rail column
+   * toward the text. In elbow mode each level indents 4px further than
+   * the plain-rail default, and since the default foot length doesn't
+   * grow with it, the foot ends 8px short of the row text. Any Chakra
+   * width value. Only applies when `elbow` is set.
+   * @default 'calc(var(--tree-indentation) - 4px)'
+   */
+  footLength?: string | number;
+  /**
+   * Color of the guide lines (rail, elbow foot and vertical segments).
+   * Any Chakra color token. The default is a mode-flipping semantic
+   * token, so it darkens in light mode and lightens in dark mode
+   * automatically.
+   * @default 'border.default'
+   */
+  guideColor?: string;
+};
 export type TreeItemProps = TreeViewItemProps;
 export type TreeItemTextProps = TreeViewItemTextProps;
 export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;

package/src/components/Tree/TreeBranchIndentGuide.test.tsx

@@ -0,0 +1,213 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+
+import { system } from '../../theme';
+import { createTreeCollection } from './index';
+import { Tree } from './Tree';
+
+interface N {
+  id: string;
+  name: string;
+  children?: N[];
+}
+
+const sample: N = {
+  id: 'ROOT',
+  name: '',
+  children: [{ id: 'a', name: 'A', children: [{ id: 'a1', name: 'A1' }] }],
+};
+
+const collection = createTreeCollection<N>({
+  rootNode: sample,
+  nodeToValue: (n) => n.id,
+  nodeToString: (n) => n.name,
+});
+
+const renderNode = ({
+  node,
+  nodeState,
+}: {
+  node: N;
+  nodeState: { isBranch: boolean };
+}) =>
+  nodeState.isBranch ? (
+    <Tree.BranchControl>
+      <Tree.BranchText>{node.name}</Tree.BranchText>
+    </Tree.BranchControl>
+  ) : (
+    <Tree.Item>
+      <Tree.ItemText>{node.name}</Tree.ItemText>
+    </Tree.Item>
+  );
+
+function renderGuide(elbow: boolean, extraProps: { guideColor?: string } = {}) {
+  const { container } = render(
+    <ChakraProvider value={system}>
+      <Tree.Root
+        collection={collection}
+        aria-label="t"
+        defaultExpandedValue={['a']}
+      >
+        <Tree.Tree>
+          <Tree.Node
+            indentGuide={
+              elbow ? (
+                <Tree.BranchIndentGuide elbow {...extraProps} />
+              ) : (
+                <Tree.BranchIndentGuide {...extraProps} />
+              )
+            }
+            render={renderNode}
+          />
+        </Tree.Tree>
+      </Tree.Root>
+    </ChakraProvider>
+  );
+  const guide = container.querySelector<HTMLElement>(
+    '[data-part="branch-indent-guide"]'
+  );
+  if (!guide) throw new Error('no indent guide rendered');
+  return guide.className;
+}
+
+// All Chakra/emotion-injected CSS, concatenated.
+const sheetText = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+
+// The foot rule is anchored on the emotion-generated `css-*` class
+// (not the static `chakra-*` slot class), so target that one.
+const styleAnchor = (className: string) => {
+  const emotion = className
+    .trim()
+    .split(/\s+/)
+    .find((c) => /^css-/.test(c));
+  if (!emotion) throw new Error(`no emotion class in: ${className}`);
+  return '\\.' + emotion;
+};
+
+/**
+ * Regression guard for the `elbow` foot. Chakra renders ONE indent guide
+ * per `branchContent` (its first child), followed by that branch's rows
+ * as siblings — so the foot must be drawn on those sibling rows, scoped
+ * to the elbow guide's own class. An earlier `:last-of-type::after`
+ * attempt silently matched nothing (the guide is never the last sibling
+ * of its type), which is exactly what these tests pin down.
+ */
+describe('Tree.BranchIndentGuide elbow', () => {
+  it('draws a ::before foot on the guide’s sibling rows when elbow is set', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Foot rule is scoped to THIS guide's class via the sibling combinator,
+    // for both leaf rows and branch rows — never applied globally.
+    expect(css).toMatch(
+      new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]::before`)
+    );
+    expect(css).toMatch(
+      new RegExp(
+        `${anchor}\\s*~\\s*\\[data-part="branch"\\]\\s*>\\s*\\[data-part="branch-control"\\]::before`
+      )
+    );
+
+    // The foot paints a 1px cross-stroke pinned to the row's vertical
+    // centre, starting at the parent rail column.
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toContain('content:""');
+    expect(footRule).toContain('position:absolute');
+    expect(footRule).toContain('inset-block-start:50%');
+    expect(footRule).toContain('height:1px');
+    expect(footRule).toMatch(
+      /inset-inline-start:calc\(var\(--tree-offset\) - var\(--tree-elbow-indentation\)\)/
+    );
+
+    // Elbow mode widens per-level indentation: the sibling rows redefine
+    // the recipe's indentation-offset from the widened value, pushing the
+    // row text right, away from the elbow foot.
+    const rowVarsRule =
+      css.match(
+        new RegExp(`${anchor}\\s*~\\s*\\[data-part="item"\\]\\s*\\{[^}]*\\}`)
+      )?.[0] ?? '';
+    expect(rowVarsRule).toContain(
+      '--tree-elbow-indentation:calc(var(--tree-indentation) + 4px)'
+    );
+    expect(rowVarsRule).toContain(
+      '--tree-indentation-offset:calc(var(--tree-elbow-indentation) * var(--tree-depth))'
+    );
+  });
+
+  it('draws no foot for a plain guide (no elbow)', () => {
+    const cls = renderGuide(false);
+    const anchor = styleAnchor(cls);
+    // This specific guide's class must not anchor any ::before foot rule.
+    expect(sheetText()).not.toMatch(new RegExp(`${anchor}\\s*~[^{]*::before`));
+  });
+
+  it('stops the vertical segment at the centre of the last row (└)', () => {
+    const cls = renderGuide(true);
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+
+    // Middle rows: full-height vertical (├) on the row itself.
+    const middleRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:not\\(:last-child\\)::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(middleRule).toContain('inset-block-start:0');
+    expect(middleRule).toContain('inset-block-end:0');
+    expect(middleRule).toContain('width:1px');
+
+    // Last leaf row: segment ends at 50% so the foot forms a └.
+    const lastItemRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]:last-child::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastItemRule).toContain('inset-block-start:0');
+    expect(lastItemRule).toContain('height:50%');
+
+    // Last branch row: half-height segment on its control only, so an
+    // expanded last branch has no rail running past its elbow.
+    const lastBranchRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:last-child\\s*>\\s*\\[data-part="branch-control"\\]::after\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(lastBranchRule).toContain('height:50%');
+
+    // Non-last branch: pass-through rail spans the whole expanded subtree,
+    // painted above row hover backgrounds like the original slot rail.
+    const passThroughRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="branch"\\]:not\\(:last-child\\)::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(passThroughRule).toContain('inset-block-end:0');
+    expect(passThroughRule).toContain('z-index:1');
+  });
+
+  it('paints the guide with the custom guideColor token', () => {
+    const cls = renderGuide(true, { guideColor: 'red.500' });
+    const anchor = styleAnchor(cls);
+    const css = sheetText();
+    const footRule =
+      css.match(
+        new RegExp(
+          `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
+        )
+      )?.[0] ?? '';
+    expect(footRule).toMatch(/--chakra-colors-red-500|red\.500/);
+  });
+});