@activecollab/components 2.0.120 → 2.0.122

package/dist/esm/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","MenuContextProvider","StyledMenu","useForkRef","Overlay","Popper","Window","Menu","_ref","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","onPopperOpen","setOpen","childNode","setChildNode","elementRef","isOpenAtLeastOnce","handleRefRef","ref","undefined","handleRef","handleOpen","event","_target$props","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","current","_elementRef$current","focus","createElement","Fragment","cloneElement","disableScrollLock","style","tabIndex","disableBackgroundColor","anchorEl","placement","afterWrite","$mode","onMouseDown","value","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n  useRef,\n  FC,\n  ReactNode,\n  MouseEvent,\n  useState,\n  useCallback,\n  useEffect,\n  ReactElement,\n  Ref,\n} from \"react\";\n\nimport { Placement } from \"@popperjs/core\";\nimport classnames from \"classnames\";\n\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Popper } from \"../Popper\";\nimport { Window } from \"../Window\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n  /** Menu content */\n  children:\n    | ReactNode\n    | ((childProps: { forceClose: () => void }) => JSX.Element);\n  /** On menu element click */\n  onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Handle scroll bar */\n  handleScroll?: boolean;\n  /** Disable Focus Lock */\n  disableFocusLock?: boolean;\n  /** Menu width mode */\n  mode?: MenuMode;\n  /** Should menu be open when it's mounted */\n  open?: boolean;\n  /** Callback triggered when modal has been opened */\n  onOpen?: () => void;\n  /** Callback triggered when modal has been closed */\n  onClose?: () => void;\n  /** Before close callback */\n  onBeforeClose?: () => boolean;\n  /** Position Menu */\n  position?: Placement;\n  /** Target element */\n  target?: ElementWithRef<Element>;\n  className?: string;\n  /** Menu classes */\n  menuClassName?: string;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n  backgroundElementClass?: string;\n  /** Should Window be positioned absolutely */\n  windowAbsolutelyPositioned?: boolean;\n  /** Popper on open */\n  onPopperOpen?: (...args) => void;\n}\n\nexport const Menu: FC<IMenu> = ({\n  children,\n  disableFocusLock = false,\n  onMenuClick,\n  handleScroll = true,\n  mode = \"normal\",\n  open: defaultOpen = false,\n  onOpen,\n  onClose,\n  onBeforeClose,\n  position = \"bottom-start\",\n  target,\n  className,\n  menuClassName,\n  popperClassName,\n  backgroundElementClass,\n  windowAbsolutelyPositioned = false,\n  onPopperOpen,\n}) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const [childNode, setChildNode] = useState<Element | null>();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const isOpenAtLeastOnce = useRef(false);\n\n  useEffect(() => {\n    setOpen(defaultOpen);\n  }, [defaultOpen]);\n\n  const handleRefRef = useForkRef(\n    target ? target.ref : undefined,\n    setChildNode\n  );\n  const handleRef = useForkRef(handleRefRef, elementRef);\n\n  const handleOpen = useCallback(\n    (\n      event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n    ) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      setOpen(true);\n      typeof onOpen === \"function\" && onOpen();\n      typeof target?.props?.onClick === \"function\" &&\n        target.props.onClick(event);\n    },\n    [onOpen, target?.props]\n  );\n\n  const handleClose = useCallback(() => {\n    if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n      return;\n    }\n    setOpen(false);\n    typeof onClose === \"function\" && onClose();\n  }, [onClose, onBeforeClose]);\n\n  const childProps = {\n    forceClose: handleClose,\n  };\n\n  const targetProps = {\n    open,\n    ref: handleRef,\n    onClick: handleOpen,\n  };\n\n  useEffect(() => {\n    if (open) {\n      isOpenAtLeastOnce.current = true;\n    } else if (!open && isOpenAtLeastOnce.current) {\n      elementRef.current?.focus();\n      isOpenAtLeastOnce.current = false;\n    }\n  }, [open]);\n\n  return (\n    <>\n      {target && React.cloneElement(target, targetProps)}\n      {open ? (\n        <Window\n          onClose={handleClose}\n          disableScrollLock={!handleScroll}\n          disableFocusLock={disableFocusLock}\n          style={{\n            position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n          }}\n        >\n          <Overlay\n            className={backgroundElementClass}\n            onClick={handleClose}\n            tabIndex={-1}\n            disableBackgroundColor\n          />\n          <Popper\n            anchorEl={childNode}\n            open={childNode ? open : false}\n            placement={position}\n            className={popperClassName}\n            tabIndex={-1}\n            afterWrite={onPopperOpen}\n          >\n            <StyledMenu\n              className={classnames(\n                \"c-simple-menu__paper\",\n                `c-simple-menu__${mode}`,\n                menuClassName,\n                className\n              )}\n              $mode={mode}\n              onMouseDown={onMenuClick}\n            >\n              <MenuContextProvider value={{ open, setOpen }}>\n                {typeof children === \"function\"\n                  ? children(childProps)\n                  : children}\n              </MenuContextProvider>\n            </StyledMenu>\n          </Popper>\n        </Window>\n      ) : null}\n    </>\n  );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}
+{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","MenuContextProvider","StyledMenu","useForkRef","Overlay","Popper","Window","Menu","_ref","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","onPopperOpen","setOpen","childNode","setChildNode","elementRef","isOpenAtLeastOnce","handleRefRef","ref","undefined","handleRef","handleOpen","event","_target$props","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","current","_elementRef$current","focus","createElement","Fragment","cloneElement","disableScrollLock","style","tabIndex","disableBackgroundColor","anchorEl","placement","afterWrite","$mode","onMouseDown","value","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n  useRef,\n  FC,\n  ReactNode,\n  MouseEvent,\n  useState,\n  useCallback,\n  useEffect,\n  ReactElement,\n  Ref,\n} from \"react\";\n\nimport { Placement } from \"@popperjs/core\";\nimport classnames from \"classnames\";\n\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Popper } from \"../Popper\";\nimport { Window } from \"../Window\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\n// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\" | \"widest\";\n\nexport interface IMenu {\n  /** Menu content */\n  children:\n    | ReactNode\n    | ((childProps: { forceClose: () => void }) => JSX.Element);\n  /** On menu element click */\n  onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Handle scroll bar */\n  handleScroll?: boolean;\n  /** Disable Focus Lock */\n  disableFocusLock?: boolean;\n  /** Menu width mode */\n  mode?: MenuMode;\n  /** Should menu be open when it's mounted */\n  open?: boolean;\n  /** Callback triggered when modal has been opened */\n  onOpen?: () => void;\n  /** Callback triggered when modal has been closed */\n  onClose?: () => void;\n  /** Before close callback */\n  onBeforeClose?: () => boolean;\n  /** Position Menu */\n  position?: Placement;\n  /** Target element */\n  target?: ElementWithRef<Element>;\n  className?: string;\n  /** Menu classes */\n  menuClassName?: string;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n  backgroundElementClass?: string;\n  /** Should Window be positioned absolutely */\n  windowAbsolutelyPositioned?: boolean;\n  /** Popper on open */\n  onPopperOpen?: (...args) => void;\n}\n\nexport const Menu: FC<IMenu> = ({\n  children,\n  disableFocusLock = false,\n  onMenuClick,\n  handleScroll = true,\n  mode = \"normal\",\n  open: defaultOpen = false,\n  onOpen,\n  onClose,\n  onBeforeClose,\n  position = \"bottom-start\",\n  target,\n  className,\n  menuClassName,\n  popperClassName,\n  backgroundElementClass,\n  windowAbsolutelyPositioned = false,\n  onPopperOpen,\n}) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const [childNode, setChildNode] = useState<Element | null>();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const isOpenAtLeastOnce = useRef(false);\n\n  useEffect(() => {\n    setOpen(defaultOpen);\n  }, [defaultOpen]);\n\n  const handleRefRef = useForkRef(\n    target ? target.ref : undefined,\n    setChildNode\n  );\n  const handleRef = useForkRef(handleRefRef, elementRef);\n\n  const handleOpen = useCallback(\n    (\n      event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n    ) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      setOpen(true);\n      typeof onOpen === \"function\" && onOpen();\n      typeof target?.props?.onClick === \"function\" &&\n        target.props.onClick(event);\n    },\n    [onOpen, target?.props]\n  );\n\n  const handleClose = useCallback(() => {\n    if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n      return;\n    }\n    setOpen(false);\n    typeof onClose === \"function\" && onClose();\n  }, [onClose, onBeforeClose]);\n\n  const childProps = {\n    forceClose: handleClose,\n  };\n\n  const targetProps = {\n    open,\n    ref: handleRef,\n    onClick: handleOpen,\n  };\n\n  useEffect(() => {\n    if (open) {\n      isOpenAtLeastOnce.current = true;\n    } else if (!open && isOpenAtLeastOnce.current) {\n      elementRef.current?.focus();\n      isOpenAtLeastOnce.current = false;\n    }\n  }, [open]);\n\n  return (\n    <>\n      {target && React.cloneElement(target, targetProps)}\n      {open ? (\n        <Window\n          onClose={handleClose}\n          disableScrollLock={!handleScroll}\n          disableFocusLock={disableFocusLock}\n          style={{\n            position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n          }}\n        >\n          <Overlay\n            className={backgroundElementClass}\n            onClick={handleClose}\n            tabIndex={-1}\n            disableBackgroundColor\n          />\n          <Popper\n            anchorEl={childNode}\n            open={childNode ? open : false}\n            placement={position}\n            className={popperClassName}\n            tabIndex={-1}\n            afterWrite={onPopperOpen}\n          >\n            <StyledMenu\n              className={classnames(\n                \"c-simple-menu__paper\",\n                `c-simple-menu__${mode}`,\n                menuClassName,\n                className\n              )}\n              $mode={mode}\n              onMouseDown={onMenuClick}\n            >\n              <MenuContextProvider value={{ open, setOpen }}>\n                {typeof children === \"function\"\n                  ? children(childProps)\n                  : children}\n              </MenuContextProvider>\n            </StyledMenu>\n          </Popper>\n        </Window>\n      ) : null}\n    </>\n  );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}

