@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/ListItem/ListItem.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useMergeRefs = require('../../hooks/useMergeRefs.js');
+var functionUtils = require('../../utils/functionUtils.js');
+var stringUtils = require('../../utils/stringUtils.js');
+var typeUtils = require('../../utils/typeUtils.js');
+var Text = require('../Text/Text.js');
+var ListItem_types = require('./ListItem.types.js');
+var useAdjacentElementBorderRadius = require('./useAdjacentElementBorderRadius.js');
+var ListItem_styled = require('./ListItem.styled.js');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+var Icon_types = require('../Icon/Icon.types.js');
+var Typography = require('../../foundation/Typography.js');
+
+const LINE_BREAK_CHAR = '\n';
+const LIST_ITEM_TEST_ID = 'bezier-react-list-menu-item';
+function filterActiveItem(node) {
+  return node.dataset.active === 'true';
+}
+function ListItem({
+  className,
+  contentClassName,
+  iconClassName,
+  as,
+  testId = LIST_ITEM_TEST_ID,
+  size = ListItem_types.ListItemSize.M,
+  descriptionMaxLines,
+  content,
+  description,
+  name,
+  leftContent,
+  leftIcon,
+  variant = ListItem_types.ListItemVariant.Monochrome,
+  href = '',
+  hide = false,
+  rightContent = null,
+  /* OptionItem Props */
+  optionKey,
+  /* Activatable Element Props */
+  active,
+  activeClassName,
+  focused = false,
+  disabled = false,
+  /* HTMLAttribute Props */
+  onClick = functionUtils.noop,
+  onMouseDown = functionUtils.noop,
+  onMouseEnter = functionUtils.noop,
+  onMouseLeave = functionUtils.noop,
+  ...otherProps
+}, forwardedRef) {
+  const [listItemElement, setListItemElement] = React.useState(null);
+  const setListItemRef = React.useCallback(node => {
+    if (!node) {
+      return;
+    }
+    setListItemElement(node);
+  }, []);
+  const mergedRef = useMergeRefs.default(setListItemRef, forwardedRef);
+  const isHyperLink = !typeUtils.isEmpty(href);
+  const isActive = isHyperLink ? false : active;
+  useAdjacentElementBorderRadius.default(listItemElement, filterActiveItem, isActive);
+  const mergedClassName = React.useMemo(() => stringUtils.mergeClassNames(className, isActive && activeClassName || undefined), [className, activeClassName, isActive]);
+  const handleClick = React.useCallback(e => {
+    if (!disabled) {
+      onClick(e, name);
+    }
+  }, [disabled, name, onClick]);
+  const getNewLineComponent = React.useCallback(desc => desc.split(LINE_BREAK_CHAR).map((str, index) => {
+    if (index === 0) {
+      return /*#__PURE__*/React.createElement(Text.default, {
+        key: v4.default(),
+        typo: Typography.Typography.Size12
+      }, str);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: v4.default()
+    }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text.default, {
+      typo: Typography.Typography.Size12
+    }, str));
+  }), []);
+  const leftComponent = React.useMemo(() => {
+    if (!typeUtils.isNil(leftContent)) {
+      return /*#__PURE__*/React.createElement(ListItem_styled.LeftContentWrapper, null, leftContent);
+    }
+    if (!typeUtils.isNil(leftIcon)) {
+      return /*#__PURE__*/React.createElement(ListItem_styled.LeftContentWrapper, null, /*#__PURE__*/React.createElement(ListItem_styled.StyledIcon, {
+        className: iconClassName,
+        source: leftIcon,
+        size: Icon_types.IconSize.S,
+        active: isActive,
+        variant: variant
+      }));
+    }
+    return null;
+  }, [isActive, iconClassName, leftContent, leftIcon, variant]);
+  const titleComponent = React.useMemo(() => /*#__PURE__*/React.createElement(ListItem_styled.TitleWrapper, {
+    className: contentClassName
+  }, typeUtils.isString(content) ? /*#__PURE__*/React.createElement(ListItem_styled.Title, null, /*#__PURE__*/React.createElement(Text.default, {
+    typo: size === ListItem_types.ListItemSize.XL ? Typography.Typography.Size18 : Typography.Typography.Size14
+  }, content)) : content), [content, contentClassName, size]);
+  const descriptionComponent = React.useMemo(() => /*#__PURE__*/React.createElement(ListItem_styled.DescriptionWrapper, null, /*#__PURE__*/React.createElement(ListItem_styled.Description, {
+    descriptionMaxLines: descriptionMaxLines
+  }, typeUtils.isString(description) ? getNewLineComponent(description) : description)), [description, descriptionMaxLines, getNewLineComponent]);
+  const rightComponent = React.useMemo(() => /*#__PURE__*/React.createElement(ListItem_styled.RightContent, null, rightContent), [rightContent]);
+  const ContentComponent = React.useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem_styled.ContentWrapper, null, leftComponent, titleComponent, description && descriptionComponent), rightContent && rightComponent), [leftComponent, titleComponent, description, descriptionComponent, rightContent, rightComponent]);
+  const commonDataAttr = React.useMemo(() => ({
+    'data-active': isActive,
+    'data-option-key': optionKey,
+    'data-testid': testId
+  }), [isActive, optionKey, testId]);
+  const commonListItemProps = React.useMemo(() => ({
+    ref: mergedRef,
+    className: mergedClassName,
+    size,
+    onClick: handleClick,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    active: isActive,
+    focused,
+    disabled,
+    variant,
+    ...otherProps
+  }), [mergedRef, mergedClassName, size, handleClick, onMouseDown, onMouseEnter, onMouseLeave, isActive, focused, disabled, variant, otherProps]);
+  if (hide) {
+    return null;
+  }
+  return isHyperLink ? /*#__PURE__*/React.createElement(ListItem_styled.Wrapper, Object.assign({}, commonDataAttr, commonListItemProps, {
+    as: 'a',
+    href: href,
+    draggable: false,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }), ContentComponent) : /*#__PURE__*/React.createElement(ListItem_styled.Wrapper, Object.assign({}, commonDataAttr, commonListItemProps, {
+    as: as
+  }), ContentComponent);
+}
+var ListItem$1 = /*#__PURE__*/React.forwardRef(ListItem);
+
+exports.LIST_ITEM_TEST_ID = LIST_ITEM_TEST_ID;
+exports.default = ListItem$1;
+//# sourceMappingURL=ListItem.js.map

