@channel.io/bezier-react 1.6.2 → 1.7.0

package/dist/cjs/components/Forms/Slider/Slider.js

@@ -2,84 +2,106 @@
 
 var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-slider/dist/index.js');
-var functionUtils = require('../../../utils/functionUtils.js');
+var typeUtils = require('../../../utils/typeUtils.js');
 var Slider_styled = require('./Slider.styled.js');
+var Tooltip = require('../../Tooltip/Tooltip.js');
+var Tooltip_types = require('../../Tooltip/Tooltip.types.js');
 
 const SLIDER_TEST_ID = 'bezier-react-slider';
-const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb';
+const SliderGuide = /*#__PURE__*/React.memo(function SliderGuide({
+  min,
+  max,
+  value
+}) {
+  return /*#__PURE__*/React.createElement(Slider_styled.SliderGuide, {
+    style: {
+      '--bezier-slider-guide-left': `${value / (max - min) * 100}%`
+    }
+  });
+});
+
+/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */
+const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb({
+  disableTooltip,
+  ...rest
+}, forwardedRef) {
+  const value = rest?.['aria-valuenow'];
+  if (disableTooltip) {
+    return /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, Object.assign({
+      ref: forwardedRef
+    }, rest));
+  }
+  return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    content: value,
+    offset: 6,
+    placement: Tooltip_types.TooltipPosition.TopCenter,
+    onPointerDownOutside: e => e.preventDefault()
+  }, /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, Object.assign({
+    ref: forwardedRef
+  }, rest)));
+});
+
+/**
+ * An input component where the user selects a value from within a given range.
+ * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [value, setValue] = useState([1])
+ * // Controlled
+ * <Slider
+ *   value={value}
+ *   onValueChange={setValue}
+ * />
+ * // Uncontrolled
+ * <Slider defaultValue={[1]} />
+ * ```
+ */
 const Slider = /*#__PURE__*/React.forwardRef(function Slider({
+  style,
   width = 36,
   guide,
-  onThumbPointerDown = functionUtils.noop,
-  onThumbPointerUp = functionUtils.noop,
-  defaultValue = [5],
+  defaultValue = [0],
   value,
   disabled = false,
   min = 0,
   max = 10,
   step = 1,
-  onValueChange = functionUtils.noop,
   minStepsBetweenThumbs = 0,
+  disableTooltip = false,
   ...rest
 }, forwardedRef) {
-  const [currentValue, setCurrentValue] = React.useState(value ?? defaultValue);
-  React.useEffect(function updateCurrentValue() {
-    if (value) {
-      setCurrentValue(value);
-      onValueChange(value);
-    }
-  }, [value, onValueChange]);
-  const handleValueChange = React.useCallback(_value => {
-    setCurrentValue(_value);
-    onValueChange(_value);
-  }, [onValueChange]);
-  const handlePointerDown = React.useCallback(() => {
-    if (!disabled) {
-      onThumbPointerDown(currentValue);
-    }
-  }, [disabled, onThumbPointerDown, currentValue]);
-  const handlePointerUp = React.useCallback(() => {
-    if (!disabled) {
-      onThumbPointerUp(currentValue);
-    }
-  }, [disabled, onThumbPointerUp, currentValue]);
-  return /*#__PURE__*/React.createElement(index.Root, {
-    asChild: true,
+  const targetValue = value || defaultValue;
+  return /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveRoot, Object.assign({
+    style: {
+      ...style,
+      '--bezier-slider-width': typeUtils.isNumber(width) ? `${width}px` : width
+    },
+    "data-testid": SLIDER_TEST_ID,
+    ref: forwardedRef,
+    orientation: "horizontal",
     defaultValue: defaultValue,
-    value: currentValue,
+    value: value,
     disabled: disabled,
     min: min,
     max: max,
     step: step,
-    onValueChange: handleValueChange,
     minStepsBetweenThumbs: minStepsBetweenThumbs
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderRoot, Object.assign({
-    width: width,
-    disabled: disabled,
-    ref: forwardedRef,
-    "data-testid": SLIDER_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement(index.Track, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderTrack, null, /*#__PURE__*/React.createElement(index.Range, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderRange, null)))), guide?.map(guideValue => /*#__PURE__*/React.createElement(Slider_styled.SliderGuide, {
+  }, rest), /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveTrack, null, /*#__PURE__*/React.createElement(Slider_styled.SliderPrimitiveRange, null), guide && /*#__PURE__*/React.createElement(Slider_styled.GuideContainer, null, guide.map(guideValue => /*#__PURE__*/React.createElement(SliderGuide, {
     key: `slider-guide-${guideValue}`,
     min: min,
     max: max,
-    guideValue: guideValue
-  })), currentValue.map((v, i) => /*#__PURE__*/React.createElement(index.Thumb, {
-    asChild: true
+    value: guideValue
+  })))), targetValue.map((_, i) => /*#__PURE__*/React.createElement(index.Thumb, {
     // eslint-disable-next-line react/no-array-index-key
-    ,
     key: `slider-thumb-${i}`,
-    onPointerDown: handlePointerDown,
-    onPointerUp: handlePointerUp
-  }, /*#__PURE__*/React.createElement(Slider_styled.SliderThumb, {
-    "data-testid": SLIDER_THUMB_TEST_ID
-  })))));
+    asChild: true
+  }, /*#__PURE__*/React.createElement(SliderThumb, {
+    disableTooltip: disableTooltip
+  }))));
 });
 
 exports.SLIDER_TEST_ID = SLIDER_TEST_ID;
-exports.SLIDER_THUMB_TEST_ID = SLIDER_THUMB_TEST_ID;
 exports.Slider = Slider;
 //# sourceMappingURL=Slider.js.map

