@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/esm/components/ProgressBar/ProgressBar.styled.mjs

@@ -0,0 +1,67 @@
+import { toLength } from '../../utils/styleUtils.mjs';
+import { ProgressBarSize, ProgressBarVariant } from './ProgressBar.types.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
+
+const PROGRESS_BAR_HEIGHT = {
+  [ProgressBarSize.S]: 4,
+  [ProgressBarSize.M]: 6
+};
+const getProgressBarActiveGradient = ({
+  foundation,
+  variant
+}) => {
+  switch (variant) {
+    case ProgressBarVariant.Green:
+      {
+        return FoundationCSS`
+        background: linear-gradient(
+          90deg,
+          ${foundation?.theme?.['bgtxt-green-normal']} 0%,
+          ${foundation?.subTheme?.['bgtxt-green-normal']} 100%
+        );
+      `;
+      }
+    case ProgressBarVariant.Monochrome:
+    default:
+      {
+        return FoundationCSS`
+        background: linear-gradient(
+          90deg,
+          ${foundation?.theme?.['bg-black-light']} 0%,
+          ${foundation?.theme?.['bg-black-dark']} 100%
+        );
+      `;
+      }
+  }
+};
+const StyledProgressBarWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "ProgressBarstyled__StyledProgressBarWrapper",
+  componentId: "sc-w8ljs-0"
+})(["width:", ";height:", "px;background-color:", ";", " ", ";", ""], ({
+  width
+}) => toLength(width, '36px'), ({
+  size
+}) => PROGRESS_BAR_HEIGHT[size], ({
+  foundation
+}) => foundation?.theme?.['bg-black-light'], ({
+  foundation
+}) => foundation?.rounding?.round3, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('width'), ({
+  interpolation
+}) => interpolation);
+const StyledProgressBarActive = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "ProgressBarstyled__StyledProgressBarActive",
+  componentId: "sc-w8ljs-1"
+})(["width:", "%;height:100%;", " ", " ", ";", ""], ({
+  value
+}) => value * 100, getProgressBarActiveGradient, ({
+  foundation
+}) => foundation?.rounding?.round3, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('width'), ({
+  interpolation
+}) => interpolation);
+
+export { StyledProgressBarActive, StyledProgressBarWrapper };
+//# sourceMappingURL=ProgressBar.styled.mjs.map