package/dist/cjs/components/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/functionUtils'\nimport { mergeClassNames } from '~/src/utils/stringUtils'\nimport {\n  isEmpty,\n  isNil,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type ListItemProps from './ListItem.types'\nimport {\n  ListItemSize,\n  ListItemVariant,\n} from './ListItem.types'\nimport useAdjacentElementBorderRadius from './useAdjacentElementBorderRadius'\n\nimport {\n  ContentWrapper,\n  Description,\n  DescriptionWrapper,\n  LeftContentWrapper,\n  RightContent,\n  StyledIcon,\n  Title,\n  TitleWrapper,\n  Wrapper,\n} from './ListItem.styled'\n\nconst LINE_BREAK_CHAR = '\\n'\n\nexport const LIST_ITEM_TEST_ID = 'bezier-react-list-menu-item'\n\nfunction filterActiveItem(node: HTMLElement) {\n  return node.dataset.active === 'true'\n}\n\ntype ListItemRef = HTMLDivElement & HTMLAnchorElement\n\nfunction ListItem({\n  className,\n  contentClassName,\n  iconClassName,\n  as,\n  testId = LIST_ITEM_TEST_ID,\n  size = ListItemSize.M,\n  descriptionMaxLines,\n  content,\n  description,\n  name,\n  leftContent,\n  leftIcon,\n  variant = ListItemVariant.Monochrome,\n  href = '',\n  hide = false,\n  rightContent = null,\n  /* OptionItem Props */\n  optionKey,\n  /* Activatable Element Props */\n  active,\n  activeClassName,\n  focused = false,\n  disabled = false,\n  /* HTMLAttribute Props */\n  onClick = noop,\n  onMouseDown = noop,\n  onMouseEnter = noop,\n  onMouseLeave = noop,\n  ...otherProps\n}: ListItemProps,\nforwardedRef: React.Ref<ListItemRef>,\n) {\n  const [listItemElement, setListItemElement] = useState<ListItemRef | null>(null)\n\n  const setListItemRef = useCallback((node: ListItemRef | null) => {\n    if (!node) { return }\n    setListItemElement(node)\n  }, [])\n\n  const mergedRef = useMergeRefs<ListItemRef>(setListItemRef, forwardedRef)\n\n  const isHyperLink = !isEmpty(href)\n  const isActive = isHyperLink ? false : active\n\n  useAdjacentElementBorderRadius(listItemElement, filterActiveItem, isActive)\n\n  const mergedClassName = useMemo(() => (\n    mergeClassNames(className, ((isActive && activeClassName) || undefined))\n  ), [\n    className,\n    activeClassName,\n    isActive,\n  ])\n\n  const handleClick = useCallback((e: React.MouseEvent) => {\n    if (!disabled) {\n      onClick(e, name)\n    }\n  }, [\n    disabled,\n    name,\n    onClick,\n  ])\n\n  const getNewLineComponent = useCallback((desc: string) => (\n    desc.split(LINE_BREAK_CHAR).map((str, index) => {\n      if (index === 0) {\n        return (\n          <Text key={uuid()} typo={Typography.Size12}>\n            { str }\n          </Text>\n        )\n      }\n\n      return (\n        <React.Fragment key={uuid()}>\n          <br />\n          <Text typo={Typography.Size12}>\n            { str }\n          </Text>\n        </React.Fragment>\n      )\n    })\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (!isNil(leftContent)) {\n      return (\n        <LeftContentWrapper>\n          { leftContent }\n        </LeftContentWrapper>\n      )\n    }\n\n    if (!isNil(leftIcon)) {\n      return (\n        <LeftContentWrapper>\n          <StyledIcon\n            className={iconClassName}\n            source={leftIcon}\n            size={IconSize.S}\n            active={isActive}\n            variant={variant}\n          />\n        </LeftContentWrapper>\n      )\n    }\n\n    return null\n  }, [\n    isActive,\n    iconClassName,\n    leftContent,\n    leftIcon,\n    variant,\n  ])\n\n  const titleComponent = useMemo(() => (\n    <TitleWrapper className={contentClassName}>\n      { isString(content) ? (\n        <Title>\n          <Text\n            typo={size === ListItemSize.XL\n              ? Typography.Size18\n              : Typography.Size14}\n          >\n            { content }\n          </Text>\n        </Title>\n      ) : content }\n    </TitleWrapper>\n  ), [\n    content,\n    contentClassName,\n    size,\n  ])\n\n  const descriptionComponent = useMemo(() => (\n    <DescriptionWrapper>\n      <Description descriptionMaxLines={descriptionMaxLines}>\n        {\n          isString(description)\n            ? getNewLineComponent(description)\n            : description\n        }\n      </Description>\n    </DescriptionWrapper>\n  ), [\n    description,\n    descriptionMaxLines,\n    getNewLineComponent,\n  ])\n\n  const rightComponent = useMemo(() => (\n    <RightContent>\n      { rightContent }\n    </RightContent>\n  ), [rightContent])\n\n  const ContentComponent = useMemo(() => (\n    <>\n      <ContentWrapper>\n        { leftComponent }\n        { titleComponent }\n        { description && descriptionComponent }\n      </ContentWrapper>\n      { rightContent && rightComponent }\n    </>\n  ), [\n    leftComponent,\n    titleComponent,\n    description,\n    descriptionComponent,\n    rightContent,\n    rightComponent,\n  ])\n\n  const commonDataAttr = useMemo(() => ({\n    'data-active': isActive,\n    'data-option-key': optionKey,\n    'data-testid': testId,\n  }), [\n    isActive,\n    optionKey,\n    testId,\n  ])\n\n  const commonListItemProps = useMemo((): ListItemProps & { ref: React.Ref<ListItemRef> } => ({\n    ref: mergedRef,\n    className: mergedClassName,\n    size,\n    onClick: handleClick,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    active: isActive,\n    focused,\n    disabled,\n    variant,\n    ...otherProps,\n  }), [\n    mergedRef,\n    mergedClassName,\n    size,\n    handleClick,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    isActive,\n    focused,\n    disabled,\n    variant,\n    otherProps,\n  ])\n\n  if (hide) { return null }\n\n  return isHyperLink\n    ? (\n      <Wrapper\n        {...commonDataAttr}\n        {...commonListItemProps}\n        as={'a' as React.ElementType<any>}\n        href={href}\n        draggable={false}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        { ContentComponent }\n      </Wrapper>\n    )\n    : (\n      <Wrapper\n        {...commonDataAttr}\n        {...commonListItemProps}\n        as={as}\n      >\n        { ContentComponent }\n      </Wrapper>\n    )\n}\n\nexport default forwardRef(ListItem)\n"],"names":["LINE_BREAK_CHAR","LIST_ITEM_TEST_ID","filterActiveItem","node","dataset","active","ListItem","className","contentClassName","iconClassName","as","testId","size","ListItemSize","M","descriptionMaxLines","content","description","name","leftContent","leftIcon","variant","ListItemVariant","Monochrome","href","hide","rightContent","optionKey","activeClassName","focused","disabled","onClick","noop","onMouseDown","onMouseEnter","onMouseLeave","otherProps","forwardedRef","listItemElement","setListItemElement","useState","setListItemRef","useCallback","mergedRef","useMergeRefs","isHyperLink","isEmpty","isActive","useAdjacentElementBorderRadius","mergedClassName","useMemo","mergeClassNames","undefined","handleClick","e","getNewLineComponent","desc","split","map","str","index","React","createElement","Text","key","uuid","typo","Typography","Size12","Fragment","leftComponent","isNil","LeftContentWrapper","StyledIcon","source","IconSize","S","titleComponent","TitleWrapper","isString","Title","XL","Size18","Size14","descriptionComponent","DescriptionWrapper","Description","rightComponent","RightContent","ContentComponent","ContentWrapper","commonDataAttr","commonListItemProps","ref","Wrapper","Object","assign","draggable","target","rel","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,MAAMA,eAAe,GAAG,IAAI,CAAA;AAErB,MAAMC,iBAAiB,GAAG,8BAA6B;AAE9D,SAASC,gBAAgBA,CAACC,IAAiB,EAAE;AAC3C,EAAA,OAAOA,IAAI,CAACC,OAAO,CAACC,MAAM,KAAK,MAAM,CAAA;AACvC,CAAA;AAIA,SAASC,QAAQA,CAAC;EAChBC,SAAS;EACTC,gBAAgB;EAChBC,aAAa;EACbC,EAAE;AACFC,EAAAA,MAAM,GAAGV,iBAAiB;EAC1BW,IAAI,GAAGC,2BAAY,CAACC,CAAC;EACrBC,mBAAmB;EACnBC,OAAO;EACPC,WAAW;EACXC,IAAI;EACJC,WAAW;EACXC,QAAQ;EACRC,OAAO,GAAGC,8BAAe,CAACC,UAAU;AACpCC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,YAAY,GAAG,IAAI;AACnB;EACAC,SAAS;AACT;EACAtB,MAAM;EACNuB,eAAe;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,QAAQ,GAAG,KAAK;AAChB;AACAC,EAAAA,OAAO,GAAGC,kBAAI;AACdC,EAAAA,WAAW,GAAGD,kBAAI;AAClBE,EAAAA,YAAY,GAAGF,kBAAI;AACnBG,EAAAA,YAAY,GAAGH,kBAAI;EACnB,GAAGI,UAAAA;AACU,CAAC,EAChBC,YAAoC,EAClC;EACA,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAEhF,EAAA,MAAMC,cAAc,GAAGC,iBAAW,CAAEvC,IAAwB,IAAK;IAC/D,IAAI,CAACA,IAAI,EAAE;AAAE,MAAA,OAAA;AAAO,KAAA;IACpBoC,kBAAkB,CAACpC,IAAI,CAAC,CAAA;GACzB,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMwC,SAAS,GAAGC,oBAAY,CAAcH,cAAc,EAAEJ,YAAY,CAAC,CAAA;AAEzE,EAAA,MAAMQ,WAAW,GAAG,CAACC,iBAAO,CAACtB,IAAI,CAAC,CAAA;AAClC,EAAA,MAAMuB,QAAQ,GAAGF,WAAW,GAAG,KAAK,GAAGxC,MAAM,CAAA;AAE7C2C,EAAAA,sCAA8B,CAACV,eAAe,EAAEpC,gBAAgB,EAAE6C,QAAQ,CAAC,CAAA;EAE3E,MAAME,eAAe,GAAGC,aAAO,CAAC,MAC9BC,2BAAe,CAAC5C,SAAS,EAAIwC,QAAQ,IAAInB,eAAe,IAAKwB,SAAU,CACxE,EAAE,CACD7C,SAAS,EACTqB,eAAe,EACfmB,QAAQ,CACT,CAAC,CAAA;AAEF,EAAA,MAAMM,WAAW,GAAGX,iBAAW,CAAEY,CAAmB,IAAK;IACvD,IAAI,CAACxB,QAAQ,EAAE;AACbC,MAAAA,OAAO,CAACuB,CAAC,EAAEpC,IAAI,CAAC,CAAA;AAClB,KAAA;GACD,EAAE,CACDY,QAAQ,EACRZ,IAAI,EACJa,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMwB,mBAAmB,GAAGb,iBAAW,CAAEc,IAAY,IACnDA,IAAI,CAACC,KAAK,CAACzD,eAAe,CAAC,CAAC0D,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IAC9C,IAAIA,KAAK,KAAK,CAAC,EAAE;AACf,MAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,YAAI,EAAA;QAACC,GAAG,EAAEC,UAAI,EAAG;QAACC,IAAI,EAAEC,qBAAU,CAACC,MAAAA;AAAO,OAAA,EACvCT,GACE,CAAC,CAAA;AAEX,KAAA;AAEA,IAAA,oBACEE,KAAA,CAAAC,aAAA,CAACD,KAAK,CAACQ,QAAQ,EAAA;MAACL,GAAG,EAAEC,UAAI,EAAC;KACxBJ,eAAAA,KAAA,CAAAC,aAAA,CAAK,IAAA,EAAA,IAAA,CAAC,eACND,KAAA,CAAAC,aAAA,CAACC,YAAI,EAAA;MAACG,IAAI,EAAEC,qBAAU,CAACC,MAAAA;KACnBT,EAAAA,GACE,CACQ,CAAC,CAAA;GAEpB,CACF,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMW,aAAa,GAAGpB,aAAO,CAAC,MAAM;AAClC,IAAA,IAAI,CAACqB,eAAK,CAACpD,WAAW,CAAC,EAAE;AACvB,MAAA,oBACE0C,KAAA,CAAAC,aAAA,CAACU,kCAAkB,EAAA,IAAA,EACfrD,WACgB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,IAAI,CAACoD,eAAK,CAACnD,QAAQ,CAAC,EAAE;MACpB,oBACEyC,KAAA,CAAAC,aAAA,CAACU,kCAAkB,qBACjBX,KAAA,CAAAC,aAAA,CAACW,0BAAU,EAAA;AACTlE,QAAAA,SAAS,EAAEE,aAAc;AACzBiE,QAAAA,MAAM,EAAEtD,QAAS;QACjBR,IAAI,EAAE+D,mBAAQ,CAACC,CAAE;AACjBvE,QAAAA,MAAM,EAAE0C,QAAS;AACjB1B,QAAAA,OAAO,EAAEA,OAAAA;AAAQ,OAClB,CACiB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CACD0B,QAAQ,EACRtC,aAAa,EACbU,WAAW,EACXC,QAAQ,EACRC,OAAO,CACR,CAAC,CAAA;EAEF,MAAMwD,cAAc,GAAG3B,aAAO,CAAC,mBAC7BW,KAAA,CAAAC,aAAA,CAACgB,4BAAY,EAAA;AAACvE,IAAAA,SAAS,EAAEC,gBAAAA;AAAiB,GAAA,EACtCuE,kBAAQ,CAAC/D,OAAO,CAAC,gBACjB6C,KAAA,CAAAC,aAAA,CAACkB,qBAAK,EACJnB,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACC,YAAI,EAAA;AACHG,IAAAA,IAAI,EAAEtD,IAAI,KAAKC,2BAAY,CAACoE,EAAE,GAC1Bd,qBAAU,CAACe,MAAM,GACjBf,qBAAU,CAACgB,MAAAA;AAAO,GAAA,EAEpBnE,OACE,CACD,CAAC,GACNA,OACQ,CACf,EAAE,CACDA,OAAO,EACPR,gBAAgB,EAChBI,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAMwE,oBAAoB,GAAGlC,aAAO,CAAC,mBACnCW,KAAA,CAAAC,aAAA,CAACuB,kCAAkB,EACjBxB,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACwB,2BAAW,EAAA;AAACvE,IAAAA,mBAAmB,EAAEA,mBAAAA;GAE9BgE,EAAAA,kBAAQ,CAAC9D,WAAW,CAAC,GACjBsC,mBAAmB,CAACtC,WAAW,CAAC,GAChCA,WAEK,CACK,CACrB,EAAE,CACDA,WAAW,EACXF,mBAAmB,EACnBwC,mBAAmB,CACpB,CAAC,CAAA;AAEF,EAAA,MAAMgC,cAAc,GAAGrC,aAAO,CAAC,mBAC7BW,KAAA,CAAAC,aAAA,CAAC0B,4BAAY,QACT9D,YACU,CACf,EAAE,CAACA,YAAY,CAAC,CAAC,CAAA;EAElB,MAAM+D,gBAAgB,GAAGvC,aAAO,CAAC,mBAC/BW,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAQ,QAAA,EAAA,IAAA,eACER,KAAA,CAAAC,aAAA,CAAC4B,8BAAc,EAAA,IAAA,EACXpB,aAAa,EACbO,cAAc,EACd5D,WAAW,IAAImE,oBACH,CAAC,EACf1D,YAAY,IAAI6D,cAClB,CACH,EAAE,CACDjB,aAAa,EACbO,cAAc,EACd5D,WAAW,EACXmE,oBAAoB,EACpB1D,YAAY,EACZ6D,cAAc,CACf,CAAC,CAAA;AAEF,EAAA,MAAMI,cAAc,GAAGzC,aAAO,CAAC,OAAO;AACpC,IAAA,aAAa,EAAEH,QAAQ;AACvB,IAAA,iBAAiB,EAAEpB,SAAS;AAC5B,IAAA,aAAa,EAAEhB,MAAAA;GAChB,CAAC,EAAE,CACFoC,QAAQ,EACRpB,SAAS,EACThB,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMiF,mBAAmB,GAAG1C,aAAO,CAAC,OAAwD;AAC1F2C,IAAAA,GAAG,EAAElD,SAAS;AACdpC,IAAAA,SAAS,EAAE0C,eAAe;IAC1BrC,IAAI;AACJmB,IAAAA,OAAO,EAAEsB,WAAW;IACpBpB,WAAW;IACXC,YAAY;IACZC,YAAY;AACZ9B,IAAAA,MAAM,EAAE0C,QAAQ;IAChBlB,OAAO;IACPC,QAAQ;IACRT,OAAO;IACP,GAAGe,UAAAA;GACJ,CAAC,EAAE,CACFO,SAAS,EACTM,eAAe,EACfrC,IAAI,EACJyC,WAAW,EACXpB,WAAW,EACXC,YAAY,EACZC,YAAY,EACZY,QAAQ,EACRlB,OAAO,EACPC,QAAQ,EACRT,OAAO,EACPe,UAAU,CACX,CAAC,CAAA;AAEF,EAAA,IAAIX,IAAI,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAExB,EAAA,OAAOoB,WAAW,gBAEdgB,KAAA,CAAAC,aAAA,CAACgC,uBAAO,EAAAC,MAAA,CAAAC,MAAA,CACFL,EAAAA,EAAAA,cAAc,EACdC,mBAAmB,EAAA;AACvBlF,IAAAA,EAAE,EAAE,GAA8B;AAClCc,IAAAA,IAAI,EAAEA,IAAK;AACXyE,IAAAA,SAAS,EAAE,KAAM;AACjBC,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAA;AAAqB,GAAA,CAAA,EAEvBV,gBACK,CAAC,gBAGV5B,KAAA,CAAAC,aAAA,CAACgC,uBAAO,EAAAC,MAAA,CAAAC,MAAA,CACFL,EAAAA,EAAAA,cAAc,EACdC,mBAAmB,EAAA;AACvBlF,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,CAAA,EAEL+E,gBACK,CACV,CAAA;AACL,CAAA;AAEA,iBAAeW,aAAAA,gBAAU,CAAC9F,QAAQ,CAAC;;;;;"}

