@jenesei-software/jenesei-kit-react 2.3.0 → 2.3.2

package/build/{typography-BKp4OAQI.cjs.map → typography-DzYrzZZb.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"typography-BKp4OAQI.cjs","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n  if (props.isDisabled)\n    return (\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n      >\n        {props.children}\n      </div>\n    );\n\n  return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n  const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n    placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n    offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n    mode: props.mode ?? 'hover',\n    isClickOutside: props.isClickOutside ?? true,\n    isFloatingHover: props.isFloatingHover ?? true,\n    isWidthAsContent: props.isWidthAsContent ?? false,\n    hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n    hoverOffset: props.hoverOffset ?? undefined,\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.tooltip.padding] =\n      `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n    return { className, style };\n  }, [props.size, props.classNamePopover, props.stylePopover]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  return (\n    <>\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n        ref={refReference as Ref<HTMLDivElement | null>}\n      >\n        {props.children}\n      </div>\n      <Popover\n        className={className}\n        style={style}\n        size={props.size}\n        isOpen={isOpen}\n        genre={props.genre}\n        floatingStyles={floatingStyles}\n        ref={refFloating}\n        maxHeight={props.maxHeight}\n        maxWidth={props.maxWidth}\n        context={context}\n        refArrow={refArrow}\n        placement={placement}\n        isArrow\n        isCenteredArrow={props.isCenteredArrow}\n      >\n        <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n          {props.content}\n        </Typography>\n      </Popover>\n    </>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n  const { className, style } = useTypographyStyles({\n    sx: props?.sx ?? {},\n    className: props.className,\n    style: props.style,\n  });\n\n  const Component = useMemo(() => {\n    const Component: ElementType = props.isAnchor\n      ? 'a'\n      : props.isParagraph\n        ? 'p'\n        : props.isSpan\n          ? 'span'\n          : props.sx && 'variant' in props.sx\n            ? props.sx.variant === 'headline'\n              ? 'h1'\n              : props.sx.variant === 'sub-headline'\n                ? 'h2'\n                : props.sx.variant === 'title-1'\n                  ? 'h3'\n                  : props.sx.variant === 'title-2'\n                    ? 'h4'\n                    : props.sx.variant === 'title-3'\n                      ? 'h5'\n                      : props.sx.variant === 'title-4'\n                        ? 'h6'\n                        : 'span'\n            : 'span';\n    return Component;\n  }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n  return (\n    <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n      {props.children}\n    </Component>\n  );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n  const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n    isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n    dependencies: [props.children],\n  });\n  return (\n    <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n      <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n        {props.children}\n      </Typography>\n    </Tooltip>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"typography-DzYrzZZb.cjs","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n  if (props.isDisabled)\n    return (\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n      >\n        {props.children}\n      </div>\n    );\n\n  return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n  const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n    placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n    offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n    mode: props.mode ?? 'hover',\n    isClickOutside: props.isClickOutside ?? true,\n    isFloatingHover: props.isFloatingHover ?? true,\n    isWidthAsContent: props.isWidthAsContent ?? false,\n    hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n    hoverOffset: props.hoverOffset ?? undefined,\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.tooltip.padding] =\n      `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n    return { className, style };\n  }, [props.size, props.classNamePopover, props.stylePopover]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  return (\n    <>\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n        ref={refReference as Ref<HTMLDivElement | null>}\n      >\n        {props.children}\n      </div>\n      <Popover\n        className={className}\n        style={style}\n        size={props.size}\n        isOpen={isOpen}\n        genre={props.genre}\n        floatingStyles={floatingStyles}\n        ref={refFloating}\n        maxHeight={props.maxHeight}\n        maxWidth={props.maxWidth}\n        context={context}\n        refArrow={refArrow}\n        placement={placement}\n        isArrow\n        isCenteredArrow={props.isCenteredArrow}\n      >\n        <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n          {props.content}\n        </Typography>\n      </Popover>\n    </>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n  const { className, style } = useTypographyStyles({\n    sx: props?.sx ?? {},\n    className: props.className,\n    style: props.style,\n  });\n\n  const Component = useMemo(() => {\n    const Component: ElementType = props.isAnchor\n      ? 'a'\n      : props.isParagraph\n        ? 'p'\n        : props.isSpan\n          ? 'span'\n          : props.sx && 'variant' in props.sx\n            ? props.sx.variant === 'headline'\n              ? 'h1'\n              : props.sx.variant === 'sub-headline'\n                ? 'h2'\n                : props.sx.variant === 'title-1'\n                  ? 'h3'\n                  : props.sx.variant === 'title-2'\n                    ? 'h4'\n                    : props.sx.variant === 'title-3'\n                      ? 'h5'\n                      : props.sx.variant === 'title-4'\n                        ? 'h6'\n                        : 'span'\n            : 'span';\n    return Component;\n  }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n  return (\n    <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n      {props.children}\n    </Component>\n  );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n  const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n    isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n    dependencies: [props.children],\n  });\n  return (\n    <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n      <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n        {props.children}\n      </Typography>\n    </Tooltip>\n  );\n});\n"],"mappings":"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"}

package/build/{typography-07KEDl9_.js → typography-Tebu6c9L.js}

@@ -1,7 +1,7 @@
 import { i as c, n as l, r as s, t as z } from "./utils-BRgi6734.js";
 import { n as P, t as r } from "./functions-DzX-pTN8.js";
 import { useTypographyStyles as d } from "./hooks-use-typography-styles.es.js";
-import { n as O, t as W } from "./popover-DHWcQVp1.js";
+import { n as O, t as W } from "./popover--NOw9qfd.js";
 import { useOverflowing as b } from "./hooks-use-overflowing.es.js";
 import { Fragment as _, jsx as t, jsxs as w } from "react/jsx-runtime";
 import { memo as o, useMemo as h } from "react";
@@ -113,4 +113,4 @@ export {
   y as t
 };
 
-//# sourceMappingURL=typography-07KEDl9_.js.map
+//# sourceMappingURL=typography-Tebu6c9L.js.map

package/build/{typography-07KEDl9_.js.map → typography-Tebu6c9L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"typography-07KEDl9_.js","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n  if (props.isDisabled)\n    return (\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n      >\n        {props.children}\n      </div>\n    );\n\n  return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n  const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n    placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n    offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n    mode: props.mode ?? 'hover',\n    isClickOutside: props.isClickOutside ?? true,\n    isFloatingHover: props.isFloatingHover ?? true,\n    isWidthAsContent: props.isWidthAsContent ?? false,\n    hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n    hoverOffset: props.hoverOffset ?? undefined,\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.tooltip.padding] =\n      `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n    return { className, style };\n  }, [props.size, props.classNamePopover, props.stylePopover]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  return (\n    <>\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n        ref={refReference as Ref<HTMLDivElement | null>}\n      >\n        {props.children}\n      </div>\n      <Popover\n        className={className}\n        style={style}\n        size={props.size}\n        isOpen={isOpen}\n        genre={props.genre}\n        floatingStyles={floatingStyles}\n        ref={refFloating}\n        maxHeight={props.maxHeight}\n        maxWidth={props.maxWidth}\n        context={context}\n        refArrow={refArrow}\n        placement={placement}\n        isArrow\n        isCenteredArrow={props.isCenteredArrow}\n      >\n        <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n          {props.content}\n        </Typography>\n      </Popover>\n    </>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n  const { className, style } = useTypographyStyles({\n    sx: props?.sx ?? {},\n    className: props.className,\n    style: props.style,\n  });\n\n  const Component = useMemo(() => {\n    const Component: ElementType = props.isAnchor\n      ? 'a'\n      : props.isParagraph\n        ? 'p'\n        : props.isSpan\n          ? 'span'\n          : props.sx && 'variant' in props.sx\n            ? props.sx.variant === 'headline'\n              ? 'h1'\n              : props.sx.variant === 'sub-headline'\n                ? 'h2'\n                : props.sx.variant === 'title-1'\n                  ? 'h3'\n                  : props.sx.variant === 'title-2'\n                    ? 'h4'\n                    : props.sx.variant === 'title-3'\n                      ? 'h5'\n                      : props.sx.variant === 'title-4'\n                        ? 'h6'\n                        : 'span'\n            : 'span';\n    return Component;\n  }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n  return (\n    <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n      {props.children}\n    </Component>\n  );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n  const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n    isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n    dependencies: [props.children],\n  });\n  return (\n    <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n      <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n        {props.children}\n      </Typography>\n    </Tooltip>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"typography-Tebu6c9L.js","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n  if (props.isDisabled)\n    return (\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n      >\n        {props.children}\n      </div>\n    );\n\n  return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n  const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n    placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n    offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n    mode: props.mode ?? 'hover',\n    isClickOutside: props.isClickOutside ?? true,\n    isFloatingHover: props.isFloatingHover ?? true,\n    isWidthAsContent: props.isWidthAsContent ?? false,\n    hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n    hoverOffset: props.hoverOffset ?? undefined,\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.tooltip.padding] =\n      `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n    return { className, style };\n  }, [props.size, props.classNamePopover, props.stylePopover]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  return (\n    <>\n      <div\n        className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n        style={props.styleWrapper}\n        ref={refReference as Ref<HTMLDivElement | null>}\n      >\n        {props.children}\n      </div>\n      <Popover\n        className={className}\n        style={style}\n        size={props.size}\n        isOpen={isOpen}\n        genre={props.genre}\n        floatingStyles={floatingStyles}\n        ref={refFloating}\n        maxHeight={props.maxHeight}\n        maxWidth={props.maxWidth}\n        context={context}\n        refArrow={refArrow}\n        placement={placement}\n        isArrow\n        isCenteredArrow={props.isCenteredArrow}\n      >\n        <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n          {props.content}\n        </Typography>\n      </Popover>\n    </>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n  const { className, style } = useTypographyStyles({\n    sx: props?.sx ?? {},\n    className: props.className,\n    style: props.style,\n  });\n\n  const Component = useMemo(() => {\n    const Component: ElementType = props.isAnchor\n      ? 'a'\n      : props.isParagraph\n        ? 'p'\n        : props.isSpan\n          ? 'span'\n          : props.sx && 'variant' in props.sx\n            ? props.sx.variant === 'headline'\n              ? 'h1'\n              : props.sx.variant === 'sub-headline'\n                ? 'h2'\n                : props.sx.variant === 'title-1'\n                  ? 'h3'\n                  : props.sx.variant === 'title-2'\n                    ? 'h4'\n                    : props.sx.variant === 'title-3'\n                      ? 'h5'\n                      : props.sx.variant === 'title-4'\n                        ? 'h6'\n                        : 'span'\n            : 'span';\n    return Component;\n  }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n  return (\n    <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n      {props.children}\n    </Component>\n  );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n  const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n    isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n    dependencies: [props.children],\n  });\n  return (\n    <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n      <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n        {props.children}\n      </Typography>\n    </Tooltip>\n  );\n});\n"],"mappings":"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"}