package/dist/esm/components/ProgressBar/ProgressBar.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styled.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"sourcesContent":["import {\n  type Foundation,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n  ProgressBarSize,\n  ProgressBarVariant,\n} from './ProgressBar.types'\n\nconst PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {\n  [ProgressBarSize.S]: 4,\n  [ProgressBarSize.M]: 6,\n}\n\ninterface GetProgressBarActiveGradientProps {\n  foundation?: Foundation\n  variant: ProgressBarVariant\n}\n\nconst getProgressBarActiveGradient = ({\n  foundation,\n  variant,\n}: GetProgressBarActiveGradientProps) => {\n  switch (variant) {\n    case ProgressBarVariant.Green: {\n      return css`\n        background: linear-gradient(\n          90deg,\n          ${foundation?.theme?.['bgtxt-green-normal']} 0%,\n          ${foundation?.subTheme?.['bgtxt-green-normal']} 100%\n        );\n      `\n    }\n    case ProgressBarVariant.Monochrome:\n    default: {\n      return css`\n        background: linear-gradient(\n          90deg,\n          ${foundation?.theme?.['bg-black-light']} 0%,\n          ${foundation?.theme?.['bg-black-dark']} 100%\n        );\n      `\n    }\n  }\n}\n\ninterface StyledProgressBarWrapperProps extends ProgressBarProps {\n  size: NonNullable<ProgressBarProps['size']>\n  width: NonNullable<ProgressBarProps['width']>\n}\n\nexport const StyledProgressBarWrapper = styled.div<StyledProgressBarWrapperProps>`\n  width: ${({ width }) => toLength(width, '36px')};\n  height: ${({ size }) => PROGRESS_BAR_HEIGHT[size]}px;\n\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};\n  ${({ foundation }) => foundation?.rounding?.round3}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface StyledProgressBarActiveProps extends ProgressBarProps {\n  variant: NonNullable<ProgressBarProps['variant']>\n  value: NonNullable<ProgressBarProps['value']>\n}\n\nexport const StyledProgressBarActive = styled.div<StyledProgressBarActiveProps>`\n  width: ${({ value }) => value * 100}%;\n  height: 100%;\n\n  ${getProgressBarActiveGradient}\n  ${({ foundation }) => foundation?.rounding?.round3}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["PROGRESS_BAR_HEIGHT","ProgressBarSize","S","M","getProgressBarActiveGradient","foundation","variant","ProgressBarVariant","Green","css","theme","subTheme","Monochrome","StyledProgressBarWrapper","styled","div","withConfig","displayName","componentId","width","toLength","size","rounding","round3","transition","getTransitionsCSS","interpolation","StyledProgressBarActive","value"],"mappings":";;;;AAcA,MAAMA,mBAAoD,GAAG;AAC3D,EAAA,CAACC,eAAe,CAACC,CAAC,GAAG,CAAC;EACtB,CAACD,eAAe,CAACE,CAAC,GAAG,CAAA;AACvB,CAAC,CAAA;AAOD,MAAMC,4BAA4B,GAAGA,CAAC;EACpCC,UAAU;AACVC,EAAAA,OAAAA;AACiC,CAAC,KAAK;AACvC,EAAA,QAAQA,OAAO;IACb,KAAKC,kBAAkB,CAACC,KAAK;AAAE,MAAA;AAC7B,QAAA,OAAOC,aAAI,CAAA;AACjB;AACA;AACA,UAAA,EAAYJ,UAAU,EAAEK,KAAK,GAAG,oBAAoB,CAAE,CAAA;AACtD,UAAA,EAAYL,UAAU,EAAEM,QAAQ,GAAG,oBAAoB,CAAE,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACH,OAAA;IACA,KAAKJ,kBAAkB,CAACK,UAAU,CAAA;AAClC,IAAA;AAAS,MAAA;AACP,QAAA,OAAOH,aAAI,CAAA;AACjB;AACA;AACA,UAAA,EAAYJ,UAAU,EAAEK,KAAK,GAAG,gBAAgB,CAAE,CAAA;AAClD,UAAA,EAAYL,UAAU,EAAEK,KAAK,GAAG,eAAe,CAAE,CAAA;AACjD;AACA,MAAO,CAAA,CAAA;AACH,OAAA;AACF,GAAA;AACF,CAAC,CAAA;MAOYG,wBAAwB,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6CAAA;EAAAC,WAAA,EAAA,YAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACvC,CAAC;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAKC,QAAQ,CAACD,KAAK,EAAE,MAAM,CAAC,EACrC,CAAC;AAAEE,EAAAA,IAAAA;AAAK,CAAC,KAAKrB,mBAAmB,CAACqB,IAAI,CAAC,EAE7B,CAAC;AAAEhB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEK,KAAK,GAAG,gBAAgB,CAAC,EAC3E,CAAC;AAAEL,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEiB,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAElB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEmB,UAAU,EAAEC,iBAAiB,CAAC,OAAO,CAAC,EAEtE,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAOYC,uBAAuB,gBAAGb,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA,YAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,gBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACtC,CAAC;AAAEU,EAAAA,KAAAA;AAAM,CAAC,KAAKA,KAAK,GAAG,GAAG,EAGjCxB,4BAA4B,EAC5B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEiB,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAElB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEmB,UAAU,EAAEC,iBAAiB,CAAC,OAAO,CAAC,EAEtE,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/esm/components/ProgressBar/ProgressBar.types.mjs

@@ -0,0 +1,13 @@
+let ProgressBarSize = /*#__PURE__*/function (ProgressBarSize) {
+  ProgressBarSize["M"] = "m";
+  ProgressBarSize["S"] = "s";
+  return ProgressBarSize;
+}({});
+let ProgressBarVariant = /*#__PURE__*/function (ProgressBarVariant) {
+  ProgressBarVariant["Green"] = "green";
+  ProgressBarVariant["Monochrome"] = "monochrome";
+  return ProgressBarVariant;
+}({});
+
+export { ProgressBarSize, ProgressBarVariant };
+//# sourceMappingURL=ProgressBar.types.mjs.map

package/dist/esm/components/ProgressBar/ProgressBar.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.types.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type {\n  AdditionalStylableProps,\n  AdditionalTestIdProps,\n  BezierComponentProps,\n  SizeProps,\n  VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ProgressBarSize {\n  M = 'm',\n  S = 's',\n}\n\nexport enum ProgressBarVariant {\n  Green = 'green',\n  Monochrome = 'monochrome',\n}\n\ninterface ProgressBarOptions {\n  /**\n   * CSS Width of total progress bar.\n   * If given value is number or doesn't end with proper unit, `defaultUnit` is suffixed to given value.\n   *\n   * @see src/utils/styleUtils.ts\n   * @default 36\n   */\n  width?: number | string\n\n  /**\n   * Progress value in floating point number (between 0 and 1, inclusive).\n   *\n   * @default 0\n   */\n  value?: number\n}\n\nexport default interface ProgressBarProps extends\n  BezierComponentProps,\n  SizeProps<ProgressBarSize>,\n  VariantProps<ProgressBarVariant>,\n  AdditionalStylableProps<'active'>,\n  AdditionalTestIdProps<'active'>,\n  ProgressBarOptions {}\n"],"names":["ProgressBarSize","ProgressBarVariant"],"mappings":"AAQYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKfC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/SectionLabel/SectionLabel.mjs

@@ -0,0 +1,138 @@
+import React__default, { useMemo, useCallback } from 'react';
+import classNames from '../../node_modules/classnames/index.mjs';
+import { isString, isNumber, isNil, isEmpty, isArray } from '../../utils/typeUtils.mjs';
+import { Button } from '../Button/Button.mjs';
+import { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from '../Button/Button.types.mjs';
+import Tooltip from '../Tooltip/Tooltip.mjs';
+import Styled from './SectionLabel.styled.mjs';
+import { IconSize } from '../Icon/Icon.types.mjs';
+import v4 from '../../node_modules/uuid/dist/esm-browser/v4.mjs';
+import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
+import Divider from '../Divider/Divider.mjs';
+import { Typography } from '../../foundation/Typography.mjs';
+
+const SECTION_LABEL_TEST_ID = 'bezier-react-section-label';
+const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content';
+const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content';
+const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content';
+const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content';
+function clickableClassName(onClick) {
+  return !isNil(onClick) ? 'clickable' : undefined;
+}
+function renderSectionLabelActionItem(props, key) {
+  if (!('icon' in props)) {
+    return /*#__PURE__*/React__default.cloneElement(props, {
+      key
+    });
+  }
+  const {
+    icon,
+    iconColor,
+    onClick
+  } = props;
+  if (!isNil(iconColor)) {
+    /*
+     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,
+     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.
+     */
+    return /*#__PURE__*/React__default.createElement(Styled.RightItemWrapper, {
+      key: key,
+      className: clickableClassName(onClick),
+      onClick: onClick
+    }, /*#__PURE__*/React__default.createElement(LegacyIcon, {
+      name: icon,
+      size: IconSize.XS,
+      color: iconColor
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Button, {
+    key: key,
+    size: ButtonSize.XS,
+    styleVariant: ButtonStyleVariant.Tertiary,
+    colorVariant: ButtonColorVariant.Monochrome,
+    leftContent: icon,
+    onClick: onClick
+  });
+}
+function SectionLabel({
+  content: givenContent,
+  open = true,
+  divider = false,
+  help,
+  leftContent,
+  rightContent,
+  onClick,
+  children,
+  wrapperClassName,
+  wrapperInterpolation,
+  contentWrapperClassName,
+  contentWrapperInterpolation,
+  leftWrapperClassName,
+  leftWrapperInterpolation,
+  rightWrapperClassName,
+  rightWrapperInterpolation,
+  ...props
+}) {
+  const content = useMemo(() => /*#__PURE__*/React__default.createElement(Styled.ContentWrapper, {
+    className: contentWrapperClassName,
+    interpolation: contentWrapperInterpolation,
+    "data-testid": SECTION_LABEL_TEST_CONTENT_ID
+  }, isString(givenContent) || isNumber(givenContent) ? /*#__PURE__*/React__default.createElement(Styled.ContentText, {
+    bold: true,
+    typo: Typography.Size13
+  }, givenContent) : givenContent), [givenContent, contentWrapperClassName, contentWrapperInterpolation]);
+  const renderLeftItem = useCallback(item => 'icon' in item ? /*#__PURE__*/React__default.createElement(Styled.LeftIcon, {
+    className: clickableClassName(item.onClick),
+    name: item.icon,
+    size: IconSize.S,
+    color: item.iconColor ?? 'txt-black-dark',
+    onClick: item.onClick
+  }) : item, []);
+  const leftComponent = useMemo(() => {
+    if (isNil(leftContent)) {
+      return null;
+    }
+    const item = renderLeftItem(leftContent);
+    const show = !isNil(item);
+    return show && /*#__PURE__*/React__default.createElement(Styled.LeftContentWrapper, {
+      className: leftWrapperClassName,
+      interpolation: leftWrapperInterpolation,
+      "data-testid": SECTION_LABEL_TEST_LEFT_CONTENT_ID
+    }, item);
+  }, [leftContent, leftWrapperClassName, leftWrapperInterpolation, renderLeftItem]);
+  const rightComponent = useMemo(() => {
+    if (isNil(rightContent) || isEmpty(rightContent)) {
+      return null;
+    }
+    const items = isArray(rightContent) ? rightContent.map(item => renderSectionLabelActionItem(item, v4())) : renderSectionLabelActionItem(rightContent);
+    return /*#__PURE__*/React__default.createElement(Styled.RightContentWrapper, {
+      className: rightWrapperClassName,
+      interpolation: rightWrapperInterpolation,
+      "data-testid": SECTION_LABEL_TEST_RIGHT_CONTENT_ID
+    }, items);
+  }, [rightContent, rightWrapperClassName, rightWrapperInterpolation]);
+  const helpContent = useMemo(() => !isNil(help) && /*#__PURE__*/React__default.createElement(Tooltip, {
+    content: help.tooltipContent,
+    allowHover: true
+  }, /*#__PURE__*/React__default.createElement(Styled.HelpIconWrapper, {
+    "data-testid": SECTION_LABEL_TEST_HELP_CONTENT_ID
+  }, /*#__PURE__*/React__default.createElement(LegacyIcon, {
+    name: help.icon ?? 'help-filled',
+    size: IconSize.XS,
+    color: help.iconColor ?? 'txt-black-dark'
+  }))), [help]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": SECTION_LABEL_TEST_ID
+  }, divider && /*#__PURE__*/React__default.createElement(Divider, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/React__default.createElement(Styled.Wrapper, Object.assign({
+    className: classNames(wrapperClassName, clickableClassName(onClick)),
+    onClick: onClick,
+    interpolation: wrapperInterpolation
+  }, props), leftComponent, content, helpContent, rightComponent), children && /*#__PURE__*/React__default.createElement(Styled.ChildrenWrapper, {
+    show: open
+  }, children));
+}
+
+export { SECTION_LABEL_TEST_CONTENT_ID, SECTION_LABEL_TEST_HELP_CONTENT_ID, SECTION_LABEL_TEST_ID, SECTION_LABEL_TEST_LEFT_CONTENT_ID, SECTION_LABEL_TEST_RIGHT_CONTENT_ID, SectionLabel as default };
+//# sourceMappingURL=SectionLabel.mjs.map

package/dist/esm/components/SectionLabel/SectionLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n  isNumber,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Divider } from '~/src/components/Divider'\nimport { IconSize } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SectionLabelItemProps } from './SectionLabel.types'\nimport type SectionLabelProps from './SectionLabel.types'\n\nimport Styled from './SectionLabel.styled'\n\nexport const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'\nexport const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'\nexport const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'\nexport const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'\nexport const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content'\n\nfunction clickableClassName(onClick?: React.MouseEventHandler) {\n  return !isNil(onClick) ? 'clickable' : undefined\n}\n\nfunction renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string): React.ReactElement {\n  if (!('icon' in props)) {\n    return React.cloneElement(props, { key })\n  }\n\n  const { icon, iconColor, onClick } = props\n\n  if (!isNil(iconColor)) {\n    /*\n     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,\n     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.\n     */\n    return (\n      <Styled.RightItemWrapper\n        key={key}\n        className={clickableClassName(onClick)}\n        onClick={onClick}\n      >\n        <LegacyIcon\n          name={icon}\n          size={IconSize.XS}\n          color={iconColor}\n        />\n      </Styled.RightItemWrapper>\n    )\n  }\n\n  return (\n    <Button\n      key={key}\n      size={ButtonSize.XS}\n      styleVariant={ButtonStyleVariant.Tertiary}\n      colorVariant={ButtonColorVariant.Monochrome}\n      leftContent={icon}\n      onClick={onClick}\n    />\n  )\n}\n\nfunction SectionLabel({\n  content: givenContent,\n  open = true,\n  divider = false,\n  help,\n  leftContent,\n  rightContent,\n  onClick,\n  children,\n  wrapperClassName,\n  wrapperInterpolation,\n  contentWrapperClassName,\n  contentWrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  ...props\n}: SectionLabelProps) {\n  const content = useMemo(() => (\n    <Styled.ContentWrapper\n      className={contentWrapperClassName}\n      interpolation={contentWrapperInterpolation}\n      data-testid={SECTION_LABEL_TEST_CONTENT_ID}\n    >\n      { isString(givenContent) || isNumber(givenContent)\n        ? (\n          <Styled.ContentText bold typo={Typography.Size13}>\n            { givenContent }\n          </Styled.ContentText>\n        ) : givenContent }\n    </Styled.ContentWrapper>\n  ), [\n    givenContent,\n    contentWrapperClassName,\n    contentWrapperInterpolation,\n  ])\n\n  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (\n    'icon' in item\n      ? (\n        <Styled.LeftIcon\n          className={clickableClassName(item.onClick)}\n          name={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          onClick={item.onClick}\n        />\n      ) : item\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n    const show = !isNil(item)\n\n    return show && (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_LEFT_CONTENT_ID}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const rightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderSectionLabelActionItem(item, uuid()))\n      : renderSectionLabelActionItem(rightContent)\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_RIGHT_CONTENT_ID}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n  ])\n\n  const helpContent = useMemo(() => !isNil(help) && (\n    <Tooltip\n      content={help.tooltipContent}\n      allowHover\n    >\n      <Styled.HelpIconWrapper data-testid={SECTION_LABEL_TEST_HELP_CONTENT_ID}>\n        <LegacyIcon\n          name={help.icon ?? 'help-filled'}\n          size={IconSize.XS}\n          color={help.iconColor ?? 'txt-black-dark'}\n        />\n      </Styled.HelpIconWrapper>\n    </Tooltip>\n  ), [help])\n\n  return (\n    <div data-testid={SECTION_LABEL_TEST_ID}>\n      { divider && <Divider orientation=\"horizontal\" /> }\n      <Styled.Wrapper\n        className={classNames(\n          wrapperClassName,\n          clickableClassName(onClick),\n        )}\n        onClick={onClick}\n        interpolation={wrapperInterpolation}\n        {...props}\n      >\n        { leftComponent }\n        { content }\n        { helpContent }\n        { rightComponent }\n      </Styled.Wrapper>\n      { children && (\n        <Styled.ChildrenWrapper show={open}>\n          { children }\n        </Styled.ChildrenWrapper>\n      ) }\n    </div>\n  )\n}\n\nexport default SectionLabel\n"],"names":["SECTION_LABEL_TEST_ID","SECTION_LABEL_TEST_CONTENT_ID","SECTION_LABEL_TEST_LEFT_CONTENT_ID","SECTION_LABEL_TEST_RIGHT_CONTENT_ID","SECTION_LABEL_TEST_HELP_CONTENT_ID","clickableClassName","onClick","isNil","undefined","renderSectionLabelActionItem","props","key","React","cloneElement","icon","iconColor","createElement","Styled","RightItemWrapper","className","LegacyIcon","name","size","IconSize","XS","color","Button","ButtonSize","styleVariant","ButtonStyleVariant","Tertiary","colorVariant","ButtonColorVariant","Monochrome","leftContent","SectionLabel","content","givenContent","open","divider","help","rightContent","children","wrapperClassName","wrapperInterpolation","contentWrapperClassName","contentWrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","useMemo","ContentWrapper","interpolation","isString","isNumber","ContentText","bold","typo","Typography","Size13","renderLeftItem","useCallback","item","LeftIcon","S","leftComponent","show","LeftContentWrapper","rightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","helpContent","Tooltip","tooltipContent","allowHover","HelpIconWrapper","Divider","orientation","Wrapper","Object","assign","classNames","ChildrenWrapper"],"mappings":"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"}

package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs

@@ -0,0 +1,71 @@
+import Text from '../Text/Text.mjs';
+import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
+import { css as FoundationCSS, styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
+
+const clickableElementStyle = FoundationCSS`
+  &.clickable {
+    cursor: pointer;
+  }
+`;
+const LeftIcon = /*#__PURE__*/FoundationStyled(LegacyIcon).withConfig({
+  displayName: "SectionLabelstyled__LeftIcon",
+  componentId: "sc-14g33s5-0"
+})(["", ""], clickableElementStyle);
+const LeftContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__LeftContentWrapper",
+  componentId: "sc-14g33s5-1"
+})(["display:flex;align-items:center;padding-left:6px;", ""], ({
+  interpolation
+}) => interpolation);
+const ContentText = /*#__PURE__*/FoundationStyled(Text).withConfig({
+  displayName: "SectionLabelstyled__ContentText",
+  componentId: "sc-14g33s5-2"
+})(["overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;"], ({
+  foundation
+}) => foundation?.theme?.['txt-black-dark']);
+const ContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__ContentWrapper",
+  componentId: "sc-14g33s5-3"
+})(["display:flex;align-items:center;padding-left:6px;overflow:hidden;", ""], ({
+  interpolation
+}) => interpolation);
+const HelpIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__HelpIconWrapper",
+  componentId: "sc-14g33s5-4"
+})(["width:16px;height:16px;margin-left:8px;"]);
+const RightContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__RightContentWrapper",
+  componentId: "sc-14g33s5-5"
+})(["display:flex;align-items:center;padding-left:6px;margin:0 6px 0 auto;", ""], ({
+  interpolation
+}) => interpolation);
+const RightItemWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__RightItemWrapper",
+  componentId: "sc-14g33s5-6"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;", ""], clickableElementStyle);
+const ChildrenWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__ChildrenWrapper",
+  componentId: "sc-14g33s5-7"
+})(["display:", ";"], ({
+  show
+}) => show ? 'unset' : 'none');
+const Wrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__Wrapper",
+  componentId: "sc-14g33s5-8"
+})(["display:flex;align-items:center;height:28px;", " ", ""], clickableElementStyle, ({
+  interpolation
+}) => interpolation);
+var Styled = {
+  LeftIcon,
+  LeftContentWrapper,
+  ContentText,
+  ContentWrapper,
+  HelpIconWrapper,
+  RightContentWrapper,
+  RightItemWrapper,
+  ChildrenWrapper,
+  Wrapper
+};
+
+export { Styled as default };
+//# sourceMappingURL=SectionLabel.styled.mjs.map