package/dist/cjs/components/ListItem/ListItem.styled.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var DisabledOpacity = require('../../constants/DisabledOpacity.js');
+var ListItem_types = require('./ListItem.types.js');
+var utils = require('./utils.js');
+var index = require('../../foundation/Transition/index.js');
+var Icon = require('../Icon/Icon.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+var Mixins = require('../../foundation/Mixins.js');
+var Typography = require('../../foundation/Typography.js');
+
+const getColorFromColorVariantWithDefaultValue = (variant, defaultValue) => {
+  switch (variant) {
+    case ListItem_types.ListItemVariant.Blue:
+      return 'bgtxt-blue-normal';
+    case ListItem_types.ListItemVariant.Red:
+      return 'bgtxt-red-normal';
+    case ListItem_types.ListItemVariant.Green:
+      return 'bgtxt-green-normal';
+    case ListItem_types.ListItemVariant.Cobalt:
+      return 'bgtxt-cobalt-normal';
+    default:
+      return defaultValue;
+  }
+};
+const FocusedItemStyle = FoundationStyledComponent.css`
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']};
+`;
+const FocusedIconStyle = FoundationStyledComponent.css`
+  color: ${({
+  foundation,
+  active,
+  variant
+}) => foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, active ? 'bgtxt-blue-normal' : 'txt-black-dark')]};
+`;
+const ActiveItemStyle = FoundationStyledComponent.css`
+  color: ${({
+  foundation,
+  variant
+}) => foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, 'bgtxt-blue-normal')]};
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-lightest']};
+`;
+const RightContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__RightContent",
+  componentId: "sc-1huef6z-0"
+})(["display:flex;margin-left:8px;white-space:nowrap;"]);
+const TitleWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__TitleWrapper",
+  componentId: "sc-1huef6z-1"
+})(["display:flex;grid-row:1;grid-column:2;align-items:center;& span{", ";}"], ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('color'));
+const DescriptionWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__DescriptionWrapper",
+  componentId: "sc-1huef6z-2"
+})(["display:flex;grid-row:2;grid-column:2;align-items:center;width:100%;margin-top:2px;color:", ";"], ({
+  foundation
+}) => foundation?.theme['txt-black-darker']);
+const Title = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__Title",
+  componentId: "sc-1huef6z-3"
+})(["", ""], Mixins.ellipsis());
+const Description = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__Description",
+  componentId: "sc-1huef6z-4"
+})(["", ""], ({
+  descriptionMaxLines
+}) => descriptionMaxLines && Mixins.ellipsis(descriptionMaxLines, Typography.LineHeightAbsoluteNumber.Lh16));
+const StyledIcon = /*#__PURE__*/FoundationStyledComponent.styled(Icon.Icon).withConfig({
+  displayName: "ListItemstyled__StyledIcon",
+  componentId: "sc-1huef6z-5"
+})(["color:", ";", ";"], ({
+  foundation,
+  variant,
+  active
+}) => foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, active ? 'bgtxt-blue-normal' : 'txt-black-dark')], ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS('color', index.TransitionDuration.M));
+const LeftContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__LeftContentWrapper",
+  componentId: "sc-1huef6z-6"
+})(["display:flex;grid-row:1;grid-column:1;align-items:center;margin-right:8px;"]);
+const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__ContentWrapper",
+  componentId: "sc-1huef6z-7"
+})(["display:grid;grid-template-columns:fit-content(100%) minmax(0,1fr);width:100%;"]);
+const Wrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListItemstyled__Wrapper",
+  componentId: "sc-1huef6z-8"
+})(["display:flex;align-items:center;", " color:", ";text-decoration:none;cursor:", ";opacity:", ";", ";", ";", ""], ({
+  size
+}) => utils.getStyleOfSize(size), ({
+  foundation,
+  variant
+}) => foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, 'txt-black-darkest')], ({
+  disabled
+}) => disabled ? 'default' : 'pointer', ({
+  disabled
+}) => disabled ? DisabledOpacity.default : 1, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color']), ({
+  disabled,
+  active,
+  focused
+}) => !disabled && !active && FoundationStyledComponent.css`
+    ${focused && FoundationStyledComponent.css`
+      ${FocusedItemStyle}
+
+      ${StyledIcon} {
+        ${FocusedIconStyle}
+      }
+    `}
+
+    &:hover {
+      ${FocusedItemStyle}
+    }
+
+    &:hover ${StyledIcon} {
+      ${FocusedIconStyle}
+    }
+`, ({
+  active
+}) => active && ActiveItemStyle);
+
+exports.ContentWrapper = ContentWrapper;
+exports.Description = Description;
+exports.DescriptionWrapper = DescriptionWrapper;
+exports.LeftContentWrapper = LeftContentWrapper;
+exports.RightContent = RightContent;
+exports.StyledIcon = StyledIcon;
+exports.Title = Title;
+exports.TitleWrapper = TitleWrapper;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=ListItem.styled.js.map