package/dist/cjs/components/Forms/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\nexport const SLIDER_THUMB_TEST_ID = 'bezier-react-slider-thumb'\n\nexport const Slider = forwardRef(function Slider(\n  {\n    width = 36,\n    guide,\n    onThumbPointerDown = noop,\n    onThumbPointerUp = noop,\n    defaultValue = [5],\n    value,\n    disabled = false,\n    min = 0,\n    max = 10,\n    step = 1,\n    onValueChange = noop,\n    minStepsBetweenThumbs = 0,\n    ...rest\n  }: SliderProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)\n\n  useEffect(function updateCurrentValue() {\n    if (value) {\n      setCurrentValue(value)\n      onValueChange(value)\n    }\n  }, [\n    value,\n    onValueChange,\n  ])\n\n  const handleValueChange: (value: number[]) => void = useCallback((_value) => {\n    setCurrentValue(_value)\n    onValueChange(_value)\n  }, [onValueChange])\n\n  const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerDown(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerDown,\n    currentValue,\n  ])\n\n  const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {\n    if (!disabled) {\n      onThumbPointerUp(currentValue)\n    }\n  }, [\n    disabled,\n    onThumbPointerUp,\n    currentValue,\n  ])\n\n  return (\n    <SliderPrimitive.Root\n      asChild\n      defaultValue={defaultValue}\n      value={currentValue}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      onValueChange={handleValueChange}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n    >\n      <Styled.SliderRoot\n        width={width}\n        disabled={disabled}\n        ref={forwardedRef}\n        data-testid={SLIDER_TEST_ID}\n        {...rest}\n      >\n        <SliderPrimitive.Track asChild>\n          <Styled.SliderTrack>\n            <SliderPrimitive.Range asChild>\n              <Styled.SliderRange />\n            </SliderPrimitive.Range>\n          </Styled.SliderTrack>\n        </SliderPrimitive.Track>\n        { guide?.map((guideValue) => (\n          <Styled.SliderGuide\n            key={`slider-guide-${guideValue}`}\n            min={min}\n            max={max}\n            guideValue={guideValue}\n          />\n        )) }\n        { currentValue.map((v, i) => (\n          <SliderPrimitive.Thumb\n            asChild\n            // eslint-disable-next-line react/no-array-index-key\n            key={`slider-thumb-${i}`}\n            onPointerDown={handlePointerDown}\n            onPointerUp={handlePointerUp}\n          >\n            <Styled.SliderThumb\n              data-testid={SLIDER_THUMB_TEST_ID}\n            />\n          </SliderPrimitive.Thumb>\n        )) }\n      </Styled.SliderRoot>\n    </SliderPrimitive.Root>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SLIDER_THUMB_TEST_ID","Slider","forwardRef","width","guide","onThumbPointerDown","noop","onThumbPointerUp","defaultValue","value","disabled","min","max","step","onValueChange","minStepsBetweenThumbs","rest","forwardedRef","currentValue","setCurrentValue","useState","useEffect","updateCurrentValue","handleValueChange","useCallback","_value","handlePointerDown","handlePointerUp","React","createElement","SliderPrimitive","asChild","Styled","Object","assign","ref","map","guideValue","key","v","i","onPointerDown","onPointerUp"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Forms/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n} from 'react'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  Tooltip,\n  TooltipPosition,\n} from '~/src/components/Tooltip'\n\nimport type SliderProps from './Slider.types'\n\nimport * as Styled from './Slider.styled'\n\nexport const SLIDER_TEST_ID = 'bezier-react-slider'\n\nconst SliderGuide = memo<Record<'min' | 'max' | 'value', number>>(function SliderGuide({\n  min,\n  max,\n  value,\n}) {\n  return (\n    <Styled.SliderGuide\n      style={{\n        '--bezier-slider-guide-left': `${(value / (max - min)) * 100}%`,\n      } as React.CSSProperties}\n    />\n  )\n})\n\n/* NOTE: Props are injected at runtime by `SliderPrimitive.Thumb`. */\nconst SliderThumb = forwardRef<HTMLDivElement, Pick<SliderProps, 'disableTooltip'> & React.HTMLAttributes<HTMLDivElement>>(function SliderThumb({\n  disableTooltip,\n  ...rest\n}, forwardedRef) {\n  const value = rest?.['aria-valuenow']\n\n  if (disableTooltip) {\n    return (\n      <Styled.SliderThumb\n        ref={forwardedRef}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <Tooltip\n      content={value}\n      offset={6}\n      placement={TooltipPosition.TopCenter}\n      onPointerDownOutside={e => e.preventDefault()}\n    >\n      <Styled.SliderThumb\n        ref={forwardedRef}\n        {...rest}\n      />\n    </Tooltip>\n  )\n})\n\n/**\n * An input component where the user selects a value from within a given range.\n * The value of the slider is shown in a tooltip, and in some cases you can add a guide scale.\n *\n * @example\n *\n * ```tsx\n * const [value, setValue] = useState([1])\n * // Controlled\n * <Slider\n *   value={value}\n *   onValueChange={setValue}\n * />\n * // Uncontrolled\n * <Slider defaultValue={[1]} />\n * ```\n */\nexport const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider({\n  style,\n  width = 36,\n  guide,\n  defaultValue = [0],\n  value,\n  disabled = false,\n  min = 0,\n  max = 10,\n  step = 1,\n  minStepsBetweenThumbs = 0,\n  disableTooltip = false,\n  ...rest\n}, forwardedRef) {\n  const targetValue = value || defaultValue\n\n  return (\n    <Styled.SliderPrimitiveRoot\n      style={{\n        ...style,\n        '--bezier-slider-width': isNumber(width) ? `${width}px` : width,\n      }}\n      data-testid={SLIDER_TEST_ID}\n      ref={forwardedRef}\n      orientation=\"horizontal\"\n      defaultValue={defaultValue}\n      value={value}\n      disabled={disabled}\n      min={min}\n      max={max}\n      step={step}\n      minStepsBetweenThumbs={minStepsBetweenThumbs}\n      {...rest}\n    >\n      <Styled.SliderPrimitiveTrack>\n        <Styled.SliderPrimitiveRange />\n\n        { guide && (\n          <Styled.GuideContainer>\n            { guide.map((guideValue) => (\n              <SliderGuide\n                key={`slider-guide-${guideValue}`}\n                min={min}\n                max={max}\n                value={guideValue}\n              />\n            )) }\n          </Styled.GuideContainer>\n        ) }\n      </Styled.SliderPrimitiveTrack>\n\n      { targetValue.map((_, i) => (\n        <SliderPrimitive.Thumb\n          // eslint-disable-next-line react/no-array-index-key\n          key={`slider-thumb-${i}`}\n          asChild\n        >\n          <SliderThumb disableTooltip={disableTooltip} />\n        </SliderPrimitive.Thumb>\n      )) }\n    </Styled.SliderPrimitiveRoot>\n  )\n})\n"],"names":["SLIDER_TEST_ID","SliderGuide","memo","min","max","value","React","createElement","Styled","style","SliderThumb","forwardRef","disableTooltip","rest","forwardedRef","Object","assign","ref","Tooltip","content","offset","placement","TooltipPosition","TopCenter","onPointerDownOutside","e","preventDefault","Slider","width","guide","defaultValue","disabled","step","minStepsBetweenThumbs","targetValue","isNumber","orientation","map","guideValue","key","_","i","SliderPrimitive","asChild"],"mappings":"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"}

package/dist/cjs/components/Forms/Slider/Slider.styled.js

@@ -1,108 +1,49 @@
 'use strict';
 
+var index = require('../../../node_modules/@radix-ui/react-slider/dist/index.js');
 var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
-var styleUtils = require('../../../utils/styleUtils.js');
 var mixins = require('../Inputs/mixins.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 
-const SLIDER_TRACK_RANGE_HEIGHT = 6;
-const SLIDER_THUMB_SIZE = 20;
-const SLIDER_GUIDE_WIDTH = 2;
-const SLIDER_GUIDE_HEIGHT = 8;
-function calculateGuideBottomPosition({
-  gap
-}) {
-  return FoundationStyledComponent.css`
-    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);
-  `;
-}
-function calculateGuideLeftPosition({
-  min,
-  max,
-  guideValue
-}) {
-  const relativePositionPercentage = guideValue / (max - min) * 100;
-  const thumbOffsetPx = ((max + min) / 2 - guideValue) * (SLIDER_THUMB_SIZE / (max - min));
-  return FoundationStyledComponent.css`
-    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);
-  `;
-}
-const SliderRoot = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderRoot",
+const SliderPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index.Root).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveRoot",
   componentId: "sc-k2r47n-0"
-})(["position:relative;display:flex;align-items:center;width:", ";height:", "px;touch-action:none;cursor:", ";user-select:none;opacity:", ";", ";", ""], ({
-  width
-}) => styleUtils.toLength(width, '36px'), SLIDER_THUMB_SIZE, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  disabled
-}) => disabled ? DisabledOpacity.default : 'initial', ({
+})(["--bezier-slider-width:auto;--bezier-slider-thumb-size:20px;position:relative;display:flex;align-items:center;width:var(--bezier-slider-width);height:var(--bezier-slider-thumb-size);touch-action:none;cursor:pointer;user-select:none;&[data-disabled]{cursor:not-allowed;opacity:", ";}", ";", ""], DisabledOpacity.default, ({
   foundation
 }) => foundation?.transition?.getTransitionsCSS(['opacity']), ({
   interpolation
 }) => interpolation);
-const SliderTrack = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderTrack",
+const SliderPrimitiveTrack = /*#__PURE__*/FoundationStyledComponent.styled(index.Track).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveTrack",
   componentId: "sc-k2r47n-1"
-})(["position:relative;flex:1;height:", "px;", " background-color:", ";", ""], SLIDER_TRACK_RANGE_HEIGHT, ({
-  foundation
-}) => foundation?.rounding?.round3, ({
-  foundation
-}) => foundation?.theme?.['bg-black-dark'], ({
-  interpolation
-}) => interpolation);
-const SliderRange = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Sliderstyled__SliderRange",
+})(["position:relative;flex:1;height:6px;background-color:var(--bg-black-dark);border-radius:3px;"]);
+const SliderPrimitiveRange = /*#__PURE__*/FoundationStyledComponent.styled(index.Range).withConfig({
+  displayName: "Sliderstyled__SliderPrimitiveRange",
   componentId: "sc-k2r47n-2"
-})(["position:absolute;height:100%;", " background-color:", ";", ""], ({
-  foundation
-}) => foundation?.rounding?.round3, ({
-  foundation
-}) => foundation?.theme?.['bgtxt-green-normal'], ({
-  interpolation
-}) => interpolation);
+})(["position:absolute;height:100%;background-color:var(--bgtxt-green-normal);border-radius:3px;"]);
+const GuideContainer = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Sliderstyled__GuideContainer",
+  componentId: "sc-k2r47n-3"
+})(["--bezier-slider-guide-height:8px;position:absolute;top:calc(-1 * (var(--bezier-slider-guide-height) + 3px));left:calc(var(--bezier-slider-thumb-size) / 2);width:calc(100% - var(--bezier-slider-thumb-size));"]);
 const SliderGuide = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Sliderstyled__SliderGuide",
