@sikka/hawa 0.30.10-next → 0.30.12-next

package/dist/destroyableCard/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/destroyableCard/DestroyableCard.tsx","../../util/index.ts","../../elements/card/Card.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from \"react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Card, CardContent } from \"../card\";\n\ntype DestroyableCard = {\n  position?: \"bottom-right\" | \"bottom-left\";\n  direction?: DirectionType;\n  fixed?: boolean;\n  children?: any;\n};\nexport const DestroyableCard: FC<DestroyableCard> = ({\n  position = \"bottom-right\",\n  fixed,\n  direction,\n  ...props\n}) => {\n  const [closed, setClosed] = useState(false);\n  const popUpRef = useRef<HTMLDivElement>(null);\n\n  const boxPosition = {\n    \"bottom-right\": \"hawa-right-4 hawa-bottom-4\",\n    \"bottom-left\": \"hawa-left-4 hawa-bottom-4\"\n  };\n\n  return (\n    <div\n      className={cn(\n        \"hawa-transition-all\",\n        closed ? \"hawa-opacity-0\" : \"hawa-opacity-100\"\n      )}\n      ref={popUpRef}\n    >\n      <Card\n        className={cn(\n          fixed ? \"hawa-fixed\" : \"hawa-relative\",\n          fixed && position && boxPosition[position]\n        )}\n        dir={direction}\n      >\n        <button\n          type=\"button\"\n          className={cn(\n            direction === \"rtl\" ? \"hawa-left-2\" : \"hawa-right-2\",\n            \"hawa-absolute hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white\"\n          )}\n          data-dismiss-target=\"#destroyable-card\"\n          aria-label=\"Close\"\n          onClick={() => {\n            setClosed(true);\n            setTimeout(() => {\n              if (popUpRef?.current) {\n                popUpRef?.current.removeChild(popUpRef?.current.children[0]);\n              }\n            }, 200);\n          }}\n        >\n          <svg\n            aria-hidden=\"true\"\n            className=\"hawa-h-5 hawa-w-5\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            ></path>\n          </svg>\n        </button>\n        <CardContent headless>{props.children}</CardContent>\n      </Card>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  clickable?: boolean;\n  variant?: \"default\" | \"neoBrutalism\";\n}\n\ntype CardContentProps = {\n  headless?: boolean;\n  noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant = \"default\", clickable = false, ...props }, ref) => {\n    let variantStyles = {\n      default: cn(\n        \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n        clickable &&\n          \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\"\n      ),\n      neoBrutalism: cn(\n        \"neo-brutalism\",\n        // \"hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n        clickable &&\n          \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\"\n      )\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(className, variantStyles[variant])}\n        {...props}\n      />\n    );\n  }\n);\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n      className\n    )}\n    {...props}\n  />\n));\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"hawa-text-2xl hawa-font-semibold \", className)}\n    {...props}\n  />\n));\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n    {...props}\n  />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ headless, noPadding, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n        headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n      \"hawa-flex hawa-items-center hawa-pt-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n  CardDescription,\n  CardContent,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  Card\n};\n"],"mappings":"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","names":["React","React"]}
+{"version":3,"sources":["../../elements/destroyableCard/DestroyableCard.tsx","../../util/index.ts","../../elements/card/Card.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from \"react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Card, CardContent } from \"../card\";\n\ntype DestroyableCard = {\n  position?: \"bottom-right\" | \"bottom-left\";\n  direction?: DirectionType;\n  fixed?: boolean;\n  children?: any;\n};\nexport const DestroyableCard: FC<DestroyableCard> = ({\n  position = \"bottom-right\",\n  fixed,\n  direction,\n  ...props\n}) => {\n  const [closed, setClosed] = useState(false);\n  const popUpRef = useRef<HTMLDivElement>(null);\n\n  const boxPosition = {\n    \"bottom-right\": \"hawa-right-4 hawa-bottom-4\",\n    \"bottom-left\": \"hawa-left-4 hawa-bottom-4\"\n  };\n\n  return (\n    <div\n      className={cn(\n        \"hawa-transition-all\",\n        closed ? \"hawa-opacity-0\" : \"hawa-opacity-100\"\n      )}\n      ref={popUpRef}\n    >\n      <Card\n        className={cn(\n          fixed ? \"hawa-fixed\" : \"hawa-relative\",\n          fixed && position && boxPosition[position]\n        )}\n        dir={direction}\n      >\n        <button\n          type=\"button\"\n          className={cn(\n            direction === \"rtl\" ? \"hawa-left-2\" : \"hawa-right-2\",\n            \"hawa-absolute hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white\"\n          )}\n          data-dismiss-target=\"#destroyable-card\"\n          aria-label=\"Close\"\n          onClick={() => {\n            setClosed(true);\n            setTimeout(() => {\n              if (popUpRef?.current) {\n                popUpRef?.current.removeChild(popUpRef?.current.children[0]);\n              }\n            }, 200);\n          }}\n        >\n          <svg\n            aria-hidden=\"true\"\n            className=\"hawa-h-5 hawa-w-5\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            ></path>\n          </svg>\n        </button>\n        <CardContent headless>{props.children}</CardContent>\n      </Card>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  clickable?: boolean;\n  variant?: \"default\" | \"neoBrutalism\";\n}\n\ntype CardContentProps = {\n  headless?: boolean;\n  noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant = \"default\", clickable = false, ...props }, ref) => {\n    let variantStyles = {\n      default: cn(\n        \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n        clickable &&\n          \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n      ),\n      neoBrutalism: cn(\n        \"neo-brutalism\",\n        // \"hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n        clickable &&\n          \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n      ),\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(className, variantStyles[variant])}\n        {...props}\n      />\n    );\n  },\n);\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"hawa-text-2xl hawa-font-semibold \", className)}\n    {...props}\n  />\n));\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n    {...props}\n  />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ headless, noPadding, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n        headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n      \"hawa-flex hawa-items-center hawa-pt-0\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n  CardDescription,\n  CardContent,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  Card,\n};\n"],"mappings":"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","names":["React","React"]}

