@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/dist/language-VBJ24OPV.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-width="1.2" d="M10 17a7 7 0 1 0 0-14m0 14a7 7 0 1 1 0-14m0 14c-1.691 0-3.062-3.134-3.062-7S8.308 3 10 3m0 14c1.691 0 3.063-3.134 3.063-7S11.69 3 10 3M4.313 13.402c1.282-.734 3.413-1.214 5.824-1.214 2.517 0 4.728.523 5.988 1.312M4.313 6.598c1.282.734 3.413 1.215 5.824 1.215 2.517 0 4.728-.524 5.988-1.313"/></svg>

package/dist/layout-NDDSWNNV.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M8.36 8.125a.703.703 0 1 0-1.407 0zM6.952 17.5a.703.703 0 0 0 1.406 0zM5.313 3.203h9.375V1.797H5.313zm11.484 2.11v9.375h1.406V5.313zm-2.11 11.484H5.313v1.406h9.375zm-11.484-2.11V5.313H1.797v9.375zm2.11 2.11a2.11 2.11 0 0 1-2.11-2.11H1.797a3.516 3.516 0 0 0 3.516 3.516zm11.484-2.11a2.11 2.11 0 0 1-2.11 2.11v1.406a3.516 3.516 0 0 0 3.516-3.515zm-2.11-11.484a2.11 2.11 0 0 1 2.11 2.11h1.406a3.516 3.516 0 0 0-3.515-3.516zM5.313 1.797a3.516 3.516 0 0 0-3.516 3.516h1.406a2.11 2.11 0 0 1 2.11-2.11zm1.64 6.328V17.5H8.36V8.125zm-3.984.234H17.03V6.953H2.97z"/></svg>

package/dist/pending-NF7NSBYO.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#aeb2bc" clip-path="url(#a)"><path d="M12.202 4.944a.744.744 0 1 0 0-1.487.744.744 0 0 0 0 1.487M18.207 7.08a.946.946 0 1 0-1.337-1.338.946.946 0 0 0 1.337 1.337M19.749 12.794a1.047 1.047 0 1 0 0-2.093 1.047 1.047 0 0 0 0 2.093M17.538 15.936a1.148 1.148 0 1 0 0 2.295 1.148 1.148 0 0 0 0-2.295m-5.336 2.11a1.249 1.249 0 1 0 0 2.497 1.249 1.249 0 0 0 0-2.498m-6.29-1.917a1.35 1.35 0 1 0 1.909 1.91 1.35 1.35 0 0 0-1.91-1.91m.194-4.382a1.451 1.451 0 1 0-2.902 0 1.451 1.451 0 0 0 2.902 0m1.857-6.433a1.227 1.227 0 1 0-1.097 2.194 1.227 1.227 0 0 0 1.097-2.194"/></g><defs><clipPath id="a"><path fill="#fff" d="M3 3h18v18H3z"/></clipPath></defs></svg>

package/dist/receipt-MNLQIFCO.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="none" viewBox="0 0 14 16"><path stroke="#9499a5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M3.85 4.85h6.3m-6.3 3.6h6.3m-7.83-7.2h9.36c.646 0 1.17.604 1.17 1.35v12.15L10.9 13.4l-1.95 1.35L7 13.4l-1.95 1.35L3.1 13.4l-1.95 1.35V2.6c0-.746.524-1.35 1.17-1.35"/></svg>