package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.styled.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nconst clickableElementStyle = css`\n  &.clickable {\n    cursor: pointer;\n  }\n`\n\nconst LeftIcon = styled(LegacyIcon)`\n  ${clickableElementStyle}\n`\n\nconst LeftContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst ContentText = styled(Text)`\n  overflow: hidden;\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n\nconst ContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  overflow: hidden;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst HelpIconWrapper = styled.div`\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n`\n\nconst RightContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  margin: 0 6px 0 auto;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst RightItemWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n\n  ${clickableElementStyle}\n`\n\nconst ChildrenWrapper = styled.div<{ show: boolean }>`\n  display: ${({ show }) => (show ? 'unset' : 'none')};\n`\n\nconst Wrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n\n  ${clickableElementStyle}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  LeftIcon,\n  LeftContentWrapper,\n  ContentText,\n  ContentWrapper,\n  HelpIconWrapper,\n  RightContentWrapper,\n  RightItemWrapper,\n  ChildrenWrapper,\n  Wrapper,\n}\n"],"names":["clickableElementStyle","css","LeftIcon","styled","LegacyIcon","withConfig","displayName","componentId","LeftContentWrapper","div","interpolation","ContentText","Text","foundation","theme","ContentWrapper","HelpIconWrapper","RightContentWrapper","RightItemWrapper","ChildrenWrapper","show","Wrapper"],"mappings":";;;;AAUA,MAAMA,qBAAqB,GAAGC,aAAI,CAAA;AAClC;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,QAAQ,gBAAGC,gBAAM,CAACC,UAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EAC/BP,qBAAqB,CACxB,CAAA;AAED,MAAMQ,kBAAkB,gBAAGL,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mDAAA,EAAA,EAAA,CAAA,EAKjC,CAAC;AAAEG,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,MAAMC,WAAW,gBAAGR,gBAAM,CAACS,IAAI,CAAC,CAAAP,UAAA,CAAA;EAAAC,WAAA,EAAA,iCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,6CAAA,CAAA,EAErB,CAAC;AAAEM,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAC,CAGnE,CAAA;AAED,MAAMC,cAAc,gBAAGZ,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mEAAA,EAAA,EAAA,CAAA,EAM7B,CAAC;AAAEG,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,MAAMM,eAAe,gBAAGb,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIjC,CAAA,CAAA,CAAA,yCAAA,CAAA,CAAA,CAAA;AAED,MAAMU,mBAAmB,gBAAGd,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,EAAA,CAAA,EAMlC,CAAC;AAAEG,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,MAAMQ,gBAAgB,gBAAGf,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gFAAA,EAAA,EAAA,CAAA,EAO/BP,qBAAqB,CACxB,CAAA;AAED,MAAMmB,eAAe,gBAAGhB,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,GAAA,CAAA,EACrB,CAAC;AAAEa,EAAAA,IAAAA;AAAK,CAAC,KAAMA,IAAI,GAAG,OAAO,GAAG,MAAO,CACnD,CAAA;AAED,MAAMC,OAAO,gBAAGlB,gBAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKtBP,CAAAA,CAAAA,CAAAA,8CAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,qBAAqB,EAErB,CAAC;AAAEU,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,aAAe;EACbR,QAAQ;EACRM,kBAAkB;EAClBG,WAAW;EACXI,cAAc;EACdC,eAAe;EACfC,mBAAmB;EACnBC,gBAAgB;EAChBC,eAAe;AACfE,EAAAA,OAAAA;AACF,CAAC;;;;"}