-  componentId: "sc-k2r47n-3"
-})(["position:absolute;", " ", " width:", "px;height:", "px;", " background-color:", ";", ""], calculateGuideBottomPosition({
-  gap: 3
-}), ({
-  min,
-  max,
-  guideValue
-}) => calculateGuideLeftPosition({
-  min,
-  max,
-  guideValue
-}), SLIDER_GUIDE_WIDTH, SLIDER_GUIDE_HEIGHT, ({
-  foundation
-}) => foundation?.rounding?.round1, ({
-  foundation
-}) => foundation?.theme?.['bg-black-light'], ({
-  interpolation
-}) => interpolation);
+  componentId: "sc-k2r47n-4"
+})(["--bezier-slider-guide-left:0;position:absolute;top:0;left:var(--bezier-slider-guide-left);width:2px;height:var(--bezier-slider-guide-height);background-color:var(--bg-black-light);border-radius:1px;transform:translateX(-50%);"]);
 const SliderThumb = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Sliderstyled__SliderThumb",
-  componentId: "sc-k2r47n-4"
-})(["all:unset;display:block;width:", "px;height:", "px;", " ", " background-color:", ";&:hover{", " background-color:", ";}&:focus-visible{", "}", " ", ""], SLIDER_THUMB_SIZE, SLIDER_THUMB_SIZE, ({
-  foundation
-}) => foundation?.rounding?.round12, ({
+  componentId: "sc-k2r47n-5"
+})(["all:unset;display:block;width:var(--bezier-slider-thumb-size);height:var(--bezier-slider-thumb-size);border-radius:12px;", " background-color:var(--bgtxt-absolute-white-dark);&:hover{", " background-color:var(--bgtxt-absolute-white-dark);}&:focus-visible{", "}", ""], ({
   foundation
 }) => foundation?.elevation?.ev2(), ({
   foundation
-}) => foundation?.theme?.['bgtxt-absolute-white-dark'], ({
-  foundation
-}) => foundation?.elevation?.ev3(), ({
-  foundation
-}) => foundation?.theme?.['bgtxt-absolute-white-dark'], mixins.focusedInputWrapperStyle, ({
+}) => foundation?.elevation?.ev3(), mixins.focusedInputWrapperStyle, ({
   foundation
-}) => foundation?.transition?.getTransitionsCSS(['box-shadow']), ({
-  interpolation
-}) => interpolation);
+}) => foundation?.transition?.getTransitionsCSS(['box-shadow']));
 
+exports.GuideContainer = GuideContainer;
 exports.SliderGuide = SliderGuide;
-exports.SliderRange = SliderRange;
-exports.SliderRoot = SliderRoot;
+exports.SliderPrimitiveRange = SliderPrimitiveRange;
+exports.SliderPrimitiveRoot = SliderPrimitiveRoot;
+exports.SliderPrimitiveTrack = SliderPrimitiveTrack;
 exports.SliderThumb = SliderThumb;
-exports.SliderTrack = SliderTrack;
 //# sourceMappingURL=Slider.styled.js.map