package/dist/sparkles-EOEGVL6G.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15 4.5a.75.75 0 0 0-.721.544l-.813 2.846a3.75 3.75 0 0 1-2.576 2.576l-2.846.813a.75.75 0 0 0 0 1.442l2.846.813a3.75 3.75 0 0 1 2.576 2.576l.813 2.846a.75.75 0 0 0 1.442 0l.813-2.846a3.75 3.75 0 0 1 2.576-2.576l2.846-.813a.75.75 0 0 0 0-1.442l-2.846-.813a3.75 3.75 0 0 1-2.576-2.576l-.813-2.846A.75.75 0 0 0 15 4.5m-9-3a.75.75 0 0 0-.728.568l-.258 1.036a2.63 2.63 0 0 1-1.91 1.91l-1.036.258a.75.75 0 0 0 0 1.456l1.036.258a2.63 2.63 0 0 1 1.91 1.91l.258 1.036a.75.75 0 0 0 1.456 0l.258-1.036a2.63 2.63 0 0 1 1.91-1.91l1.036-.258a.75.75 0 0 0 0-1.456l-1.036-.258a2.63 2.63 0 0 1-1.91-1.91l-.258-1.036A.75.75 0 0 0 6 1.5M7.5 15a.75.75 0 0 0-.712.513l-.394 1.183a1.5 1.5 0 0 1-.948.948l-1.183.395a.75.75 0 0 0 0 1.422l1.183.395a1.5 1.5 0 0 1 .948.948l.395 1.183a.75.75 0 0 0 1.422 0l.395-1.183a1.5 1.5 0 0 1 .948-.948l1.183-.395a.75.75 0 0 0 0-1.422l-1.183-.395a1.5 1.5 0 0 1-.948-.948l-.395-1.183A.75.75 0 0 0 7.5 15" clip-rule="evenodd"/></svg>

package/dist/store-3RQPBJWG.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.4" d="M2.92 8.008C3.17 6.286 4.78 5 6.68 5h6.638c1.902 0 3.51 1.286 3.762 3.008l.885 6.067C18.27 16.153 16.5 18 14.204 18H5.796C3.5 18 1.73 16.153 2.034 14.075z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M6.667 4.833V5a3.333 3.333 0 0 1 6.666 0v-.167M7.5 9.166V10a2.5 2.5 0 1 0 5 0v-.834"/></svg>

package/dist/store_active-SAOAGVKC.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1.67" d="M2.92 8.008C3.17 6.286 4.78 5 6.68 5h6.638c1.902 0 3.51 1.286 3.762 3.008l.885 6.067C18.27 16.153 16.5 18 14.204 18H5.796C3.5 18 1.73 16.153 2.034 14.075z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.67" d="M6.667 4.834V5a3.333 3.333 0 0 1 6.666 0v-.166"/><path fill="#ebf0fb" fill-rule="evenodd" d="M7.5 8.332c.461 0 .835.374.835.835V10a1.665 1.665 0 1 0 3.33 0v-.833a.835.835 0 0 1 1.67 0V10a3.335 3.335 0 1 1-6.67 0v-.833c0-.461.374-.835.835-.835" clip-rule="evenodd"/></svg>

package/dist/studio-LYPUIEFA.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M14.483 6.896a1.38 1.38 0 1 0 0-2.758 1.38 1.38 0 0 0 0 2.758"/><path fill="currentColor" d="M14.483 9.655H5.517A4.14 4.14 0 0 1 1.38 5.517a4.14 4.14 0 0 1 4.138-4.138h8.966a4.14 4.14 0 0 1 4.138 4.138 4.14 4.14 0 0 1-4.138 4.138M5.517 2.758A2.76 2.76 0 0 0 2.76 5.517a2.76 2.76 0 0 0 2.758 2.758h8.966a2.76 2.76 0 0 0 2.758-2.758 2.76 2.76 0 0 0-2.758-2.759zM5.517 15.862a1.38 1.38 0 1 0 0-2.758 1.38 1.38 0 0 0 0 2.758"/><path fill="currentColor" d="M14.483 18.62H5.517a4.14 4.14 0 0 1-4.138-4.137 4.14 4.14 0 0 1 4.138-4.138h8.966a4.14 4.14 0 0 1 4.138 4.138 4.14 4.14 0 0 1-4.138 4.138m-8.966-6.896a2.76 2.76 0 0 0-2.758 2.759 2.76 2.76 0 0 0 2.758 2.758h8.966a2.76 2.76 0 0 0 2.758-2.758 2.76 2.76 0 0 0-2.758-2.759z"/></svg>