package/dist/esm/components/Spinner/Spinner.mjs

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { SpinnerSize } from './Spinner.types.mjs';
+import { SpinIcon } from './Spinner.styled.mjs';
+
+const SPINNER_TEST_ID = 'bezier-react-spinner';
+function Spinner({
+  testId = SPINNER_TEST_ID,
+  style,
+  className,
+  interpolation,
+  size = SpinnerSize.M,
+  color
+}) {
+  return /*#__PURE__*/React__default.createElement(SpinIcon, {
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    key: "spinner",
+    size: size,
+    color: color,
+    "data-testid": testId
+  });
+}
+
+export { SPINNER_TEST_ID, Spinner as default };
+//# sourceMappingURL=Spinner.mjs.map

package/dist/esm/components/Spinner/Spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\n\nimport type SpinnerProps from './Spinner.types'\nimport { SpinnerSize } from './Spinner.types'\n\nimport { SpinIcon } from './Spinner.styled'\n\nexport const SPINNER_TEST_ID = 'bezier-react-spinner'\n\nfunction Spinner({\n  testId = SPINNER_TEST_ID,\n  style,\n  className,\n  interpolation,\n  size = SpinnerSize.M,\n  color,\n}: SpinnerProps) {\n  return (\n    <SpinIcon\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      key=\"spinner\"\n      size={size}\n      color={color}\n      data-testid={testId}\n    />\n  )\n}\n\nexport default Spinner\n"],"names":["SPINNER_TEST_ID","Spinner","testId","style","className","interpolation","size","SpinnerSize","M","color","React","createElement","SpinIcon","key"],"mappings":";;;;AAOO,MAAMA,eAAe,GAAG,uBAAsB;AAErD,SAASC,OAAOA,CAAC;AACfC,EAAAA,MAAM,GAAGF,eAAe;EACxBG,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,IAAI,GAAGC,WAAW,CAACC,CAAC;AACpBC,EAAAA,KAAAA;AACY,CAAC,EAAE;AACf,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,QAAQ,EAAA;AACPT,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BQ,IAAAA,GAAG,EAAC,SAAS;AACbP,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,KAAK,EAAEA,KAAM;IACb,aAAaP,EAAAA,MAAAA;AAAO,GACrB,CAAC,CAAA;AAEN;;;;"}