package/package.json

@@ -34,7 +34,7 @@
     "storybook": "npm run gen:exports && storybook dev -p 3030"
   },
   "type": "module",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@jenesei-software/jenesei-library-log": "^2.0.0",
@@ -231,6 +231,12 @@
       "require": "./build/hooks-use-deep-memo.cjs.js",
       "default": "./build/hooks-use-deep-memo.es.js"
     },
+    "./hooks-use-fps": {
+      "types": "./build/hooks-use-fps.d.ts",
+      "import": "./build/hooks-use-fps.es.js",
+      "require": "./build/hooks-use-fps.cjs.js",
+      "default": "./build/hooks-use-fps.es.js"
+    },
     "./hooks-use-merge-refs": {
       "types": "./build/hooks-use-merge-refs.d.ts",
       "import": "./build/hooks-use-merge-refs.es.js",

package/build/button-C1w25-Hk.js

@@ -1,102 +0,0 @@
-import { i, n as e, r as o, t as C } from "./utils-BRgi6734.js";
-import { n as a, t as l } from "./functions-DzX-pTN8.js";
-import { t as f } from "./icon-D2w7GViT.js";
-import { useMergeRefs as x } from "./hooks-use-merge-refs.es.js";
-import { useTypographyStyles as A } from "./hooks-use-typography-styles.es.js";
-import { jsx as d, jsxs as N } from "react/jsx-runtime";
-import { useCallback as R, useMemo as c, useRef as F } from "react";
-var W = (n) => {
-  const u = c(() => f({
-    icons: (n.icons ?? []).map((s) => ({
-      ...s,
-      style: { color: o.genre.button[n.genre].color.index }
-    })),
-    size: n.size
-  }), [
-    n.icons,
-    n.size,
-    n.genre
-  ]), m = R((s) => {
-    !n.isDisabled && n.onClick && n.onClick(s);
-  }, [n.isDisabled, n.onClick]), b = x([F(null), n.ref]), { className: r, style: g } = A({
-    sx: {
-      variant: C.sizeToController[n.size],
-      isNoUserSelect: !0,
-      ...n?.sxTypography
-    },
-    style: {
-      order: 0,
-      display: "inline-flex"
-    }
-  }), { className: y, style: h } = c(() => {
-    const s = l([
-      e.component.button.root,
-      e.control[n.isDisabled ? "none" : n.control ?? "boxShadow"],
-      e.transition.color,
-      n.isZeroRadius && e.component.button.isZeroRadius,
-      n.isHidden && e.component.button.isHidden,
-      n.isHiddenBorder && e.component.button.isHiddenBorder,
-      n.isFullRadius && e.component.button.isFullRadius,
-      n.isFullSize && e.component.button.isFullSize,
-      n.isWidthAsHeight && e.component.button.isWidthAsHeight,
-      n.isMinWidthAsContent && e.component.button.isMinWidthAsContent,
-      n.isZeroPadding && e.component.button.isZeroPadding,
-      n.isSizeFitContent && e.component.button.isSizeFitContent,
-      n.className
-    ]), t = {};
-    return t[i.component.button.background] = o.genre.button[n.genre].background.index, t[i.component.button.color] = o.genre.button[n.genre].color.index, t[i.component.button.border] = o.genre.button[n.genre].border.index, t[i.component.button.height] = o.size[n.size].height, t[i.component.button.padding] = o.size[n.size].padding, t[i.component.button.radius] = o.size[n.size].radius, t[i.component.button.gap] = `calc(${o.size[n.size].padding} - 2px)`, {
-      className: s,
-      style: a([Object.keys(t).length ? t : void 0, n.style])
-    };
-  }, [
-    n.className,
-    n.style,
-    n.genre,
-    n.isDisabled,
-    n.isFullSize,
-    n.isHidden,
-    n.isHiddenBorder,
-    n.isMinWidthAsContent,
-    n.isFullRadius,
-    n.isWidthAsHeight,
-    n.size,
-    n.isZeroRadius,
-    n.control,
-    n.isZeroPadding,
-    n.isSizeFitContent
-  ]), { className: S, style: z } = c(() => {
-    const s = l([e.component.button.iconGroup, n.isIconGroup && e.component.button.iconGroupIsIconGroup]), t = {};
-    return "iconGroupOrder" in n && (t[i.component.button.iconGroupOrder] = String(n.iconGroupOrder ?? "initial")), {
-      className: s,
-      style: a([Object.keys(t).length ? t : void 0])
-    };
-  }, [n]);
-  return /* @__PURE__ */ N("button", {
-    tabIndex: n.tabIndex,
-    disabled: n.isDisabled,
-    className: y,
-    style: h,
-    onClick: m,
-    onFocus: n.onFocus,
-    onMouseDown: n.onMouseDown,
-    type: n.type ?? "button",
-    ref: b,
-    name: n.name,
-    "aria-label": n.ariaLabel,
-    id: n.id,
-    children: [!n.isOnlyIcon && n.children && /* @__PURE__ */ d("div", {
-      className: r,
-      style: g,
-      children: n.children
-    }), /* @__PURE__ */ d("div", {
-      className: S,
-      style: z,
-      children: u
-    })]
-  });
-};
-export {
-  W as t
-};
-
-//# sourceMappingURL=button-C1w25-Hk.js.map

package/build/button-C1w25-Hk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-C1w25-Hk.js","names":[],"sources":["../src/components/button/component.tsx"],"sourcesContent":["import { getIconComponents } from '@local/components/icon';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IButton } from './component.types';\n\nexport const Button: FC<IButton> = (props) => {\n  const iconComponents = useMemo(\n    () =>\n      getIconComponents({\n        icons: (props.icons ?? []).map((e) => ({\n          ...e,\n          style: { color: CSS_VARS.genre.button[props.genre].color.index },\n        })),\n        size: props.size,\n      }),\n    [props.icons, props.size, props.genre],\n  );\n\n  const handleClick = useCallback<Exclude<IButton['onClick'], undefined>>(\n    (event) => {\n      if (!props.isDisabled && props.onClick) {\n        props.onClick(event);\n      }\n    },\n    [props.isDisabled, props.onClick],\n  );\n\n  const refDefault = useRef<HTMLButtonElement>(null);\n\n  const ref = useMergeRefs([refDefault, props.ref]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isNoUserSelect: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.root,\n      CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n      CSS_CLASS.transition.color,\n      props.isZeroRadius && CSS_CLASS.component.button.isZeroRadius,\n      props.isHidden && CSS_CLASS.component.button.isHidden,\n      props.isHiddenBorder && CSS_CLASS.component.button.isHiddenBorder,\n      props.isFullRadius && CSS_CLASS.component.button.isFullRadius,\n      props.isFullSize && CSS_CLASS.component.button.isFullSize,\n      props.isWidthAsHeight && CSS_CLASS.component.button.isWidthAsHeight,\n      props.isMinWidthAsContent && CSS_CLASS.component.button.isMinWidthAsContent,\n      props.isZeroPadding && CSS_CLASS.component.button.isZeroPadding,\n      props.isSizeFitContent && CSS_CLASS.component.button.isSizeFitContent,\n      props.className,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.button.background] = CSS_VARS.genre.button[props.genre].background.index;\n    vars[CSS_VARS_RAW.component.button.color] = CSS_VARS.genre.button[props.genre].color.index;\n    vars[CSS_VARS_RAW.component.button.border] = CSS_VARS.genre.button[props.genre].border.index;\n\n    vars[CSS_VARS_RAW.component.button.height] = CSS_VARS.size[props.size].height;\n    vars[CSS_VARS_RAW.component.button.padding] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.button.radius] = CSS_VARS.size[props.size].radius;\n    vars[CSS_VARS_RAW.component.button.gap] = `calc(${CSS_VARS.size[props.size].padding} - 2px)`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n    return { className, style };\n  }, [\n    props.className,\n    props.style,\n    props.genre,\n    props.isDisabled,\n    props.isFullSize,\n    props.isHidden,\n    props.isHiddenBorder,\n    props.isMinWidthAsContent,\n    props.isFullRadius,\n    props.isWidthAsHeight,\n    props.size,\n    props.isZeroRadius,\n    props.control,\n    props.isZeroPadding,\n    props.isSizeFitContent,\n  ]);\n\n  const { className: classNameIconGroup, style: styleIconGroup } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.iconGroup,\n\n      props.isIconGroup && CSS_CLASS.component.button.iconGroupIsIconGroup,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    if ('iconGroupOrder' in props)\n      vars[CSS_VARS_RAW.component.button.iconGroupOrder] = String(props.iconGroupOrder ?? 'initial');\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n    return { className, style };\n  }, [props]);\n\n  return (\n    <button\n      tabIndex={props.tabIndex}\n      disabled={props.isDisabled}\n      className={className}\n      style={style}\n      onClick={handleClick}\n      onFocus={props.onFocus}\n      onMouseDown={props.onMouseDown}\n      type={props.type ?? 'button'}\n      ref={ref as Ref<HTMLButtonElement>}\n      name={props.name}\n      aria-label={props.ariaLabel}\n      id={props.id}\n    >\n      {!props.isOnlyIcon && props.children && (\n        <div className={classNameTypography} style={styleTypography}>\n          {props.children}\n        </div>\n      )}\n      <div className={classNameIconGroup} style={styleIconGroup}>\n        {iconComponents}\n      </div>\n    </button>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,IAAA,CAAuB,MAAU;AAC5C,QAAM,IAAiB,EAAA,MAEnB,EAAkB;AAAA,IAChB,QAAQ,EAAM,SAAS,CAAA,GAAI,IAAA,CAAK,OAAO;AAAA,MACrC,GAAG;AAAA,MACH,OAAO,EAAE,OAAO,EAAS,MAAM,OAAO,EAAM,KAAA,EAAO,MAAM,MAAA;AAAA,MAC1D;AAAA,IACD,MAAM,EAAM;AAAA,GACb,GACH;AAAA,IAAC,EAAM;AAAA,IAAO,EAAM;AAAA,IAAM,EAAM;AAAA,GAAM,GAGlC,IAAc,EAAA,CACjB,MAAU;AACT,IAAI,CAAC,EAAM,cAAc,EAAM,WAC7B,EAAM,QAAQ,CAAA;AAAA,KAGlB,CAAC,EAAM,YAAY,EAAM,OAAA,CAAQ,GAK7B,IAAM,EAAa,CAFN,EAA0B,IAAA,GAEP,EAAM,GAAA,CAAI,GAE1C,EAAE,WAAW,GAAqB,OAAO,EAAA,IAAoB,EAAoB;AAAA,IACrF,IAAI;AAAA,MAAE,SAAS,EAAY,iBAAiB,EAAM,IAAA;AAAA,MAAO,gBAAgB;AAAA,MAAM,GAAG,GAAO;AAAA;IACzF,OAAO;AAAA,MAAE,OAAO;AAAA,MAAG,SAAS;AAAA;GAC7B,GAEK,EAAE,WAAA,GAAW,OAAA,EAAA,IAAU,EAAA,MAAc;AACzC,UAAM,IAAY,EAAW;AAAA,MAC3B,EAAU,UAAU,OAAO;AAAA,MAC3B,EAAU,QAAQ,EAAM,aAAa,SAAU,EAAM,WAAW,WAAA;AAAA,MAChE,EAAU,WAAW;AAAA,MACrB,EAAM,gBAAgB,EAAU,UAAU,OAAO;AAAA,MACjD,EAAM,YAAY,EAAU,UAAU,OAAO;AAAA,MAC7C,EAAM,kBAAkB,EAAU,UAAU,OAAO;AAAA,MACnD,EAAM,gBAAgB,EAAU,UAAU,OAAO;AAAA,MACjD,EAAM,cAAc,EAAU,UAAU,OAAO;AAAA,MAC/C,EAAM,mBAAmB,EAAU,UAAU,OAAO;AAAA,MACpD,EAAM,uBAAuB,EAAU,UAAU,OAAO;AAAA,MACxD,EAAM,iBAAiB,EAAU,UAAU,OAAO;AAAA,MAClD,EAAM,oBAAoB,EAAU,UAAU,OAAO;AAAA,MACrD,EAAM;AAAA,KACP,GAEK,IAA+B,CAAA;AAErC,WAAA,EAAK,EAAa,UAAU,OAAO,UAAA,IAAc,EAAS,MAAM,OAAO,EAAM,KAAA,EAAO,WAAW,OAC/F,EAAK,EAAa,UAAU,OAAO,KAAA,IAAS,EAAS,MAAM,OAAO,EAAM,KAAA,EAAO,MAAM,OACrF,EAAK,EAAa,UAAU,OAAO,MAAA,IAAU,EAAS,MAAM,OAAO,EAAM,KAAA,EAAO,OAAO,OAEvF,EAAK,EAAa,UAAU,OAAO,MAAA,IAAU,EAAS,KAAK,EAAM,IAAA,EAAM,QACvE,EAAK,EAAa,UAAU,OAAO,OAAA,IAAW,EAAS,KAAK,EAAM,IAAA,EAAM,SACxE,EAAK,EAAa,UAAU,OAAO,MAAA,IAAU,EAAS,KAAK,EAAM,IAAA,EAAM,QACvE,EAAK,EAAa,UAAU,OAAO,GAAA,IAAO,QAAQ,EAAS,KAAK,EAAM,IAAA,EAAM,OAAA,WAIrE;AAAA,MAAE,WAAA;AAAA,MAAW,OAFN,EAAU,CAAC,OAAO,KAAK,CAAA,EAAM,SAAS,IAAO,QAAW,EAAM,KAAA,CAAM;AAAA;KAGjF;AAAA,IACD,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,IACN,EAAM;AAAA,GACP,GAEK,EAAE,WAAW,GAAoB,OAAO,EAAA,IAAmB,EAAA,MAAc;AAC7E,UAAM,IAAY,EAAW,CAC3B,EAAU,UAAU,OAAO,WAE3B,EAAM,eAAe,EAAU,UAAU,OAAO,oBAAA,CACjD,GAEK,IAA+B,CAAA;AAErC,WAAI,oBAAoB,MACtB,EAAK,EAAa,UAAU,OAAO,cAAA,IAAkB,OAAO,EAAM,kBAAkB,SAAA,IAI/E;AAAA,MAAE,WAAA;AAAA,MAAW,OAFN,EAAU,CAAC,OAAO,KAAK,CAAA,EAAM,SAAS,IAAO,MAAA,CAAU;AAAA;KAGpE,CAAC,CAAA,CAAM;AAEV,SACE,gBAAA,EAAC,UAAD;AAAA,IACE,UAAU,EAAM;AAAA,IAChB,UAAU,EAAM;AAAA,IACL,WAAA;AAAA,IACJ,OAAA;AAAA,IACP,SAAS;AAAA,IACT,SAAS,EAAM;AAAA,IACf,aAAa,EAAM;AAAA,IACnB,MAAM,EAAM,QAAQ;AAAA,IACf,KAAA;AAAA,IACL,MAAM,EAAM;AAAA,IACZ,cAAY,EAAM;AAAA,IAClB,IAAI,EAAM;AAAA,cAZZ,CAcG,CAAC,EAAM,cAAc,EAAM,YAC1B,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAW;AAAA,MAAqB,OAAO;AAAA,gBACzC,EAAM;AAAA,KACH,GAER,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAW;AAAA,MAAoB,OAAO;AAAA,gBACxC;AAAA,KACG,CAAA;AAAA"}

package/build/button-CHEeSypf.cjs

@@ -1,3 +0,0 @@
-const R=require("./chunk-Dd8m0Ver.cjs"),n=require("./utils-DCIq-5FL.cjs"),S=require("./functions-CZrZU5U0.cjs"),A=require("./icon-Ddkbk3-m.cjs"),m=require("./hooks-use-merge-refs.cjs.js"),g=require("./hooks-use-typography-styles.cjs.js");let s=require("react/jsx-runtime"),o=require("react");var y=e=>{const c=(0,o.useMemo)(()=>A.getIconComponents({icons:(e.icons??[]).map(i=>({...i,style:{color:n.CSS_VARS.genre.button[e.genre].color.index}})),size:e.size}),[e.icons,e.size,e.genre]),u=(0,o.useCallback)(i=>{!e.isDisabled&&e.onClick&&e.onClick(i)},[e.isDisabled,e.onClick]),l=m.useMergeRefs([(0,o.useRef)(null),e.ref]),{className:a,style:d}=g.useTypographyStyles({sx:{variant:n.EXTRA_VALUE.sizeToController[e.size],isNoUserSelect:!0,...e?.sxTypography},style:{order:0,display:"inline-flex"}}),{className:r,style:C}=(0,o.useMemo)(()=>{const i=S.setClasses([n.CSS_CLASS.component.button.root,n.CSS_CLASS.control[e.isDisabled?"none":e.control??"boxShadow"],n.CSS_CLASS.transition.color,e.isZeroRadius&&n.CSS_CLASS.component.button.isZeroRadius,e.isHidden&&n.CSS_CLASS.component.button.isHidden,e.isHiddenBorder&&n.CSS_CLASS.component.button.isHiddenBorder,e.isFullRadius&&n.CSS_CLASS.component.button.isFullRadius,e.isFullSize&&n.CSS_CLASS.component.button.isFullSize,e.isWidthAsHeight&&n.CSS_CLASS.component.button.isWidthAsHeight,e.isMinWidthAsContent&&n.CSS_CLASS.component.button.isMinWidthAsContent,e.isZeroPadding&&n.CSS_CLASS.component.button.isZeroPadding,e.isSizeFitContent&&n.CSS_CLASS.component.button.isSizeFitContent,e.className]),t={};return t[n.CSS_VARS_RAW.component.button.background]=n.CSS_VARS.genre.button[e.genre].background.index,t[n.CSS_VARS_RAW.component.button.color]=n.CSS_VARS.genre.button[e.genre].color.index,t[n.CSS_VARS_RAW.component.button.border]=n.CSS_VARS.genre.button[e.genre].border.index,t[n.CSS_VARS_RAW.component.button.height]=n.CSS_VARS.size[e.size].height,t[n.CSS_VARS_RAW.component.button.padding]=n.CSS_VARS.size[e.size].padding,t[n.CSS_VARS_RAW.component.button.radius]=n.CSS_VARS.size[e.size].radius,t[n.CSS_VARS_RAW.component.button.gap]=`calc(${n.CSS_VARS.size[e.size].padding} - 2px)`,{className:i,style:S.setStyles([Object.keys(t).length?t:void 0,e.style])}},[e.className,e.style,e.genre,e.isDisabled,e.isFullSize,e.isHidden,e.isHiddenBorder,e.isMinWidthAsContent,e.isFullRadius,e.isWidthAsHeight,e.size,e.isZeroRadius,e.control,e.isZeroPadding,e.isSizeFitContent]),{className:_,style:b}=(0,o.useMemo)(()=>{const i=S.setClasses([n.CSS_CLASS.component.button.iconGroup,e.isIconGroup&&n.CSS_CLASS.component.button.iconGroupIsIconGroup]),t={};return"iconGroupOrder"in e&&(t[n.CSS_VARS_RAW.component.button.iconGroupOrder]=String(e.iconGroupOrder??"initial")),{className:i,style:S.setStyles([Object.keys(t).length?t:void 0])}},[e]);return(0,s.jsxs)("button",{tabIndex:e.tabIndex,disabled:e.isDisabled,className:r,style:C,onClick:u,onFocus:e.onFocus,onMouseDown:e.onMouseDown,type:e.type??"button",ref:l,name:e.name,"aria-label":e.ariaLabel,id:e.id,children:[!e.isOnlyIcon&&e.children&&(0,s.jsx)("div",{className:a,style:d,children:e.children}),(0,s.jsx)("div",{className:_,style:b,children:c})]})};Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return y}});
-
-//# sourceMappingURL=button-CHEeSypf.cjs.map