package/dist/studio_active-BC6O66OI.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M5.517 9.62h8.966a4.14 4.14 0 0 0 4.138-4.137 4.14 4.14 0 0 0-4.138-4.138H5.517A4.14 4.14 0 0 0 1.38 5.483 4.14 4.14 0 0 0 5.517 9.62m10.345-4.103a1.38 1.38 0 1 1-2.758 0 1.38 1.38 0 0 1 2.758 0M5.517 18.62h8.966a4.14 4.14 0 0 0 4.138-4.137 4.14 4.14 0 0 0-4.138-4.138H5.517a4.14 4.14 0 0 0-4.138 4.138 4.14 4.14 0 0 0 4.138 4.138m1.38-4.137a1.38 1.38 0 1 1-2.759 0 1.38 1.38 0 0 1 2.759 0" clip-rule="evenodd"/></svg>

package/dist/vertical-ellipsis-3G4WEOCW.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="auto" fill="none" viewBox="0 0 49 49"><circle cx="24.5" cy="10.5" r="3.5" fill="currentColor"/><circle cx="24.5" cy="39.5" r="3.5" fill="currentColor"/><circle cx="24.5" cy="24.5" r="3.5" fill="currentColor"/></svg>

package/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@mindlogic-ai/logician-ui",
+  "version": "2.0.0-alpha.0",
+  "description": "A comprehensive React design system built on Chakra UI",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "USAGE.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup || true",
+    "build:watch": "tsup --watch",
+    "prepublishOnly": "yarn build",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "test": "echo 'No tests specified'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish",
+    "changeset:status": "changeset status",
+    "optimize-icons": "node scripts/optimize-icons.js",
+    "update-intl": "./scripts/get-lang-pack.sh"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^2.8.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@mdxeditor/editor": "^1.0.0",
+    "@tanstack/react-virtual": "^3.0.0",
+    "@types/lodash": "^4.17.20",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "chakra-dayzed-datepicker": "^0.3.1",
+    "date-fns": "^2.30.0",
+    "katex": "^0.16.22",
+    "libphonenumber-js": "^1.10.0",
+    "lodash": "^4.17.21",
+    "polished": "^4.3.0",
+    "react-icons": "^5.0.0",
+    "react-markdown": "^10.1.0",
+    "react-pin-input": "^1.3.0",
+    "react-select": "^5.8.0",
+    "react-spinners": "^0.17.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "recharts": "^3.1.2",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-flexible-markers": "^1.3.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/react": "^2.8.0",
+    "@changesets/cli": "^2.27.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@next/eslint-plugin-next": "^15.5.0",
+    "@storybook/addon-docs": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/svgo": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "framer-motion": "^10.0.0",
+    "prettier": "^3.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^8.5.0",
+    "svgo": "^4.0.0",
+    "tsc-alias": "^1.8.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "chakra-ui",
+    "ui-library",
+    "typescript"
+  ],
+  "author": "Mindlogic AI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mindlogic-ai/logician-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mindlogic-ai/logician-ui/issues"
+  },
+  "homepage": "https://github.com/mindlogic-ai/logician-ui#readme",
+  "engines": {
+    "node": ">=16.0.0",
+    "yarn": ">=1.22.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  args: {
+    children: 'Default Accordion',
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Accordion>;
+
+export const Default: Story = (args) => {
+  return (
+    <Accordion {...args}>
+      <AccordionItem>
+        <AccordionButton>Test button</AccordionButton>
+        <AccordionPanel>Test panel</AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const TwoItems: Story = (args) => {
+  return (
+    <Accordion {...args}>
+      <AccordionItem>
+        <AccordionButton>Test button</AccordionButton>
+        <AccordionPanel>Test panel</AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionButton>Test button 2</AccordionButton>
+        <AccordionPanel>Test panel 2</AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,14 @@
+import { Accordion as ChakraAccordion, AccordionProps } from '@chakra-ui/react';
+
+export const Accordion = (props: AccordionProps) => {
+  return (
+    <ChakraAccordion
+      allowMultiple
+      borderRadius={4}
+      overflow="hidden"
+      border="1px solid"
+      borderColor="gray.300"
+      {...props}
+    />
+  );
+};

package/src/components/Accordion/AccordionButton.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import {
+  AccordionButton as ChakraAccordionButton,
+  AccordionIcon,
+  ChakraProps,
+  Flex,
+} from '@chakra-ui/react';
+
+import theme from '@/theme/index';
+
+export const AccordionButton = ({
+  _hover = {},
+  _expanded = {},
+  customIcon = undefined,
+  children,
+  ...rest
+}: PropsWithChildren<ChakraProps> & {
+  customIcon?: ReactNode;
+}) => {
+  return (
+    <ChakraAccordionButton
+      _hover={{
+        bg: `${theme.colors.main}08`,
+        ..._hover,
+      }}
+      _expanded={{
+        bg: `${theme.colors.main}12`,
+        borderBottomWidth: '1px',
+        ..._expanded,
+      }}
+      fontWeight="bold"
+      {...rest}
+    >
+      <Flex w="100%" justify="space-between" align="center">
+        {children}
+        {customIcon ? customIcon : <AccordionIcon />}
+      </Flex>
+    </ChakraAccordionButton>
+  );
+};

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,17 @@
+import { AccordionItem as ChakraAccordionItem } from '@chakra-ui/react';
+
+export const AccordionItem = ({ _first = {}, _last = {}, ...rest }) => {
+  return (
+    <ChakraAccordionItem
+      _first={{
+        borderTopWidth: 0,
+        ..._first,
+      }}
+      _last={{
+        borderBottomWidth: 0,
+        ..._last,
+      }}
+      {...rest}
+    />
+  );
+};

package/src/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+export { Accordion } from './Accordion';
+export { AccordionButton } from './AccordionButton';
+export { AccordionItem } from './AccordionItem';
+export { AccordionPanel } from '@chakra-ui/react';

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Alert } from './Alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  args: {
+    status: 'error',
+    children: 'Pro 플랜 무료 체험이 Jan 01 에 종료됩니다.',
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['error', 'success', 'warning', 'info'],
+      description: 'Status of the Alert component',
+    },
+    onClose: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Alert>;
+
+// Default story without a close button
+export const Default: Story = (args) => <Alert {...args} />;
+
+// Story with a close button
+export const WithButton: Story = (args) => <Alert {...args} />;
+WithButton.args = {
+  status: 'success',
+  children: '성공적으로 완료되었습니다!',
+  onClose: action('onClose'),
+};

package/src/components/Alert/Alert.styles.ts

@@ -0,0 +1,19 @@
+export const AlertStyles = {
+  error: {
+    bg: 'danger.lighter',
+    color: 'danger.dark',
+  },
+  success: {
+    bg: 'success.lighter',
+    color: 'success.dark',
+  },
+  warning: {
+    bg: 'warning.lighter',
+    color: 'warning.dark',
+  },
+  info: {
+    bg: 'primary.light',
+    color: 'primary.dark',
+  },
+  loading: {},
+};

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Alert as ChakraAlert, AlertIcon, CloseButton } from '@chakra-ui/react';
+
+import { AlertStyles } from './Alert.styles';
+import { AlertProps } from './Alert.types';
+
+/**
+ * A reusable Alert component that displays status messages.
+ *
+ * @param children - The content to display inside the alert.
+ * @param status - The status of the alert. Determines the visual style of the alert.
+ *                 Options: `'error' | 'success' | 'warning' | 'info'`.
+ *                 Default: `'error'`.
+ * @param onClose - Callback function triggered when the close button is clicked.
+ *                  If provided, a close button will be rendered in the alert.
+ *                  The function receives no arguments.
+ * @param rest - Additional props inherited from Chakra UI's `AlertProps`.
+ */
+export const Alert = ({
+  children,
+  status = 'error',
+  onClose,
+  ...rest
+}: AlertProps) => {
+  const styles = AlertStyles[status] || {};
+
+  return (
+    <ChakraAlert
+      minH={16}
+      display="flex"
+      justifyContent="center"
+      status={status}
+      {...styles}
+      {...rest}
+    >
+      <AlertIcon />
+      {children}
+      {onClose && <CloseButton onClick={onClose} />}
+    </ChakraAlert>
+  );
+};

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,5 @@
+import { AlertProps as ChakraAlertProps } from '@chakra-ui/react';
+
+export interface AlertProps extends ChakraAlertProps {
+  onClose?: () => void;
+}

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/src/components/AutowidthInput/AutowidthInput.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react';
+
+import { AutowidthInput } from './AutowidthInput';
+
+const meta: Meta<typeof AutowidthInput> = {
+  title: 'Components/AutowidthInput',
+  component: AutowidthInput,
+};
+
+export default meta;
+type Story = StoryFn<typeof AutowidthInput>;
+
+export const Basic: Story = {
+  args: {
+    value: 'test',
+  },
+};
+
+export const AsHeading: Story = {
+  args: {
+    value: 'test',
+  },
+};

package/src/components/AutowidthInput/AutowidthInput.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import { Box, Input, InputProps } from '@chakra-ui/react';
+
+export const AutowidthInput = ({
+  value,
+  placeholder,
+  style = {},
+  widthMeasureProps,
+  ...rest
+}: InputProps & { widthMeasureProps?: any }) => {
+  const valueWidthMeasureRef = useRef<HTMLDivElement>(null);
+  const [inputWidth, setInputWidth] = useState<number>();
+
+  useEffect(() => {
+    if (valueWidthMeasureRef.current)
+      setInputWidth(valueWidthMeasureRef.current.offsetWidth);
+  }, [value, style]);
+
+  return (
+    <Box>
+      <span
+        ref={valueWidthMeasureRef}
+        {...widthMeasureProps}
+        style={{
+          position: 'absolute',
+          opacity: 0,
+          pointerEvents: 'none',
+          width: 'fit-content',
+          display: 'inline-flex',
+          ...widthMeasureProps?.style,
+        }}
+      >
+        {value || placeholder}
+      </span>
+      <Input
+        value={value}
+        placeholder={placeholder}
+        {...rest}
+        style={{
+          width: inputWidth,
+          boxSizing: 'content-box',
+          ...style,
+        }}
+      />
+    </Box>
+  );
+};

package/src/components/AutowidthInput/index.ts

@@ -0,0 +1 @@
+export { AutowidthInput } from './AutowidthInput';

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Avatar } from '.';
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  args: {
+    size: 'md',
+    name: '',
+    src: '',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Avatar>;
+export const Basic: Story = (args) => <Avatar {...args} />;

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import {
+  Avatar as ChakraAvatar,
+  AvatarProps as ChakraAvatarProps,
+} from '@chakra-ui/react';
+
+export const Avatar = forwardRef(({ ...rest }: ChakraAvatarProps, ref) => {
+  return (
+    <ChakraAvatar
+      ref={ref}
+      borderWidth="1px"
+      borderColor="gray.200"
+      overflow="hidden"
+      {...rest}
+    />
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/components/Avatar/index.tsx

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Badge } from '.';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  args: {
+    children: 'Pro Plan',
+  },
+  argTypes: {
+    textTransform: {
+      control: 'radio',
+      options: ['none', 'uppercase'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Badge>;
+
+export const Basic: Story = (args) => <Badge {...args} />;

package/src/components/Badge/Badge.styles.ts

@@ -0,0 +1,11 @@
+export const baseStyles = {
+  borderRadius: '2xl',
+  px: 2.5,
+  fontSize: 'subtitle',
+  fontWeight: 'medium',
+  color: 'primary.dark',
+  bgColor: 'primary.light',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,26 @@
+import { ForwardedRef, forwardRef } from 'react';
+import {
+  Badge as ChakraBadge,
+  BadgeProps as ChakraBadgeProps,
+} from '@chakra-ui/react';
+
+import { baseStyles } from './Badge.styles';
+
+export const Badge = forwardRef(
+  (
+    { textTransform = 'none', ...rest }: ChakraBadgeProps,
+    ref?: ForwardedRef<HTMLButtonElement>
+  ) => {
+    return (
+      <ChakraBadge
+        {...baseStyles}
+        w="fit-content"
+        textTransform={textTransform}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export { baseStyles as badgeStyles } from './Badge.styles';

package/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Banner } from './Banner';
+
+export default {
+  title: 'Components/Banner',
+  component: Banner,
+  args: {
+    children: 'This is a banner message',
+  },
+} as ComponentMeta<typeof Banner>;
+
+const Template: ComponentStory<typeof Banner> = (args) => <Banner {...args} />;
+
+export const Info = Template.bind({});
+Info.args = {
+  variant: 'info',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+  children: 'Operation completed successfully!',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+  children: 'Please review your changes before continuing.',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+  children: 'An error occurred. Please try again.',
+};