package/dist/esm/components/Spinner/Spinner.styled.mjs

@@ -0,0 +1,53 @@
+import { SpinnerThickness, SpinnerSize } from './Spinner.types.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
+import { keyframes } from 'styled-components';
+
+function getThicknessFromSize(size) {
+  switch (size) {
+    case SpinnerSize.XL:
+      return SpinnerThickness.Bold;
+    case SpinnerSize.S:
+    case SpinnerSize.XS:
+      return SpinnerThickness.Light;
+    case SpinnerSize.L:
+    case SpinnerSize.M:
+    default:
+      return SpinnerThickness.Normal;
+  }
+}
+const spinnerKeyframes = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const spinnerAnimation = () => FoundationCSS`
+  animation: ${spinnerKeyframes} 1s infinite linear;
+`;
+const SpinIcon = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Spinnerstyled__SpinIcon",
+  componentId: "sc-1mf9m5g-0"
+})(["display:inline-block;width:", "px;height:", "px;border-style:solid;border-width:", "px;border-top-color:transparent;border-right-color:", ";border-bottom-color:", ";border-left-color:", ";border-radius:50%;", " ", ";"], ({
+  size
+}) => size, ({
+  size
+}) => size, ({
+  size
+}) => getThicknessFromSize(size), ({
+  foundation,
+  color
+}) => color ? foundation?.theme?.[color] : 'inherit', ({
+  foundation,
+  color
+}) => color ? foundation?.theme?.[color] : 'inherit', ({
+  foundation,
+  color
+}) => color ? foundation?.theme?.[color] : 'inherit', spinnerAnimation, ({
+  interpolation
+}) => interpolation);
+
+export { SpinIcon };
+//# sourceMappingURL=Spinner.styled.mjs.map