package/build/button-CHEeSypf.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-CHEeSypf.cjs","names":[],"sources":["../src/components/button/component.tsx"],"sourcesContent":["import { getIconComponents } from '@local/components/icon';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IButton } from './component.types';\n\nexport const Button: FC<IButton> = (props) => {\n  const iconComponents = useMemo(\n    () =>\n      getIconComponents({\n        icons: (props.icons ?? []).map((e) => ({\n          ...e,\n          style: { color: CSS_VARS.genre.button[props.genre].color.index },\n        })),\n        size: props.size,\n      }),\n    [props.icons, props.size, props.genre],\n  );\n\n  const handleClick = useCallback<Exclude<IButton['onClick'], undefined>>(\n    (event) => {\n      if (!props.isDisabled && props.onClick) {\n        props.onClick(event);\n      }\n    },\n    [props.isDisabled, props.onClick],\n  );\n\n  const refDefault = useRef<HTMLButtonElement>(null);\n\n  const ref = useMergeRefs([refDefault, props.ref]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isNoUserSelect: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.root,\n      CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n      CSS_CLASS.transition.color,\n      props.isZeroRadius && CSS_CLASS.component.button.isZeroRadius,\n      props.isHidden && CSS_CLASS.component.button.isHidden,\n      props.isHiddenBorder && CSS_CLASS.component.button.isHiddenBorder,\n      props.isFullRadius && CSS_CLASS.component.button.isFullRadius,\n      props.isFullSize && CSS_CLASS.component.button.isFullSize,\n      props.isWidthAsHeight && CSS_CLASS.component.button.isWidthAsHeight,\n      props.isMinWidthAsContent && CSS_CLASS.component.button.isMinWidthAsContent,\n      props.isZeroPadding && CSS_CLASS.component.button.isZeroPadding,\n      props.isSizeFitContent && CSS_CLASS.component.button.isSizeFitContent,\n      props.className,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.button.background] = CSS_VARS.genre.button[props.genre].background.index;\n    vars[CSS_VARS_RAW.component.button.color] = CSS_VARS.genre.button[props.genre].color.index;\n    vars[CSS_VARS_RAW.component.button.border] = CSS_VARS.genre.button[props.genre].border.index;\n\n    vars[CSS_VARS_RAW.component.button.height] = CSS_VARS.size[props.size].height;\n    vars[CSS_VARS_RAW.component.button.padding] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.button.radius] = CSS_VARS.size[props.size].radius;\n    vars[CSS_VARS_RAW.component.button.gap] = `calc(${CSS_VARS.size[props.size].padding} - 2px)`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n    return { className, style };\n  }, [\n    props.className,\n    props.style,\n    props.genre,\n    props.isDisabled,\n    props.isFullSize,\n    props.isHidden,\n    props.isHiddenBorder,\n    props.isMinWidthAsContent,\n    props.isFullRadius,\n    props.isWidthAsHeight,\n    props.size,\n    props.isZeroRadius,\n    props.control,\n    props.isZeroPadding,\n    props.isSizeFitContent,\n  ]);\n\n  const { className: classNameIconGroup, style: styleIconGroup } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.iconGroup,\n\n      props.isIconGroup && CSS_CLASS.component.button.iconGroupIsIconGroup,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    if ('iconGroupOrder' in props)\n      vars[CSS_VARS_RAW.component.button.iconGroupOrder] = String(props.iconGroupOrder ?? 'initial');\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n    return { className, style };\n  }, [props]);\n\n  return (\n    <button\n      tabIndex={props.tabIndex}\n      disabled={props.isDisabled}\n      className={className}\n      style={style}\n      onClick={handleClick}\n      onFocus={props.onFocus}\n      onMouseDown={props.onMouseDown}\n      type={props.type ?? 'button'}\n      ref={ref as Ref<HTMLButtonElement>}\n      name={props.name}\n      aria-label={props.ariaLabel}\n      id={props.id}\n    >\n      {!props.isOnlyIcon && props.children && (\n        <div className={classNameTypography} style={styleTypography}>\n          {props.children}\n        </div>\n      )}\n      <div className={classNameIconGroup} style={styleIconGroup}>\n        {iconComponents}\n      </div>\n    </button>\n  );\n};\n"],"mappings":"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"}

