@channel.io/bezier-react 1.6.1 → 1.7.0

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

@@ -1,41 +1,112 @@
 'use strict';
 
 var ZIndex = require('../../constants/ZIndex.js');
-var Typography = require('../../foundation/Typography.js');
+var Text = require('../Text/Text.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+var AlphaStack = require('../AlphaStack/AlphaStack.js');
+var Typography = require('../../foundation/Typography.js');
+var Icon$1 = require('../Icon/Icon.js');
+var Icon_types = require('../Icon/Icon.types.js');
+var index = require('../../foundation/Transition/index.js');
+var styled = require('styled-components');
 var Mixins = require('../../foundation/Mixins.js');
 
-const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__Container",
+const fadeIn = styled.keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+const SLIDE_OFFSET = 2;
+const slideUp = styled.keyframes`
+  from {
+    transform: translateY(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`;
+const slideRight = styled.keyframes`
+  from {
+    transform: translateX(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+const slideDown = styled.keyframes`
+  from {
+    transform: translateY(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`;
+const slideLeft = styled.keyframes`
+  from {
+    transform: translateX(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+const getSlideAnimation = frames => FoundationStyledComponent.css`
+  animation-name: ${() => frames}, ${() => fadeIn};
+  animation-duration: ${index.TransitionDuration.M}ms;
+  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
+`;
+const TooltipContent = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
+  direction: 'horizontal',
+  spacing: 4
+}).withConfig({
+  displayName: "Tooltipstyled__TooltipContent",
   componentId: "sc-51cb65-0"
-})(["position:relative;"]);
-const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__ContentWrapper",
+})(["z-index:", ";box-sizing:border-box;width:max-content;max-width:260px;height:max-content;padding:5px 8px;word-break:normal;word-wrap:break-word;", ";", ";&[data-side=\"top\"]{", "}&[data-side=\"right\"]{", "}&[data-side=\"bottom\"]{", "}&[data-side=\"left\"]{", "}", ""], ZIndex.ZIndex.Tooltip, ({
+  foundation
+}) => foundation?.elevation?.ev3(true), ({
+  foundation
+}) => foundation?.rounding?.round8, getSlideAnimation(slideUp), getSlideAnimation(slideRight), getSlideAnimation(slideDown), getSlideAnimation(slideLeft), ({
+  interpolation
+}) => interpolation);
+const TextContainer = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Tooltipstyled__TextContainer",
   componentId: "sc-51cb65-1"
-})(["position:absolute;top:0;left:0;z-index:", ";", ""], ZIndex.ZIndex.Tooltip, ({
-  disabled
-}) => disabled && FoundationStyledComponent.css`
-    display: none;
-  `);
-const Content = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+})(["overflow:hidden;"]);
+const Content = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  typo: Typography.Typography.Size13
+}).withConfig({
   displayName: "Tooltipstyled__Content",
   componentId: "sc-51cb65-2"
-})(["box-sizing:border-box;width:max-content;max-width:260px;height:max-content;padding:8px 14px;color:", ";word-break:normal;word-wrap:break-word;", ";", ";", ""], ({
+})(["color:", ";", " white-space:pre-wrap;"], ({
   foundation
-}) => foundation?.subTheme?.['txt-black-darkest'], ({
+}) => foundation?.subTheme?.['txt-black-darkest'], Mixins.ellipsis(20, Typography.LineHeightAbsoluteNumber.Lh18));
+const Description = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  typo: Typography.Typography.Size12
+}).withConfig({
+  displayName: "Tooltipstyled__Description",
+  componentId: "sc-51cb65-3"
+})(["color:", ";"], ({
   foundation
-}) => foundation?.elevation?.ev2(true), ({
+}) => foundation?.subTheme?.['txt-black-dark']);
+const Icon = /*#__PURE__*/FoundationStyledComponent.styled(Icon$1.Icon).attrs({
+  size: Icon_types.IconSize.XS
+}).withConfig({
+  displayName: "Tooltipstyled__Icon",
+  componentId: "sc-51cb65-4"
+})(["padding:1px;color:", ";"], ({
   foundation
-}) => foundation?.rounding?.round8, ({
-  interpolation
-}) => interpolation);
-const EllipsisableContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__EllipsisableContent",
-  componentId: "sc-51cb65-3"
-})(["", ""], Mixins.ellipsis(20, Typography.LineHeightAbsoluteNumber.Lh18));
+}) => foundation?.subTheme?.['txt-black-darkest']);
 
-exports.Container = Container;
 exports.Content = Content;
-exports.ContentWrapper = ContentWrapper;
-exports.EllipsisableContent = EllipsisableContent;
+exports.Description = Description;
+exports.Icon = Icon;
+exports.TextContainer = TextContainer;
+exports.TooltipContent = TooltipContent;
 //# sourceMappingURL=Tooltip.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styled.js","sources":["../../../../src/components/Tooltip/Tooltip.styled.ts"],"sourcesContent":["import {\n  LineHeightAbsoluteNumber,\n  css,\n  ellipsis,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\ninterface ContentWrapperProps {\n  disabled: boolean\n}\n\nexport const Container = styled.div`\n  position: relative;\n`\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: ${ZIndex.Tooltip};\n\n  ${({ disabled }) => disabled && css`\n    display: none;\n  `}\n`\n\nexport const Content = styled.div<InterpolationProps>`\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 260px;\n  height: max-content;\n  padding: 8px 14px;\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n  word-break: normal;\n  word-wrap: break-word;\n  ${({ foundation }) => foundation?.elevation?.ev2(true)};\n  ${({ foundation }) => foundation?.rounding?.round8};\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const EllipsisableContent = styled.div`\n  ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","ContentWrapper","ZIndex","Tooltip","disabled","css","Content","foundation","subTheme","elevation","ev2","rounding","round8","interpolation","EllipsisableContent","ellipsis","LineHeightAbsoluteNumber","Lh18"],"mappings":";;;;;;;MAcaA,SAAS,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAElC,CAAA,CAAA,CAAA,oBAAA,CAAA,EAAA;MACYC,cAAc,gBAAGL,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAI3BE,aAAM,CAACC,OAAO,EAEvB,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,6BAAI,CAAA;AACtC;AACA,EAAA,CAAG,EACF;MAEYC,OAAO,gBAAGV,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oGAAA,EAAA,0CAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAMtB,CAAC;AAAEO,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,GAAG,mBAAmB,CAAC,EAGtE,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEE,SAAS,EAAEC,GAAG,CAAC,IAAI,CAAC,EACpD,CAAC;AAAEH,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEI,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,mBAAmB,gBAAGlB,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACzCe,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EAAAA,eAAQ,CAAC,EAAE,EAAEC,mCAAwB,CAACC,IAAI,CAAC;;;;;;;"}
+{"version":3,"file":"Tooltip.styled.js","sources":["../../../../src/components/Tooltip/Tooltip.styled.ts"],"sourcesContent":["import {\n  LineHeightAbsoluteNumber,\n  TransitionDuration,\n  Typography,\n  css,\n  ellipsis,\n  keyframes,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport {\n  Icon as BaseIcon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type TooltipProps } from './Tooltip.types'\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`\n\nconst SLIDE_OFFSET = 2\n\nconst slideUp = keyframes`\n  from {\n    transform: translateY(${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`\n\nconst slideRight = keyframes`\n  from {\n    transform: translateX(-${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideDown = keyframes`\n  from {\n    transform: translateY(-${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`\n\nconst slideLeft = keyframes`\n  from {\n    transform: translateX(${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst getSlideAnimation = (frames: ReturnType<typeof keyframes>) => css`\n  animation-name: ${() => frames}, ${() => fadeIn};\n  animation-duration: ${TransitionDuration.M}ms;\n  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);\n`\n\nexport const TooltipContent = styled(AlphaStack).attrs({\n  direction: 'horizontal',\n  spacing: 4,\n})<TooltipProps>`\n  z-index: ${ZIndex.Tooltip};\n\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 260px;\n  height: max-content;\n  padding: 5px 8px;\n  word-break: normal;\n  word-wrap: break-word;\n\n  ${({ foundation }) => foundation?.elevation?.ev3(true)};\n  ${({ foundation }) => foundation?.rounding?.round8};\n\n  &[data-side=\"top\"] {\n    ${getSlideAnimation(slideUp)}\n  }\n\n  &[data-side=\"right\"] {\n    ${getSlideAnimation(slideRight)}\n  }\n\n  &[data-side=\"bottom\"] {\n    ${getSlideAnimation(slideDown)}\n  }\n\n  &[data-side=\"left\"] {\n    ${getSlideAnimation(slideLeft)}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const TextContainer = styled.div`\n  overflow: hidden;\n`\n\nexport const Content = styled(Text).attrs({ typo: Typography.Size13 })`\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n  /* NOTE: Line height of Typography.Size13  */\n  ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}\n  white-space: pre-wrap;\n`\n\nexport const Description = styled(Text).attrs({ typo: Typography.Size12 })`\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-dark']};\n`\n\nexport const Icon = styled(BaseIcon).attrs({\n  size: IconSize.XS,\n})`\n  padding: 1px;\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n`\n"],"names":["fadeIn","keyframes","SLIDE_OFFSET","slideUp","slideRight","slideDown","slideLeft","getSlideAnimation","frames","css","TransitionDuration","M","TooltipContent","styled","AlphaStack","attrs","direction","spacing","withConfig","displayName","componentId","ZIndex","Tooltip","foundation","elevation","ev3","rounding","round8","interpolation","TextContainer","div","Content","Text","typo","Typography","Size13","subTheme","ellipsis","LineHeightAbsoluteNumber","Lh18","Description","Size12","Icon","BaseIcon","size","IconSize","XS"],"mappings":"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"}

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