package/dist/esm/components/Spinner/Spinner.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.styled.mjs","sources":["../../../../src/components/Spinner/Spinner.styled.ts"],"sourcesContent":["import {\n  css,\n  keyframes,\n  styled,\n} from '~/src/foundation'\n\nimport {\n  SpinnerSize,\n  SpinnerThickness,\n  type StyledSpinnerProps,\n} from './Spinner.types'\n\nfunction getThicknessFromSize(size: SpinnerSize) {\n  switch (size) {\n    case SpinnerSize.XL:\n      return SpinnerThickness.Bold\n    case SpinnerSize.S:\n    case SpinnerSize.XS:\n      return SpinnerThickness.Light\n    case SpinnerSize.L:\n    case SpinnerSize.M:\n    default:\n      return SpinnerThickness.Normal\n  }\n}\n\nconst spinnerKeyframes = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nconst spinnerAnimation = () => css`\n  animation: ${spinnerKeyframes} 1s infinite linear;\n`\n\nexport const SpinIcon = styled.div<StyledSpinnerProps>`\n  display: inline-block;\n  width: ${({ size }) => size}px;\n  height: ${({ size }) => size}px;\n  border-style: solid;\n  border-width: ${({ size }) => getThicknessFromSize(size)}px;\n  border-top-color: transparent;\n  border-right-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')};\n  border-bottom-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')};\n  border-left-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')};\n  border-radius: 50%;\n  ${spinnerAnimation}\n\n  ${({ interpolation }) => interpolation};\n`\n"],"names":["getThicknessFromSize","size","SpinnerSize","XL","SpinnerThickness","Bold","S","XS","Light","L","M","Normal","spinnerKeyframes","keyframes","spinnerAnimation","css","SpinIcon","styled","div","withConfig","displayName","componentId","foundation","color","theme","interpolation"],"mappings":";;;;AAYA,SAASA,oBAAoBA,CAACC,IAAiB,EAAE;AAC/C,EAAA,QAAQA,IAAI;IACV,KAAKC,WAAW,CAACC,EAAE;MACjB,OAAOC,gBAAgB,CAACC,IAAI,CAAA;IAC9B,KAAKH,WAAW,CAACI,CAAC,CAAA;IAClB,KAAKJ,WAAW,CAACK,EAAE;MACjB,OAAOH,gBAAgB,CAACI,KAAK,CAAA;IAC/B,KAAKN,WAAW,CAACO,CAAC,CAAA;IAClB,KAAKP,WAAW,CAACQ,CAAC,CAAA;AAClB,IAAA;MACE,OAAON,gBAAgB,CAACO,MAAM,CAAA;AAClC,GAAA;AACF,CAAA;AAEA,MAAMC,gBAAgB,GAAGC,SAAU,CAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,gBAAgB,GAAGA,MAAMC,aAAI,CAAA;AACnC,aAAA,EAAeH,gBAAiB,CAAA;AAChC,CAAC,CAAA;MAEYI,QAAQ,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6BAAA,EAAA,YAAA,EAAA,qCAAA,EAAA,qDAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAEvB,CAAC;AAAEpB,EAAAA,IAAAA;AAAK,CAAC,KAAKA,IAAI,EACjB,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKA,IAAI,EAEZ,CAAC;AAAEA,EAAAA,IAAAA;AAAK,CAAC,KAAKD,oBAAoB,CAACC,IAAI,CAAC,EAElC,CAAC;EAAEqB,UAAU;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAMA,KAAK,GAAGD,UAAU,EAAEE,KAAK,GAAGD,KAAK,CAAC,GAAG,SAAU,EAC1E,CAAC;EAAED,UAAU;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAMA,KAAK,GAAGD,UAAU,EAAEE,KAAK,GAAGD,KAAK,CAAC,GAAG,SAAU,EAC7E,CAAC;EAAED,UAAU;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAMA,KAAK,GAAGD,UAAU,EAAEE,KAAK,GAAGD,KAAK,CAAC,GAAG,SAAU,EAE9FT,gBAAgB,EAEhB,CAAC;AAAEW,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/esm/components/Spinner/Spinner.types.mjs

@@ -0,0 +1,17 @@
+let SpinnerSize = /*#__PURE__*/function (SpinnerSize) {
+  SpinnerSize[SpinnerSize["XL"] = 50] = "XL";
+  SpinnerSize[SpinnerSize["L"] = 24] = "L";
+  SpinnerSize[SpinnerSize["M"] = 20] = "M";
+  SpinnerSize[SpinnerSize["S"] = 16] = "S";
+  SpinnerSize[SpinnerSize["XS"] = 12] = "XS";
+  return SpinnerSize;
+}({});
+let SpinnerThickness = /*#__PURE__*/function (SpinnerThickness) {
+  SpinnerThickness[SpinnerThickness["Bold"] = 4] = "Bold";
+  SpinnerThickness[SpinnerThickness["Normal"] = 3] = "Normal";
+  SpinnerThickness[SpinnerThickness["Light"] = 2] = "Light";
+  return SpinnerThickness;
+}({});
+
+export { SpinnerSize, SpinnerThickness };
+//# sourceMappingURL=Spinner.types.mjs.map

package/dist/esm/components/Spinner/Spinner.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.mjs","sources":["../../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ColorProps,\n  type SizeProps,\n} from '~/src/types/ComponentProps'\n\nexport enum SpinnerSize {\n  XL = 50,\n  L = 24,\n  M = 20,\n  S = 16,\n  XS = 12,\n}\n\nexport enum SpinnerThickness {\n  Bold = 4,\n  Normal = 3,\n  Light = 2,\n}\n\nexport default interface SpinnerProps extends\n  BezierComponentProps,\n  SizeProps<SpinnerSize>,\n  ColorProps {}\n\nexport interface StyledSpinnerProps extends SpinnerProps {\n  size: NonNullable<SpinnerProps['size']>\n}\n"],"names":["SpinnerSize","SpinnerThickness"],"mappings":"AAMYA,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAQXC,IAAAA,gBAAgB,0BAAhBA,gBAAgB,EAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAhBA,gBAAgB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Stack/HStack/HStack.mjs