package/build/input-otp-CJfZoWd7.cjs

@@ -1,3 +0,0 @@
-const q=require("./chunk-Dd8m0Ver.cjs"),R=require("./utils-DCIq-5FL.cjs"),I=require("./error-BdFba_yV.cjs"),C=require("./input-CmdwwrV2.cjs");let o=require("react/jsx-runtime"),c=require("react");var j=e=>{const[f,h]=(0,c.useState)(new Array(e.length).fill("")),u=(0,c.useRef)([]),g=(0,c.useRef)(null),m=(0,c.useCallback)((t,i)=>{i.preventDefault();const n=i.clipboardData.getData("Text").replace(/\D/g,"").split("");n.length&&h(s=>{const r=[...s];let l=t;for(let a=0;a<n.length&&l<r.length;a++)r[l]=n[a],l++;const d=r.join("");return e.onChange?.(d),r.every(a=>a!=="")&&e.onComplete?.(d),setTimeout(()=>{const a=r.indexOf("");a!==-1?u.current[a]?.focus():l<r.length&&u.current[l]?.focus()},0),r})},[e]),y=(0,c.useCallback)((t,i)=>{/^\d*$/.test(i)&&h(n=>{const s=[...n];return s[t]=i.slice(-1),e.onChange&&e.onChange(s.join("")),s.every(r=>r!=="")&&e.onComplete?.(s.join("")),i&&t<n.length-1&&setTimeout(()=>{u.current[t+1]?.focus()},0),s})},[e]),T=(t,i)=>{const n=u.current[t];if(n){if(i.key==="ArrowRight"){const s=t<f.length-1?t+1:0,r=u.current[s];r&&(r.focus(),setTimeout(()=>r.setSelectionRange(0,r.value.length),0))}if(i.key==="ArrowLeft"){const s=t>0?t-1:f.length-1,r=u.current[s];r&&(r.focus(),setTimeout(()=>r.setSelectionRange(0,r.value.length),0))}i.key==="Backspace"&&(n.value?setTimeout(()=>n.setSelectionRange(0,n.value.length),0):t>0&&setTimeout(()=>{const s=u.current[t-1];s&&(s.focus(),s.setSelectionRange(0,s.value.length))},0))}},v=(0,c.useCallback)(t=>{setTimeout(()=>t.target.setSelectionRange(0,t.target.value.length),0)},[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{className:e.className,style:{gap:`calc(${R.CSS_VARS.size[e.size].padding} - 2px)`,width:"100%",display:"flex",alignItems:"flex-start",...e.style},id:e.id,ref:g,onBlur:t=>{setTimeout(()=>{g.current&&!g.current.contains(document.activeElement)&&e.onBlur?.(t)},0)},onFocus:t=>{setTimeout(()=>{g.current?.contains(document.activeElement)&&e.onFocus?.(t)},0)},children:f.map((t,i)=>(0,o.jsx)(C.Input,{isWidthAsHeight:!0,tabIndex:i+1,ref:n=>{u.current[i]=n},variety:"standard",type:"text",inputMode:"numeric",maxLength:1,value:t,onFocus:v,onPaste:n=>m(i,n),onChange:n=>y(i,n),onKeyDown:n=>T(i,n),genre:e.genre,size:e.size,sxTypography:e.sxTypography,isBold:e.isBold,isFullRadius:e.isFullRadius,isDisabled:e.isDisabled,isHidden:e.isHidden,isHiddenBorder:e.isHiddenBorder},i))}),e?.error?.isError&&(0,o.jsx)(I.ErrorMessage,{size:e?.error.size??e.size,sxTypography:{size:"16px",weight:"400",...e?.error.sxTypography},...e.error})]})};Object.defineProperty(exports,"InputOTP",{enumerable:!0,get:function(){return j}});
-
-//# sourceMappingURL=input-otp-CJfZoWd7.cjs.map