package/dist/cjs/components/Forms/Slider/Slider.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styled.js","sources":["../../../../../src/components/Forms/Slider/Slider.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nimport type SliderProps from './Slider.types'\n\nconst SLIDER_TRACK_RANGE_HEIGHT = 6\nconst SLIDER_THUMB_SIZE = 20\nconst SLIDER_GUIDE_WIDTH = 2\nconst SLIDER_GUIDE_HEIGHT = 8\n\ninterface CalculateGuideBottomPosition {\n  gap: number\n}\n\nfunction calculateGuideBottomPosition({\n  gap,\n}: CalculateGuideBottomPosition) {\n  return css`\n    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);\n  `\n}\n\ninterface CalculateGuideLeftPosition {\n  min: number\n  max: number\n  guideValue: number\n}\n\nfunction calculateGuideLeftPosition({\n  min,\n  max,\n  guideValue,\n}: CalculateGuideLeftPosition) {\n  const relativePositionPercentage = (guideValue / (max - min)) * 100\n  const thumbOffsetPx = (((max + min) / 2) - guideValue) * (SLIDER_THUMB_SIZE / ((max - min)))\n\n  return css`\n    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);\n  `\n}\n\ninterface SliderRootProps extends SliderProps {\n  width: NonNullable<SliderProps['width']>\n}\n\nexport const SliderRoot = styled.div<SliderRootProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  width: ${({ width }) => toLength(width, '36px')};\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  touch-action: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  user-select: none;\n\n  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderTrackProps extends SliderProps {}\n\nexport const SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  flex: 1;\n  height: ${SLIDER_TRACK_RANGE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderRangeProps extends SliderProps {}\n\nexport const SliderRange = styled.div<SliderRangeProps>`\n  position: absolute;\n  height: 100%;\n\n  ${({ foundation }) => foundation?.rounding?.round3}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderGuideProps extends SliderProps {\n  min: NonNullable<SliderProps['min']>\n  max: NonNullable<SliderProps['max']>\n  guideValue: number\n}\n\nexport const SliderGuide = styled.div<SliderGuideProps>`\n  position: absolute;\n  ${calculateGuideBottomPosition({ gap: 3 })}\n  ${({ min, max, guideValue }) => calculateGuideLeftPosition({ min, max, guideValue })}\n\n  width: ${SLIDER_GUIDE_WIDTH}px;\n  height: ${SLIDER_GUIDE_HEIGHT}px;\n\n  ${({ foundation }) => foundation?.rounding?.round1}\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface SliderThumbProps extends SliderProps {}\n\nexport const SliderThumb = styled.div<SliderThumbProps>`\n  all: unset;\n  display: block;\n\n  width: ${SLIDER_THUMB_SIZE}px;\n  height: ${SLIDER_THUMB_SIZE}px;\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ foundation }) => foundation?.elevation?.ev2()}\n  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n\n  &:hover {\n    ${({ foundation }) => foundation?.elevation?.ev3()}\n    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["SLIDER_TRACK_RANGE_HEIGHT","SLIDER_THUMB_SIZE","SLIDER_GUIDE_WIDTH","SLIDER_GUIDE_HEIGHT","calculateGuideBottomPosition","gap","css","calculateGuideLeftPosition","min","max","guideValue","relativePositionPercentage","thumbOffsetPx","SliderRoot","styled","div","withConfig","displayName","componentId","width","toLength","disabled","DisabledOpacity","foundation","transition","getTransitionsCSS","interpolation","SliderTrack","rounding","round3","theme","SliderRange","SliderGuide","round1","SliderThumb","round12","elevation","ev2","ev3","focusedInputWrapperStyle"],"mappings":"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"}
+{"version":3,"file":"Slider.styled.js","sources":["../../../../../src/components/Forms/Slider/Slider.styled.ts"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { styled } from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\nimport { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'\n\nexport const SliderPrimitiveRoot = styled(SliderPrimitive.Root)<InterpolationProps>`\n  --bezier-slider-width: auto;\n  --bezier-slider-thumb-size: 20px;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--bezier-slider-width);\n  height: var(--bezier-slider-thumb-size);\n  touch-action: none;\n  cursor: pointer;\n  user-select: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};\n  ${({ interpolation }) => interpolation}\n`\n\nexport const SliderPrimitiveTrack = styled(SliderPrimitive.Track)`\n  position: relative;\n  flex: 1;\n  height: 6px;\n  background-color: var(--bg-black-dark);\n  border-radius: 3px;\n`\n\nexport const SliderPrimitiveRange = styled(SliderPrimitive.Range)`\n  position: absolute;\n  height: 100%;\n  background-color: var(--bgtxt-green-normal);\n  border-radius: 3px;\n`\n\nexport const GuideContainer = styled.div`\n  --bezier-slider-guide-height: 8px;\n\n  position: absolute;\n  top: calc(-1 * (var(--bezier-slider-guide-height) + 3px));\n  left: calc(var(--bezier-slider-thumb-size) / 2);\n  width: calc(100% - var(--bezier-slider-thumb-size));\n`\n\nexport const SliderGuide = styled.div`\n  --bezier-slider-guide-left: 0;\n\n  position: absolute;\n  top: 0;\n  left: var(--bezier-slider-guide-left);\n  width: 2px;\n  height: var(--bezier-slider-guide-height);\n  background-color: var(--bg-black-light);\n  border-radius: 1px;\n  transform: translateX(-50%);\n`\n\nexport const SliderThumb = styled.div`\n  all: unset;\n  display: block;\n  width: var(--bezier-slider-thumb-size);\n  height: var(--bezier-slider-thumb-size);\n  border-radius: 12px;\n\n  ${({ foundation }) => foundation?.elevation?.ev2()}\n  /* stylelint-disable order/properties-order */\n  /* NOTE: Override the background-color property inside ev mixin */\n  background-color: var(--bgtxt-absolute-white-dark);\n\n  &:hover {\n    ${({ foundation }) => foundation?.elevation?.ev3()}\n    background-color: var(--bgtxt-absolute-white-dark);\n  }\n\n  &:focus-visible {\n    ${focusedInputWrapperStyle}\n  }\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}\n`\n"],"names":["SliderPrimitiveRoot","styled","SliderPrimitive","withConfig","displayName","componentId","DisabledOpacity","foundation","transition","getTransitionsCSS","interpolation","SliderPrimitiveTrack","SliderPrimitiveRange","GuideContainer","div","SliderGuide","SliderThumb","elevation","ev2","ev3","focusedInputWrapperStyle"],"mappings":";;;;;;;AASO,MAAMA,mBAAmB,gBAAGC,gCAAM,CAACC,UAAoB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAehDC,CAAAA,CAAAA,CAAAA,qRAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,uBAAe,EAG1B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,EAC1E,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,oBAAoB,gBAAGV,gCAAM,CAACC,WAAqB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMhE,CAAA,CAAA,CAAA,8FAAA,CAAA,EAAA;AAEM,MAAMO,oBAAoB,gBAAGX,gCAAM,CAACC,WAAqB,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAKhE,CAAA,CAAA,CAAA,6FAAA,CAAA,EAAA;MAEYQ,cAAc,gBAAGZ,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAOvC,CAAA,CAAA,CAAA,gNAAA,CAAA,EAAA;MAEYU,WAAW,gBAAGd,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAWpC,CAAA,CAAA,CAAA,mOAAA,CAAA,EAAA;MAEYW,WAAW,gBAAGf,gCAAM,CAACa,GAAG,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0HAAA,EAAA,6DAAA,EAAA,sEAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAOjC,CAAC;AAAEE,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEU,SAAS,EAAEC,GAAG,EAAE,EAM9C,CAAC;AAAEX,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEU,SAAS,EAAEE,GAAG,EAAE,EAKhDC,+BAAwB,EAG1B,CAAC;AAAEb,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,CAAC,CAAC,YAAY,CAAC,CAAC;;;;;;;;;"}

package/dist/cjs/components/Help/Help.js

@@ -6,29 +6,32 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var typeUtils = require('../../utils/typeUtils.js');
 var Help_styled = require('./Help.styled.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var Icon_types = require('../Icon/Icon.types.js');
 
 const HELP_TEST_ID = 'bezier-react-help';
 const HELP_DISPLAY_NAME = 'Help';
-function Help({
+const Help = /*#__PURE__*/React.forwardRef(function Help({
   children,
   ...rest
-}) {
+}, forwardedRef) {
   if (typeUtils.isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Help_styled.Tooltip, Object.assign({}, rest, {
+  return /*#__PURE__*/React.createElement(Tooltip.Tooltip, Object.assign({}, rest, {
+    ref: forwardedRef,
     content: children
-  }), /*#__PURE__*/React.createElement(Help_styled.Icon, {
+  }), /*#__PURE__*/React.createElement(Help_styled.Trigger, null, /*#__PURE__*/React.createElement(Help_styled.Icon, {
     testId: HELP_TEST_ID,
     source: bezierIcons.HelpFilledIcon,
     size: Icon_types.IconSize.XS,
     color: "txt-black-dark"
-  }));
-}
+  })));
+});
 Help.displayName = HELP_DISPLAY_NAME;
+var Help$1 = Help;
 
 exports.HELP_DISPLAY_NAME = HELP_DISPLAY_NAME;
 exports.HELP_TEST_ID = HELP_TEST_ID;
-exports.default = Help;
+exports.default = Help$1;
 //# sourceMappingURL=Help.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Help.js","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\n\nimport type HelpProps from './Help.types'\n\nimport * as Styled from './Help.styled'\n\nexport const HELP_TEST_ID = 'bezier-react-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nfunction Help({\n  children,\n  ...rest\n}: HelpProps) {\n  if (isEmpty(children)) { return null }\n\n  return (\n    <Styled.Tooltip {...rest} content={children}>\n      <Styled.Icon\n        testId={HELP_TEST_ID}\n        source={HelpFilledIcon}\n        size={IconSize.XS}\n        color=\"txt-black-dark\"\n      />\n    </Styled.Tooltip>\n  )\n}\n\nHelp.displayName = HELP_DISPLAY_NAME\n\nexport default Help\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","children","rest","isEmpty","React","createElement","Styled","Object","assign","content","testId","source","HelpFilledIcon","size","IconSize","XS","color","displayName"],"mappings":";;;;;;;;;;AAYO,MAAMA,YAAY,GAAG,oBAAmB;AACxC,MAAMC,iBAAiB,GAAG,OAAM;AAEvC,SAASC,IAAIA,CAAC;EACZC,QAAQ;EACR,GAAGC,IAAAA;AACM,CAAC,EAAE;AACZ,EAAA,IAAIC,iBAAO,CAACF,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAErC,EAAA,oBACEG,KAAA,CAAAC,aAAA,CAACC,mBAAc,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAKN,IAAI,EAAA;AAAEO,IAAAA,OAAO,EAAER,QAAAA;AAAS,GAAA,CAAA,eAC1CG,KAAA,CAAAC,aAAA,CAACC,gBAAW,EAAA;AACVI,IAAAA,MAAM,EAAEZ,YAAa;AACrBa,IAAAA,MAAM,EAAEC,0BAAe;IACvBC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAC,gBAAA;AAAgB,GACvB,CACa,CAAC,CAAA;AAErB,CAAA;AAEAhB,IAAI,CAACiB,WAAW,GAAGlB,iBAAiB;;;;;;"}
+{"version":3,"file":"Help.js","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport type HelpProps from './Help.types'\n\nimport * as Styled from './Help.styled'\n\nexport const HELP_TEST_ID = 'bezier-react-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nconst Help = forwardRef<HTMLDivElement, HelpProps>(function Help({\n  children,\n  ...rest\n}, forwardedRef) {\n  if (isEmpty(children)) { return null }\n\n  return (\n    <Tooltip\n      {...rest}\n      ref={forwardedRef}\n      content={children}\n    >\n      <Styled.Trigger>\n        <Styled.Icon\n          testId={HELP_TEST_ID}\n          source={HelpFilledIcon}\n          size={IconSize.XS}\n          color=\"txt-black-dark\"\n        />\n      </Styled.Trigger>\n    </Tooltip>\n  )\n})\n\nHelp.displayName = HELP_DISPLAY_NAME\n\nexport default Help\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","forwardRef","children","rest","forwardedRef","isEmpty","React","createElement","Tooltip","Object","assign","ref","content","Styled","testId","source","HelpFilledIcon","size","IconSize","XS","color","displayName"],"mappings":";;;;;;;;;;;AAaO,MAAMA,YAAY,GAAG,oBAAmB;AACxC,MAAMC,iBAAiB,GAAG,OAAM;AAEvC,MAAMC,IAAI,gBAAGC,gBAAU,CAA4B,SAASD,IAAIA,CAAC;EAC/DE,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,IAAIC,iBAAO,CAACH,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;EAErC,oBACEI,KAAA,CAAAC,aAAA,CAACC,eAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFP,IAAI,EAAA;AACRQ,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,OAAO,EAAEV,QAAAA;AAAS,GAAA,CAAA,eAElBI,KAAA,CAAAC,aAAA,CAACM,mBAAc,EACbP,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACM,gBAAW,EAAA;AACVC,IAAAA,MAAM,EAAEhB,YAAa;AACrBiB,IAAAA,MAAM,EAAEC,0BAAe;IACvBC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAC,gBAAA;GACP,CACa,CACT,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEFpB,IAAI,CAACqB,WAAW,GAAGtB,iBAAiB,CAAA;AAEpC,aAAeC,IAAI;;;;;;"}

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

@@ -1,6 +1,5 @@
 'use strict';
 
-var Tooltip$1 = require('../Tooltip/Tooltip.js');
 var Icon$1 = require('../Icon/Icon.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 
@@ -8,13 +7,13 @@ const Icon = /*#__PURE__*/FoundationStyledComponent.styled(Icon$1.Icon).withConf
   displayName: "Helpstyled__Icon",
   componentId: "sc-chv6si-0"
 })([""]);
-const Tooltip = /*#__PURE__*/FoundationStyledComponent.styled(Tooltip$1.default).withConfig({
-  displayName: "Helpstyled__Tooltip",
+const Trigger = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Helpstyled__Trigger",
   componentId: "sc-chv6si-1"
-})(["display:flex;align-items:center;justify-content:center;&:hover{> ", "{color:", ";}}"], Icon, ({
+})(["line-height:0;&:not([data-state=\"closed\"]){", "{color:", ";}}"], Icon, ({
   foundation
 }) => foundation?.theme?.['txt-black-darkest']);
 
 exports.Icon = Icon;
-exports.Tooltip = Tooltip;
+exports.Trigger = Trigger;
 //# sourceMappingURL=Help.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Help.styled.js","sources":["../../../../src/components/Help/Help.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { Icon as BaseIcon } from '~/src/components/Icon'\nimport { Tooltip as BaseTooltip } from '~/src/components/Tooltip'\n\nexport const Icon = styled(BaseIcon)``\n\nexport const Tooltip = styled(BaseTooltip)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    > ${Icon} {\n      color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n    }\n  }\n`\n"],"names":["Icon","styled","BaseIcon","withConfig","displayName","componentId","Tooltip","BaseTooltip","foundation","theme"],"mappings":";;;;;;AAKO,MAAMA,IAAI,gBAAGC,gCAAM,CAACC,WAAQ,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAE/B,MAAMC,OAAO,gBAAGL,gCAAM,CAACM,iBAAW,CAAC,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMlCL,CAAAA,CAAAA,CAAAA,mEAAAA,EAAAA,SAAAA,EAAAA,KAAAA,CAAAA,EAAAA,IAAI,EACG,CAAC;AAAEQ,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC;;;;;"}