@@ -0,0 +1,15 @@
+import React__default, { forwardRef } from 'react';
+import { Stack } from '../Stack/Stack.mjs';
+
+/**
+ * A container for horizontal flex layout.
+ */
+const HStack = /*#__PURE__*/forwardRef(function HStack(props, forwardedRef) {
+  return /*#__PURE__*/React__default.createElement(Stack, Object.assign({
+    ref: forwardedRef,
+    direction: "horizontal"
+  }, props));
+});
+
+export { HStack };
+//# sourceMappingURL=HStack.mjs.map

package/dist/esm/components/Stack/HStack/HStack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.mjs","sources":["../../../../../src/components/Stack/HStack/HStack.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport type { Ref } from 'react'\n\nimport { Stack } from '~/src/components/Stack/Stack'\n\nimport type HStackProps from './HStack.types'\n\n/**\n * A container for horizontal flex layout.\n */\nexport const HStack = forwardRef(function HStack(\n  props: HStackProps,\n  forwardedRef: Ref<HTMLElement>,\n) {\n  return (<Stack ref={forwardedRef} direction=\"horizontal\" {...props} />)\n})\n"],"names":["HStack","forwardRef","props","forwardedRef","React","createElement","Stack","Object","assign","ref","direction"],"mappings":";;;AAOA;AACA;AACA;AACO,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CAC9CE,KAAkB,EAClBC,YAA8B,EAC9B;EACA,oBAAQC,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAACC,IAAAA,GAAG,EAAEN,YAAa;AAACO,IAAAA,SAAS,EAAC,YAAA;GAAiBR,EAAAA,KAAK,CAAG,CAAC,CAAA;AACxE,CAAC;;;;"}

package/dist/esm/components/Stack/Spacer/Spacer.mjs

@@ -0,0 +1,15 @@
+import React__default, { forwardRef } from 'react';
+import { StackItem } from '../StackItem/StackItem.mjs';
+
+const Spacer = /*#__PURE__*/forwardRef(function Spacer(props, forwardedRef) {
+  return /*#__PURE__*/React__default.createElement(StackItem, Object.assign({
+    ref: forwardedRef,
+    size: 0,
+    weight: 1,
+    grow: true,
+    shrink: true
+  }, props));
+});
+
+export { Spacer };
+//# sourceMappingURL=Spacer.mjs.map

package/dist/esm/components/Stack/Spacer/Spacer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.mjs","sources":["../../../../../src/components/Stack/Spacer/Spacer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport type { Ref } from 'react'\n\nimport { StackItem } from '~/src/components/Stack/StackItem'\n\nimport type SpacerProps from './Spacer.types'\n\nexport const Spacer = forwardRef(function Spacer(\n  props: SpacerProps,\n  forwardedRef: Ref<HTMLElement>,\n) {\n  return (\n    <StackItem\n      ref={forwardedRef}\n      size={0}\n      weight={1}\n      grow\n      shrink\n      {...props}\n    />\n  )\n})\n"],"names":["Spacer","forwardRef","props","forwardedRef","React","createElement","StackItem","Object","assign","ref","size","weight","grow","shrink"],"mappings":";;;AAOO,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CAC9CE,KAAkB,EAClBC,YAA8B,EAC9B;EACA,oBACEC,cAAA,CAAAC,aAAA,CAACC,SAAS,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACRC,IAAAA,GAAG,EAAEN,YAAa;AAClBO,IAAAA,IAAI,EAAE,CAAE;AACRC,IAAAA,MAAM,EAAE,CAAE;IACVC,IAAI,EAAA,IAAA;IACJC,MAAM,EAAA,IAAA;GACFX,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}

package/dist/esm/components/Stack/Stack/Stack.mjs

@@ -0,0 +1,70 @@
+import React__default, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
+import { Container } from './Stack.styled.mjs';
+
+/**
+ * `Stack` provides an abstraction of **flex layout** so that
+ * rendering of child elements **linearly** can be done
+ * with simplified options.
+ *
+ * `Stack` always fills the parent element.
+ *
+ * Be reminded to list `StackItem`s to be direct child of `Stack`.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Stack direction="horizontal" spacing={8}>
+ *  <StackItem>{ ... }</StackItem>
+ *  <StackItem>{ ... }</StackItem>
+ * </Stack>
+ * ```
+ */
+const Stack = /*#__PURE__*/forwardRef(function Stack({
+  as = 'div',
+  testId = 'bezier-react-stack',
+  style,
+  className,
+  interpolation,
+  children,
+  direction,
+  justify = 'start',
+  align = 'stretch',
+  spacing = 0,
+  ...rest
+}, forwardedRef) {
+  const firstValidElementIdx = useRef(-1);
+  return /*#__PURE__*/React__default.createElement(Container, Object.assign({
+    ref: forwardedRef,
+    as: as,
+    "data-testid": testId,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    direction: direction,
+    justify: justify,
+    align: align
+  }, rest), Children.map(children, (element, index) => {
+    if (! /*#__PURE__*/isValidElement(element)) {
+      return element;
+    }
+
+    /**
+       * NOTE: this assumes that this element is `StackItem`.
+       *
+       * Even if the child is not a `StackItem` component,
+       * it could forward the prop to `StackItem` deeper in the tree,
+       * or implement a custom behavior compatible with `StackItemProps`.
+       */
+    if (firstValidElementIdx.current === -1) {
+      firstValidElementIdx.current = index;
+    }
+    return /*#__PURE__*/cloneElement(element, {
+      ...element.props,
+      direction,
+      marginBefore: element.props.marginBefore ?? (index > firstValidElementIdx.current ? spacing : 0)
+    });
+  }));
+});
+
+export { Stack };
+//# sourceMappingURL=Stack.mjs.map