package/build/input-otp-CJfZoWd7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp-CJfZoWd7.cjs","names":[],"sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { Input } from '@local/components/input';\nimport { CSS_VARS } from '@local/styles/utils';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { IInputOTP } from './component.types';\n\nexport const InputOTP = (props: IInputOTP) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.indexOf('');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <div\n        className={props.className}\n        style={{\n          gap: `calc(${CSS_VARS.size[props.size].padding} - 2px)`,\n          width: '100%',\n          display: 'flex',\n          alignItems: 'flex-start',\n          ...props.style,\n        }}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            sxTypography={props.sxTypography}\n            isBold={props.isBold}\n            isFullRadius={props.isFullRadius}\n            isDisabled={props.isDisabled}\n            isHidden={props.isHidden}\n            isHiddenBorder={props.isHiddenBorder}\n          />\n        ))}\n      </div>\n      {props?.error?.isError && (\n        <ErrorMessage\n          size={props?.error.size ?? props.size}\n          sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n          {...props.error}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/build/input-otp-CeMGm5Xq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp-CeMGm5Xq.js","names":[],"sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { Input } from '@local/components/input';\nimport { CSS_VARS } from '@local/styles/utils';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { IInputOTP } from './component.types';\n\nexport const InputOTP = (props: IInputOTP) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.indexOf('');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <div\n        className={props.className}\n        style={{\n          gap: `calc(${CSS_VARS.size[props.size].padding} - 2px)`,\n          width: '100%',\n          display: 'flex',\n          alignItems: 'flex-start',\n          ...props.style,\n        }}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            sxTypography={props.sxTypography}\n            isBold={props.isBold}\n            isFullRadius={props.isFullRadius}\n            isDisabled={props.isDisabled}\n            isHidden={props.isHidden}\n            isHiddenBorder={props.isHiddenBorder}\n          />\n        ))}\n      </div>\n      {props?.error?.isError && (\n        <ErrorMessage\n          size={props?.error.size ?? props.size}\n          sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n          {...props.error}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/build/pagination-BluJtJl7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination-BluJtJl7.js","names":[],"sources":["../src/components/pagination/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Stack } from '@local/components/stack';\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { FC, useCallback, useMemo } from 'react';\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP } from './component.constants';\nimport { IPagination } from './component.types';\n\nexport const Pagination: FC<IPagination> = (props) => {\n  const isDisabledPrevious = useMemo(() => props.index === 0 && !props.isInfinity, [props.index, props.isInfinity]);\n  const isDisabledNext = useMemo(\n    () => props.index === props.length - 1 && !props.isInfinity,\n    [props.index, props.isInfinity, props.length],\n  );\n\n  const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap]);\n  const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData]);\n  const handlePrevious = useCallback(() => {\n    if (props.index === 0) {\n      if (props.isInfinity) {\n        props.changeIndex(props.length - 1);\n      }\n    } else {\n      props.changeIndex(props.index - 1);\n    }\n  }, [props]);\n\n  const handleNext = useCallback(() => {\n    if (props.index === props.length - 1) {\n      if (props.isInfinity) {\n        props.changeIndex(0);\n      }\n    } else {\n      props.changeIndex(props.index + 1);\n    }\n  }, [props]);\n\n  const visibleButtons = useMemo(() => {\n    const half = Math.floor(props.viewQuantity / 2);\n    const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity));\n    const end = Math.min(props.length, start + props.viewQuantity);\n    return Array.from({ length: end - start }, (_, i) => start + i);\n  }, [props.index, props.viewQuantity, props.length]);\n\n  return (\n    <Stack\n      className={props.className}\n      style={{\n        height: 'fit-content',\n        gap: `${gap}px`,\n        ...props.style,\n      }}\n    >\n      <Button\n        isDisabled={isDisabledPrevious}\n        isHidden={isDisabledPrevious}\n        onClick={handlePrevious}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            order: -1,\n            turn: 90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n      </Button>\n\n      <Stack\n        sx={{\n          width: 'fit-content',\n          height: 'fit-content',\n          display: 'flex',\n          gap: `${gap}px`,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        }}\n      >\n        {Array.from({ length: props.length }).map((_, i) => {\n          const isVisible = visibleButtons.includes(i);\n          return (\n            <AnimatePresence key={i} mode='popLayout'>\n              {isVisible && (\n                <motion.div\n                  layout\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: 'easeInOut' } }}\n                  transition={{\n                    default: { duration: 0.1, ease: 'easeOut' },\n                  }}\n                >\n                  <Button\n                    isWidthAsHeight\n                    {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n                    {...lengthData?.[i]}\n                    onClick={() => props.changeIndex(i)}\n                  >\n                    {lengthData?.[i]?.icons?.length ? null : i + 1}\n                  </Button>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          );\n        })}\n      </Stack>\n\n      <Button\n        isDisabled={isDisabledNext}\n        isHidden={isDisabledNext}\n        onClick={handleNext}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            turn: -90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.next}\n      </Button>\n    </Stack>\n  );\n};\n"],"mappings":"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"}