package/dist/cjs/components/ListItem/ListItem.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/ListItem/ListItem.styled.ts"],"sourcesContent":["import {\n  LineHeightAbsoluteNumber,\n  type SemanticNames,\n  TransitionDuration,\n  css,\n  ellipsis,\n  styled,\n} from '~/src/foundation'\n\nimport disabledOpacity from '~/src/constants/DisabledOpacity'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport {\n  type ListItemSize,\n  ListItemVariant,\n} from './ListItem.types'\nimport { getStyleOfSize } from './utils'\n\ninterface StyledWrapperProps {\n  size?: ListItemSize\n  active?: boolean\n  focused?: boolean\n  disabled?: boolean\n  variant: ListItemVariant\n}\n\nconst getColorFromColorVariantWithDefaultValue = (\n  variant: ListItemVariant,\n  defaultValue: SemanticNames,\n): SemanticNames => {\n  switch (variant) {\n    case (ListItemVariant.Blue):\n      return 'bgtxt-blue-normal'\n    case (ListItemVariant.Red):\n      return 'bgtxt-red-normal'\n    case (ListItemVariant.Green):\n      return 'bgtxt-green-normal'\n    case (ListItemVariant.Cobalt):\n      return 'bgtxt-cobalt-normal'\n    default:\n      return defaultValue\n  }\n}\n\nconst FocusedItemStyle = css<StyledWrapperProps>`\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-lighter']};\n`\n\nconst FocusedIconStyle = css<StyledWrapperProps>`\n  color: ${({ foundation, active, variant }) => (\n    foundation?.theme?.[getColorFromColorVariantWithDefaultValue(\n      variant,\n      active ? 'bgtxt-blue-normal' : 'txt-black-dark',\n    )]\n  )};\n`\n\nconst ActiveItemStyle = css<StyledWrapperProps>`\n  color: ${({ foundation, variant }) => (\n    foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, 'bgtxt-blue-normal')]\n  )};\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-blue-lightest']};\n`\n\nexport const RightContent = styled.div`\n  display: flex;\n  margin-left: 8px;\n  white-space: nowrap;\n`\n\nexport const TitleWrapper = styled.div`\n  display: flex;\n  grid-row: 1;\n  grid-column: 2;\n  align-items: center;\n\n  & span {\n    ${({ foundation }) => foundation?.transition?.getTransitionsCSS('color')};\n  }\n`\n\nexport const DescriptionWrapper = styled.div`\n  display: flex;\n  grid-row: 2;\n  grid-column: 2;\n  align-items: center;\n  width: 100%;\n  margin-top: 2px;\n  color: ${({ foundation }) => (foundation?.theme['txt-black-darker'])\n};\n`\n\nexport const Title = styled.div`\n  ${ellipsis()}\n`\n\ninterface DescriptionProps {\n  descriptionMaxLines?: number\n}\n\nexport const Description = styled.div<DescriptionProps>`\n  ${({ descriptionMaxLines }) => descriptionMaxLines && ellipsis(descriptionMaxLines, LineHeightAbsoluteNumber.Lh16)}\n`\n\ninterface IconWrapperProps {\n  variant: ListItemVariant\n  active?: boolean\n}\n\nexport const StyledIcon = styled(Icon)<IconWrapperProps>`\n  color: ${({ foundation, variant, active }) => (\n    foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, active ? 'bgtxt-blue-normal' : 'txt-black-dark')]\n  )};\n  \n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS('color', TransitionDuration.M)};\n`\n\nexport const LeftContentWrapper = styled.div`\n  display: flex;\n  grid-row: 1;\n  grid-column: 1;\n  align-items: center;\n  margin-right: 8px;\n`\n\nexport const ContentWrapper = styled.div`\n  display: grid;\n  grid-template-columns: fit-content(100%) minmax(0, 1fr);\n  width: 100%;\n`\n\nexport const Wrapper = styled.div<StyledWrapperProps>`\n  display: flex;\n  align-items: center;\n  ${({ size }) => getStyleOfSize(size)}\n\n  color: ${({ foundation, variant }) => (\n    foundation?.theme?.[getColorFromColorVariantWithDefaultValue(variant, 'txt-black-darkest')]\n  )};\n  \n  text-decoration: none;\n  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};\n  opacity: ${({ disabled }) => (disabled ? disabledOpacity : 1)};\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color'])};\n\n  ${({ disabled, active, focused }) => !disabled && !active && css`\n    ${focused && css`\n      ${FocusedItemStyle}\n\n      ${StyledIcon} {\n        ${FocusedIconStyle}\n      }\n    `}\n\n    &:hover {\n      ${FocusedItemStyle}\n    }\n\n    &:hover ${StyledIcon} {\n      ${FocusedIconStyle}\n    }\n`};\n\n  ${({ active }) => (active && ActiveItemStyle)}\n`\n"],"names":["getColorFromColorVariantWithDefaultValue","variant","defaultValue","ListItemVariant","Blue","Red","Green","Cobalt","FocusedItemStyle","css","foundation","theme","FocusedIconStyle","active","ActiveItemStyle","RightContent","styled","div","withConfig","displayName","componentId","TitleWrapper","transition","getTransitionsCSS","DescriptionWrapper","Title","ellipsis","Description","descriptionMaxLines","LineHeightAbsoluteNumber","Lh16","StyledIcon","Icon","TransitionDuration","M","LeftContentWrapper","ContentWrapper","Wrapper","size","getStyleOfSize","disabled","disabledOpacity","focused"],"mappings":"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"}