package/dist/esm/components/Stack/Stack/Stack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.mjs","sources":["../../../../../src/components/Stack/Stack/Stack.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useRef,\n} from 'react'\nimport type { Ref } from 'react'\n\nimport type StackProps from './Stack.types'\n\nimport * as Styled from './Stack.styled'\n\n/**\n * `Stack` provides an abstraction of **flex layout** so that\n * rendering of child elements **linearly** can be done\n * with simplified options.\n *\n * `Stack` always fills the parent element.\n *\n * Be reminded to list `StackItem`s to be direct child of `Stack`.\n *\n * @example\n *\n * ```tsx\n * <Stack direction=\"horizontal\" spacing={8}>\n *  <StackItem>{ ... }</StackItem>\n *  <StackItem>{ ... }</StackItem>\n * </Stack>\n * ```\n */\nexport const Stack = forwardRef(function Stack(\n  {\n    as = 'div',\n    testId = 'bezier-react-stack',\n    style,\n    className,\n    interpolation,\n    children,\n    direction,\n    justify = 'start',\n    align = 'stretch',\n    spacing = 0,\n    ...rest\n  }: StackProps,\n  forwardedRef: Ref<HTMLElement>,\n) {\n  const firstValidElementIdx = useRef(-1)\n\n  return (\n    <Styled.Container\n      ref={forwardedRef}\n      as={as}\n      data-testid={testId}\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      direction={direction}\n      justify={justify}\n      align={align}\n      {...rest}\n    >\n      { Children.map(\n        children,\n        (element, index) => {\n          if (!isValidElement(element)) { return element }\n\n          /**\n             * NOTE: this assumes that this element is `StackItem`.\n             *\n             * Even if the child is not a `StackItem` component,\n             * it could forward the prop to `StackItem` deeper in the tree,\n             * or implement a custom behavior compatible with `StackItemProps`.\n             */\n          if (firstValidElementIdx.current === -1) { firstValidElementIdx.current = index }\n          return cloneElement(element, {\n            ...element.props,\n            direction,\n            marginBefore:\n                element.props.marginBefore ??\n                (index > firstValidElementIdx.current ? spacing : 0),\n          })\n        },\n\n      ) }\n    </Styled.Container>\n  )\n})\n"],"names":["Stack","forwardRef","as","testId","style","className","interpolation","children","direction","justify","align","spacing","rest","forwardedRef","firstValidElementIdx","useRef","React","createElement","Styled","Object","assign","ref","Children","map","element","index","isValidElement","current","cloneElement","props","marginBefore"],"mappings":";;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AACEE,EAAAA,EAAE,GAAG,KAAK;AACVC,EAAAA,MAAM,GAAG,oBAAoB;EAC7BC,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,QAAQ;EACRC,SAAS;AACTC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,SAAS;AACjBC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC,IAAAA;AACO,CAAC,EACbC,YAA8B,EAC9B;AACA,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;EAEvC,oBACEC,cAAA,CAAAC,aAAA,CAACC,SAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAER,YAAa;AAClBX,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BE,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EACTE,IAAI,CAAA,EAENU,QAAQ,CAACC,GAAG,CACZhB,QAAQ,EACR,CAACiB,OAAO,EAAEC,KAAK,KAAK;AAClB,IAAA,IAAI,eAACC,cAAc,CAACF,OAAO,CAAC,EAAE;AAAE,MAAA,OAAOA,OAAO,CAAA;AAAC,KAAA;;AAE/C;AACV;AACA;AACA;AACA;AACA;AACA;AACU,IAAA,IAAIV,oBAAoB,CAACa,OAAO,KAAK,CAAC,CAAC,EAAE;MAAEb,oBAAoB,CAACa,OAAO,GAAGF,KAAK,CAAA;AAAC,KAAA;IAChF,oBAAOG,YAAY,CAACJ,OAAO,EAAE;MAC3B,GAAGA,OAAO,CAACK,KAAK;MAChBrB,SAAS;AACTsB,MAAAA,YAAY,EACRN,OAAO,CAACK,KAAK,CAACC,YAAY,KACzBL,KAAK,GAAGX,oBAAoB,CAACa,OAAO,GAAGhB,OAAO,GAAG,CAAC,CAAA;AACzD,KAAC,CAAC,CAAA;AACJ,GAEF,CACgB,CAAC,CAAA;AAEvB,CAAC;;;;"}

package/dist/esm/components/Stack/Stack/Stack.styled.mjs

@@ -0,0 +1,24 @@
+import { flex } from '../util/flexAdapter.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const Container = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Stackstyled__Container",
+  componentId: "sc-1ln5a64-0"
+})(["display:flex;width:100%;height:100%;", " ", " ", " ", ""], ({
+  direction
+}) => FoundationCSS`
+    flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
+  `, ({
+  justify
+}) => FoundationCSS`
+    justify-content: ${flex(justify)};
+  `, ({
+  align
+}) => FoundationCSS`
+    align-items: ${flex(align)};
+  `, ({
+  interpolation
+}) => interpolation);
+
+export { Container };
+//# sourceMappingURL=Stack.styled.mjs.map

package/dist/esm/components/Stack/Stack/Stack.styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.styled.mjs","sources":["../../../../../src/components/Stack/Stack/Stack.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { flex } from '~/src/components/Stack/util'\n\nimport type StackProps from './Stack.types'\n\ninterface ContainerProps extends\n  Required<Pick<StackProps, 'interpolation' | 'direction' | 'justify' | 'align'>> {}\n\nexport const Container = styled.div<ContainerProps>`\n  display: flex;\n  width: 100%;\n  height: 100%;\n\n  ${({ direction }) => css`\n    flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};\n  `}\n\n  ${({ justify }) => css`\n    justify-content: ${flex(justify)};\n  `}\n\n  ${({ align }) => css`\n    align-items: ${flex(align)};\n  `}\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","direction","css","justify","flex","align","interpolation"],"mappings":";;;MAYaA,SAAS,gBAAGC,gBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAK/B,CAAC;AAAEC,EAAAA,SAAAA;AAAU,CAAC,KAAKC,aAAI,CAAA;AAC3B,oBAAA,EAAsBD,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG,QAAS,CAAA;AACpE,EAAA,CAAG,EAEC,CAAC;AAAEE,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,aAAI,CAAA;AACzB,qBAAuBE,EAAAA,IAAI,CAACD,OAAO,CAAE,CAAA;AACrC,EAAA,CAAG,EAEC,CAAC;AAAEE,EAAAA,KAAAA;AAAM,CAAC,KAAKH,aAAI,CAAA;AACvB,iBAAmBE,EAAAA,IAAI,CAACC,KAAK,CAAE,CAAA;AAC/B,EAAA,CAAG,EAEC,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}