package/build/pagination-VMAFNidU.cjs

@@ -1,3 +0,0 @@
-const I=require("./chunk-Dd8m0Ver.cjs"),m=require("./proxy-BDese6Pb.cjs"),f=require("./AnimatePresence-DeKd4Eek.cjs"),s=require("./component-CbJ_P8yq.cjs");require("./component-stack.cjs.js");const a=require("./button-CHEeSypf.cjs");let n=require("react/jsx-runtime"),i=require("react");var b=e=>{const l=(0,i.useMemo)(()=>e.index===0&&!e.isInfinity,[e.index,e.isInfinity]),c=(0,i.useMemo)(()=>e.index===e.length-1&&!e.isInfinity,[e.index,e.isInfinity,e.length]),u=(0,i.useMemo)(()=>e.gap??12,[e.gap]),d=(0,i.useMemo)(()=>e.lengthData??{},[e.lengthData]),r=(0,i.useCallback)(()=>{e.index===0?e.isInfinity&&e.changeIndex(e.length-1):e.changeIndex(e.index-1)},[e]),g=(0,i.useCallback)(()=>{e.index===e.length-1?e.isInfinity&&e.changeIndex(0):e.changeIndex(e.index+1)},[e]),x=(0,i.useMemo)(()=>{const h=Math.floor(e.viewQuantity/2),t=Math.max(0,Math.min(e.index-h,e.length-e.viewQuantity)),o=Math.min(e.length,t+e.viewQuantity);return Array.from({length:o-t},(q,y)=>t+y)},[e.index,e.viewQuantity,e.length]);return(0,n.jsxs)(s.Stack,{className:e.className,style:{height:"fit-content",gap:`${u}px`,...e.style},children:[(0,n.jsx)(a.Button,{isDisabled:l,isHidden:l,onClick:r,...e.buttonControl,icons:[{type:"id",size:"large",name:"Arrow2",order:-1,turn:90}],children:!e.buttonControl.isWidthAsHeight&&e.locale.prev}),(0,n.jsx)(s.Stack,{sx:{width:"fit-content",height:"fit-content",display:"flex",gap:`${u}px`,alignItems:"center",justifyContent:"flex-start"},children:Array.from({length:e.length}).map((h,t)=>(0,n.jsx)(f.AnimatePresence,{mode:"popLayout",children:x.includes(t)&&(0,n.jsx)(m.motion.div,{layout:!0,initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95,transition:{duration:.1,ease:"easeInOut"}},transition:{default:{duration:.1,ease:"easeOut"}},children:(0,n.jsx)(a.Button,{isWidthAsHeight:!0,...t===e.index?e.buttonCount.active:e.buttonCount.inactive,...d?.[t],onClick:()=>e.changeIndex(t),children:d?.[t]?.icons?.length?null:t+1})})},t))}),(0,n.jsx)(a.Button,{isDisabled:c,isHidden:c,onClick:g,...e.buttonControl,icons:[{type:"id",size:"large",name:"Arrow2",turn:-90}],children:!e.buttonControl.isWidthAsHeight&&e.locale.next})]})};Object.defineProperty(exports,"Pagination",{enumerable:!0,get:function(){return b}});
-
-//# sourceMappingURL=pagination-VMAFNidU.cjs.map