package/dist/cjs/components/ListItem/ListItem.types.js

@@ -0,0 +1,21 @@
+'use strict';
+
+let ListItemSize = /*#__PURE__*/function (ListItemSize) {
+  ListItemSize["S"] = "s";
+  ListItemSize["M"] = "m";
+  ListItemSize["L"] = "l";
+  ListItemSize["XL"] = "xl";
+  return ListItemSize;
+}({});
+let ListItemVariant = /*#__PURE__*/function (ListItemVariant) {
+  ListItemVariant["Blue"] = "blue";
+  ListItemVariant["Red"] = "red";
+  ListItemVariant["Green"] = "green";
+  ListItemVariant["Cobalt"] = "cobalt";
+  ListItemVariant["Monochrome"] = "monochrome";
+  return ListItemVariant;
+}({});
+
+exports.ListItemSize = ListItemSize;
+exports.ListItemVariant = ListItemVariant;
+//# sourceMappingURL=ListItem.types.js.map

package/dist/cjs/components/ListItem/ListItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.types.js","sources":["../../../../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport type {\n  ActivatableProps,\n  AdditionalStylableProps,\n  BezierComponentProps,\n  ContentProps,\n  DisableProps,\n  LinkProps,\n  OptionItemProps,\n  SideContentProps,\n  SizeProps,\n  VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ListItemSize {\n  S = 's',\n  M = 'm',\n  L = 'l',\n  XL = 'xl',\n}\n\nexport enum ListItemVariant {\n  Blue = 'blue',\n  Red = 'red',\n  Green = 'green',\n  Cobalt = 'cobalt',\n  Monochrome = 'monochrome',\n}\n\ntype MouseEventHandler = React.MouseEventHandler\n\ninterface ListItemOptions {\n  name?: string\n  hide?: boolean\n  nested?: boolean\n  leftIcon?: BezierIcon\n  focused?: boolean\n  disableIconActive?: boolean\n  descriptionMaxLines?: number\n  description?: React.ReactNode\n  onClick?: (e: React.MouseEvent, name?: string) => void\n  onMouseDown?: MouseEventHandler\n  onMouseEnter?: MouseEventHandler\n  onMouseLeave?: MouseEventHandler\n}\n\nexport default interface ListItemProps extends\n  BezierComponentProps,\n  SizeProps<ListItemSize>,\n  VariantProps<ListItemVariant>,\n  ContentProps,\n  SideContentProps,\n  LinkProps,\n  DisableProps,\n  ActivatableProps,\n  OptionItemProps,\n  AdditionalStylableProps<['icon', 'content']>,\n  ListItemOptions {}\n"],"names":["ListItemSize","ListItemVariant"],"mappings":";;AAiBYA,IAAAA,YAAY,0BAAZA,YAAY,EAAA;EAAZA,YAAY,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAZA,YAAY,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAZA,YAAY,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAZA,YAAY,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAZA,YAAY,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAOZC,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAfA,eAAe,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAfA,eAAe,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAfA,eAAe,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;"}

package/dist/cjs/components/ListItem/useAdjacentElementBorderRadius.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/* eslint-disable prefer-arrow-callback */
+function flattenBorderTopRadiusStyle(elem) {
+  elem.style.borderTopLeftRadius = '0px';
+  elem.style.borderTopRightRadius = '0px';
+}
+function flattenBorderBottomRadiusStyle(elem) {
+  elem.style.borderBottomLeftRadius = '0px';
+  elem.style.borderBottomRightRadius = '0px';
+}
+function resetBorderTopRadiusStyle(elem) {
+  elem.style.borderTopLeftRadius = '';
+  elem.style.borderTopRightRadius = '';
+}
+function resetBorderBottomRadiusStyle(elem) {
+  elem.style.borderBottomLeftRadius = '';
+  elem.style.borderBottomRightRadius = '';
+}
+function useAdjacentElementBorderRadius(element, filterAdjacentElementFunc, isFilteredElement) {
+  const [nextSibling, setNextSibling] = React.useState(null);
+  const [previousSibling, setPreviousSibling] = React.useState(null);
+  React.useEffect(function updateAdjacentElement() {
+    if (!element) {
+      return;
+    }
+    function filterAdjacentElement(targetElement) {
+      if (!targetElement) {
+        return null;
+      }
+      return filterAdjacentElementFunc(targetElement) ? targetElement : null;
+    }
+    setNextSibling(filterAdjacentElement(element.nextSibling));
+    setPreviousSibling(filterAdjacentElement(element.previousSibling));
+  }, [element, filterAdjacentElementFunc, isFilteredElement]);
+  React.useEffect(function styleElementBorderRadius() {
+    if (!element) {
+      return;
+    }
+    if (isFilteredElement && nextSibling) {
+      flattenBorderBottomRadiusStyle(element);
+    } else {
+      resetBorderBottomRadiusStyle(element);
+    }
+    if (isFilteredElement && previousSibling) {
+      flattenBorderTopRadiusStyle(element);
+    } else {
+      resetBorderTopRadiusStyle(element);
+    }
+  }, [isFilteredElement, element, nextSibling, previousSibling]);
+  React.useEffect(function styleNextSiblingBorderRadius() {
+    if (!nextSibling) {
+      return;
+    }
+    if (isFilteredElement) {
+      flattenBorderTopRadiusStyle(nextSibling);
+    } else {
+      resetBorderTopRadiusStyle(nextSibling);
+    }
+  }, [isFilteredElement, nextSibling]);
+  React.useEffect(function stylePrevSiblingBorderRadius() {
+    if (!previousSibling) {
+      return;
+    }
+    if (isFilteredElement) {
+      flattenBorderBottomRadiusStyle(previousSibling);
+    } else {
+      resetBorderBottomRadiusStyle(previousSibling);
+    }
+  }, [isFilteredElement, previousSibling]);
+}
+
+exports.default = useAdjacentElementBorderRadius;
+//# sourceMappingURL=useAdjacentElementBorderRadius.js.map

package/dist/cjs/components/ListItem/useAdjacentElementBorderRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdjacentElementBorderRadius.js","sources":["../../../../src/components/ListItem/useAdjacentElementBorderRadius.ts"],"sourcesContent":["/* eslint-disable prefer-arrow-callback */\nimport {\n  useEffect,\n  useState,\n} from 'react'\n\nfunction flattenBorderTopRadiusStyle(elem: HTMLElement) {\n  elem.style.borderTopLeftRadius = '0px'\n  elem.style.borderTopRightRadius = '0px'\n}\n\nfunction flattenBorderBottomRadiusStyle(elem: HTMLElement) {\n  elem.style.borderBottomLeftRadius = '0px'\n  elem.style.borderBottomRightRadius = '0px'\n}\n\nfunction resetBorderTopRadiusStyle(elem: HTMLElement) {\n  elem.style.borderTopLeftRadius = ''\n  elem.style.borderTopRightRadius = ''\n}\n\nfunction resetBorderBottomRadiusStyle(elem: HTMLElement) {\n  elem.style.borderBottomLeftRadius = ''\n  elem.style.borderBottomRightRadius = ''\n}\n\nfunction useAdjacentElementBorderRadius<ElementType extends HTMLElement>(\n  element: ElementType | null,\n  filterAdjacentElementFunc: (element: ElementType) => boolean,\n  isFilteredElement?: boolean,\n) {\n  const [nextSibling, setNextSibling] = useState<ElementType | null>(null)\n  const [previousSibling, setPreviousSibling] = useState<ElementType | null>(null)\n\n  useEffect(function updateAdjacentElement() {\n    if (!element) { return }\n\n    function filterAdjacentElement(targetElement: ElementType | null) {\n      if (!targetElement) { return null }\n      return filterAdjacentElementFunc(targetElement) ? targetElement : null\n    }\n\n    setNextSibling(filterAdjacentElement(element.nextSibling as ElementType))\n    setPreviousSibling(filterAdjacentElement(element.previousSibling as ElementType))\n  }, [\n    element,\n    filterAdjacentElementFunc,\n    isFilteredElement,\n  ])\n\n  useEffect(function styleElementBorderRadius() {\n    if (!element) { return }\n\n    if (isFilteredElement && nextSibling) {\n      flattenBorderBottomRadiusStyle(element)\n    } else {\n      resetBorderBottomRadiusStyle(element)\n    }\n\n    if (isFilteredElement && previousSibling) {\n      flattenBorderTopRadiusStyle(element)\n    } else {\n      resetBorderTopRadiusStyle(element)\n    }\n  }, [\n    isFilteredElement,\n    element,\n    nextSibling,\n    previousSibling,\n  ])\n\n  useEffect(function styleNextSiblingBorderRadius() {\n    if (!nextSibling) { return }\n\n    if (isFilteredElement) {\n      flattenBorderTopRadiusStyle(nextSibling)\n    } else {\n      resetBorderTopRadiusStyle(nextSibling)\n    }\n  }, [\n    isFilteredElement,\n    nextSibling,\n  ])\n\n  useEffect(function stylePrevSiblingBorderRadius() {\n    if (!previousSibling) { return }\n\n    if (isFilteredElement) {\n      flattenBorderBottomRadiusStyle(previousSibling)\n    } else {\n      resetBorderBottomRadiusStyle(previousSibling)\n    }\n  }, [\n    isFilteredElement,\n    previousSibling,\n  ])\n}\n\nexport default useAdjacentElementBorderRadius\n"],"names":["flattenBorderTopRadiusStyle","elem","style","borderTopLeftRadius","borderTopRightRadius","flattenBorderBottomRadiusStyle","borderBottomLeftRadius","borderBottomRightRadius","resetBorderTopRadiusStyle","resetBorderBottomRadiusStyle","useAdjacentElementBorderRadius","element","filterAdjacentElementFunc","isFilteredElement","nextSibling","setNextSibling","useState","previousSibling","setPreviousSibling","useEffect","updateAdjacentElement","filterAdjacentElement","targetElement","styleElementBorderRadius","styleNextSiblingBorderRadius","stylePrevSiblingBorderRadius"],"mappings":"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"}

package/dist/cjs/components/ListItem/utils.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var ListItem_types = require('./ListItem.types.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+function getStyleOfSize(size) {
+  switch (size) {
+    case ListItem_types.ListItemSize.S:
+      return FoundationStyledComponent.css(["padding:4px 6px;", ";"], ({
+        foundation
+      }) => foundation?.rounding.round6);
+    case ListItem_types.ListItemSize.L:
+      return FoundationStyledComponent.css(["padding:8px 6px;", ";"], ({
+        foundation
+      }) => foundation?.rounding.round8);
+    case ListItem_types.ListItemSize.XL:
+      return FoundationStyledComponent.css(["padding:10px 6px;", ";"], ({
+        foundation
+      }) => foundation?.rounding.round12);
+    case ListItem_types.ListItemSize.M:
+    default:
+      return FoundationStyledComponent.css(["padding:6px;", ";"], ({
+        foundation
+      }) => foundation?.rounding.round6);
+  }
+}
+
+exports.getStyleOfSize = getStyleOfSize;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/ListItem/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/ListItem/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { ListItemSize } from './ListItem.types'\n\nexport function getStyleOfSize(size?: ListItemSize) {\n  switch (size) {\n    case ListItemSize.S:\n      return css`\n        padding: 4px 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n    case ListItemSize.L:\n      return css`\n        padding: 8px 6px;\n        ${({ foundation }) => foundation?.rounding.round8};\n      `\n    case ListItemSize.XL:\n      return css`\n        padding: 10px 6px;\n        ${({ foundation }) => foundation?.rounding.round12};\n      `\n    case ListItemSize.M:\n    default:\n      return css`\n        padding: 6px;\n        ${({ foundation }) => foundation?.rounding.round6};\n      `\n  }\n}\n"],"names":["getStyleOfSize","size","ListItemSize","S","css","foundation","rounding","round6","L","round8","XL","round12","M"],"mappings":";;;;;AAIO,SAASA,cAAcA,CAACC,IAAmB,EAAE;AAClD,EAAA,QAAQA,IAAI;IACV,KAAKC,2BAAY,CAACC,CAAC;MACjB,OAAOC,6BAAG,4BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAM,CAAA,CAAA;IAErD,KAAKL,2BAAY,CAACM,CAAC;MACjB,OAAOJ,6BAAG,4BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACG,MAAM,CAAA,CAAA;IAErD,KAAKP,2BAAY,CAACQ,EAAE;MAClB,OAAON,6BAAG,6BAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACK,OAAO,CAAA,CAAA;IAEtD,KAAKT,2BAAY,CAACU,CAAC,CAAA;AACnB,IAAA;MACE,OAAOR,6BAAG,wBAEN,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAM,CAAA,CAAA;AAEvD,GAAA;AACF;;;;"}

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var functionUtils = require('../../utils/functionUtils.js');
+var typeUtils = require('../../utils/typeUtils.js');
+var ListMenuTitle_styled = require('./ListMenuTitle.styled.js');
+
+const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title';
+function ListMenuTitle({
+  as,
+  testId = SIDEBAR_MENU_TITLE_TEST_ID,
+  content,
+  hide = false,
+  rightAction = null,
+  onClick = functionUtils.noop,
+  onClickAction = functionUtils.noop,
+  style,
+  className
+}) {
+  const handleClickAction = React.useCallback(ev => {
+    ev.stopPropagation();
+    onClickAction();
+  }, [onClickAction]);
+  if (hide) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ListMenuTitle_styled.Wrapper, {
+    "data-testid": testId,
+    as: as,
+    style: style,
+    className: className,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(ListMenuTitle_styled.TitleWrapper, null, content), !typeUtils.isNil(rightAction) && /*#__PURE__*/React.createElement("div", {
+    onClick: handleClickAction
+  }, rightAction));
+}
+
+exports.SIDEBAR_MENU_TITLE_TEST_ID = SIDEBAR_MENU_TITLE_TEST_ID;
+exports.default = ListMenuTitle;
+//# sourceMappingURL=ListMenuTitle.js.map

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenuTitle.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport type ListMenuTitleProps from './ListMenuTitle.types'\n\nimport {\n  TitleWrapper,\n  Wrapper,\n} from './ListMenuTitle.styled'\n\nexport const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'\n\nfunction ListMenuTitle({\n  as,\n  testId = SIDEBAR_MENU_TITLE_TEST_ID,\n  content,\n  hide = false,\n  rightAction = null,\n  onClick = noop,\n  onClickAction = noop,\n  style,\n  className,\n}: ListMenuTitleProps) {\n  const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {\n    ev.stopPropagation()\n    onClickAction()\n  }, [onClickAction])\n\n  if (hide) {\n    return null\n  }\n\n  return (\n    <Wrapper\n      data-testid={testId}\n      as={as}\n      style={style}\n      className={className}\n      onClick={onClick}\n    >\n      <TitleWrapper>\n        { content }\n      </TitleWrapper>\n      {\n        !isNil(rightAction) && (\n          <div\n            onClick={handleClickAction}\n          >\n            { rightAction }\n          </div>\n        )\n      }\n    </Wrapper>\n  )\n}\n\nexport default ListMenuTitle\n"],"names":["SIDEBAR_MENU_TITLE_TEST_ID","ListMenuTitle","as","testId","content","hide","rightAction","onClick","noop","onClickAction","style","className","handleClickAction","useCallback","ev","stopPropagation","React","createElement","Wrapper","TitleWrapper","isNil"],"mappings":";;;;;;;;;AAYO,MAAMA,0BAA0B,GAAG,kCAAiC;AAE3E,SAASC,aAAaA,CAAC;EACrBC,EAAE;AACFC,EAAAA,MAAM,GAAGH,0BAA0B;EACnCI,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,OAAO,GAAGC,kBAAI;AACdC,EAAAA,aAAa,GAAGD,kBAAI;EACpBE,KAAK;AACLC,EAAAA,SAAAA;AACkB,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAEC,EAAoC,IAAK;IAC9EA,EAAE,CAACC,eAAe,EAAE,CAAA;AACpBN,IAAAA,aAAa,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,IAAIJ,IAAI,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,oBACEW,KAAA,CAAAC,aAAA,CAACC,4BAAO,EAAA;AACN,IAAA,aAAA,EAAaf,MAAO;AACpBD,IAAAA,EAAE,EAAEA,EAAG;AACPQ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBJ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eAEjBS,KAAA,CAAAC,aAAA,CAACE,iCAAY,QACTf,OACU,CAAC,EAEb,CAACgB,eAAK,CAACd,WAAW,CAAC,iBACjBU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,OAAO,EAAEK,iBAAAA;GAEPN,EAAAA,WACC,CAGF,CAAC,CAAA;AAEd;;;;;"}

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.styled.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const Wrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListMenuTitlestyled__Wrapper",
+  componentId: "sc-85drvv-0"
+})(["display:flex;flex-direction:row;height:44px;padding:18px 6px 6px;line-height:20px;"]);
+const TitleWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "ListMenuTitlestyled__TitleWrapper",
+  componentId: "sc-85drvv-1"
+})(["flex:1;font-size:12px;font-weight:bold;line-height:20px;color:", ";"], props => props.foundation?.theme?.['txt-black-dark']);
+
+exports.TitleWrapper = TitleWrapper;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=ListMenuTitle.styled.js.map

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenuTitle.styled.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport {\n  type StyledTitleWrapperProps,\n  type StyledWrapperProps,\n} from './ListMenuTitle.types'\n\nexport const Wrapper = styled.div<StyledWrapperProps>`\n  display: flex;\n  flex-direction: row;\n  height: 44px;\n  padding: 18px 6px 6px;\n  line-height: 20px;\n`\n\nexport const TitleWrapper = styled.div<StyledTitleWrapperProps>`\n  flex: 1;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 20px;\n  color: ${props => props.foundation?.theme?.['txt-black-dark']};\n`\n"],"names":["Wrapper","styled","div","withConfig","displayName","componentId","TitleWrapper","props","foundation","theme"],"mappings":";;;;MAOaA,OAAO,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMhC,CAAA,CAAA,CAAA,oFAAA,CAAA,EAAA;MAEYC,YAAY,gBAAGL,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAK3BE,CAAAA,CAAAA,CAAAA,gEAAAA,EAAAA,GAAAA,CAAAA,EAAAA,KAAK,IAAIA,KAAK,CAACC,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAC;;;;;"}

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModal.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var Modal = require('../Modal/Modal.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModal` is a modal dialog that interrupts the user with important content and expects a response.
+ *
+ * `ConfirmModal` is a context of the ConfirmModal-related components. It doesn't render any DOM node.
+ * It controls the visibility of the entire component and provides
+ * handlers and accessibility properties to ConfirmModal-related components.
+ *
+ * @example
+ *
+ * ```tsx
+ * // Anatomy of the ConfirmModal
+ * <ConfirmModal>
+ *  <ConfirmModalModalTrigger />
+ *  <ConfirmModalModalContent>
+ *    <ConfirmModalModalHeader />
+ *    <ConfirmModalModalBody />
+ *    <ConfirmModalModalFooter />
+ *  </ConfirmModalModalContent>
+ * </ConfirmModal>
+ * ```
+ */
+function ConfirmModal({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement(Modal.Modal, rest, children);
+}
+
+exports.ConfirmModal = ConfirmModal;
+//# sourceMappingURL=ConfirmModal.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModal.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React from 'react'\n\nimport { Modal } from '../Modal'\n\nimport { type ConfirmModalProps } from './ConfirmModal.types'\n\n/**\n * `ConfirmModal` is a modal dialog that interrupts the user with important content and expects a response.\n *\n * `ConfirmModal` is a context of the ConfirmModal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to ConfirmModal-related components.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the ConfirmModal\n * <ConfirmModal>\n *  <ConfirmModalModalTrigger />\n *  <ConfirmModalModalContent>\n *    <ConfirmModalModalHeader />\n *    <ConfirmModalModalBody />\n *    <ConfirmModalModalFooter />\n *  </ConfirmModalModalContent>\n * </ConfirmModal>\n * ```\n */\nexport function ConfirmModal({\n  children,\n  ...rest\n}: ConfirmModalProps) {\n  return (\n    <Modal {...rest}>\n      { children }\n    </Modal>\n  )\n}\n\n"],"names":["ConfirmModal","children","rest","React","createElement","Modal"],"mappings":";;;;;AAAA;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAYA,CAAC;EAC3BC,QAAQ;EACR,GAAGC,IAAAA;AACc,CAAC,EAAE;EACpB,oBACEC,KAAA,CAAAC,aAAA,CAACC,WAAK,EAAKH,IAAI,EACXD,QACG,CAAC,CAAA;AAEZ;;;;"}

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalBody.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var ModalBody = require('../Modal/ModalBody.js');
+
+/* eslint-disable no-restricted-imports */
+/**
+ * `ConfirmModalBody` is a simple wrapper of the main modal content.
+ */
+const ConfirmModalBody = /*#__PURE__*/React.forwardRef(function ConfirmModalBody({
+  children,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(ModalBody.ModalBody, Object.assign({
+    ref: forwardedRef
+  }, rest), children);
+});
+
+exports.ConfirmModalBody = ConfirmModalBody;
+//# sourceMappingURL=ConfirmModalBody.js.map

package/dist/cjs/components/Modals/ConfirmModal/ConfirmModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModalBody.js","sources":["../../../../../src/components/Modals/ConfirmModal/ConfirmModalBody.tsx"],"sourcesContent":["/* eslint-disable no-restricted-imports */\nimport React, { forwardRef } from 'react'\n\nimport { ModalBody } from '../Modal'\n\nimport { type ConfirmModalBodyProps } from './ConfirmModal.types'\n\n/**\n * `ConfirmModalBody` is a simple wrapper of the main modal content.\n */\nexport const ConfirmModalBody = forwardRef(function ConfirmModalBody({\n  children,\n  ...rest\n}: ConfirmModalBodyProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  return (\n    <ModalBody\n      ref={forwardedRef}\n      {...rest}\n    >\n      { children }\n    </ModalBody>\n  )\n})\n"],"names":["ConfirmModalBody","forwardRef","children","rest","forwardedRef","React","createElement","ModalBody","Object","assign","ref"],"mappings":";;;;;AAAA;AAOA;AACA;AACA;MACaA,gBAAgB,gBAAGC,gBAAU,CAAC,SAASD,gBAAgBA,CAAC;EACnEE,QAAQ;EACR,GAAGC,IAAAA;AACkB,CAAC,EAAEC,YAAuC,EAAE;EACjE,oBACEC,KAAA,CAAAC,aAAA,CAACC,mBAAS,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACRC,IAAAA,GAAG,EAAEN,YAAAA;GACDD,EAAAA,IAAI,CAEND,EAAAA,QACO,CAAC,CAAA;AAEhB,CAAC;;;;"}