package/dist/esm/components/Menu/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU;WAA2B,MAAM;SA6BvD,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAO5B,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAK5B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU;WAA2B,MAAM;SAmCvD,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAO5B,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAK5B,CAAC"}

package/dist/esm/components/Menu/Styles.js

@@ -5,13 +5,13 @@ import { FontStyle } from "../FontStyle";
 export const StyledMenu = styled(Bubble).withConfig({
   displayName: "Styles__StyledMenu",
   componentId: "sc-8fhkp-0"
-})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
+})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
   "marginTop": "0.25rem",
   "marginBottom": "0.25rem",
   "overflow": "auto",
   "borderColor": "var(--border-primary)",
   "backgroundColor": "var(--page-paper-main)"
-}, FontStyle, BoxSizingStyle, props => props.$mode === "normal" && css(["width:260px;"]), props => props.$mode === "wider" && css(["width:350px;"]), props => props.$mode === "tiny" && css(["width:180px;"]));
+}, FontStyle, BoxSizingStyle, props => props.$mode === "normal" && css(["width:260px;"]), props => props.$mode === "wider" && css(["width:350px;"]), props => props.$mode === "tiny" && css(["width:180px;"]), props => props.$mode === "widest" && css(["width:590px;"]));
 StyledMenu.displayName = "StyledMenu";
 export const StyledMenuFooter = styled.div.withConfig({
   displayName: "Styles__StyledMenuFooter",

package/dist/esm/components/Menu/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","withConfig","displayName","componentId","props","$mode","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n  ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n  \n  color: var(--color-theme-700);\n  a:focus,\n  a:active {\n    outline: none;\n  }\n\n  ${(props) =>\n    props.$mode === \"normal\" &&\n    css`\n      width: 260px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"wider\" &&\n    css`\n      width: 350px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"tiny\" &&\n    css`\n      width: 180px;\n    `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n  ${tw`tw-flex tw-px-2 tw-py-1`}\n\n  display: flex;\n  border-top: 1px solid var(--border-primary);\n  height: 32px;\n  align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n  ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n  border-bottom: 1px solid var(--border-primary);\n  height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAClC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwE,CAAC,EAE3EJ,SAAS,EACTF,cAAc,EAQbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,kBAEF,CACJ;AACDI,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMI,gBAAgB,GAAGX,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,CAM9B;AACDG,gBAAgB,CAACJ,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMM,gBAAgB,GAAGb,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AACDK,gBAAgB,CAACN,WAAW,GAAG,kBAAkB"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","withConfig","displayName","componentId","props","$mode","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n  ${tw`tw-bg-page-paper-main tw-border-border-primary tw-my-1 tw-overflow-auto`}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n  \n  color: var(--color-theme-700);\n  a:focus,\n  a:active {\n    outline: none;\n  }\n\n  ${(props) =>\n    props.$mode === \"normal\" &&\n    css`\n      width: 260px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"wider\" &&\n    css`\n      width: 350px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"tiny\" &&\n    css`\n      width: 180px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"widest\" &&\n    css`\n      width: 590px;\n    `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n  ${tw`tw-flex tw-px-2 tw-py-1`}\n\n  display: flex;\n  border-top: 1px solid var(--border-primary);\n  height: 32px;\n  align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n  ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n  border-bottom: 1px solid var(--border-primary);\n  height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uGAClC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwE,CAAC,EAE3EJ,SAAS,EACTF,cAAc,EAQbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,CACJ;AACDI,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMI,gBAAgB,GAAGX,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,CAM9B;AACDG,gBAAgB,CAACJ,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMM,gBAAgB,GAAGb,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AACDK,gBAAgB,CAACN,WAAW,GAAG,kBAAkB"}

package/dist/esm/components/Paper/Paper.d.ts

@@ -9,7 +9,7 @@ export interface IPaperProps {
     /** Define custom style */
     style?: object;
     /** Type of paper to be used */
-    type?: "paper-1" | "paper-2" | "paper-3";
+    type?: "paper-1" | "paper-2" | "paper-3" | "tile-1" | "tile-2";
     /** Paper has hover or not */
     hover?: boolean;
     /** Use optimized shadow */

package/dist/esm/components/Paper/Paper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAET,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,2HAqCjB,CAAC"}
+{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAET,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/D,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,2HAqCjB,CAAC"}

package/dist/esm/components/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.js","names":["React","forwardRef","classNames","StyledPaper","Paper","_ref","innerRef","children","className","type","hover","useOptimizedShadow","rest","createElement","_extends","ref","displayName"],"sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledPaper } from \"./Styles\";\n\nexport interface IPaperProps {\n  /** Children type of node or string */\n  children: ReactNode;\n  /** CSS classes */\n  className?: string;\n  /** Ref object. */\n  innerRef?: RefObject<HTMLDivElement>;\n  /** Define custom style */\n  style?: object;\n  /** Type of paper to be used */\n  type?: \"paper-1\" | \"paper-2\" | \"paper-3\";\n  /** Paper has hover or not */\n  hover?: boolean;\n  /** Use optimized shadow */\n  useOptimizedShadow?: boolean;\n}\n\n/**\n * This is a component description and should sit directly above your component\n */\nexport const Paper = forwardRef(\n  (\n    {\n      children,\n      className,\n      type = \"paper-1\",\n      hover = false,\n      useOptimizedShadow = false,\n      ...rest\n    }: HTMLAttributes<HTMLDivElement> & IPaperProps,\n    innerRef: Ref<HTMLDivElement> | null | undefined\n  ) => {\n    return (\n      <StyledPaper\n        className={classNames(className, {\n          \"ac-shadow--raised--lg\":\n            !useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow-optimized--lg\":\n            useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow--lg\": !hover && type === \"paper-1\",\n          \"ac-shadow--raised--sm\":\n            (!useOptimizedShadow && hover && type === \"paper-2\") ||\n            (!useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow-optimized--sm\":\n            (useOptimizedShadow && hover && type === \"paper-2\") ||\n            (useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow--sm\":\n            (!hover && type === \"paper-2\") || (!hover && type === \"paper-3\"),\n        })}\n        ref={innerRef}\n        type={type}\n        {...rest}\n      >\n        {children}\n      </StyledPaper>\n    );\n  }\n);\n\nPaper.displayName = \"Paper\";\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,QAKL,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,QAAQ,UAAU;AAmBtC;AACA;AACA;AACA,OAAO,MAAMC,KAAK,gBAAGH,UAAU,CAC7B,CAAAI,IAAA,EASEC,QAAgD,KAC7C;EAAA,IATH;IACEC,QAAQ;IACRC,SAAS;IACTC,IAAI,GAAG,SAAS;IAChBC,KAAK,GAAG,KAAK;IACbC,kBAAkB,GAAG,KAAK;IAC1B,GAAGC;EACyC,CAAC,GAAAP,IAAA;EAG/C,oBACEL,KAAA,CAAAa,aAAA,CAACV,WAAW,EAAAW,QAAA;IACVN,SAAS,EAAEN,UAAU,CAACM,SAAS,EAAE;MAC/B,uBAAuB,EACrB,CAACG,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS;MACpD,yBAAyB,EACvBE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS;MACnD,eAAe,EAAE,CAACC,KAAK,IAAID,IAAI,KAAK,SAAS;MAC7C,uBAAuB,EACpB,CAACE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS,IAClD,CAACE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAU;MACtD,yBAAyB,EACtBE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS,IACjDE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAU;MACrD,eAAe,EACZ,CAACC,KAAK,IAAID,IAAI,KAAK,SAAS,IAAM,CAACC,KAAK,IAAID,IAAI,KAAK;IAC1D,CAAC,CAAE;IACHM,GAAG,EAAET,QAAS;IACdG,IAAI,EAAEA;EAAK,GACPG,IAAI,GAEPL,QACU,CAAC;AAElB,CACF,CAAC;AAEDH,KAAK,CAACY,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Paper.js","names":["React","forwardRef","classNames","StyledPaper","Paper","_ref","innerRef","children","className","type","hover","useOptimizedShadow","rest","createElement","_extends","ref","displayName"],"sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledPaper } from \"./Styles\";\n\nexport interface IPaperProps {\n  /** Children type of node or string */\n  children: ReactNode;\n  /** CSS classes */\n  className?: string;\n  /** Ref object. */\n  innerRef?: RefObject<HTMLDivElement>;\n  /** Define custom style */\n  style?: object;\n  /** Type of paper to be used */\n  type?: \"paper-1\" | \"paper-2\" | \"paper-3\" | \"tile-1\" | \"tile-2\";\n  /** Paper has hover or not */\n  hover?: boolean;\n  /** Use optimized shadow */\n  useOptimizedShadow?: boolean;\n}\n\n/**\n * This is a component description and should sit directly above your component\n */\nexport const Paper = forwardRef(\n  (\n    {\n      children,\n      className,\n      type = \"paper-1\",\n      hover = false,\n      useOptimizedShadow = false,\n      ...rest\n    }: HTMLAttributes<HTMLDivElement> & IPaperProps,\n    innerRef: Ref<HTMLDivElement> | null | undefined\n  ) => {\n    return (\n      <StyledPaper\n        className={classNames(className, {\n          \"ac-shadow--raised--lg\":\n            !useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow-optimized--lg\":\n            useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow--lg\": !hover && type === \"paper-1\",\n          \"ac-shadow--raised--sm\":\n            (!useOptimizedShadow && hover && type === \"paper-2\") ||\n            (!useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow-optimized--sm\":\n            (useOptimizedShadow && hover && type === \"paper-2\") ||\n            (useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow--sm\":\n            (!hover && type === \"paper-2\") || (!hover && type === \"paper-3\"),\n        })}\n        ref={innerRef}\n        type={type}\n        {...rest}\n      >\n        {children}\n      </StyledPaper>\n    );\n  }\n);\n\nPaper.displayName = \"Paper\";\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,QAKL,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,QAAQ,UAAU;AAmBtC;AACA;AACA;AACA,OAAO,MAAMC,KAAK,gBAAGH,UAAU,CAC7B,CAAAI,IAAA,EASEC,QAAgD,KAC7C;EAAA,IATH;IACEC,QAAQ;IACRC,SAAS;IACTC,IAAI,GAAG,SAAS;IAChBC,KAAK,GAAG,KAAK;IACbC,kBAAkB,GAAG,KAAK;IAC1B,GAAGC;EACyC,CAAC,GAAAP,IAAA;EAG/C,oBACEL,KAAA,CAAAa,aAAA,CAACV,WAAW,EAAAW,QAAA;IACVN,SAAS,EAAEN,UAAU,CAACM,SAAS,EAAE;MAC/B,uBAAuB,EACrB,CAACG,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS;MACpD,yBAAyB,EACvBE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS;MACnD,eAAe,EAAE,CAACC,KAAK,IAAID,IAAI,KAAK,SAAS;MAC7C,uBAAuB,EACpB,CAACE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS,IAClD,CAACE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAU;MACtD,yBAAyB,EACtBE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAS,IACjDE,kBAAkB,IAAID,KAAK,IAAID,IAAI,KAAK,SAAU;MACrD,eAAe,EACZ,CAACC,KAAK,IAAID,IAAI,KAAK,SAAS,IAAM,CAACC,KAAK,IAAID,IAAI,KAAK;IAC1D,CAAC,CAAE;IACHM,GAAG,EAAET,QAAS;IACdG,IAAI,EAAEA;EAAK,GACPG,IAAI,GAEPL,QACU,CAAC;AAElB,CACF,CAAC;AAEDH,KAAK,CAACY,WAAW,GAAG,OAAO"}

package/dist/esm/components/Paper/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,eAAO,MAAM,WAAW,wDAMvB,CAAC;AACF,eAAO,MAAM,WAAW,6EAQvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,eAAO,MAAM,WAAW,wDAMvB,CAAC;AACF,eAAO,MAAM,WAAW,6EAgBvB,CAAC"}

package/dist/esm/components/Paper/Styles.js

@@ -7,6 +7,6 @@ export const PaperStyles = css(["", " border-radius:var(--ac-br-8);", " ", ""],
 export const StyledPaper = styled.div.withConfig({
   displayName: "Styles__StyledPaper",
   componentId: "sc-1ld1e2o-0"
-})(["", " ", ""], PaperStyles, props => props.type === "paper-3" && css(["border:solid 1px var(--border-primary);"]));
+})(["", " ", " ", ""], PaperStyles, props => (props.type === "paper-3" || props.type === "tile-1") && css(["border:solid 1px var(--border-primary);"]), props => (props.type === "tile-1" || props.type === "tile-2") && css(["&:hover{background-color:var(--color-theme-200);}"]));
 StyledPaper.displayName = "StyledPaper";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Paper/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","PaperStyles","StyledPaper","div","withConfig","displayName","componentId","props","type"],"sources":["../../../../src/components/Paper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { IPaperProps } from \"./Paper\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const PaperStyles = css`\n  ${tw`tw-bg-page-paper-main`}\n  border-radius: var(--ac-br-8);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nexport const StyledPaper = styled.div<IPaperProps>`\n  ${PaperStyles}\n\n  ${(props) =>\n    props.type === \"paper-3\" &&\n    css`\n      border: solid 1px var(--border-primary);\n    `}\n`;\n\nStyledPaper.displayName = \"StyledPaper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAGH,GAAG,kDACxB;EAAA;AAAsB,CAAC,EAGzBE,SAAS,EACTD,cAAc,CACjB;AACD,OAAO,MAAMG,WAAW,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACjCL,WAAW,EAEVM,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBV,GAAG,6CAEF,CACJ;AAEDI,WAAW,CAACG,WAAW,GAAG,aAAa"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","PaperStyles","StyledPaper","div","withConfig","displayName","componentId","props","type"],"sources":["../../../../src/components/Paper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { IPaperProps } from \"./Paper\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const PaperStyles = css`\n  ${tw`tw-bg-page-paper-main`}\n  border-radius: var(--ac-br-8);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nexport const StyledPaper = styled.div<IPaperProps>`\n  ${PaperStyles}\n\n  ${(props) =>\n    (props.type === \"paper-3\" || props.type === \"tile-1\") &&\n    css`\n      border: solid 1px var(--border-primary);\n    `}\n\n      ${(props) =>\n    (props.type === \"tile-1\" || props.type === \"tile-2\") &&\n    css`\n      &:hover {\n        background-color: var(--color-theme-200);\n      }\n    `}\n`;\n\nStyledPaper.displayName = \"StyledPaper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAGH,GAAG,kDACxB;EAAA;AAAsB,CAAC,EAGzBE,SAAS,EACTD,cAAc,CACjB;AACD,OAAO,MAAMG,WAAW,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBACjCL,WAAW,EAEVM,KAAK,IACN,CAACA,KAAK,CAACC,IAAI,KAAK,SAAS,IAAID,KAAK,CAACC,IAAI,KAAK,QAAQ,KACpDV,GAAG,6CAEF,EAEIS,KAAK,IACV,CAACA,KAAK,CAACC,IAAI,KAAK,QAAQ,IAAID,KAAK,CAACC,IAAI,KAAK,QAAQ,KACnDV,GAAG,uDAIF,CACJ;AAEDI,WAAW,CAACG,WAAW,GAAG,aAAa"}

package/dist/index.js

@@ -7844,7 +7844,7 @@
   var StyledMenu$2 = styled__default["default"](Bubble).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-8fhkp-0"
-  })(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", ""], {
+  })(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
     "marginTop": "0.25rem",
     "marginBottom": "0.25rem",
     "overflow": "auto",
@@ -7856,6 +7856,8 @@
     return props.$mode === "wider" && styled.css(["width:350px;"]);
   }, function (props) {
     return props.$mode === "tiny" && styled.css(["width:180px;"]);
+  }, function (props) {
+    return props.$mode === "widest" && styled.css(["width:590px;"]);
   });
   StyledMenu$2.displayName = "StyledMenu";
   var StyledMenuFooter$1 = styled__default["default"].div.withConfig({
@@ -10706,8 +10708,10 @@
   var StyledPaper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledPaper",
     componentId: "sc-1ld1e2o-0"
-  })(["", " ", ""], PaperStyles, function (props) {
-    return props.type === "paper-3" && styled.css(["border:solid 1px var(--border-primary);"]);
+  })(["", " ", " ", ""], PaperStyles, function (props) {
+    return (props.type === "paper-3" || props.type === "tile-1") && styled.css(["border:solid 1px var(--border-primary);"]);
+  }, function (props) {
+    return (props.type === "tile-1" || props.type === "tile-2") && styled.css(["&:hover{background-color:var(--color-theme-200);}"]);
   });
   StyledPaper.displayName = "StyledPaper";
 