package/dist/elements/index.d.mts

@@ -357,21 +357,21 @@ type BackToTopTypes = {
 };
 declare const BackToTop: FC<BackToTopTypes>;
 
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     clickable?: boolean;
     condensed?: boolean;
 }
-declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
     enablePadding?: boolean;
     padding?: "condensed" | "default" | "noPadding";
 }
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 

package/dist/elements/index.d.ts

@@ -357,21 +357,21 @@ type BackToTopTypes = {
 };
 declare const BackToTop: FC<BackToTopTypes>;
 
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     clickable?: boolean;
     condensed?: boolean;
 }
-declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
     enablePadding?: boolean;
     padding?: "condensed" | "default" | "noPadding";
 }
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 

package/dist/elements/index.js

@@ -2660,7 +2660,6 @@ var Table = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 )));
-Table.displayName = "Table";
 var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "thead",
   {
@@ -2669,7 +2668,6 @@ var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-TableHeader.displayName = "TableHeader";
 var TableHead = React21.forwardRef(
   ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React21.createElement(
     "th",
@@ -2689,9 +2687,7 @@ var TableHead = React21.forwardRef(
     }
   )
 );
-TableHead.displayName = "TableHead";
 var TableBody = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
-TableBody.displayName = "TableBody";
 var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "tfoot",
   {
@@ -2703,7 +2699,6 @@ var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-TableFooter.displayName = "TableFooter";
 var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "tr",
   {
@@ -2717,7 +2712,6 @@ var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ...props
   }
 ));
-TableRow.displayName = "TableRow";
 var TableCell = React21.forwardRef(
   ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
     let paddingStyles = {
@@ -2746,7 +2740,6 @@ var TableCell = React21.forwardRef(
     );
   }
 );
-TableCell.displayName = "TableCell";
 var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "caption",
   {
@@ -2758,6 +2751,13 @@ var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
     ...props
   }
 ));
+Table.displayName = "Table";
+TableRow.displayName = "TableRow";
+TableBody.displayName = "TableBody";
+TableHead.displayName = "TableHead";
+TableCell.displayName = "TableCell";
+TableFooter.displayName = "TableFooter";
+TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
@@ -2810,6 +2810,9 @@ var DataTable = ({
       rowSelection,
       expanded
     }
+    // defaultColumn: {
+    //   maxSize: 200
+    // }
   });
   const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
   const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
