analytica-frontend-lib 1.0.46 → 1.0.48

package/dist/Select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border-2 rounded-sm focus:border-primary-950',\n  underlined: 'border-b-2 focus:border-primary-950',\n  rounded: 'border-2 rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    setValue(value);\n    onValueChange?.(value);\n  }, [value, onValueChange]);\n\n  useEffect(() => {\n    if (propValue) {\n      setValue(propValue);\n      const label = findLabelForValue(children, propValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [propValue]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && 'border-indicator-error text-text-600'}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const {\n      value: selectedValue,\n      setValue,\n      setOpen,\n      setSelectedLabel,\n    } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}
+{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border rounded-sm focus:border-primary-950',\n  underlined: 'border-b focus:border-primary-950',\n  rounded: 'border rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    setValue(value);\n    onValueChange?.(value);\n  }, [value, onValueChange]);\n\n  useEffect(() => {\n    if (propValue) {\n      setValue(propValue);\n      const label = findLabelForValue(children, propValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [propValue]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && `${variant == 'underlined' ? 'border-b-2' : 'border-2'} border-indicator-error text-text-600`}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const {\n      value: selectedValue,\n      setValue,\n      setOpen,\n      setSelectedLabel,\n    } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}

package/dist/TextArea/index.js

@@ -80,29 +80,21 @@ var Text_default = Text;
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SIZE_CLASSES = {
   small: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-sm",
     // 96px height, 14px font
     textSize: "sm"
   },
   medium: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-base",
     // 96px height, 16px font
     textSize: "md"
   },
   large: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-lg",
     // 96px height, 18px font
     textSize: "lg"
   },
   extraLarge: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-xl",
     // 96px height, 20px font
     textSize: "xl"
@@ -172,7 +164,7 @@ var TextArea = (0, import_react.forwardRef)(
     const sizeClasses = SIZE_CLASSES[size];
     const stateClasses = STATE_CLASSES[currentState];
     const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col`, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Text_default,
         {

package/dist/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  TextareaHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  FocusEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-sm', // 96px height, 14px font\n    textSize: 'sm' as const,\n  },\n  medium: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-base', // 96px height, 16px font\n    textSize: 'md' as const,\n  },\n  large: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-lg', // 96px height, 18px font\n    textSize: 'lg' as const,\n  },\n  extraLarge: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-xl', // 96px height, 20px font\n    textSize: 'xl' as const,\n  },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n  'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    base: 'border-border-300 bg-background text-text-600',\n    hover: 'hover:border-border-400',\n    focus: 'focus:border-border-500',\n  },\n  hovered: {\n    base: 'border-border-400 bg-background text-text-600',\n    hover: '',\n    focus: 'focus:border-border-500',\n  },\n  focused: {\n    base: 'border-2 border-primary-950 bg-background text-text-900',\n    hover: '',\n    focus: '',\n  },\n  invalid: {\n    base: 'border-2 border-red-700 bg-white text-gray-800',\n    hover: 'hover:border-red-700',\n    focus: 'focus:border-red-700',\n  },\n  disabled: {\n    base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n    hover: '',\n    focus: '',\n  },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n  /** Label text to display above the textarea */\n  label?: ReactNode;\n  /** Size variant of the textarea */\n  size?: TextAreaSize;\n  /** Visual state of the textarea */\n  state?: TextAreaState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperMessage?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperMessage,\n      className = '',\n      labelClassName = '',\n      disabled,\n      id,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `textarea-${generatedId}`;\n\n    // Internal state for focus tracking\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event);\n    };\n\n    // Handle focus events\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(true);\n      props.onFocus?.(event);\n    };\n\n    // Handle blur events\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(false);\n      props.onBlur?.(event);\n    };\n\n    // Determine current state based on props and focus\n    let currentState = disabled ? 'disabled' : state;\n\n    // Override state based on focus\n    if (\n      isFocused &&\n      currentState !== 'invalid' &&\n      currentState !== 'disabled'\n    ) {\n      currentState = 'focused';\n    }\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Get styling classes\n    const stateClasses = STATE_CLASSES[currentState];\n\n    // Get final textarea classes\n    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n    return (\n      <div className={`flex flex-col ${sizeClasses.container}`}>\n        {/* Label */}\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={inputId}\n            size={sizeClasses.textSize}\n            weight=\"medium\"\n            color=\"text-text-950\"\n            className={`mb-1.5 ${labelClassName}`}\n          >\n            {label}\n          </Text>\n        )}\n\n        {/* Textarea */}\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className={textareaClasses}\n          placeholder={placeholder}\n          {...props}\n        />\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperMessage && !errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n            {helperMessage}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  TextareaHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  FocusEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n  small: {\n    textarea: 'h-24 text-sm', // 96px height, 14px font\n    textSize: 'sm' as const,\n  },\n  medium: {\n    textarea: 'h-24 text-base', // 96px height, 16px font\n    textSize: 'md' as const,\n  },\n  large: {\n    textarea: 'h-24 text-lg', // 96px height, 18px font\n    textSize: 'lg' as const,\n  },\n  extraLarge: {\n    textarea: 'h-24 text-xl', // 96px height, 20px font\n    textSize: 'xl' as const,\n  },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n  'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    base: 'border-border-300 bg-background text-text-600',\n    hover: 'hover:border-border-400',\n    focus: 'focus:border-border-500',\n  },\n  hovered: {\n    base: 'border-border-400 bg-background text-text-600',\n    hover: '',\n    focus: 'focus:border-border-500',\n  },\n  focused: {\n    base: 'border-2 border-primary-950 bg-background text-text-900',\n    hover: '',\n    focus: '',\n  },\n  invalid: {\n    base: 'border-2 border-red-700 bg-white text-gray-800',\n    hover: 'hover:border-red-700',\n    focus: 'focus:border-red-700',\n  },\n  disabled: {\n    base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n    hover: '',\n    focus: '',\n  },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n  /** Label text to display above the textarea */\n  label?: ReactNode;\n  /** Size variant of the textarea */\n  size?: TextAreaSize;\n  /** Visual state of the textarea */\n  state?: TextAreaState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperMessage?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperMessage,\n      className = '',\n      labelClassName = '',\n      disabled,\n      id,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `textarea-${generatedId}`;\n\n    // Internal state for focus tracking\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event);\n    };\n\n    // Handle focus events\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(true);\n      props.onFocus?.(event);\n    };\n\n    // Handle blur events\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(false);\n      props.onBlur?.(event);\n    };\n\n    // Determine current state based on props and focus\n    let currentState = disabled ? 'disabled' : state;\n\n    // Override state based on focus\n    if (\n      isFocused &&\n      currentState !== 'invalid' &&\n      currentState !== 'disabled'\n    ) {\n      currentState = 'focused';\n    }\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Get styling classes\n    const stateClasses = STATE_CLASSES[currentState];\n\n    // Get final textarea classes\n    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n    return (\n      <div className={`flex flex-col`}>\n        {/* Label */}\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={inputId}\n            size={sizeClasses.textSize}\n            weight=\"medium\"\n            color=\"text-text-950\"\n            className={`mb-1.5 ${labelClassName}`}\n          >\n            {label}\n          </Text>\n        )}\n\n        {/* Textarea */}\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className={textareaClasses}\n          placeholder={placeholder}\n          {...props}\n        />\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperMessage && !errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n            {helperMessage}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/TextArea/index.mjs

@@ -60,29 +60,21 @@ var Text_default = Text;
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   small: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-sm",
     // 96px height, 14px font
     textSize: "sm"
   },
   medium: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-base",
     // 96px height, 16px font
     textSize: "md"
   },
   large: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-lg",
     // 96px height, 18px font
     textSize: "lg"
   },
   extraLarge: {
-    container: "w-72",
-    // 288px width
     textarea: "h-24 text-xl",
     // 96px height, 20px font
     textSize: "xl"
@@ -152,7 +144,7 @@ var TextArea = forwardRef(
     const sizeClasses = SIZE_CLASSES[size];
     const stateClasses = STATE_CLASSES[currentState];
     const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
-    return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+    return /* @__PURE__ */ jsxs("div", { className: `flex flex-col`, children: [
       label && /* @__PURE__ */ jsx2(
         Text_default,
         {

package/dist/TextArea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  TextareaHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  FocusEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-sm', // 96px height, 14px font\n    textSize: 'sm' as const,\n  },\n  medium: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-base', // 96px height, 16px font\n    textSize: 'md' as const,\n  },\n  large: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-lg', // 96px height, 18px font\n    textSize: 'lg' as const,\n  },\n  extraLarge: {\n    container: 'w-72', // 288px width\n    textarea: 'h-24 text-xl', // 96px height, 20px font\n    textSize: 'xl' as const,\n  },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n  'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    base: 'border-border-300 bg-background text-text-600',\n    hover: 'hover:border-border-400',\n    focus: 'focus:border-border-500',\n  },\n  hovered: {\n    base: 'border-border-400 bg-background text-text-600',\n    hover: '',\n    focus: 'focus:border-border-500',\n  },\n  focused: {\n    base: 'border-2 border-primary-950 bg-background text-text-900',\n    hover: '',\n    focus: '',\n  },\n  invalid: {\n    base: 'border-2 border-red-700 bg-white text-gray-800',\n    hover: 'hover:border-red-700',\n    focus: 'focus:border-red-700',\n  },\n  disabled: {\n    base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n    hover: '',\n    focus: '',\n  },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n  /** Label text to display above the textarea */\n  label?: ReactNode;\n  /** Size variant of the textarea */\n  size?: TextAreaSize;\n  /** Visual state of the textarea */\n  state?: TextAreaState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperMessage?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperMessage,\n      className = '',\n      labelClassName = '',\n      disabled,\n      id,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `textarea-${generatedId}`;\n\n    // Internal state for focus tracking\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event);\n    };\n\n    // Handle focus events\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(true);\n      props.onFocus?.(event);\n    };\n\n    // Handle blur events\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(false);\n      props.onBlur?.(event);\n    };\n\n    // Determine current state based on props and focus\n    let currentState = disabled ? 'disabled' : state;\n\n    // Override state based on focus\n    if (\n      isFocused &&\n      currentState !== 'invalid' &&\n      currentState !== 'disabled'\n    ) {\n      currentState = 'focused';\n    }\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Get styling classes\n    const stateClasses = STATE_CLASSES[currentState];\n\n    // Get final textarea classes\n    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n    return (\n      <div className={`flex flex-col ${sizeClasses.container}`}>\n        {/* Label */}\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={inputId}\n            size={sizeClasses.textSize}\n            weight=\"medium\"\n            color=\"text-text-950\"\n            className={`mb-1.5 ${labelClassName}`}\n          >\n            {label}\n          </Text>\n        )}\n\n        {/* Textarea */}\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className={textareaClasses}\n          placeholder={placeholder}\n          {...props}\n        />\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperMessage && !errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n            {helperMessage}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  TextareaHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n  FocusEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n  small: {\n    textarea: 'h-24 text-sm', // 96px height, 14px font\n    textSize: 'sm' as const,\n  },\n  medium: {\n    textarea: 'h-24 text-base', // 96px height, 16px font\n    textSize: 'md' as const,\n  },\n  large: {\n    textarea: 'h-24 text-lg', // 96px height, 18px font\n    textSize: 'lg' as const,\n  },\n  extraLarge: {\n    textarea: 'h-24 text-xl', // 96px height, 20px font\n    textSize: 'xl' as const,\n  },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n  'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    base: 'border-border-300 bg-background text-text-600',\n    hover: 'hover:border-border-400',\n    focus: 'focus:border-border-500',\n  },\n  hovered: {\n    base: 'border-border-400 bg-background text-text-600',\n    hover: '',\n    focus: 'focus:border-border-500',\n  },\n  focused: {\n    base: 'border-2 border-primary-950 bg-background text-text-900',\n    hover: '',\n    focus: '',\n  },\n  invalid: {\n    base: 'border-2 border-red-700 bg-white text-gray-800',\n    hover: 'hover:border-red-700',\n    focus: 'focus:border-red-700',\n  },\n  disabled: {\n    base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n    hover: '',\n    focus: '',\n  },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n  /** Label text to display above the textarea */\n  label?: ReactNode;\n  /** Size variant of the textarea */\n  size?: TextAreaSize;\n  /** Visual state of the textarea */\n  state?: TextAreaState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperMessage?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperMessage,\n      className = '',\n      labelClassName = '',\n      disabled,\n      id,\n      onChange,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `textarea-${generatedId}`;\n\n    // Internal state for focus tracking\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event);\n    };\n\n    // Handle focus events\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(true);\n      props.onFocus?.(event);\n    };\n\n    // Handle blur events\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      setIsFocused(false);\n      props.onBlur?.(event);\n    };\n\n    // Determine current state based on props and focus\n    let currentState = disabled ? 'disabled' : state;\n\n    // Override state based on focus\n    if (\n      isFocused &&\n      currentState !== 'invalid' &&\n      currentState !== 'disabled'\n    ) {\n      currentState = 'focused';\n    }\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Get styling classes\n    const stateClasses = STATE_CLASSES[currentState];\n\n    // Get final textarea classes\n    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n    return (\n      <div className={`flex flex-col`}>\n        {/* Label */}\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={inputId}\n            size={sizeClasses.textSize}\n            weight=\"medium\"\n            color=\"text-text-950\"\n            className={`mb-1.5 ${labelClassName}`}\n          >\n            {label}\n          </Text>\n        )}\n\n        {/* Textarea */}\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className={textareaClasses}\n          placeholder={placeholder}\n          {...props}\n        />\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperMessage && !errorMessage && (\n          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n            {helperMessage}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx"]}

package/dist/index.css

@@ -390,6 +390,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -546,6 +549,12 @@
   .box-border {
     box-sizing: border-box;
   }
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
   .block {
     display: block;
   }
@@ -641,9 +650,6 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-20\.5 {
-    height: calc(var(--spacing) * 20.5);
-  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -698,12 +704,18 @@
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
+  .max-h-none {
+    max-height: none;
+  }
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
   .min-h-20 {
     min-height: calc(var(--spacing) * 20);
   }
+  .min-h-20\.5 {
+    min-height: calc(var(--spacing) * 20.5);
+  }
   .min-h-\[50px\] {
     min-height: 50px;
   }
@@ -755,9 +767,6 @@
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
   .w-\[1em\] {
     width: 1em;
   }
@@ -797,6 +806,9 @@
   .w-\[384px\] {
     width: 384px;
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -833,6 +845,9 @@
   .max-w-\[360px\] {
     max-width: 360px;
   }
+  .max-w-\[380px\] {
+    max-width: 380px;
+  }
   .max-w-\[390px\] {
     max-width: 390px;
   }
@@ -872,6 +887,9 @@
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -1281,6 +1299,9 @@
   .bg-background-500 {
     background-color: var(--color-background-500);
   }
+  .bg-background-950 {
+    background-color: var(--color-background-950);
+  }
   .bg-background-muted {
     background-color: var(--color-background-muted);
   }