@@ -10772,24 +10776,30 @@
   var StyledCard = styled__default["default"](Paper).withConfig({
     displayName: "Styles__StyledCard",
     componentId: "sc-hllbj1-0"
-  })(["", ""], {
+  })(["", " ", ""], {
     "color": "var(--color-theme-900)"
+  }, function (_ref) {
+    var $pointer = _ref.$pointer;
+    return $pointer && styled.css(["cursor:pointer;"]);
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$16 = ["children", "className", "hoverable", "paperType"];
+  var _excluded$16 = ["children", "className", "hoverable", "variant", "onClick"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
       _ref$hoverable = _ref.hoverable,
       hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$paperType = _ref.paperType,
-      paperType = _ref$paperType === void 0 ? "paper-2" : _ref$paperType,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "paper-2" : _ref$variant,
+      onClick = _ref.onClick,
       rest = _objectWithoutProperties(_ref, _excluded$16);
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
-      type: paperType,
+      type: variant,
       className: classNames__default["default"]("c-card", className),
       hover: hoverable,
+      $pointer: typeof onClick === "function",
+      onClick: onClick,
       useOptimizedShadow: true,
       ref: ref
     }), children);
@@ -10858,7 +10868,7 @@
         "grid-item": renderAs === "grid-item",
         "list-item": renderAs === "list-item"
       }, className),
-      paperType: renderAs === "grid-item" ? "paper-1" : "paper-2",
+      variant: renderAs === "grid-item" ? "paper-1" : "paper-2",
       $renderAs: renderAs
     }, renderAs === "list-item" ? renderAsListItem(properties) : null, renderAs === "grid-item" ? renderAsGridItem(properties) : null);
   });
@@ -18420,7 +18430,7 @@
       as: Component,
       $renderAs: renderAs,
       $background: background,
-      paperType: paperType,
+      variant: paperType,
       className: classNames__default["default"]("c-entity-card", classSuffix, className),
       $isCollection: isCollection
     }, rest, {