@@ -1,5 +1,8 @@
 'use strict';
 
+/**
+ * An enumeration that determines the position of `Tooltip`.
+ */
 let TooltipPosition = /*#__PURE__*/function (TooltipPosition) {
   TooltipPosition["TopCenter"] = "topCenter";
   TooltipPosition["TopLeft"] = "topLeft";

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type Ref } from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n  type RenderConfigProps,\n} from '~/src/types/ComponentProps'\n\ninterface TooltipOptions {\n  placement?: TooltipPosition\n  offset?: number\n  keepInContainer?: boolean\n  allowHover?: boolean\n  delayShow?: number\n  delayHide?: number\n  contentTestId?: string\n  lazy?: boolean\n}\n\nexport default interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  ContentProps,\n  DisableProps,\n  AdditionalStylableProps<'content' | 'contentWrapper'>,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps>,\n  TooltipOptions {\n}\n\nexport interface TooltipContentProps extends Pick<\nTooltipOptions,\n'keepInContainer' |\n'placement' |\n'offset' |\n'allowHover'\n>,\n  RenderConfigProps,\n  ContentProps,\n  AdditionalStylableProps<'content' | 'contentWrapper'>,\n  DisableProps {\n  tooltipContainer: HTMLDivElement | null\n  forwardedRef: Ref<HTMLDivElement>\n}\n\nexport interface GetTooltipStyle extends Required<Pick<TooltipOptions, 'placement' | 'offset' | 'allowHover'>> {\n  tooltipContainer: HTMLDivElement\n}\n\nexport interface GetReplacement extends Required<Pick<TooltipOptions, 'placement' | 'keepInContainer'>> {\n  tooltip: HTMLDivElement\n}\n\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n"],"names":["TooltipPosition"],"mappings":";;AAuDYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n} from '~/src/types/ComponentProps'\n\n/**\n * An enumeration that determines the position of `Tooltip`.\n */\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n\ninterface TooltipProviderOptions {\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * @default 0\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @default 0\n   */\n  skipDelayShow?: number\n}\n\ninterface TooltipOptions {\n  /**\n   * The open state of the tooltip when it is initially rendered.\n   */\n  defaultShow?: boolean\n  /**\n   * An element that sits below the tooltip content.\n   */\n  description?: React.ReactNode\n  /**\n   * A decorative icon that sits right of the tooltip content.\n   */\n  icon?: BezierIcon\n  /**\n   * Options to determine the location from the trigger.\n   * @default TooltipPosition.BottomCenter\n   */\n  placement?: TooltipPosition\n  /**\n   * The distance in pixels from the trigger.\n   * @default 4\n   */\n  offset?: number\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  /**\n   * When `true`, overrides the `position` of the tooltip\n   * to prevent collisions with boundary edges.\n   * @default true\n   */\n  keepInContainer?: boolean\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * Callback function to be called when the tooltip is opened.\n   */\n  onShow?: () => void\n  /**\n   * Callback function to be called when the tooltip is closed.\n   */\n  onHide?: () => void\n  /**\n   * Event handler called when the escape key is down.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the component.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void\n}\n\nexport interface TooltipProviderProps extends\n  ChildrenProps,\n  TooltipProviderOptions {}\n\nexport interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps<React.ReactElement>,\n  ContentProps,\n  DisableProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps | keyof ChildrenProps>,\n  TooltipOptions {}\n"],"names":["TooltipPosition"],"mappings":";;AASA;AACA;AACA;AACYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/foundation/FoundationStyledComponent.js

@@ -13,6 +13,21 @@ var domElements = require('./utils/domElements.js');
  * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.
  */
 
+
+/**
+ * When interpreting the `.mjs` extension in the Next.js environment,
+ * default imported `styled` function are not interpreted correctly.
+ *
+ * We add `.default` to cover situation where the module is interpreted in CJS.
+ *
+ * This is code that can be removed when the major version of `styled-components` is updated (v6)
+ * and `styled` functions are changed to named import.
+ *
+ * @see https://github.com/rollup/rollup/issues/4438
+ * @see https://github.com/styled-components/styled-components/issues/115
+ */
+// @ts-expect-error
+const safetyStyledInNextJs = styled.default ?? styled;
 const FoundationContext = /*#__PURE__*/React.createContext(null);
 function FoundationProvider({
   foundation,
@@ -53,7 +68,7 @@ function templateFunctionGenerator(BaseComponentGenerator) {
 
 /* eslint-disable-next-line func-names */ /* @ts-ignore */
 const FoundationStyled = tag => {
-  const tagTemplate = /*#__PURE__*/styled(tag);
+  const tagTemplate = safetyStyledInNextJs(tag);
   return templateFunctionGenerator(tagTemplate);
 };
 domElements.default.forEach(element => {

package/dist/cjs/foundation/FoundationStyledComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FoundationStyledComponent.js","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n  createContext,\n  forwardRef,\n  useContext,\n} from 'react'\n\nimport styled, {\n  type AnyStyledComponent,\n  type CSSObject,\n  type FlattenInterpolation,\n  type FlattenSimpleInterpolation,\n  type GlobalStyleComponent,\n  type Interpolation,\n  type InterpolationFunction,\n  ServerStyleSheet,\n  type SimpleInterpolation,\n  type StyledComponentInnerAttrs,\n  type StyledComponentInnerComponent,\n  type StyledComponentInnerOtherProps,\n  type ThemedStyledFunction,\n  type ThemedStyledProps,\n  css as baseCSS,\n  createGlobalStyle as baseCreateGlobalStyle,\n  keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n  foundation: Foundation\n  children: React.ReactNode\n}\n\nfunction FoundationProvider({\n  foundation,\n  children,\n}: FoundationProviderProps) {\n  return (\n    <FoundationContext.Provider value={foundation}>\n      { children }\n    </FoundationContext.Provider>\n  )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n  <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n  StyledComponentInnerComponent<C>,\n  Foundation,\n  StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n  StyledComponentInnerAttrs<C>\n  >\n  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n    // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n    // causes tests to fail in TS 3.1\n    component: C\n  ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n  const customTemplateFn = (...args: TemplateStringsArray) => {\n    // @ts-ignore\n    const BaseComponent = BaseComponentGenerator(...args)\n    const BaseRefComponent = forwardRef((props, ref) => {\n      const currentFoundation = useContext(FoundationContext)\n      return (\n        <BaseComponent\n          ref={ref}\n          key={args.toString()}\n          foundation={currentFoundation}\n          {...props}\n        />\n      )\n    })\n    BaseRefComponent.toString = BaseComponent.toString\n    return BaseRefComponent\n  }\n  customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n  customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n  return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n  const tagTemplate = styled(tag)\n  return templateFunctionGenerator(tagTemplate)\n};\n\n(domElements as Array<AnyStyledComponent>).forEach(element => {\n  FoundationStyled[element] = FoundationStyled(element)\n})\n\ninterface FoundationCSSInterface {\n  (\n    first: TemplateStringsArray | CSSObject,\n    ...interpolations: SimpleInterpolation[]\n  ): FlattenSimpleInterpolation\n  (\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>>\n  ): FlattenInterpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>\n  <P extends object>(\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>>\n  ): FlattenInterpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>\n}\n\n/* eslint-disable-next-line func-names */\nconst FoundationCSS: FoundationCSSInterface = baseCSS\n\nfunction useFoundation() {\n  return useContext(FoundationContext)\n}\n\ntype GlobalStyleProp = {\n  global?: CSSObject\n}\n\ntype FoundationWithGlobalStyle = Foundation & GlobalStyleProp\ninterface CreateFoundationGlobalStyle {\n  <P extends object>(\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>>\n  ): GlobalStyleComponent<\n  // @ts-ignore\n  P & { foundation: FoundationWithGlobalStyle },\n  ThemedStyledProps<P & { foundation: FoundationWithGlobalStyle }, Foundation>\n  >\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst createFoundationGlobalStyle: CreateFoundationGlobalStyle = baseCreateGlobalStyle\n\nexport type {\n  GlobalStyleProp,\n}\n\nexport {\n  createFoundationGlobalStyle as createGlobalStyle,\n  FoundationStyled as styled,\n  FoundationCSS as css,\n  FoundationProvider,\n  useFoundation,\n  keyframes,\n  ServerStyleSheet,\n}\n"],"names":["FoundationContext","createContext","FoundationProvider","foundation","children","React","createElement","Provider","value","templateFunctionGenerator","BaseComponentGenerator","customTemplateFn","args","BaseComponent","BaseRefComponent","forwardRef","props","ref","currentFoundation","useContext","Object","assign","key","toString","attrs","withConfig","config","FoundationStyled","tag","tagTemplate","styled","domElements","forEach","element","FoundationCSS","baseCSS","useFoundation","createFoundationGlobalStyle","baseCreateGlobalStyle"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA+BA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoB,IAAI,CAAC,CAAA;AAOhE,SAASC,kBAAkBA,CAAC;EAC1BC,UAAU;AACVC,EAAAA,QAAAA;AACuB,CAAC,EAAE;AAC1B,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACN,iBAAiB,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,UAAAA;AAAW,GAAA,EAC1CC,QACwB,CAAC,CAAA;AAEjC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA,SAASK,yBAAyBA,CAACC,sBAAwF,EAAE;AAC3H,EAAA,MAAMC,gBAAgB,GAAGA,CAAC,GAAGC,IAA0B,KAAK;AAC1D;AACA,IAAA,MAAMC,aAAa,GAAGH,sBAAsB,CAAC,GAAGE,IAAI,CAAC,CAAA;IACrD,MAAME,gBAAgB,gBAAGC,gBAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClD,MAAA,MAAMC,iBAAiB,GAAGC,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;MACvD,oBACEK,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAAO,MAAA,CAAAC,MAAA,CAAA;AACZJ,QAAAA,GAAG,EAAEA,GAAI;AACTK,QAAAA,GAAG,EAAEV,IAAI,CAACW,QAAQ,EAAG;AACrBpB,QAAAA,UAAU,EAAEe,iBAAAA;OACRF,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,KAAC,CAAC,CAAA;AACFF,IAAAA,gBAAgB,CAACS,QAAQ,GAAGV,aAAa,CAACU,QAAQ,CAAA;AAClD,IAAA,OAAOT,gBAAgB,CAAA;GACxB,CAAA;AACDH,EAAAA,gBAAgB,CAACa,KAAK,GAAIA,KAAK,IAAKf,yBAAyB,CAACC,sBAAsB,CAACc,KAAK,CAACA,KAAK,CAAC,CAAC,CAAA;AAClGb,EAAAA,gBAAgB,CAACc,UAAU,GAAIC,MAAM,IAAKjB,yBAAyB,CAACC,sBAAsB,CAACe,UAAU,CAACC,MAAM,CAAC,CAAC,CAAA;AAC9G,EAAA,OAAOf,gBAAgB,CAAA;AACzB,CAAA;;AAEA;AACMgB,MAAAA,gBAA2C,GAAIC,GAAG,IAAK;AAC3D,EAAA,MAAMC,WAAW,gBAAGC,MAAM,CAACF,GAAG,CAAC,CAAA;EAC/B,OAAOnB,yBAAyB,CAACoB,WAAW,CAAC,CAAA;AAC/C,EAAC;AAEAE,mBAAW,CAA+BC,OAAO,CAACC,OAAO,IAAI;AAC5DN,EAAAA,gBAAgB,CAACM,OAAO,CAAC,GAAGN,gBAAgB,CAACM,OAAO,CAAC,CAAA;AACvD,CAAC,CAAC,CAAA;AAuBF;AACMC,MAAAA,aAAqC,GAAGC,WAAO;AAErD,SAASC,aAAaA,GAAG;EACvB,OAAOjB,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;AACtC,CAAA;AAqBA;AAA0C;AACpCqC,MAAAA,2BAAwD,GAAGC;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FoundationStyledComponent.js","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n  createContext,\n  forwardRef,\n  useContext,\n} from 'react'\n\nimport styled, {\n  type AnyStyledComponent,\n  type CSSObject,\n  type FlattenInterpolation,\n  type FlattenSimpleInterpolation,\n  type GlobalStyleComponent,\n  type Interpolation,\n  type InterpolationFunction,\n  ServerStyleSheet,\n  type SimpleInterpolation,\n  type StyledComponentInnerAttrs,\n  type StyledComponentInnerComponent,\n  type StyledComponentInnerOtherProps,\n  type StyledInterface,\n  type ThemedStyledFunction,\n  type ThemedStyledProps,\n  css as baseCSS,\n  createGlobalStyle as baseCreateGlobalStyle,\n  keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\n/**\n * When interpreting the `.mjs` extension in the Next.js environment,\n * default imported `styled` function are not interpreted correctly.\n *\n * We add `.default` to cover situation where the module is interpreted in CJS.\n *\n * This is code that can be removed when the major version of `styled-components` is updated (v6)\n * and `styled` functions are changed to named import.\n *\n * @see https://github.com/rollup/rollup/issues/4438\n * @see https://github.com/styled-components/styled-components/issues/115\n */\n// @ts-expect-error\nconst safetyStyledInNextJs = (styled.default ?? styled) as StyledInterface\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n  foundation: Foundation\n  children: React.ReactNode\n}\n\nfunction FoundationProvider({\n  foundation,\n  children,\n}: FoundationProviderProps) {\n  return (\n    <FoundationContext.Provider value={foundation}>\n      { children }\n    </FoundationContext.Provider>\n  )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n  <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n  StyledComponentInnerComponent<C>,\n  Foundation,\n  StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n  StyledComponentInnerAttrs<C>\n  >\n  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n    // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n    // causes tests to fail in TS 3.1\n    component: C\n  ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n  const customTemplateFn = (...args: TemplateStringsArray) => {\n    // @ts-ignore\n    const BaseComponent = BaseComponentGenerator(...args)\n    const BaseRefComponent = forwardRef((props, ref) => {\n      const currentFoundation = useContext(FoundationContext)\n      return (\n        <BaseComponent\n          ref={ref}\n          key={args.toString()}\n          foundation={currentFoundation}\n          {...props}\n        />\n      )\n    })\n    BaseRefComponent.toString = BaseComponent.toString\n    return BaseRefComponent\n  }\n  customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n  customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n  return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n  const tagTemplate = safetyStyledInNextJs(tag)\n  return templateFunctionGenerator(tagTemplate)\n};\n\n(domElements as Array<AnyStyledComponent>).forEach(element => {\n  FoundationStyled[element] = FoundationStyled(element)\n})\n\ninterface FoundationCSSInterface {\n  (\n    first: TemplateStringsArray | CSSObject,\n    ...interpolations: SimpleInterpolation[]\n  ): FlattenSimpleInterpolation\n  (\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>>\n  ): FlattenInterpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>\n  <P extends object>(\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>>\n  ): FlattenInterpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>\n}\n\n/* eslint-disable-next-line func-names */\nconst FoundationCSS: FoundationCSSInterface = baseCSS\n\nfunction useFoundation() {\n  return useContext(FoundationContext)\n}\n\ntype GlobalStyleProp = {\n  global?: CSSObject\n}\n\ntype FoundationWithGlobalStyle = Foundation & GlobalStyleProp\ninterface CreateFoundationGlobalStyle {\n  <P extends object>(\n    first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>,\n    ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>>\n  ): GlobalStyleComponent<\n  // @ts-ignore\n  P & { foundation: FoundationWithGlobalStyle },\n  ThemedStyledProps<P & { foundation: FoundationWithGlobalStyle }, Foundation>\n  >\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst createFoundationGlobalStyle: CreateFoundationGlobalStyle = baseCreateGlobalStyle\n\nexport type {\n  GlobalStyleProp,\n}\n\nexport {\n  createFoundationGlobalStyle as createGlobalStyle,\n  FoundationStyled as styled,\n  FoundationCSS as css,\n  FoundationProvider,\n  useFoundation,\n  keyframes,\n  ServerStyleSheet,\n}\n"],"names":["safetyStyledInNextJs","styled","default","FoundationContext","createContext","FoundationProvider","foundation","children","React","createElement","Provider","value","templateFunctionGenerator","BaseComponentGenerator","customTemplateFn","args","BaseComponent","BaseRefComponent","forwardRef","props","ref","currentFoundation","useContext","Object","assign","key","toString","attrs","withConfig","config","FoundationStyled","tag","tagTemplate","domElements","forEach","element","FoundationCSS","baseCSS","useFoundation","createFoundationGlobalStyle","baseCreateGlobalStyle"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,oBAAoB,GAAIC,MAAM,CAACC,OAAO,IAAID,MAA0B,CAAA;AAE1E,MAAME,iBAAiB,gBAAGC,mBAAa,CAAoB,IAAI,CAAC,CAAA;AAOhE,SAASC,kBAAkBA,CAAC;EAC1BC,UAAU;AACVC,EAAAA,QAAAA;AACuB,CAAC,EAAE;AAC1B,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACN,iBAAiB,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,UAAAA;AAAW,GAAA,EAC1CC,QACwB,CAAC,CAAA;AAEjC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA,SAASK,yBAAyBA,CAACC,sBAAwF,EAAE;AAC3H,EAAA,MAAMC,gBAAgB,GAAGA,CAAC,GAAGC,IAA0B,KAAK;AAC1D;AACA,IAAA,MAAMC,aAAa,GAAGH,sBAAsB,CAAC,GAAGE,IAAI,CAAC,CAAA;IACrD,MAAME,gBAAgB,gBAAGC,gBAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClD,MAAA,MAAMC,iBAAiB,GAAGC,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;MACvD,oBACEK,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAAO,MAAA,CAAAC,MAAA,CAAA;AACZJ,QAAAA,GAAG,EAAEA,GAAI;AACTK,QAAAA,GAAG,EAAEV,IAAI,CAACW,QAAQ,EAAG;AACrBpB,QAAAA,UAAU,EAAEe,iBAAAA;OACRF,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,KAAC,CAAC,CAAA;AACFF,IAAAA,gBAAgB,CAACS,QAAQ,GAAGV,aAAa,CAACU,QAAQ,CAAA;AAClD,IAAA,OAAOT,gBAAgB,CAAA;GACxB,CAAA;AACDH,EAAAA,gBAAgB,CAACa,KAAK,GAAIA,KAAK,IAAKf,yBAAyB,CAACC,sBAAsB,CAACc,KAAK,CAACA,KAAK,CAAC,CAAC,CAAA;AAClGb,EAAAA,gBAAgB,CAACc,UAAU,GAAIC,MAAM,IAAKjB,yBAAyB,CAACC,sBAAsB,CAACe,UAAU,CAACC,MAAM,CAAC,CAAC,CAAA;AAC9G,EAAA,OAAOf,gBAAgB,CAAA;AACzB,CAAA;;AAEA;AACMgB,MAAAA,gBAA2C,GAAIC,GAAG,IAAK;AAC3D,EAAA,MAAMC,WAAW,GAAGhC,oBAAoB,CAAC+B,GAAG,CAAC,CAAA;EAC7C,OAAOnB,yBAAyB,CAACoB,WAAW,CAAC,CAAA;AAC/C,EAAC;AAEAC,mBAAW,CAA+BC,OAAO,CAACC,OAAO,IAAI;AAC5DL,EAAAA,gBAAgB,CAACK,OAAO,CAAC,GAAGL,gBAAgB,CAACK,OAAO,CAAC,CAAA;AACvD,CAAC,CAAC,CAAA;AAuBF;AACMC,MAAAA,aAAqC,GAAGC,WAAO;AAErD,SAASC,aAAaA,GAAG;EACvB,OAAOhB,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;AACtC,CAAA;AAqBA;AAA0C;AACpCoC,MAAAA,2BAAwD,GAAGC;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.js

@@ -13,10 +13,6 @@ var stringUtils = require('./utils/stringUtils.js');
 var useFormControlContext = require('./components/Forms/useFormControlContext.js');
 var useFormFieldProps = require('./components/Forms/useFormFieldProps.js');
 var useKeyboardActionLockerWhileComposing = require('./components/Forms/useKeyboardActionLockerWhileComposing.js');
-var Help = require('./components/Help/Help.js');
-var ListMenuTitle = require('./components/ListMenuTitle/ListMenuTitle.js');
-var SectionLabel = require('./components/SectionLabel/SectionLabel.js');
-var Spinner = require('./components/Spinner/Spinner.js');
 var ToastProvider = require('./components/Toast/ToastProvider.js');
 var BaseFoundation = require('./foundation/BaseFoundation.js');
 var index = require('./foundation/Spacing/index.js');
@@ -67,12 +63,14 @@ var SegmentedControl_types = require('./components/Forms/SegmentedControl/Segmen
 var Slider = require('./components/Forms/Slider/Slider.js');
 var Switch = require('./components/Forms/Switch/Switch.js');
 var Switch_types = require('./components/Forms/Switch/Switch.types.js');
+var Help = require('./components/Help/Help.js');
 var Icon = require('./components/Icon/Icon.js');
 var Icon_types = require('./components/Icon/Icon.types.js');
 var KeyValueListItem = require('./components/KeyValueListItem/KeyValueListItem.js');
 var KeyValueMultiLineListItem = require('./components/KeyValueListItem/KeyValueMultiLineListItem.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var ListItem_types = require('./components/ListItem/ListItem.types.js');
+var ListMenuTitle = require('./components/ListMenuTitle/ListMenuTitle.js');
 var Modal = require('./components/Modals/Modal/Modal.js');
 var ModalContent = require('./components/Modals/Modal/ModalContent.js');
 var ModalHeader = require('./components/Modals/Modal/ModalHeader.js');
@@ -94,6 +92,8 @@ var Overlay = require('./components/Overlay/Overlay.js');
 var Overlay_types = require('./components/Overlay/Overlay.types.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var ProgressBar_types = require('./components/ProgressBar/ProgressBar.types.js');
+var SectionLabel = require('./components/SectionLabel/SectionLabel.js');
+var Spinner = require('./components/Spinner/Spinner.js');
 var Spinner_types = require('./components/Spinner/Spinner.types.js');
 var HStack = require('./components/Stack/HStack/HStack.js');
 var Spacer = require('./components/Stack/Spacer/Spacer.js');
@@ -125,6 +125,8 @@ var AlphaSmoothCornersBox = require('./components/AlphaSmoothCornersBox/AlphaSmo
 var LegacyIcon = require('./components/LegacyIcon/LegacyIcon.js');
 var utils = require('./components/LegacyIcon/utils.js');
 var LegacyRadio = require('./components/LegacyRadio/LegacyRadio.js');
+var LegacyTooltip = require('./components/LegacyTooltip/LegacyTooltip.js');
+var LegacyTooltip_types = require('./components/LegacyTooltip/LegacyTooltip.types.js');
 var LegacySegmentedControl = require('./components/LegacySegmentedControl/LegacySegmentedControl.js');
 var LegacySegmentedControl_types = require('./components/LegacySegmentedControl/LegacySegmentedControl.types.js');
 var Feature = require('./features/Feature.js');
@@ -150,11 +152,6 @@ exports.StringUtils = stringUtils;
 exports.useFormControlContext = useFormControlContext.default;
 exports.useFormFieldProps = useFormFieldProps.default;
 exports.useKeyboardActionLockerWhileComposing = useKeyboardActionLockerWhileComposing.default;
-exports.HELP_DISPLAY_NAME = Help.HELP_DISPLAY_NAME;
-exports.Help = Help.default;
-exports.ListMenuTitle = ListMenuTitle.default;
-exports.SectionLabel = SectionLabel.default;
-exports.Spinner = Spinner.default;
 exports.ToastProvider = ToastProvider.default;
 exports.DarkFoundation = BaseFoundation.DarkFoundation;
 exports.LightFoundation = BaseFoundation.LightFoundation;
@@ -235,6 +232,8 @@ exports.SegmentedControlSize = SegmentedControl_types.SegmentedControlSize;
 exports.Slider = Slider.Slider;
 exports.Switch = Switch.Switch;
 exports.SwitchSize = Switch_types.SwitchSize;
+exports.HELP_DISPLAY_NAME = Help.HELP_DISPLAY_NAME;
+exports.Help = Help.default;
 exports.Icon = Icon.Icon;
 exports.IconSize = Icon_types.IconSize;
 exports.KeyValueListItem = KeyValueListItem.default;
@@ -242,6 +241,7 @@ exports.KeyValueMultiLineListItem = KeyValueMultiLineListItem.default;
 exports.ListItem = ListItem.default;
 exports.ListItemSize = ListItem_types.ListItemSize;
 exports.ListItemVariant = ListItem_types.ListItemVariant;
+exports.ListMenuTitle = ListMenuTitle.default;
 exports.Modal = Modal.Modal;
 exports.ModalContent = ModalContent.ModalContent;
 exports.ModalHeader = ModalHeader.ModalHeader;
@@ -266,6 +266,8 @@ exports.OverlayPosition = Overlay_types.OverlayPosition;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressBarSize = ProgressBar_types.ProgressBarSize;
 exports.ProgressBarVariant = ProgressBar_types.ProgressBarVariant;
+exports.SectionLabel = SectionLabel.default;
+exports.Spinner = Spinner.default;
 exports.SpinnerSize = Spinner_types.SpinnerSize;
 exports.SpinnerThickness = Spinner_types.SpinnerThickness;
 exports.HStack = HStack.HStack;
@@ -295,7 +297,8 @@ exports.ToastAppearance = Toast_types.ToastAppearance;
 exports.ToastIconColor = Toast_types.ToastIconColor;
 exports.ToastPlacement = Toast_types.ToastPlacement;
 exports.ToastPreset = Toast_types.ToastPreset;
-exports.Tooltip = Tooltip.default;
+exports.Tooltip = Tooltip.Tooltip;
+exports.TooltipProvider = Tooltip.TooltipProvider;
 exports.TooltipPosition = Tooltip_types.TooltipPosition;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.AlphaCenter = AlphaCenter.AlphaCenter;
@@ -304,6 +307,8 @@ exports.AlphaSmoothCornersBox = AlphaSmoothCornersBox.AlphaSmoothCornersBox;
 exports.LegacyIcon = LegacyIcon.default;
 exports.isIconName = utils.isIconName;
 exports.LegacyRadio = LegacyRadio.LegacyRadio;
+exports.LegacyTooltip = LegacyTooltip.LegacyTooltip;
+exports.LegacyTooltipPosition = LegacyTooltip_types.LegacyTooltipPosition;
 exports.LegacySegmentedControl = LegacySegmentedControl.default;
 exports.LegacySegmentedControlSize = LegacySegmentedControl_types.LegacySegmentedControlSize;
 exports.FeatureType = Feature.FeatureType;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}