+{"version":3,"file":"Help.styled.js","sources":["../../../../src/components/Help/Help.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { Icon as BaseIcon } from '~/src/components/Icon'\n\nexport const Icon = styled(BaseIcon)``\n\nexport const Trigger = styled.div`\n  line-height: 0;\n\n  &:not([data-state=\"closed\"]) {\n    ${Icon} {\n      color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n    }\n  }\n`\n"],"names":["Icon","styled","BaseIcon","withConfig","displayName","componentId","Trigger","div","foundation","theme"],"mappings":";;;;;AAIO,MAAMA,IAAI,gBAAGC,gCAAM,CAACC,WAAQ,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;MAEzBC,OAAO,gBAAGL,gCAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAI3BL,CAAAA,CAAAA,CAAAA,+CAAAA,EAAAA,SAAAA,EAAAA,KAAAA,CAAAA,EAAAA,IAAI,EACK,CAAC;AAAEQ,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAC;;;;;"}

package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.js

@@ -7,21 +7,14 @@ var functionUtils = require('../../../../utils/functionUtils.js');
 var typeUtils = require('../../../../utils/typeUtils.js');
 var KeyValueListItem_const = require('../../KeyValueListItem.const.js');
 var ItemAction_styled = require('./ItemAction.styled.js');
+var Tooltip = require('../../../Tooltip/Tooltip.js');
 var v4 = require('../../../../node_modules/uuid/dist/esm-browser/v4.js');
 var Icon_types = require('../../../Icon/Icon.types.js');
-var utils = require('../../../LegacyIcon/utils.js');
 
 function ActionIcon({
   icon,
   iconColor
 }) {
-  if (utils.isIconName(icon)) {
-    return /*#__PURE__*/React.createElement(ItemAction_styled.ActionLegacyIcon, {
-      name: icon,
-      color: iconColor ?? 'txt-black-dark',
-      size: Icon_types.IconSize.XS
-    });
-  }
   return /*#__PURE__*/React.createElement(ItemAction_styled.ActionIcon, {
     source: icon,
     color: iconColor ?? 'txt-black-dark',
@@ -43,7 +36,7 @@ function ItemAction({
         onClick: action.onClick ?? functionUtils.noop
       }, /*#__PURE__*/React.createElement(ActionIcon, action));
       if (!typeUtils.isEmpty(action.tooltip)) {
-        return /*#__PURE__*/React.createElement(ItemAction_styled.ActionIconTooltip, {
+        return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
           key: key,
           content: action.tooltip
         }, iconElement);

package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemAction.js","sources":["../../../../../../src/components/KeyValueListItem/common/ItemActions/ItemAction.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { v4 as uuid } from 'uuid'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport {\n  isArray,\n  isBoolean,\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { TEST_ID_MAP } from '~/src/components/KeyValueListItem/KeyValueListItem.const'\nimport { isIconName } from '~/src/components/LegacyIcon'\n\nimport {\n  type ItemActionProps,\n  type ItemActionWithIcon,\n  type KeyValueListItemActionProps,\n} from './ItemAction.types'\n\nimport * as Styled from './ItemAction.styled'\n\nfunction ActionIcon({\n  icon,\n  iconColor,\n}: ItemActionWithIcon) {\n  if (isIconName(icon)) {\n    return (\n      <Styled.ActionLegacyIcon\n        name={icon}\n        color={iconColor ?? 'txt-black-dark'}\n        size={IconSize.XS}\n      />\n    )\n  }\n\n  return (\n    <Styled.ActionIcon\n      source={icon}\n      color={iconColor ?? 'txt-black-dark'}\n      size={IconSize.XS}\n    />\n  )\n}\n\nfunction ItemAction(\n  {\n    actions,\n    testId = TEST_ID_MAP.ACTIONS_ITEM,\n    ...props\n  }: ItemActionProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  const renderAction = useCallback((action: KeyValueListItemActionProps, key?: string) => {\n    if ('icon' in action) {\n      const iconElement = (\n        <Styled.ActionIconWrapper\n          key={key}\n          hoverBackgroundColor={action.hoverBackgroundColor ?? 'bg-black-lighter'}\n          hoverIconColor={action.hoverIconColor ?? 'txt-black-darkest'}\n          show={isBoolean(action.show) ? action.show : true}\n          onClick={action.onClick ?? noop}\n        >\n          <ActionIcon {...action} />\n        </Styled.ActionIconWrapper>\n      )\n\n      if (!isEmpty(action.tooltip)) {\n        return (\n          <Styled.ActionIconTooltip key={key} content={action.tooltip}>\n            { iconElement }\n          </Styled.ActionIconTooltip>\n        )\n      }\n      return iconElement\n    }\n\n    return React.cloneElement(action, { key })\n  }, [])\n\n  const ActionsComponent = useMemo(() => {\n    if (isNil(actions) || isEmpty(actions)) {\n      return null\n    }\n\n    const item = isArray(actions)\n      ? actions.map((action) => renderAction(action, uuid()))\n      : renderAction(actions)\n\n    return item\n  }, [\n    actions,\n    renderAction,\n  ])\n\n  if (isNil(actions) || isEmpty(actions)) {\n    return null\n  }\n\n  return (\n    <Styled.ItemActionWrapper\n      data-testid={testId}\n      {...props}\n      ref={forwardedRef}\n    >\n      { ActionsComponent }\n    </Styled.ItemActionWrapper>\n  )\n}\n\nexport default memo(forwardRef(ItemAction))\n"],"names":["ActionIcon","icon","iconColor","isIconName","React","createElement","Styled","name","color","size","IconSize","XS","source","ItemAction","actions","testId","TEST_ID_MAP","ACTIONS_ITEM","props","forwardedRef","renderAction","useCallback","action","key","iconElement","hoverBackgroundColor","hoverIconColor","show","isBoolean","onClick","noop","isEmpty","tooltip","content","cloneElement","ActionsComponent","useMemo","isNil","item","isArray","map","uuid","Object","assign","ref","memo","forwardRef"],"mappings":"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"}
+{"version":3,"file":"ItemAction.js","sources":["../../../../../../src/components/KeyValueListItem/common/ItemActions/ItemAction.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { v4 as uuid } from 'uuid'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport {\n  isArray,\n  isBoolean,\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport { TEST_ID_MAP } from '~/src/components/KeyValueListItem/KeyValueListItem.const'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport {\n  type ItemActionProps,\n  type ItemActionWithIcon,\n  type KeyValueListItemActionProps,\n} from './ItemAction.types'\n\nimport * as Styled from './ItemAction.styled'\n\nfunction ActionIcon({\n  icon,\n  iconColor,\n}: ItemActionWithIcon) {\n  return (\n    <Styled.ActionIcon\n      source={icon}\n      color={iconColor ?? 'txt-black-dark'}\n      size={IconSize.XS}\n    />\n  )\n}\n\nfunction ItemAction(\n  {\n    actions,\n    testId = TEST_ID_MAP.ACTIONS_ITEM,\n    ...props\n  }: ItemActionProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  const renderAction = useCallback((action: KeyValueListItemActionProps, key?: string) => {\n    if ('icon' in action) {\n      const iconElement = (\n        <Styled.ActionIconWrapper\n          key={key}\n          hoverBackgroundColor={action.hoverBackgroundColor ?? 'bg-black-lighter'}\n          hoverIconColor={action.hoverIconColor ?? 'txt-black-darkest'}\n          show={isBoolean(action.show) ? action.show : true}\n          onClick={action.onClick ?? noop}\n        >\n          <ActionIcon {...action} />\n        </Styled.ActionIconWrapper>\n      )\n\n      if (!isEmpty(action.tooltip)) {\n        return (\n          <Tooltip\n            key={key}\n            content={action.tooltip}\n          >\n            { iconElement }\n          </Tooltip>\n        )\n      }\n      return iconElement\n    }\n\n    return React.cloneElement(action, { key })\n  }, [])\n\n  const ActionsComponent = useMemo(() => {\n    if (isNil(actions) || isEmpty(actions)) {\n      return null\n    }\n\n    const item = isArray(actions)\n      ? actions.map((action) => renderAction(action, uuid()))\n      : renderAction(actions)\n\n    return item\n  }, [\n    actions,\n    renderAction,\n  ])\n\n  if (isNil(actions) || isEmpty(actions)) {\n    return null\n  }\n\n  return (\n    <Styled.ItemActionWrapper\n      data-testid={testId}\n      {...props}\n      ref={forwardedRef}\n    >\n      { ActionsComponent }\n    </Styled.ItemActionWrapper>\n  )\n}\n\nexport default memo(forwardRef(ItemAction))\n"],"names":["ActionIcon","icon","iconColor","React","createElement","Styled","source","color","size","IconSize","XS","ItemAction","actions","testId","TEST_ID_MAP","ACTIONS_ITEM","props","forwardedRef","renderAction","useCallback","action","key","iconElement","hoverBackgroundColor","hoverIconColor","show","isBoolean","onClick","noop","isEmpty","tooltip","Tooltip","content","cloneElement","ActionsComponent","useMemo","isNil","item","isArray","map","uuid","Object","assign","ref","memo","forwardRef"],"mappings":";;;;;;;;;;;;;AA8BA,SAASA,UAAUA,CAAC;EAClBC,IAAI;AACJC,EAAAA,SAAAA;AACkB,CAAC,EAAE;AACrB,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,4BAAiB,EAAA;AAChBC,IAAAA,MAAM,EAAEL,IAAK;IACbM,KAAK,EAAEL,SAAS,IAAI,gBAAiB;IACrCM,IAAI,EAAEC,mBAAQ,CAACC,EAAAA;AAAG,GACnB,CAAC,CAAA;AAEN,CAAA;AAEA,SAASC,UAAUA,CACjB;EACEC,OAAO;EACPC,MAAM,GAAGC,kCAAW,CAACC,YAAY;EACjC,GAAGC,KAAAA;AACY,CAAC,EAClBC,YAAiC,EACjC;EACA,MAAMC,YAAY,GAAGC,iBAAW,CAAC,CAACC,MAAmC,EAAEC,GAAY,KAAK;IACtF,IAAI,MAAM,IAAID,MAAM,EAAE;MACpB,MAAME,WAAW,gBACfnB,KAAA,CAAAC,aAAA,CAACC,mCAAwB,EAAA;AACvBgB,QAAAA,GAAG,EAAEA,GAAI;AACTE,QAAAA,oBAAoB,EAAEH,MAAM,CAACG,oBAAoB,IAAI,kBAAmB;AACxEC,QAAAA,cAAc,EAAEJ,MAAM,CAACI,cAAc,IAAI,mBAAoB;AAC7DC,QAAAA,IAAI,EAAEC,mBAAS,CAACN,MAAM,CAACK,IAAI,CAAC,GAAGL,MAAM,CAACK,IAAI,GAAG,IAAK;AAClDE,QAAAA,OAAO,EAAEP,MAAM,CAACO,OAAO,IAAIC,kBAAAA;OAE3BzB,eAAAA,KAAA,CAAAC,aAAA,CAACJ,UAAU,EAAKoB,MAAS,CACD,CAC3B,CAAA;AAED,MAAA,IAAI,CAACS,iBAAO,CAACT,MAAM,CAACU,OAAO,CAAC,EAAE;AAC5B,QAAA,oBACE3B,KAAA,CAAAC,aAAA,CAAC2B,eAAO,EAAA;AACNV,UAAAA,GAAG,EAAEA,GAAI;UACTW,OAAO,EAAEZ,MAAM,CAACU,OAAAA;AAAQ,SAAA,EAEtBR,WACK,CAAC,CAAA;AAEd,OAAA;AACA,MAAA,OAAOA,WAAW,CAAA;AACpB,KAAA;AAEA,IAAA,oBAAOnB,KAAK,CAAC8B,YAAY,CAACb,MAAM,EAAE;AAAEC,MAAAA,GAAAA;AAAI,KAAC,CAAC,CAAA;GAC3C,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMa,gBAAgB,GAAGC,aAAO,CAAC,MAAM;IACrC,IAAIC,eAAK,CAACxB,OAAO,CAAC,IAAIiB,iBAAO,CAACjB,OAAO,CAAC,EAAE;AACtC,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;IAEA,MAAMyB,IAAI,GAAGC,iBAAO,CAAC1B,OAAO,CAAC,GACzBA,OAAO,CAAC2B,GAAG,CAAEnB,MAAM,IAAKF,YAAY,CAACE,MAAM,EAAEoB,UAAI,EAAE,CAAC,CAAC,GACrDtB,YAAY,CAACN,OAAO,CAAC,CAAA;AAEzB,IAAA,OAAOyB,IAAI,CAAA;AACb,GAAC,EAAE,CACDzB,OAAO,EACPM,YAAY,CACb,CAAC,CAAA;EAEF,IAAIkB,eAAK,CAACxB,OAAO,CAAC,IAAIiB,iBAAO,CAACjB,OAAO,CAAC,EAAE;AACtC,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,oBACET,KAAA,CAAAC,aAAA,CAACC,mCAAwB,EAAAoC,MAAA,CAAAC,MAAA,CAAA;IACvB,aAAa7B,EAAAA,MAAAA;AAAO,GAAA,EAChBG,KAAK,EAAA;AACT2B,IAAAA,GAAG,EAAE1B,YAAAA;AAAa,GAAA,CAAA,EAEhBiB,gBACsB,CAAC,CAAA;AAE/B,CAAA;AAEA,mBAAA,aAAeU,UAAI,eAACC,gBAAU,CAAClC,UAAU,CAAC,CAAC;;;;"}

package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.styled.js

@@ -1,9 +1,7 @@
 'use strict';
 
 var typeUtils = require('../../../../utils/typeUtils.js');
-var Tooltip = require('../../../Tooltip/Tooltip.js');
 var Icon = require('../../../Icon/Icon.js');
-var LegacyIcon = require('../../../LegacyIcon/LegacyIcon.js');
 var FoundationStyledComponent = require('../../../../foundation/FoundationStyledComponent.js');
 
 const ItemActionWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
@@ -14,14 +12,10 @@ const ActionIcon = /*#__PURE__*/FoundationStyledComponent.styled(Icon.Icon).with
   displayName: "ItemActionstyled__ActionIcon",
   componentId: "sc-1ff9lif-1"
 })([""]);
-const ActionLegacyIcon = /*#__PURE__*/FoundationStyledComponent.styled(LegacyIcon.default).withConfig({
-  displayName: "ItemActionstyled__ActionLegacyIcon",
-  componentId: "sc-1ff9lif-2"
-})([""]);
-const ActionIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+const ActionIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.button.withConfig({
   displayName: "ItemActionstyled__ActionIconWrapper",
-  componentId: "sc-1ff9lif-3"
-})(["display:", ";align-items:center;justify-content:center;padding:2px;margin-left:auto;cursor:pointer;", " &:hover{", " ", "{", "}", "{", "}}"], ({
+  componentId: "sc-1ff9lif-2"
+})(["all:unset;display:", ";align-items:center;justify-content:center;padding:2px;margin-left:auto;cursor:pointer;", " &:hover,&:focus-visible{", " ", "{", "}}"], ({
   show
 }) => show ? 'flex' : 'none', ({
   foundation
@@ -33,22 +27,11 @@ const ActionIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.with
     `, ActionIcon, ({
   foundation,
   hoverIconColor
-}) => !typeUtils.isNil(hoverIconColor) && FoundationStyledComponent.css`
-        color: ${foundation?.theme?.[hoverIconColor]};
-      `, ActionLegacyIcon, ({
-  foundation,
-  hoverIconColor
 }) => !typeUtils.isNil(hoverIconColor) && FoundationStyledComponent.css`
         color: ${foundation?.theme?.[hoverIconColor]};
       `);
-const ActionIconTooltip = /*#__PURE__*/FoundationStyledComponent.styled(Tooltip.default).withConfig({
-  displayName: "ItemActionstyled__ActionIconTooltip",
-  componentId: "sc-1ff9lif-4"
-})(["margin-left:auto;"]);
 
 exports.ActionIcon = ActionIcon;
-exports.ActionIconTooltip = ActionIconTooltip;
 exports.ActionIconWrapper = ActionIconWrapper;
-exports.ActionLegacyIcon = ActionLegacyIcon;
 exports.ItemActionWrapper = ItemActionWrapper;
 //# sourceMappingURL=ItemAction.styled.js.map

package/dist/cjs/components/KeyValueListItem/common/ItemActions/ItemAction.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemAction.styled.js","sources":["../../../../../../src/components/KeyValueListItem/common/ItemActions/ItemAction.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { type AdditionalColorProps } from '~/src/types/ComponentProps'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nexport const ItemActionWrapper = styled.div`\n  display: flex;\n  align-items: center;\n`\ninterface ActionWrapperProps extends AdditionalColorProps<['hoverBackground', 'hoverIcon']> {\n  show: boolean\n}\n\nexport const ActionIcon = styled(Icon)``\nexport const ActionLegacyIcon = styled(LegacyIcon)``\n\nexport const ActionIconWrapper = styled.div<ActionWrapperProps>`\n  display: ${({ show }) => (show ? 'flex' : 'none')};\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  margin-left: auto;\n  cursor: pointer;\n\n  ${({ foundation }) => foundation?.rounding?.round6}\n\n  &:hover {\n    ${({ foundation, hoverBackgroundColor }) => !isNil(hoverBackgroundColor) && css`\n      background-color: ${foundation?.theme?.[hoverBackgroundColor]};\n    `}\n\n    ${ActionIcon} {\n      ${({ foundation, hoverIconColor }) => !isNil(hoverIconColor) && css`\n        color: ${foundation?.theme?.[hoverIconColor]};\n      `}\n    }\n    \n    ${ActionLegacyIcon} {\n      ${({ foundation, hoverIconColor }) => !isNil(hoverIconColor) && css`\n        color: ${foundation?.theme?.[hoverIconColor]};\n      `}\n    }\n  }\n`\n\nexport const ActionIconTooltip = styled(Tooltip)`\n  margin-left: auto;\n`\n"],"names":["ItemActionWrapper","styled","div","withConfig","displayName","componentId","ActionIcon","Icon","ActionLegacyIcon","LegacyIcon","ActionIconWrapper","show","foundation","rounding","round6","hoverBackgroundColor","isNil","css","theme","hoverIconColor","ActionIconTooltip","Tooltip"],"mappings":";;;;;;;;MAYaA,iBAAiB,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAG1C,CAAA,CAAA,CAAA,kCAAA,CAAA,EAAA;AAKM,MAAMC,UAAU,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AACjC,MAAMG,gBAAgB,gBAAGP,gCAAM,CAACQ,kBAAU,CAAC,CAAAN,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;MAEvCK,iBAAiB,gBAAGT,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,yFAAA,EAAA,WAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,IAAA,CAAA,EAC9B,CAAC;AAAEM,EAAAA,IAAAA;AAAK,CAAC,KAAMA,IAAI,GAAG,MAAM,GAAG,MAAO,EAO/C,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,EAAEC,MAAM,EAG9C,CAAC;EAAEF,UAAU;AAAEG,EAAAA,oBAAAA;AAAqB,CAAC,KAAK,CAACC,eAAK,CAACD,oBAAoB,CAAC,IAAIE,6BAAI,CAAA;AACpF,wBAAA,EAA0BL,UAAU,EAAEM,KAAK,GAAGH,oBAAoB,CAAE,CAAA;AACpE,IAAK,CAAA,EAECT,UAAU,EACR,CAAC;EAAEM,UAAU;AAAEO,EAAAA,cAAAA;AAAe,CAAC,KAAK,CAACH,eAAK,CAACG,cAAc,CAAC,IAAIF,6BAAI,CAAA;AAC1E,eAAA,EAAiBL,UAAU,EAAEM,KAAK,GAAGC,cAAc,CAAE,CAAA;AACrD,MAAO,CAAA,EAGDX,gBAAgB,EACd,CAAC;EAAEI,UAAU;AAAEO,EAAAA,cAAAA;AAAe,CAAC,KAAK,CAACH,eAAK,CAACG,cAAc,CAAC,IAAIF,6BAAI,CAAA;AAC1E,eAAA,EAAiBL,UAAU,EAAEM,KAAK,GAAGC,cAAc,CAAE,CAAA;AACrD,MAAA,CAAO,EAGN;AAEM,MAAMC,iBAAiB,gBAAGnB,gCAAM,CAACoB,eAAO,CAAC,CAAAlB,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE/C,CAAA,CAAA,CAAA,mBAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"ItemAction.styled.js","sources":["../../../../../../src/components/KeyValueListItem/common/ItemActions/ItemAction.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { type AdditionalColorProps } from '~/src/types/ComponentProps'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { Icon } from '~/src/components/Icon'\n\nexport const ItemActionWrapper = styled.div`\n  display: flex;\n  align-items: center;\n`\ninterface ActionWrapperProps extends AdditionalColorProps<['hoverBackground', 'hoverIcon']> {\n  show: boolean\n}\n\nexport const ActionIcon = styled(Icon)``\n\nexport const ActionIconWrapper = styled.button<ActionWrapperProps>`\n  all: unset;\n\n  display: ${({ show }) => (show ? 'flex' : 'none')};\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  margin-left: auto;\n  cursor: pointer;\n\n  ${({ foundation }) => foundation?.rounding?.round6}\n\n  &:hover,\n  &:focus-visible {\n    ${({ foundation, hoverBackgroundColor }) => !isNil(hoverBackgroundColor) && css`\n      background-color: ${foundation?.theme?.[hoverBackgroundColor]};\n    `}\n\n    ${ActionIcon} {\n      ${({ foundation, hoverIconColor }) => !isNil(hoverIconColor) && css`\n        color: ${foundation?.theme?.[hoverIconColor]};\n      `}\n    }\n  }\n`\n"],"names":["ItemActionWrapper","styled","div","withConfig","displayName","componentId","ActionIcon","Icon","ActionIconWrapper","button","show","foundation","rounding","round6","hoverBackgroundColor","isNil","css","theme","hoverIconColor"],"mappings":";;;;;;MAUaA,iBAAiB,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAG1C,CAAA,CAAA,CAAA,kCAAA,CAAA,EAAA;AAKM,MAAMC,UAAU,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;MAE3BG,iBAAiB,gBAAGP,gCAAM,CAACQ,MAAM,CAAAN,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,yFAAA,EAAA,2BAAA,EAAA,GAAA,EAAA,GAAA,EAAA,IAAA,CAAA,EAGjC,CAAC;AAAEK,EAAAA,IAAAA;AAAK,CAAC,KAAMA,IAAI,GAAG,MAAM,GAAG,MAAO,EAO/C,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,EAAEC,MAAM,EAI9C,CAAC;EAAEF,UAAU;AAAEG,EAAAA,oBAAAA;AAAqB,CAAC,KAAK,CAACC,eAAK,CAACD,oBAAoB,CAAC,IAAIE,6BAAI,CAAA;AACpF,wBAAA,EAA0BL,UAAU,EAAEM,KAAK,GAAGH,oBAAoB,CAAE,CAAA;AACpE,IAAK,CAAA,EAECR,UAAU,EACR,CAAC;EAAEK,UAAU;AAAEO,EAAAA,cAAAA;AAAe,CAAC,KAAK,CAACH,eAAK,CAACG,cAAc,CAAC,IAAIF,6BAAI,CAAA;AAC1E,eAAA,EAAiBL,UAAU,EAAEM,KAAK,GAAGC,cAAc,CAAE,CAAA;AACrD,MAAA,CAAO;;;;;;"}