npm - @clickhouse/click-ui - Versions diffs - 0.6.1-rc2 → 0.6.2-rc1 - Mend

@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/dist/cjs/components/Dialog/index.cjs CHANGED Viewed

@@ -1,14 +1,18 @@
+require("./Dialog.css");
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixDialog = require('@radix-ui/react-dialog');
-const styledComponents = require('styled-components');
 const CrossButton = require('../CrossButton/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
+const Dialog_module = require('./Dialog.module.css.cjs');
 const Button = require('../Button/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -36,18 +40,13 @@ const Dialog = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Root, { ...props, children });
 };
-const Trigger = styledComponents.styled(RadixDialog__namespace.Trigger).withConfig({
-  componentId: "sc-1wr6otn-0"
-})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]);
 const DialogTrigger = ({
   children,
   asChild,
+  className,
   ...props
 }) => {
-  if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild: true, ...props, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, className: asChild ? className : cva.cn(Dialog_module.default.trigger, className), ...props, children });
 };
 DialogTrigger.displayName = "DialogTrigger";
 Dialog.Trigger = DialogTrigger;
@@ -58,67 +57,20 @@ const DialogClose = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type, label, ...props }) });
 DialogClose.displayName = "DialogClose";
 Dialog.Close = DialogClose;
-const overlayShow = styledComponents.keyframes({
-  "0%": {
-    opacity: 0
-  },
-  "100%": {
-    opacity: 1
+const contentAreaVariants = classVarianceAuthority.cva(Dialog_module.default.content, {
+  variants: {
+    reducePadding: {
+      true: Dialog_module.default["content_reduce-padding"]
+    }
   }
 });
-const contentShow = styledComponents.keyframes({
-  "0%": {
-    opacity: 0,
-    transform: "translate(-50%, -48%) scale(.96)"
-  },
-  "100%": {
-    opacity: 1,
-    transform: "translate(-50%, -50%) scale(1)"
+const titleAreaVariants = classVarianceAuthority.cva(Dialog_module.default["title-area"], {
+  variants: {
+    onlyClose: {
+      true: Dialog_module.default["title-area_only-close"]
+    }
   }
 });
-const DialogOverlay = styledComponents.styled(RadixDialog__namespace.Overlay).withConfig({
-  componentId: "sc-1wr6otn-1"
-})(["background-color:", ";position:fixed;inset:0;animation:", " 150ms cubic-bezier(0.16,1,0.3,1);"], ({
-  theme
-}) => theme.click.dialog.color.opaqueBackground.default, overlayShow);
-const ContentArea = styledComponents.styled(RadixDialog__namespace.Content).withConfig({
-  componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding-block:", ";padding-inline:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
-  theme
-}) => theme.click.dialog.color.background.default, ({
-  theme
-}) => theme.click.dialog.radii.all, ({
-  theme,
-  $reducePadding = false
-}) => $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y, ({
-  theme,
-  $reducePadding = false
-}) => $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x, ({
-  theme
-}) => theme.click.dialog.shadow.default, ({
-  theme
-}) => theme.click.global.color.stroke.default, contentShow, ({
-  theme
-}) => theme.breakpoint.sizes.sm);
-const TitleArea = styledComponents.styled.div.withConfig({
-  componentId: "sc-1wr6otn-3"
-})(["display:flex;justify-content:", ";align-items:center;min-height:", ";"], ({
-  $onlyClose
-}) => $onlyClose ? "flex-end" : "space-between", ({
-  theme
-}) => theme.sizes[9]);
-const Title = styledComponents.styled(RadixDialog__namespace.Title).withConfig({
-  componentId: "sc-1wr6otn-4"
-})(["font:", ";padding:0;margin:0;"], ({
-  theme
-}) => theme.click.dialog.typography.title.default);
-const Description = styledComponents.styled(RadixDialog__namespace.Description).withConfig({
-  componentId: "sc-1wr6otn-5"
-})(["font:", ";color:", ";padding:0;margin:0;"], ({
-  theme
-}) => theme.click.dialog.typography.description.default, ({
-  theme
-}) => theme.click.dialog.color.description.default);
 const CloseButton = ({
   onClose
 }) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: "lg" }) }) });
@@ -132,19 +84,25 @@ const DialogContent = ({
   container,
   showOverlay = true,
   reducePadding = false,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { forceMount, container, children: [
-    showOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(ContentArea, { "data-testid": "click-dialog-contentarea", $reducePadding: reducePadding, ...props, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { forceMount, container: portalContainer, children: [
+    showOverlay && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, { className: Dialog_module.default.overlay }),
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Content, { "data-testid": "click-dialog-contentarea", ...props, className: cva.cn(contentAreaVariants({
+      reducePadding
+    }), className), children: [
       (title || showClose) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(TitleArea, { $onlyClose: !!showClose && !title, children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(Title, { "data-testid": "click-dialog-title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(titleAreaVariants({
+          onlyClose: !!showClose && !title
+        })), children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { "data-testid": "click-dialog-title", className: Dialog_module.default.title, children: title }),
           showClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { "data-testid": "click-dialog-close", onClose })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "sm" })
       ] }),
-      description ? /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }) : /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { hidden: true }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { className: Dialog_module.default.description, children: description }) : /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { hidden: true }),
       children
     ] })
   ] });