@@ -2883,7 +2886,10 @@ var DataTable = ({
           dir: props.direction,
           condensed: props.condensed,
           clickable: Boolean(isSortable),
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : (0, import_react_table.flexRender)(
           header.column.columnDef.header,
@@ -2901,6 +2907,9 @@ var DataTable = ({
         return /* @__PURE__ */ React22.createElement(
           TableCell,
           {
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
             key: cell.id
@@ -7150,7 +7159,10 @@ var SimpleTable = ({
         {
           condensed: props.condensed,
           dir: props.direction,
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
           header.column.columnDef.header,
@@ -7170,6 +7182,9 @@ var SimpleTable = ({
           {
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             key: cell.id
           },
           (0, import_react_table2.flexRender)(

package/dist/elements/index.mjs

@@ -803,7 +803,6 @@ var Table = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 )));
-Table.displayName = "Table";
 var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
   "thead",
   {
@@ -812,7 +811,6 @@ var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-TableHeader.displayName = "TableHeader";
 var TableHead = React9.forwardRef(
   ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React9.createElement(
     "th",
@@ -832,9 +830,7 @@ var TableHead = React9.forwardRef(
     }
   )
 );
-TableHead.displayName = "TableHead";
 var TableBody = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
-TableBody.displayName = "TableBody";
 var TableFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
   "tfoot",
   {
@@ -846,7 +842,6 @@ var TableFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-TableFooter.displayName = "TableFooter";
 var TableRow = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
   "tr",
   {
@@ -860,7 +855,6 @@ var TableRow = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ...props
   }
 ));
-TableRow.displayName = "TableRow";
 var TableCell = React9.forwardRef(
   ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
     let paddingStyles = {
@@ -889,7 +883,6 @@ var TableCell = React9.forwardRef(
     );
   }
 );
-TableCell.displayName = "TableCell";
 var TableCaption = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
   "caption",
   {
@@ -901,6 +894,13 @@ var TableCaption = React9.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
+Table.displayName = "Table";
+TableRow.displayName = "TableRow";
+TableBody.displayName = "TableBody";
+TableHead.displayName = "TableHead";
+TableCell.displayName = "TableCell";
+TableFooter.displayName = "TableFooter";
+TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
@@ -953,6 +953,9 @@ var DataTable = ({
       rowSelection,
       expanded
     }
+    // defaultColumn: {
+    //   maxSize: 200
+    // }
   });
   const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
   const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
@@ -1026,7 +1029,10 @@ var DataTable = ({
           dir: props.direction,
           condensed: props.condensed,
           clickable: Boolean(isSortable),
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : flexRender(
           header.column.columnDef.header,
@@ -1044,6 +1050,9 @@ var DataTable = ({
         return /* @__PURE__ */ React10.createElement(
           TableCell,
           {
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
             key: cell.id
@@ -2550,7 +2559,10 @@ var SimpleTable = ({
         {
           condensed: props.condensed,
           dir: props.direction,
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : flexRender2(
           header.column.columnDef.header,
@@ -2570,6 +2582,9 @@ var SimpleTable = ({
           {
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             key: cell.id
           },
           flexRender2(

package/dist/index.d.mts

@@ -520,21 +520,21 @@ type RadioTypes = {
 };
 declare const Radio: FC<RadioTypes>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 interface TableHeadProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
     clickable?: boolean;
     condensed?: boolean;
 }
-declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
-declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
     enablePadding?: boolean;
     padding?: "condensed" | "default" | "noPadding";
 }
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 

package/dist/index.d.ts

@@ -520,21 +520,21 @@ type RadioTypes = {
 };
 declare const Radio: FC<RadioTypes>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 interface TableHeadProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
     clickable?: boolean;
     condensed?: boolean;
 }
-declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
-declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
     enablePadding?: boolean;
     padding?: "condensed" | "default" | "noPadding";
 }
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 

package/dist/index.js

@@ -2727,7 +2727,6 @@ var Table = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 )));
-Table.displayName = "Table";
 var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "thead",
   {
@@ -2736,7 +2735,6 @@ var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-TableHeader.displayName = "TableHeader";
 var TableHead = React21.forwardRef(
   ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React21.createElement(
     "th",
@@ -2756,9 +2754,7 @@ var TableHead = React21.forwardRef(
     }
   )
 );
-TableHead.displayName = "TableHead";
 var TableBody = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
-TableBody.displayName = "TableBody";
 var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "tfoot",
   {
@@ -2770,7 +2766,6 @@ var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-TableFooter.displayName = "TableFooter";
 var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "tr",
   {
@@ -2784,7 +2779,6 @@ var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ...props
   }
 ));
-TableRow.displayName = "TableRow";
 var TableCell = React21.forwardRef(
   ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
     let paddingStyles = {
@@ -2813,7 +2807,6 @@ var TableCell = React21.forwardRef(
     );
   }
 );
-TableCell.displayName = "TableCell";
 var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
   "caption",
   {
@@ -2825,6 +2818,13 @@ var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
     ...props
   }
 ));
+Table.displayName = "Table";
+TableRow.displayName = "TableRow";
+TableBody.displayName = "TableBody";
+TableHead.displayName = "TableHead";
+TableCell.displayName = "TableCell";
+TableFooter.displayName = "TableFooter";
+TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
@@ -2877,6 +2877,9 @@ var DataTable = ({
       rowSelection,
       expanded
     }
+    // defaultColumn: {
+    //   maxSize: 200
+    // }
   });
   const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
   const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
@@ -2950,7 +2953,10 @@ var DataTable = ({
           dir: props.direction,
           condensed: props.condensed,
           clickable: Boolean(isSortable),
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : (0, import_react_table.flexRender)(
           header.column.columnDef.header,
@@ -2968,6 +2974,9 @@ var DataTable = ({
         return /* @__PURE__ */ React22.createElement(
           TableCell,
           {
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
             key: cell.id
@@ -7307,7 +7316,10 @@ var SimpleTable = ({
         {
           condensed: props.condensed,
           dir: props.direction,
-          key: header.id
+          key: header.id,
+          style: {
+            maxWidth: header.column.columnDef.maxSize
+          }
         },
         header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
           header.column.columnDef.header,
@@ -7327,6 +7339,9 @@ var SimpleTable = ({
           {
             dir: props.direction,
             padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
+            style: {
+              maxWidth: cell.column.columnDef.maxSize
+            },
             key: cell.id
           },
           (0, import_react_table2.flexRender)(
@@ -10236,7 +10251,7 @@ var RegisterForm = ({
           (texts == null ? void 0 : texts.registerText) || "Register"
         ),
         props.additionalButtons
-      )), /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center  hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ import_react48.default.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ import_react48.default.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
+      )), props.onRouteToLogin && /* @__PURE__ */ import_react48.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center  hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ import_react48.default.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ import_react48.default.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
       props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react48.default.createElement(
         CardFooter,
         {