package/build/pagination-VMAFNidU.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination-VMAFNidU.cjs","names":[],"sources":["../src/components/pagination/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Stack } from '@local/components/stack';\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { FC, useCallback, useMemo } from 'react';\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP } from './component.constants';\nimport { IPagination } from './component.types';\n\nexport const Pagination: FC<IPagination> = (props) => {\n  const isDisabledPrevious = useMemo(() => props.index === 0 && !props.isInfinity, [props.index, props.isInfinity]);\n  const isDisabledNext = useMemo(\n    () => props.index === props.length - 1 && !props.isInfinity,\n    [props.index, props.isInfinity, props.length],\n  );\n\n  const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap]);\n  const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData]);\n  const handlePrevious = useCallback(() => {\n    if (props.index === 0) {\n      if (props.isInfinity) {\n        props.changeIndex(props.length - 1);\n      }\n    } else {\n      props.changeIndex(props.index - 1);\n    }\n  }, [props]);\n\n  const handleNext = useCallback(() => {\n    if (props.index === props.length - 1) {\n      if (props.isInfinity) {\n        props.changeIndex(0);\n      }\n    } else {\n      props.changeIndex(props.index + 1);\n    }\n  }, [props]);\n\n  const visibleButtons = useMemo(() => {\n    const half = Math.floor(props.viewQuantity / 2);\n    const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity));\n    const end = Math.min(props.length, start + props.viewQuantity);\n    return Array.from({ length: end - start }, (_, i) => start + i);\n  }, [props.index, props.viewQuantity, props.length]);\n\n  return (\n    <Stack\n      className={props.className}\n      style={{\n        height: 'fit-content',\n        gap: `${gap}px`,\n        ...props.style,\n      }}\n    >\n      <Button\n        isDisabled={isDisabledPrevious}\n        isHidden={isDisabledPrevious}\n        onClick={handlePrevious}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            order: -1,\n            turn: 90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n      </Button>\n\n      <Stack\n        sx={{\n          width: 'fit-content',\n          height: 'fit-content',\n          display: 'flex',\n          gap: `${gap}px`,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        }}\n      >\n        {Array.from({ length: props.length }).map((_, i) => {\n          const isVisible = visibleButtons.includes(i);\n          return (\n            <AnimatePresence key={i} mode='popLayout'>\n              {isVisible && (\n                <motion.div\n                  layout\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: 'easeInOut' } }}\n                  transition={{\n                    default: { duration: 0.1, ease: 'easeOut' },\n                  }}\n                >\n                  <Button\n                    isWidthAsHeight\n                    {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n                    {...lengthData?.[i]}\n                    onClick={() => props.changeIndex(i)}\n                  >\n                    {lengthData?.[i]?.icons?.length ? null : i + 1}\n                  </Button>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          );\n        })}\n      </Stack>\n\n      <Button\n        isDisabled={isDisabledNext}\n        isHidden={isDisabledNext}\n        onClick={handleNext}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            turn: -90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.next}\n      </Button>\n    </Stack>\n  );\n};\n"],"mappings":"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"}

package/build/preview-BLu-NOv2.cjs

@@ -1,3 +0,0 @@
-const v=require("./chunk-Dd8m0Ver.cjs"),l=require("./utils-DCIq-5FL.cjs"),u=require("./AnimatePresence-DeKd4Eek.cjs"),c=require("./component-CbJ_P8yq.cjs");require("./component-stack.cjs.js");const d=require("./icon-Ddkbk3-m.cjs");let t=require("react/jsx-runtime"),n=require("react");var m=e=>{const[i,o]=(0,n.useState)(e.defaultVisible??!1),r=(0,n.useMemo)(()=>"visible"in e?e.visible:null,[e]),a=(0,n.useMemo)(()=>"time"in e?e.time:null,[e]);return(0,n.useEffect)(()=>{if(r!==null&&a===null)o(r);else if(r!==null&&a!==null)if(r===!1)o(!1);else{const s=setTimeout(()=>{o(!0)},a);return()=>{clearTimeout(s)}}},[r,a]),(0,t.jsxs)(u.AnimatePresence,{children:[i?null:(0,t.jsxs)(c.StackMotion,{sx:e?.sxLoader,className:l.CSS_CLASS.area.preview.root,transition:{duration:.3},exit:{opacity:0},animate:{opacity:1},children:[(0,t.jsx)(c.Stack,{className:l.CSS_CLASS.area.preview.containerIcon,children:(0,t.jsx)(d.Icon,{size:"100%",type:"loading",color:e.colorIcon??"inherit",name:"Line"})}),e.content&&(0,t.jsx)(c.Stack,{className:l.CSS_CLASS.area.preview.containerChildren,children:e.content})]},"loader"),i?(0,t.jsx)(c.StackMotion,{sx:e?.sxChildren,className:l.CSS_CLASS.area.preview.children,transition:{duration:.3},initial:{opacity:0},exit:{opacity:0},animate:{opacity:1},children:e.children},"children"):null]})},S=()=>{(0,n.useEffect)(()=>{const e=document.querySelector(".preview-wrapper"),i=()=>{e&&(e.style.opacity="0",setTimeout(()=>{e.remove()},500))};return document.readyState==="complete"?i():window.addEventListener("load",i),()=>{window.removeEventListener("load",i)}},[])};Object.defineProperty(exports,"Preview",{enumerable:!0,get:function(){return m}});Object.defineProperty(exports,"useRemovePreviewLoader",{enumerable:!0,get:function(){return S}});
-
-//# sourceMappingURL=preview-BLu-NOv2.cjs.map

package/build/preview-BLu-NOv2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-BLu-NOv2.cjs","names":[],"sources":["../src/areas/preview/area.tsx","../src/areas/preview/area.hooks.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { Stack, StackMotion } from '@local/components/stack';\nimport { CSS_CLASS } from '@local/styles/utils';\n\nimport { AnimatePresence } from 'framer-motion';\nimport { FC, useEffect, useMemo, useState } from 'react';\n\nimport { IPreview } from './area.types';\n\nexport const Preview: FC<IPreview> = (props) => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props]);\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props]);\n\n  useEffect(() => {\n    if (propsVisible !== null && propsTime === null) {\n      setVisible(propsVisible);\n    } else if (propsVisible !== null && propsTime !== null) {\n      if (propsVisible === false) {\n        setVisible(false);\n      } else {\n        const timer = setTimeout(() => {\n          setVisible(true);\n        }, propsTime);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }\n  }, [propsVisible, propsTime]);\n\n  return (\n    <AnimatePresence>\n      {!visible ? (\n        <StackMotion\n          key='loader'\n          sx={props?.sxLoader}\n          className={CSS_CLASS.area.preview.root}\n          transition={{ duration: 0.3 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          <Stack className={CSS_CLASS.area.preview.containerIcon}>\n            <Icon size='100%' type='loading' color={props.colorIcon ?? 'inherit'} name='Line' />\n          </Stack>\n          {props.content && <Stack className={CSS_CLASS.area.preview.containerChildren}>{props.content}</Stack>}\n        </StackMotion>\n      ) : null}\n      {visible ? (\n        <StackMotion\n          key='children'\n          sx={props?.sxChildren}\n          className={CSS_CLASS.area.preview.children}\n          transition={{ duration: 0.3 }}\n          initial={{ opacity: 0 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          {props.children}\n        </StackMotion>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n","import { useEffect } from 'react';\n\nexport const useRemovePreviewLoader = () => {\n  useEffect(() => {\n    const loader = document.querySelector('.preview-wrapper') as HTMLElement;\n\n    const handleDomReady = () => {\n      if (loader) {\n        loader.style.opacity = '0';\n        setTimeout(() => {\n          loader.remove();\n        }, 500);\n      }\n    };\n\n    if (document.readyState === 'complete') {\n      handleDomReady();\n    } else {\n      window.addEventListener('load', handleDomReady);\n    }\n\n    return () => {\n      window.removeEventListener('load', handleDomReady);\n    };\n  }, []);\n};\n"],"mappings":"6RASA,IAAa,EAAyB,GAAU,CAC9C,KAAM,CAAC,EAAS,CAAA,KAAA,EAAA,UAAuB,EAAM,gBAAkB,EAAA,EAEzD,KAAA,EAAA,SAAA,IAA8B,YAAa,EAAQ,EAAM,QAAU,KAAO,CAAC,CAAA,CAAM,EACjF,KAAA,EAAA,SAAA,IAA2B,SAAU,EAAQ,EAAM,KAAO,KAAO,CAAC,CAAA,CAAM,EAE9E,SAAA,EAAA,WAAA,IAAgB,CACd,GAAI,IAAiB,MAAQ,IAAc,KACzC,EAAW,CAAA,UACF,IAAiB,MAAQ,IAAc,KAChD,GAAI,IAAiB,GACnB,EAAW,EAAA,MACN,CACL,MAAM,EAAQ,WAAA,IAAiB,CAC7B,EAAW,EAAA,GACV,CAAA,EAEH,MAAA,IAAa,CACX,aAAa,CAAA,KAIlB,CAAC,EAAc,CAAA,CAAU,KAG1B,EAAA,MAAC,EAAA,gBAAD,CAAA,SAAA,CACI,EAcE,QAbF,EAAA,MAAC,EAAA,YAAD,CAEE,GAAI,GAAO,SACX,UAAW,EAAA,UAAU,KAAK,QAAQ,KAClC,WAAY,CAAE,SAAU,EAAA,EACxB,KAAM,CAAE,QAAS,CAAA,EACjB,QAAS,CAAE,QAAS,CAAA,WANtB,IAQE,EAAA,KAAC,EAAA,MAAD,CAAO,UAAW,EAAA,UAAU,KAAK,QAAQ,0BACvC,EAAA,KAAC,EAAA,KAAD,CAAM,KAAK,OAAO,KAAK,UAAU,MAAO,EAAM,WAAa,UAAW,KAAK,OAAS,EAC9E,EACP,EAAM,YAAW,EAAA,KAAC,EAAA,MAAD,CAAO,UAAW,EAAA,UAAU,KAAK,QAAQ,2BAAoB,EAAM,QAAgB,CAAA,GAVjG,QAAA,EAaP,KACC,EAAA,KAAC,EAAA,YAAD,CAEE,GAAI,GAAO,WACX,UAAW,EAAA,UAAU,KAAK,QAAQ,SAClC,WAAY,CAAE,SAAU,EAAA,EACxB,QAAS,CAAE,QAAS,CAAA,EACpB,KAAM,CAAE,QAAS,CAAA,EACjB,QAAS,CAAE,QAAS,CAAA,WAEnB,EAAM,UARH,UAAA,EAUJ,IAAA,CACY,CAAA,GC7DT,EAAA,IAA+B,IAC1C,EAAA,WAAA,IAAgB,CACd,MAAM,EAAS,SAAS,cAAc,kBAAA,EAEhC,EAAA,IAAuB,CACvB,IACF,EAAO,MAAM,QAAU,IACvB,WAAA,IAAiB,CACf,EAAO,OAAA,GACN,GAAA,IAIP,OAAI,SAAS,aAAe,WAC1B,EAAA,EAEA,OAAO,iBAAiB,OAAQ,CAAA,EAGlC,IAAa,CACX,OAAO,oBAAoB,OAAQ,CAAA,IAEpC,CAAA,CAAE"}

package/build/preview-Bc2qdyd4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-Bc2qdyd4.js","names":[],"sources":["../src/areas/preview/area.tsx","../src/areas/preview/area.hooks.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { Stack, StackMotion } from '@local/components/stack';\nimport { CSS_CLASS } from '@local/styles/utils';\n\nimport { AnimatePresence } from 'framer-motion';\nimport { FC, useEffect, useMemo, useState } from 'react';\n\nimport { IPreview } from './area.types';\n\nexport const Preview: FC<IPreview> = (props) => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props]);\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props]);\n\n  useEffect(() => {\n    if (propsVisible !== null && propsTime === null) {\n      setVisible(propsVisible);\n    } else if (propsVisible !== null && propsTime !== null) {\n      if (propsVisible === false) {\n        setVisible(false);\n      } else {\n        const timer = setTimeout(() => {\n          setVisible(true);\n        }, propsTime);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }\n  }, [propsVisible, propsTime]);\n\n  return (\n    <AnimatePresence>\n      {!visible ? (\n        <StackMotion\n          key='loader'\n          sx={props?.sxLoader}\n          className={CSS_CLASS.area.preview.root}\n          transition={{ duration: 0.3 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          <Stack className={CSS_CLASS.area.preview.containerIcon}>\n            <Icon size='100%' type='loading' color={props.colorIcon ?? 'inherit'} name='Line' />\n          </Stack>\n          {props.content && <Stack className={CSS_CLASS.area.preview.containerChildren}>{props.content}</Stack>}\n        </StackMotion>\n      ) : null}\n      {visible ? (\n        <StackMotion\n          key='children'\n          sx={props?.sxChildren}\n          className={CSS_CLASS.area.preview.children}\n          transition={{ duration: 0.3 }}\n          initial={{ opacity: 0 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          {props.children}\n        </StackMotion>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n","import { useEffect } from 'react';\n\nexport const useRemovePreviewLoader = () => {\n  useEffect(() => {\n    const loader = document.querySelector('.preview-wrapper') as HTMLElement;\n\n    const handleDomReady = () => {\n      if (loader) {\n        loader.style.opacity = '0';\n        setTimeout(() => {\n          loader.remove();\n        }, 500);\n      }\n    };\n\n    if (document.readyState === 'complete') {\n      handleDomReady();\n    } else {\n      window.addEventListener('load', handleDomReady);\n    }\n\n    return () => {\n      window.removeEventListener('load', handleDomReady);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AASA,IAAa,IAAA,CAAyB,MAAU;AAC9C,QAAM,CAAC,GAAS,CAAA,IAAc,EAAS,EAAM,kBAAkB,EAAA,GAEzD,IAAe,EAAA,MAAe,aAAa,IAAQ,EAAM,UAAU,MAAO,CAAC,CAAA,CAAM,GACjF,IAAY,EAAA,MAAe,UAAU,IAAQ,EAAM,OAAO,MAAO,CAAC,CAAA,CAAM;AAE9E,SAAA,EAAA,MAAgB;AACd,QAAI,MAAiB,QAAQ,MAAc,KACzC,CAAA,EAAW,CAAA;AAAA,aACF,MAAiB,QAAQ,MAAc,KAChD,KAAI,MAAiB,GACnB,CAAA,EAAW,EAAA;AAAA,SACN;AACL,YAAM,IAAQ,WAAA,MAAiB;AAC7B,QAAA,EAAW,EAAA;AAAA,SACV,CAAA;AAEH,aAAA,MAAa;AACX,qBAAa,CAAA;AAAA;;KAIlB,CAAC,GAAc,CAAA,CAAU,GAG1B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACI,IAcE,OAbF,gBAAA,EAAC,GAAD;AAAA,IAEE,IAAI,GAAO;AAAA,IACX,WAAW,EAAU,KAAK,QAAQ;AAAA,IAClC,YAAY,EAAE,UAAU,IAAA;AAAA,IACxB,MAAM,EAAE,SAAS,EAAA;AAAA,IACjB,SAAS,EAAE,SAAS,EAAA;AAAA,cANtB,CAQE,gBAAA,EAAC,GAAD;AAAA,MAAO,WAAW,EAAU,KAAK,QAAQ;AAAA,gBACvC,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAO,MAAK;AAAA,QAAU,OAAO,EAAM,aAAa;AAAA,QAAW,MAAK;AAAA,OAAS;AAAA,KAC9E,GACP,EAAM,WAAW,gBAAA,EAAC,GAAD;AAAA,MAAO,WAAW,EAAU,KAAK,QAAQ;AAAA,gBAAoB,EAAM;AAAA,KAAgB,CAAA;AAAA,KAVjG,QAAA,GAaP,IACC,gBAAA,EAAC,GAAD;AAAA,IAEE,IAAI,GAAO;AAAA,IACX,WAAW,EAAU,KAAK,QAAQ;AAAA,IAClC,YAAY,EAAE,UAAU,IAAA;AAAA,IACxB,SAAS,EAAE,SAAS,EAAA;AAAA,IACpB,MAAM,EAAE,SAAS,EAAA;AAAA,IACjB,SAAS,EAAE,SAAS,EAAA;AAAA,cAEnB,EAAM;AAAA,KARH,UAAA,IAUJ,IAAA,EACY,CAAA;GC7DT,IAAA,MAA+B;AAC1C,EAAA,EAAA,MAAgB;AACd,UAAM,IAAS,SAAS,cAAc,kBAAA,GAEhC,IAAA,MAAuB;AAC3B,MAAI,MACF,EAAO,MAAM,UAAU,KACvB,WAAA,MAAiB;AACf,QAAA,EAAO,OAAA;AAAA,SACN,GAAA;AAAA;AAIP,WAAI,SAAS,eAAe,aAC1B,EAAA,IAEA,OAAO,iBAAiB,QAAQ,CAAA,GAGlC,MAAa;AACX,aAAO,oBAAoB,QAAQ,CAAA;AAAA;KAEpC,CAAA,CAAE"}