package/dist/cjs/components/Dialog/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n width: fit-content;\n background: transparent;\n border: none;\n cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n if (asChild) {\n // Pass all props to RadixDialog.Trigger, no styled wrapper\n return (\n <RadixDialog.Trigger\n asChild\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n }\n // Use styled Trigger if not asChild\n return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n position: fixed;\n inset: 0;\n animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n background: ${({ theme }) => theme.click.dialog.color.background.default};\n border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n padding-block: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n padding-inline: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n width: 75%;\n max-width: 670px;\n position: fixed;\n top: 50%;\n left: 50%;\n max-height: 75%;\n overflow: auto;\n transform: translate(-50%, -50%);\n animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n\n @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n max-height: 100%;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n display: flex;\n justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n align-items: center;\n min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled(RadixDialog.Title)`\n font: ${({ theme }) => theme.click.dialog.typography.title.default};\n padding: 0;\n margin: 0;\n`;\n\nconst Description = styled(RadixDialog.Description)`\n font: ${({ theme }) => theme.click.dialog.typography.description.default};\n color: ${({ theme }) => theme.click.dialog.color.description.default};\n padding: 0;\n margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n description,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n ...props\n}: DialogContentProps) => {\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={container}\n >\n {showOverlay && <DialogOverlay />}\n <ContentArea\n data-testid=\"click-dialog-contentarea\"\n $reducePadding={reducePadding}\n {...props}\n >\n {(title \|\| showClose) && (\n <>\n <TitleArea $onlyClose={!!showClose && !title}>\n {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </TitleArea>\n <Spacer size=\"sm\" />\n </>\n )}\n {description ? (\n <Description>{description}</Description>\n ) : (\n <RadixDialog.Description hidden />\n )}\n {children}\n </ContentArea>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","RadixDialog","Trigger","styled","withConfig","componentId","DialogTrigger","asChild","jsx","displayName","DialogClose","label","type","Button","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","typography","title","Description","description","CloseButton","onClose","CrossButton","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding","jsxs","Fragment","Spacer"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { cn, cva } from '@/lib/cva';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dialog.module.css';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\nconst DialogTrigger = ({\n children,\n asChild,\n className,\n ...props\n}: DialogTriggerProps) => {\n return (\n <RadixDialog.Trigger\n asChild={asChild}\n className={asChild ? className : cn(styles.trigger, className)}\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\nconst contentAreaVariants = cva(styles.content, {\n variants: {\n reducePadding: {\n true: styles['content_reduce-padding'],\n },\n },\n});\n\nconst titleAreaVariants = cva(styles['title-area'], {\n variants: {\n onlyClose: {\n true: styles['title-area_only-close'],\n },\n },\n});\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n description,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n className,\n ...props\n}: DialogContentProps) => {\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={portalContainer}\n >\n {showOverlay && <RadixDialog.Overlay className={styles.overlay} />}\n <RadixDialog.Content\n data-testid=\"click-dialog-contentarea\"\n {...props}\n className={cn(contentAreaVariants({ reducePadding }), className)}\n >\n {(title \|\| showClose) && (\n <>\n <div className={cn(titleAreaVariants({ onlyClose: !!showClose && !title }))}>\n {title && (\n <RadixDialog.Title\n data-testid=\"click-dialog-title\"\n className={styles.title}\n >\n {title}\n </RadixDialog.Title>\n )}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </div>\n <Spacer size=\"sm\" />\n </>\n )}\n {description ? (\n <RadixDialog.Description className={styles.description}>\n {description}\n </RadixDialog.Description>\n ) : (\n <RadixDialog.Description hidden />\n )}\n {children}\n </RadixDialog.Content>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","RadixDialog","DialogTrigger","asChild","className","jsx","cn","styles","trigger","displayName","Trigger","DialogClose","label","type","Button","Close","contentAreaVariants","cva","content","variants","reducePadding","true","titleAreaVariants","onlyClose","CloseButton","onClose","CrossButton","Icon","DialogContent","title","description","showClose","forceMount","container","showOverlay","portalContainer","useResolvedPortalContainer","overlay","jsxs","Fragment","Spacer","Content"],"mappings":"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"}

package/dist/cjs/components/Dropdown/index.cjs CHANGED Viewed

@@ -9,6 +9,7 @@ const GenericMenu = require('../GenericMenu/index.cjs');
 const useInputModality = require('../../hooks/internal/useInputModality.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
 const Icon = require('../Icon/index.cjs');
 function _interopNamespace(e) {
@@ -68,13 +69,15 @@ const DropdownMenuContent = styledComponents.styled(GenericMenu.GenericMenuPanel
 const DropdownContent = ({
   sub,
   children,
+  container,
   showArrow,
   responsivePositioning = true,
   ...props
 }) => {
   const ContentElement = sub ? DropdownMenu__namespace.SubContent : DropdownMenu__namespace.Content;
   const inputModalityProps = useInputModality.useInputModality();
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { ...props, $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, avoidCollisions: responsivePositioning, collisionPadding: responsivePositioning ? 100 : void 0, ...inputModalityProps, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { ...props, $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, avoidCollisions: responsivePositioning, collisionPadding: responsivePositioning ? 100 : void 0, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: DropdownMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children
   ] }) });

package/dist/cjs/components/Dropdown/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n <DropdownMenu.Root {...props} />\n);\n\nconst DropdownMenuItem = styled(GenericMenuItem)<{ $type?: 'default' \| 'danger' }>`\n position: relative;\n display: flex;\n min-height: 32px;\n`;\n\ninterface SubDropdownProps {\n sub?: true;\n icon?: IconName;\n iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst Trigger = styled(DropdownMenu.Trigger)`\n cursor: pointer;\n width: fit-content;\n &[disabled] {\n cursor: not-allowed;\n }\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n outline-offset: 2px;\n }\n`;\n\nconst DropdownTrigger = ({\n sub,\n children,\n ...props\n}: DropdownSubTriggerProps \| DropdownTriggerProps) => {\n if (sub) {\n const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n return (\n <DropdownMenuItem\n as={DropdownMenu.SubTrigger}\n {...menuProps}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n <Icon name=\"chevron-right\" />\n </DropdownMenuItem>\n );\n }\n\n return (\n <Trigger\n asChild\n {...(props as DropdownTriggerProps)}\n >\n <div>{children}</div>\n </Trigger>\n );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n children?: ReactNode;\n responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n children?: ReactNode;\n responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n MainDropdownProps &\n ArrowProps;\n\nconst DropdownMenuContent = styled(GenericMenuPanel)`\n min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth};\n flex-direction: column;\n z-index: 1;\n overflow-y: auto;\n`;\n\nconst DropdownContent = ({\n sub,\n children,\n showArrow,\n responsivePositioning = true,\n ...props\n}: DropdownContentProps \| DropdownSubContentProps) => {\n const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n const inputModalityProps = useInputModality();\n return (\n <DropdownMenu.Portal>\n <DropdownMenuContent\n {...props}\n $type=\"dropdown-menu\"\n $showArrow={showArrow}\n as={ContentElement}\n sideOffset={4}\n loop\n avoidCollisions={responsivePositioning}\n collisionPadding={responsivePositioning ? 100 : undefined}\n {...inputModalityProps}\n >\n {showArrow && (\n <Arrow\n asChild\n as={DropdownMenu.Arrow}\n width={20}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </DropdownMenuContent>\n </DropdownMenu.Portal>\n );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownMenuGroup = styled(DropdownMenu.Group)`\n width: 100%;\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {\n return <DropdownMenuGroup {...props} />;\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\nconst DropdownMenuSub = styled(DropdownMenu.Sub)`\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n return <DropdownMenuSub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n /** Icon to display in the menu item /\n icon?: IconName;\n /* The direction of the icon relative to the label /\n iconDir?: HorizontalDirection;\n /* The type of the menu item */\n type?: 'default' \| 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n icon,\n iconDir,\n type = 'default',\n children,\n ...props\n}: DropdownItemProps) => {\n return (\n <DropdownMenuItem\n as={DropdownMenu.Item}\n $type={type}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n </DropdownMenuItem>\n );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","jsx","DropdownMenu","DropdownMenuItem","styled","GenericMenuItem","withConfig","componentId","Trigger","theme","click","global","color","outline","default","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","IconWrapper","Icon","displayName","DropdownMenuContent","GenericMenuPanel","genericMenu","item","size","minWidth","DropdownContent","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","jsxs","undefined","Arrow","Popover_Arrow","DropdownMenuGroup","Group","stroke","DropdownGroup","DropdownMenuSub","Sub","DropdownSub","DropdownItem","type","Item"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n <DropdownMenu.Root {...props} />\n);\n\nconst DropdownMenuItem = styled(GenericMenuItem)<{ $type?: 'default' \| 'danger' }>`\n position: relative;\n display: flex;\n min-height: 32px;\n`;\n\ninterface SubDropdownProps {\n sub?: true;\n icon?: IconName;\n iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst Trigger = styled(DropdownMenu.Trigger)`\n cursor: pointer;\n width: fit-content;\n &[disabled] {\n cursor: not-allowed;\n }\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n outline-offset: 2px;\n }\n`;\n\nconst DropdownTrigger = ({\n sub,\n children,\n ...props\n}: DropdownSubTriggerProps \| DropdownTriggerProps) => {\n if (sub) {\n const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n return (\n <DropdownMenuItem\n as={DropdownMenu.SubTrigger}\n {...menuProps}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n <Icon name=\"chevron-right\" />\n </DropdownMenuItem>\n );\n }\n\n return (\n <Trigger\n asChild\n {...(props as DropdownTriggerProps)}\n >\n <div>{children}</div>\n </Trigger>\n );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n children?: ReactNode;\n container?: HTMLElement \| null;\n responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n children?: ReactNode;\n container?: HTMLElement \| null;\n responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n MainDropdownProps &\n ArrowProps;\n\nconst DropdownMenuContent = styled(GenericMenuPanel)`\n min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth};\n flex-direction: column;\n z-index: 1;\n overflow-y: auto;\n`;\n\nconst DropdownContent = ({\n sub,\n children,\n container,\n showArrow,\n responsivePositioning = true,\n ...props\n}: DropdownContentProps \| DropdownSubContentProps) => {\n const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n const inputModalityProps = useInputModality();\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <DropdownMenu.Portal container={portalContainer}>\n <DropdownMenuContent\n {...props}\n $type=\"dropdown-menu\"\n $showArrow={showArrow}\n as={ContentElement}\n sideOffset={4}\n loop\n avoidCollisions={responsivePositioning}\n collisionPadding={responsivePositioning ? 100 : undefined}\n {...inputModalityProps}\n >\n {showArrow && (\n <Arrow\n asChild\n as={DropdownMenu.Arrow}\n width={20}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </DropdownMenuContent>\n </DropdownMenu.Portal>\n );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownMenuGroup = styled(DropdownMenu.Group)`\n width: 100%;\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {\n return <DropdownMenuGroup {...props} />;\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\nconst DropdownMenuSub = styled(DropdownMenu.Sub)`\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n return <DropdownMenuSub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n /** Icon to display in the menu item /\n icon?: IconName;\n /* The direction of the icon relative to the label /\n iconDir?: HorizontalDirection;\n /* The type of the menu item */\n type?: 'default' \| 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n icon,\n iconDir,\n type = 'default',\n children,\n ...props\n}: DropdownItemProps) => {\n return (\n <DropdownMenuItem\n as={DropdownMenu.Item}\n $type={type}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n </DropdownMenuItem>\n );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","jsx","DropdownMenu","DropdownMenuItem","styled","GenericMenuItem","withConfig","componentId","Trigger","theme","click","global","color","outline","default","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","IconWrapper","Icon","displayName","DropdownMenuContent","GenericMenuPanel","genericMenu","item","size","minWidth","DropdownContent","container","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","undefined","Arrow","Popover_Arrow","DropdownMenuGroup","Group","stroke","DropdownGroup","DropdownMenuSub","Sub","DropdownSub","DropdownItem","type","Item"],"mappings":"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"}

package/dist/cjs/components/Flyout/index.cjs CHANGED Viewed

@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const RadixDialog = require('@radix-ui/react-dialog');
 const styledComponents = require('styled-components');
 const CrossButton = require('../CrossButton/index.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
 const Container = require('../Container/index.cjs');
 const CodeBlock = require('../CodeBlock/index.cjs');
 const Icon = require('../Icon/index.cjs');
@@ -45,15 +46,16 @@ const FlyoutContent = styledComponents.styled(RadixDialog.DialogContent).withCon
   theme,
   $strategy,
   $type = "default",
-  $align
+  $align,
+  $hasShadow = true
 }) => `
     ${$align === "start" ? "left" : "right"}: 0;
     max-width: 100%;
     position: ${$strategy};
     height: ${$strategy === "relative" ? "100%" : "auto"};
-    padding: 0 ${theme.click.flyout.space[$type].x}
+    padding: 0 ${theme.click.flyout.space[$type].x};
     gap: ${theme.click.flyout.space[$type].gap};
-    box-shadow: ${$align === "start" ? theme.click.flyout.shadow.reverse : theme.click.flyout.shadow.default};
+    box-shadow: ${$hasShadow === false ? "none" : theme.click.flyout.shadow[$align === "start" ? "reverse" : "default"]};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme.click.flyout.color.stroke.default};
     background: ${theme.click.flyout.color.background.default};
@@ -84,10 +86,12 @@ const Content = ({
   closeOnInteractOutside = false,
   width,
   align = "end",
+  hasShadow = true,
   onInteractOutside,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog.DialogPortal, { container, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog.DialogPortal, { container: portalContainer, children: [
     showOverlay && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: "DialogOverlay" }),
     /* @__PURE__ */ jsxRuntime.jsx(FlyoutContent, { $size: size, $type: type, $strategy: strategy, onInteractOutside: (e) => {
       if (!closeOnInteractOutside) {
@@ -96,20 +100,20 @@ const Content = ({
       if (typeof onInteractOutside === "function") {
         onInteractOutside(e);
       }
-    }, $width: width, $align: align, ...props, children })
+    }, $width: width, $align: align, $hasShadow: hasShadow, ...props, children })
   ] });
 };
 Content.displayName = "Flyout.Content";
 Flyout.Content = Content;
 const FlyoutElement = styledComponents.styled(Container.Container).withConfig({
   componentId: "sc-1vtv6sf-2"
-})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;", ""], ({
+})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;&&{", "}"], ({
   theme,
   $type = "default"
 }) => `
-    gap: ${theme.click.flyout.space[$type].gap};
-    padding: 0 ${theme.click.flyout.space[$type].content.x};
-  `);
+      gap: ${theme.click.flyout.space[$type].gap};
+      padding: 0 ${theme.click.flyout.space[$type].content.x};
+    `);
 const Element = ({
   type,
   ...props
@@ -118,14 +122,14 @@ Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
 const FlyoutHeaderContainer = styledComponents.styled(Container.Container).withConfig({
   componentId: "sc-1vtv6sf-3"
-})(["", ""], ({
+})(["&&{", "}"], ({
   theme,
   $type = "default"
 }) => `
-    row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y} ;
-  `);
+      row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
+      column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
+      padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y};
+    `);
 const FlyoutTitle = styledComponents.styled(RadixDialog.DialogTitle).withConfig({
   componentId: "sc-1vtv6sf-4"
 })(["", ""], ({
@@ -192,14 +196,14 @@ Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 const FlyoutFooter = styledComponents.styled(Container.Container).withConfig({
   componentId: "sc-1vtv6sf-7"
-})(["", ""], ({
+})(["&&{", "}"], ({
   theme,
   type = "default"
 }) => `
-    row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
-  `);
+      row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
+      column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
+      padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
+    `);
 const FlyoutClose = ({
   children,
   ...props

package/dist/cjs/components/Flyout/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { styled } from 'styled-components';\nimport { CrossButton } from '@/components/CrossButton';\nimport { keyframes } from 'styled-components';\nimport type {\n FlyoutProps,\n FlyoutTriggerProps,\n FlyoutContentProps,\n FlyoutHeaderProps,\n FlyoutFooterProps,\n FlyoutSizeType,\n FlyoutStrategy,\n FlyoutType,\n FlyoutAlignmentType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n return (\n <Dialog\n modal={modal}\n {...props}\n />\n );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n return (\n <DialogTrigger asChild>\n <div {...props}>{children}</div>\n </DialogTrigger>\n );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst animationWidth = () =>\n keyframes({\n from: { width: 0 },\n to: { width: 'fit-content' },\n });\n\nconst FlyoutContent = styled(DialogContent)<{\n $size?: FlyoutSizeType;\n $type?: FlyoutType;\n $strategy: FlyoutStrategy;\n $width?: string;\n $align: FlyoutAlignmentType;\n}>`\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n top: 0;\n bottom: 0;\n width: fit-content;\n --flyout-width: ${({ theme, $size = 'default', $width }) =>\n $width \|\| theme.click.flyout.size[$size].width};\n animation: ${animationWidth} 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n ${({ theme, $strategy, $type = 'default', $align }) => `\n ${$align === 'start' ? 'left' : 'right'}: 0;\n max-width: 100%;\n position: ${$strategy};\n height: ${$strategy === 'relative' ? '100%' : 'auto'};\n padding: 0 ${theme.click.flyout.space[$type].x}\n gap: ${theme.click.flyout.space[$type].gap};\n box-shadow: ${\n $align === 'start'\n ? theme.click.flyout.shadow.reverse\n : theme.click.flyout.shadow.default\n };\n border-${$align === 'start' ? 'right' : 'left'}: 1px solid ${\n theme.click.flyout.color.stroke.default\n };\n background: ${theme.click.flyout.color.background.default};\n\n @media (max-width: 1024px) {\n ${\n $strategy === 'relative'\n ? `\n position: absolute !important;`\n : ''\n }\n overflow: hidden;\n transform: ${\n $align === 'start'\n ? 'translateX(calc(50px - 100%))'\n : 'translateX(calc(100% - 50px))'\n };\n transition: 0.3s ease-in-out;\n &:hover,\n &.active,\n &:focus-within {\n transform: translateX(0);\n ${$align === 'start' ? 'right' : 'left'}: auto;\n }\n }\n `}\n`;\nconst FlyoutContainer = styled.div`\n display: flex;\n gap: 0;\n width: var(--flyout-width);\n max-width: 100%;\n flex-flow: column nowrap;\n gap: inherit;\n`;\n\nconst Content = ({\n showOverlay = false,\n children,\n container,\n strategy = 'relative',\n size,\n type = 'default',\n closeOnInteractOutside = false,\n width,\n align = 'end',\n onInteractOutside,\n ...props\n}: FlyoutContentProps) => {\n return (\n <DialogPortal container={container}>\n {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n <FlyoutContent\n $size={size}\n $type={type}\n $strategy={strategy}\n onInteractOutside={e => {\n if (!closeOnInteractOutside) {\n e.preventDefault();\n }\n if (typeof onInteractOutside === 'function') {\n onInteractOutside(e);\n }\n }}\n $width={width}\n $align={align}\n {...props}\n >\n {children}\n </FlyoutContent>\n </DialogPortal>\n );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst FlyoutElement = styled(Container)<{\n $type?: FlyoutType;\n}>`\n max-width: 100%;\n max-width: -webkit-fill-available;\n max-width: fill-available;\n max-width: stretch;\n ${({ theme, $type = 'default' }) => `\n gap: ${theme.click.flyout.space[$type].gap};\n padding: 0 ${theme.click.flyout.space[$type].content.x};\n `}\n`;\n\ninterface ElementProps extends Omit<\n ContainerProps,\n 'component' \| 'padding' \| 'gap' \| 'orientation'\n> {\n type?: FlyoutType;\n}\n\nconst Element = ({ type, ...props }: ElementProps) => (\n <FlyoutElement\n orientation=\"vertical\"\n padding=\"none\"\n gap=\"none\"\n $type={type}\n {...props}\n />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst FlyoutHeaderContainer = styled(Container)<{\n $type?: FlyoutType;\n}>`\n ${({ theme, $type = 'default' }) => `\n row-gap: ${theme.click.flyout.space[$type].content['row-gap']};\n column-gap: ${theme.click.flyout.space[$type].content['column-gap']};\n padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y} ;\n `}\n`;\n\nconst FlyoutTitle = styled(DialogTitle)<{\n $type?: FlyoutType;\n}>`\n ${({ theme, $type = 'default' }) => `\n color: ${theme.click.flyout.color.title.default};\n font: ${theme.click.flyout.typography[$type].title.default};\n margin: 0;\n padding: 0;\n `}\n`;\n\nconst FlyoutDescription = styled(DialogDescription)<{\n $type?: FlyoutType;\n}>`\n ${({ theme, $type = 'default' }) => `\n color: ${theme.click.flyout.color.description.default};\n font: ${theme.click.flyout.typography[$type].description.default};\n margin: 0;\n padding: 0;\n `}\n`;\n\nconst Header = ({\n title,\n description,\n type,\n children,\n showClose = true,\n showSeparator = true,\n ...props\n}: FlyoutHeaderProps) => {\n if (children) {\n return (\n <FlyoutContainer>\n <FlyoutHeaderContainer\n $type={type}\n justifyContent=\"space-between\"\n alignItems=\"start\"\n padding=\"none\"\n gap=\"none\"\n fillWidth={false}\n isResponsive={false}\n {...props}\n >\n <Container\n padding=\"none\"\n gap=\"none\"\n orientation=\"vertical\"\n grow=\"1\"\n >\n {children}\n </Container>\n {showClose && (\n <DialogClose asChild>\n <CrossButton data-testid=\"flyout-header-close-btn\">\n <Icon\n name=\"cross\"\n size={type === 'inline' ? 'md' : 'lg'}\n />\n </CrossButton>\n </DialogClose>\n )}\n </FlyoutHeaderContainer>\n {showSeparator && (\n <Separator\n data-testid=\"flyout-header-separator\"\n size=\"lg\"\n />\n )}\n </FlyoutContainer>\n );\n }\n\n return (\n <FlyoutContainer>\n <FlyoutHeaderContainer\n $type={type}\n justifyContent=\"space-between\"\n alignItems=\"start\"\n fillWidth={false}\n isResponsive={false}\n {...props}\n >\n <Container\n padding=\"none\"\n gap=\"none\"\n orientation=\"vertical\"\n grow=\"1\"\n >\n <FlyoutTitle $type={type}>{title}</FlyoutTitle>\n {description && (\n <FlyoutDescription $type={type}>{description}</FlyoutDescription>\n )}\n </Container>\n {showClose && (\n <DialogClose asChild>\n <CrossButton data-testid=\"flyout-header-close-btn\">\n <Icon\n name=\"cross\"\n size={type === 'inline' ? 'md' : 'lg'}\n />\n </CrossButton>\n </DialogClose>\n )}\n </FlyoutHeaderContainer>\n {showSeparator && (\n <Separator\n data-testid=\"flyout-header-separator\"\n size=\"lg\"\n />\n )}\n </FlyoutContainer>\n );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' \| 'top';\nconst FlyoutBody = styled(Container)<{ $align?: FlyoutAlign }>`\n width: var(--flyout-width);\n max-width: 100%;\n margin-top: ${({ $align = 'default' }) => ($align === 'top' ? '-1rem' : 0)};\n`;\n\ninterface BodyProps extends ContainerProps {\n align?: FlyoutAlign;\n}\n\nconst Body = ({ align, ...props }: BodyProps) => (\n <FlyoutBody\n overflow=\"auto\"\n orientation=\"vertical\"\n grow=\"1\"\n $align={align}\n {...props}\n />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst FlyoutFooter = styled(Container)<{\n type?: FlyoutType;\n}>`\n ${({ theme, type = 'default' }) => `\n row-gap: ${theme.click.flyout.space[type].content['row-gap']};\n column-gap: ${theme.click.flyout.space[type].content['column-gap']};\n padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};\n `}\n`;\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n children?: never;\n}\n\nconst FlyoutClose = ({\n children,\n ...props\n}: FlyoutButtonProps \| { children?: ReactNode }) => {\n return (\n <DialogClose asChild>\n {children ?? (\n <Button\n type=\"secondary\"\n {...props}\n />\n )}\n </DialogClose>\n );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst FooterContainer = styled(Container)`\n width: var(--flyout-width);\n max-width: 100%;\n`;\n\nconst Footer = (props: FlyoutFooterProps) => {\n return (\n <FooterContainer\n gap=\"none\"\n orientation=\"vertical\"\n alignItems=\"end\"\n >\n <Separator size=\"xs\" />\n <FlyoutFooter\n justifyContent=\"end\"\n gap=\"none\"\n padding=\"none\"\n isResponsive={false}\n wrap=\"wrap\"\n {...props}\n />\n </FooterContainer>\n );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\nconst CustomCodeBlock = styled(CodeBlock)`\n display: flex;\n height: 100%;\n pre {\n flex: 1;\n overflow-wrap: break-word;\n code {\n display: inline-block;\n max-width: calc(100% - 1rem);\n }\n }\n`;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n language?: string;\n statement: string;\n showLineNumbers?: boolean;\n showWrapButton?: boolean;\n wrapLines?: boolean;\n onCopy?: (value: string) => void \| Promise<void>;\n onCopyError?: (error: string) => void \| Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n statement,\n language,\n wrapLines,\n showLineNumbers,\n showWrapButton,\n onCopy,\n onCopyError,\n ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n return (\n <Element\n fillHeight\n {...props}\n >\n <CustomCodeBlock\n wrapLines={wrapLines}\n language={language}\n showLineNumbers={showLineNumbers}\n showWrapButton={showWrapButton}\n onCopy={onCopy}\n onCopyError={onCopyError}\n >\n {statement}\n </CustomCodeBlock>\n <Spacer size=\"xs\" />\n </Element>\n );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","jsx","Dialog","Trigger","children","DialogTrigger","displayName","animationWidth","keyframes","from","width","to","FlyoutContent","styled","DialogContent","withConfig","componentId","theme","$size","$width","click","flyout","size","$strategy","$type","$align","space","x","gap","shadow","reverse","default","color","stroke","background","FlyoutContainer","div","Content","showOverlay","container","strategy","type","closeOnInteractOutside","align","onInteractOutside","jsxs","DialogPortal","DialogOverlay","e","preventDefault","FlyoutElement","Container","content","Element","FlyoutHeaderContainer","y","FlyoutTitle","DialogTitle","title","typography","FlyoutDescription","DialogDescription","description","Header","showClose","showSeparator","DialogClose","CrossButton","Icon","Separator","FlyoutBody","Body","FlyoutFooter","FlyoutClose","Button","Close","FooterContainer","Footer","CustomCodeBlock","CodeBlock","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError","Spacer"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { styled, keyframes } from 'styled-components';\nimport { CrossButton } from '@/components/CrossButton';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport type {\n FlyoutProps,\n FlyoutTriggerProps,\n FlyoutContentProps,\n FlyoutHeaderProps,\n FlyoutFooterProps,\n FlyoutSizeType,\n FlyoutStrategy,\n FlyoutType,\n FlyoutAlignmentType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n return (\n <Dialog\n modal={modal}\n {...props}\n />\n );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n return (\n <DialogTrigger asChild>\n <div {...props}>{children}</div>\n </DialogTrigger>\n );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst animationWidth = () =>\n keyframes({\n from: { width: 0 },\n to: { width: 'fit-content' },\n });\n\nconst FlyoutContent = styled(DialogContent)<{\n $size?: FlyoutSizeType;\n $type?: FlyoutType;\n $strategy: FlyoutStrategy;\n $width?: string;\n $align: FlyoutAlignmentType;\n $hasShadow?: boolean;\n}>`\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n top: 0;\n bottom: 0;\n width: fit-content;\n --flyout-width: ${({ theme, $size = 'default', $width }) =>\n $width \|\| theme.click.flyout.size[$size].width};\n animation: ${animationWidth} 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n ${({ theme, $strategy, $type = 'default', $align, $hasShadow = true }) => `\n ${$align === 'start' ? 'left' : 'right'}: 0;\n max-width: 100%;\n position: ${$strategy};\n height: ${$strategy === 'relative' ? '100%' : 'auto'};\n padding: 0 ${theme.click.flyout.space[$type].x};\n gap: ${theme.click.flyout.space[$type].gap};\n box-shadow: ${\n $hasShadow === false\n ? 'none'\n : theme.click.flyout.shadow[$align === 'start' ? 'reverse' : 'default']\n };\n border-${$align === 'start' ? 'right' : 'left'}: 1px solid ${\n theme.click.flyout.color.stroke.default\n };\n background: ${theme.click.flyout.color.background.default};\n\n @media (max-width: 1024px) {\n ${\n $strategy === 'relative'\n ? `\n position: absolute !important;`\n : ''\n }\n overflow: hidden;\n transform: ${\n $align === 'start'\n ? 'translateX(calc(50px - 100%))'\n : 'translateX(calc(100% - 50px))'\n };\n transition: 0.3s ease-in-out;\n &:hover,\n &.active,\n &:focus-within {\n transform: translateX(0);\n ${$align === 'start' ? 'right' : 'left'}: auto;\n }\n }\n `}\n`;\nconst FlyoutContainer = styled.div`\n display: flex;\n gap: 0;\n width: var(--flyout-width);\n max-width: 100%;\n flex-flow: column nowrap;\n gap: inherit;\n`;\n\nconst Content = ({\n showOverlay = false,\n children,\n container,\n strategy = 'relative',\n size,\n type = 'default',\n closeOnInteractOutside = false,\n width,\n align = 'end',\n hasShadow = true,\n onInteractOutside,\n ...props\n}: FlyoutContentProps) => {\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <DialogPortal container={portalContainer}>\n {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n <FlyoutContent\n $size={size}\n $type={type}\n $strategy={strategy}\n onInteractOutside={e => {\n if (!closeOnInteractOutside) {\n e.preventDefault();\n }\n if (typeof onInteractOutside === 'function') {\n onInteractOutside(e);\n }\n }}\n $width={width}\n $align={align}\n $hasShadow={hasShadow}\n {...props}\n >\n {children}\n </FlyoutContent>\n </DialogPortal>\n );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst FlyoutElement = styled(Container)<{\n $type?: FlyoutType;\n}>`\n max-width: 100%;\n max-width: -webkit-fill-available;\n max-width: fill-available;\n max-width: stretch;\n && {\n ${({ theme, $type = 'default' }) => `\n gap: ${theme.click.flyout.space[$type].gap};\n padding: 0 ${theme.click.flyout.space[$type].content.x};\n `}\n }\n`;\n\ninterface ElementProps extends Omit<\n ContainerProps,\n 'component' \| 'padding' \| 'gap' \| 'orientation'\n> {\n type?: FlyoutType;\n}\n\nconst Element = ({ type, ...props }: ElementProps) => (\n <FlyoutElement\n orientation=\"vertical\"\n padding=\"none\"\n gap=\"none\"\n $type={type}\n {...props}\n />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst FlyoutHeaderContainer = styled(Container)<{\n $type?: FlyoutType;\n}>`\n && {\n ${({ theme, $type = 'default' }) => `\n row-gap: ${theme.click.flyout.space[$type].content['row-gap']};\n column-gap: ${theme.click.flyout.space[$type].content['column-gap']};\n padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y};\n `}\n }\n`;\n\nconst FlyoutTitle = styled(DialogTitle)<{\n $type?: FlyoutType;\n}>`\n ${({ theme, $type = 'default' }) => `\n color: ${theme.click.flyout.color.title.default};\n font: ${theme.click.flyout.typography[$type].title.default};\n margin: 0;\n padding: 0;\n `}\n`;\n\nconst FlyoutDescription = styled(DialogDescription)<{\n $type?: FlyoutType;\n}>`\n ${({ theme, $type = 'default' }) => `\n color: ${theme.click.flyout.color.description.default};\n font: ${theme.click.flyout.typography[$type].description.default};\n margin: 0;\n padding: 0;\n `}\n`;\n\nconst Header = ({\n title,\n description,\n type,\n children,\n showClose = true,\n showSeparator = true,\n ...props\n}: FlyoutHeaderProps) => {\n if (children) {\n return (\n <FlyoutContainer>\n <FlyoutHeaderContainer\n $type={type}\n justifyContent=\"space-between\"\n alignItems=\"start\"\n padding=\"none\"\n gap=\"none\"\n fillWidth={false}\n isResponsive={false}\n {...props}\n >\n <Container\n padding=\"none\"\n gap=\"none\"\n orientation=\"vertical\"\n grow=\"1\"\n >\n {children}\n </Container>\n {showClose && (\n <DialogClose asChild>\n <CrossButton data-testid=\"flyout-header-close-btn\">\n <Icon\n name=\"cross\"\n size={type === 'inline' ? 'md' : 'lg'}\n />\n </CrossButton>\n </DialogClose>\n )}\n </FlyoutHeaderContainer>\n {showSeparator && (\n <Separator\n data-testid=\"flyout-header-separator\"\n size=\"lg\"\n />\n )}\n </FlyoutContainer>\n );\n }\n\n return (\n <FlyoutContainer>\n <FlyoutHeaderContainer\n $type={type}\n justifyContent=\"space-between\"\n alignItems=\"start\"\n fillWidth={false}\n isResponsive={false}\n {...props}\n >\n <Container\n padding=\"none\"\n gap=\"none\"\n orientation=\"vertical\"\n grow=\"1\"\n >\n <FlyoutTitle $type={type}>{title}</FlyoutTitle>\n {description && (\n <FlyoutDescription $type={type}>{description}</FlyoutDescription>\n )}\n </Container>\n {showClose && (\n <DialogClose asChild>\n <CrossButton data-testid=\"flyout-header-close-btn\">\n <Icon\n name=\"cross\"\n size={type === 'inline' ? 'md' : 'lg'}\n />\n </CrossButton>\n </DialogClose>\n )}\n </FlyoutHeaderContainer>\n {showSeparator && (\n <Separator\n data-testid=\"flyout-header-separator\"\n size=\"lg\"\n />\n )}\n </FlyoutContainer>\n );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' \| 'top';\nconst FlyoutBody = styled(Container)<{ $align?: FlyoutAlign }>`\n width: var(--flyout-width);\n max-width: 100%;\n margin-top: ${({ $align = 'default' }) => ($align === 'top' ? '-1rem' : 0)};\n`;\n\ninterface BodyProps extends ContainerProps {\n align?: FlyoutAlign;\n}\n\nconst Body = ({ align, ...props }: BodyProps) => (\n <FlyoutBody\n overflow=\"auto\"\n orientation=\"vertical\"\n grow=\"1\"\n $align={align}\n {...props}\n />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst FlyoutFooter = styled(Container)<{\n type?: FlyoutType;\n}>`\n && {\n ${({ theme, type = 'default' }) => `\n row-gap: ${theme.click.flyout.space[type].content['row-gap']};\n column-gap: ${theme.click.flyout.space[type].content['column-gap']};\n padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};\n `}\n }\n`;\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n children?: never;\n}\n\nconst FlyoutClose = ({\n children,\n ...props\n}: FlyoutButtonProps \| { children?: ReactNode }) => {\n return (\n <DialogClose asChild>\n {children ?? (\n <Button\n type=\"secondary\"\n {...props}\n />\n )}\n </DialogClose>\n );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst FooterContainer = styled(Container)`\n width: var(--flyout-width);\n max-width: 100%;\n`;\n\nconst Footer = (props: FlyoutFooterProps) => {\n return (\n <FooterContainer\n gap=\"none\"\n orientation=\"vertical\"\n alignItems=\"end\"\n >\n <Separator size=\"xs\" />\n <FlyoutFooter\n justifyContent=\"end\"\n gap=\"none\"\n padding=\"none\"\n isResponsive={false}\n wrap=\"wrap\"\n {...props}\n />\n </FooterContainer>\n );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\nconst CustomCodeBlock = styled(CodeBlock)`\n display: flex;\n height: 100%;\n pre {\n flex: 1;\n overflow-wrap: break-word;\n code {\n display: inline-block;\n max-width: calc(100% - 1rem);\n }\n }\n`;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n language?: string;\n statement: string;\n showLineNumbers?: boolean;\n showWrapButton?: boolean;\n wrapLines?: boolean;\n onCopy?: (value: string) => void \| Promise<void>;\n onCopyError?: (error: string) => void \| Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n statement,\n language,\n wrapLines,\n showLineNumbers,\n showWrapButton,\n onCopy,\n onCopyError,\n ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n return (\n <Element\n fillHeight\n {...props}\n >\n <CustomCodeBlock\n wrapLines={wrapLines}\n language={language}\n showLineNumbers={showLineNumbers}\n showWrapButton={showWrapButton}\n onCopy={onCopy}\n onCopyError={onCopyError}\n >\n {statement}\n </CustomCodeBlock>\n <Spacer size=\"xs\" />\n </Element>\n );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","jsx","Dialog","Trigger","children","DialogTrigger","displayName","animationWidth","keyframes","from","width","to","FlyoutContent","styled","DialogContent","withConfig","componentId","theme","$size","$width","click","flyout","size","$strategy","$type","$align","$hasShadow","space","x","gap","shadow","color","stroke","default","background","FlyoutContainer","div","Content","showOverlay","container","strategy","type","closeOnInteractOutside","align","hasShadow","onInteractOutside","portalContainer","useResolvedPortalContainer","jsxs","DialogPortal","DialogOverlay","e","preventDefault","FlyoutElement","Container","content","Element","FlyoutHeaderContainer","y","FlyoutTitle","DialogTitle","title","typography","FlyoutDescription","DialogDescription","description","Header","showClose","showSeparator","DialogClose","CrossButton","Icon","Separator","FlyoutBody","Body","FlyoutFooter","FlyoutClose","Button","Close","FooterContainer","Footer","CustomCodeBlock","CodeBlock","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError","Spacer"],"mappings":"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"}

package/dist/cjs/components/HoverCard/HoverCard.css ADDED Viewed

@@ -0,0 +1,6 @@
+.hover-card__trigger__tMcTR {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  width: fit-content;
+}

package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs ADDED Viewed

@@ -0,0 +1,10 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const styles = {
+	"hover-card__trigger": "hover-card__trigger__tMcTR"
+};
+exports.default = styles;
+//# sourceMappingURL=HoverCard.module.css.cjs.map

package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HoverCard.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/components/HoverCard/index.cjs CHANGED Viewed

@@ -1,3 +1,4 @@
+require("./HoverCard.css");
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,8 +6,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixHoverCard = require('@radix-ui/react-hover-card');
 const GenericMenu = require('../GenericMenu/index.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
+const HoverCard_module = require('./HoverCard.module.css.cjs');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,14 +37,12 @@ const HoverCard = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Root, { ...props, children });
 };
-const Trigger = styledComponents.styled(RadixHoverCard__namespace.Trigger).withConfig({
-  componentId: "sc-1ect7b6-0"
-})(["width:fit-content;"]);
 const HoverCardTrigger = ({
   children,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { ...props, className: cva.cn(HoverCard_module.default["hover-card__trigger"], className), children });
 };
 HoverCardTrigger.displayName = "HoverCardTrigger";
 HoverCard.Trigger = HoverCardTrigger;
@@ -52,7 +53,8 @@ const HoverCardContent = ({
   container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Portal, { forceMount, container, children: /* @__PURE__ */ jsxRuntime.jsxs(GenericMenu.GenericPopoverMenuPanel, { as: RadixHoverCard__namespace.Content, $type: "hover-card", $showArrow: showArrow, ...props, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(GenericMenu.GenericPopoverMenuPanel, { as: RadixHoverCard__namespace.Content, $type: "hover-card", $showArrow: showArrow, ...props, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RadixHoverCard__namespace.Arrow, width: 15, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children
   ] }) });

package/dist/cjs/components/HoverCard/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { ~~styled~~ } from '~~styled-components~~';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n showArrow?: boolean;\n forceMount?: true;\n container?: HTMLElement \| null;\n children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst ~~Trigger = styled(RadixHoverCard.Trigger)`\n width: fit-content;\n`;\n\nconst~~ HoverCardTrigger = ({\n children,\n ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n return <Trigger {...props}>{children}</Trigger~~>;\~~n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n children,\n showArrow,\n forceMount,\n container,\n ...props\n}: HoverCardContentProps) => {\n return (\n <RadixHoverCard.Portal\n forceMount={forceMount}\n container={~~container~~}\n >\n <GenericPopoverMenuPanel\n as={RadixHoverCard.Content}\n $type=\"hover-card\"\n $showArrow={showArrow}\n {...props}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RadixHoverCard.Arrow}\n width={15}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </GenericPopoverMenuPanel>\n </RadixHoverCard.Portal>\n );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","RadixHoverCard","~~Trigger~~","~~styled~~","~~withConfig~~","~~componentId~~","~~HoverCardTrigger~~","~~jsx~~","~~displayName~~","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO~~,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,~~OAAAA~~,~~GAAUC~~,~~uBAAAA~~,~~CAAOF~~,~~yBAAAA~~,~~CAAeC,OAAO,EAACE,UAAAA,CAAA~~;~~AAAA~~,~~EAAAC~~,~~WAAAA,EAAA~~;~~AAAA~~,CAAA,~~CAAA~~,~~CAAA~~,~~CAAA~~,~~oBAAA~~,~~CAAA~~,~~CAAA;AAI9C~~,~~MAAMC~~,~~mBAAmBA~~,~~CAAC;AAAA~~,~~EACxBP~~,~~QAAAA;AAAAA~~,~~EACA~~,~~GAAGC;AACiC~~,~~CAAA~~,~~KAAM;AAC1C~~,~~EAAA~~,~~uBAAOO~~,~~cAAA~~,~~CAAC~~,~~OAAA~~,~~EAAA~~,~~EAAQ~~,~~GAAIP~~,~~KAAAA~~,~~EAAQD,~~QAAAA,~~EAAS~~,CAAA;~~AACvC~~,CAAA;~~AACAO~~,gBAAAA,~~CAAiBE~~,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,~~CAAUI~~,OAAAA,~~GAAUI~~,gBAAAA;AAEpB,~~MAAMG~~,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,~~sCACGC~~,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,~~WAEA~~,QAAA,~~kBAAAY~~,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,~~EAAIb~~,~~yBAAAA~~,~~CAAec~~,~~SACnB~~,KAAA,EAAM,~~YAAA~~,~~EACN,~~UAAA,~~EAAYL~~,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,~~oBACCH~~,cAAA,~~CAACS~~,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,~~EAAIf~~,yBAAAA,~~CAAee~~,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,~~kBAAAT~~,cAAA,~~CAACU~~,wBAAa,CAAA,EAChB,CAAA;AAAA,~~IAEDlB~~;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,~~CAAiBD~~,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,~~CAAUiB~~,OAAAA,~~GAAUN~~,gBAAAA;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n showArrow?: boolean;\n forceMount?: true;\n container?: HTMLElement \| null;\n children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n children,\n className,\n ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n return (\n <RadixHoverCard.Trigger\n {...props}\n className={cn(styles['hover-card__trigger'], className)}\n >\n {children}\n </RadixHoverCard.Trigger>\n );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n children,\n showArrow,\n forceMount,\n container,\n ...props\n}: HoverCardContentProps) => {\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <RadixHoverCard.Portal\n forceMount={forceMount}\n container={portalContainer}\n >\n <GenericPopoverMenuPanel\n as={RadixHoverCard.Content}\n $type=\"hover-card\"\n $showArrow={showArrow}\n {...props}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RadixHoverCard.Arrow}\n width={15}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </GenericPopoverMenuPanel>\n </RadixHoverCard.Portal>\n );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","RadixHoverCard","HoverCardTrigger","className","jsx","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,mBAAmBA,CAAC;AAAA,EACxBH,QAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACA,GAAGH;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACEI,cAAA,CAACH,yBAAA,CAAe,OAAA,EAAf,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,wBAAAA,CAAO,qBAAqB,CAAA,EAAGH,SAAS,GAErDJ,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAG,gBAAAA,CAAiBK,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUU,OAAAA,GAAUN,gBAAAA;AAEpB,MAAMO,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,MAAMa,eAAAA,GAAkBC,yCAA2BF,SAAS,CAAA;AAE5D,EAAA,sCACGX,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAAWY,eAAAA,EAEX,QAAA,kBAAAE,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIf,0BAAegB,OAAAA,EACnB,KAAA,EAAM,cACN,UAAA,EAAYP,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCN,cAAA,CAACc,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIjB,yBAAAA,CAAeiB,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAd,cAAA,CAACe,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDpB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUmB,OAAAA,GAAUR,gBAAAA;;;;"}

package/dist/cjs/components/Icon/SvgImageElement.cjs CHANGED Viewed

@@ -1,3 +1,4 @@
+require("./Icon.css");
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });