@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/BottomSheet/BottomSheet.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.parts.js","sources":["../../../src/BottomSheet/BottomSheet.parts.tsx"],"sourcesContent":["import { DialogOverlayProps } from \"@reach/dialog\";\nimport { AnimatePresence, AnimatePresenceProps } from \"framer-motion\";\nimport React from \"react\";\nimport { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from \"styled-system\";\nimport {\n  OverlayDialog,\n  Overlay,\n  SheetDialog,\n  Sheet,\n  ContentContainer,\n  Footer,\n  Header,\n  Title,\n  HelpText,\n} from \"./BottomSheet.styled\";\nimport { BottomSheetProvider, useBottomSheet } from \"./BottomSheetProvider\";\n\nconst overlayVariants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nconst sheetVariants = {\n  hidden: { y: \"100%\" },\n  visible: { y: 0 },\n};\n\nconst transition = {\n  duration: 0.5,\n  ease: [0.32, 0.72, 0, 1] as [number, number, number, number],\n};\n\ninterface RootProps extends AnimatePresenceProps {\n  isOpen: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n}\n\nfunction Root({ isOpen, onClose, children, ...props }: RootProps) {\n  return (\n    <AnimatePresence {...props}>\n      {isOpen && (\n        <BottomSheetProvider key=\"bottom-sheet\" isOpen={isOpen} onClose={onClose}>\n          {children}\n        </BottomSheetProvider>\n      )}\n    </AnimatePresence>\n  );\n}\n\ninterface OverlayPartProps extends DialogOverlayProps {\n  closeOnClick?: boolean;\n}\n\nfunction OverlayPart({ closeOnClick, children, ...props }: OverlayPartProps) {\n  const { onClose, isOpen } = useBottomSheet();\n  const [isAnimationComplete, setAnimationComplete] = React.useState(false);\n\n  return (\n    <OverlayDialog isOpen={isOpen} {...props}>\n      <Overlay\n        data-testid=\"bottom-sheet-overlay\"\n        data-visible={isAnimationComplete ? true : undefined}\n        variants={overlayVariants}\n        initial=\"hidden\"\n        animate=\"visible\"\n        exit=\"hidden\"\n        transition={transition}\n        onAnimationComplete={() => {\n          if (isOpen) {\n            setAnimationComplete(true);\n          }\n        }}\n        onClick={closeOnClick ? onClose : undefined}\n      >\n        {children}\n      </Overlay>\n    </OverlayDialog>\n  );\n}\n\ninterface SheetPartProps extends WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {\n  children: React.ReactNode;\n  \"aria-label\": string;\n}\n\nfunction SheetPart({ children, \"aria-label\": ariaLabel, ...props }: SheetPartProps) {\n  const { isOpen } = useBottomSheet();\n  const [isAnimationComplete, setAnimationComplete] = React.useState(false);\n\n  function handleSheetClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {\n    e.stopPropagation();\n  }\n\n  return (\n    <SheetDialog aria-label={ariaLabel}>\n      <Sheet\n        data-testid=\"bottom-sheet-body\"\n        data-visible={isAnimationComplete ? true : undefined}\n        variants={sheetVariants}\n        initial=\"hidden\"\n        animate=\"visible\"\n        exit=\"hidden\"\n        transition={transition}\n        onAnimationComplete={() => {\n          if (isOpen) {\n            setAnimationComplete(true);\n          }\n        }}\n        onClick={handleSheetClick}\n        {...props}\n      >\n        {children}\n      </Sheet>\n    </SheetDialog>\n  );\n}\n\nexport const BottomSheetParts = {\n  Root,\n  Overlay: OverlayPart,\n  Sheet: SheetPart,\n  ContentContainer,\n  Header,\n  Title,\n  HelpText,\n  Footer,\n};\n"],"names":["React"],"mappings":";;;;;AAiBA,MAAM,kBAAkB;AAAA,EACtB,QAAQ,EAAE,SAAS,EAAA;AAAA,EACnB,SAAS,EAAE,SAAS,EAAA;AACtB;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ,EAAE,GAAG,OAAA;AAAA,EACb,SAAS,EAAE,GAAG,EAAA;AAChB;AAEA,MAAM,aAAa;AAAA,EACjB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC;AACzB;AAQA,SAAS,KAAK,EAAE,QAAQ,SAAS,UAAU,GAAG,SAAoB;AAChE,SACE,oBAAC,iBAAA,EAAiB,GAAG,OAClB,UAAA,UACC,oBAAC,qBAAA,EAAuC,QAAgB,SACrD,SAAA,GADsB,cAEzB,EAAA,CAEJ;AAEJ;AAMA,SAAS,YAAY,EAAE,cAAc,UAAU,GAAG,SAA2B;AAC3E,QAAM,EAAE,SAAS,OAAA,IAAW,eAAA;AAC5B,QAAM,CAAC,qBAAqB,oBAAoB,IAAIA,eAAM,SAAS,KAAK;AAExE,SACE,oBAAC,eAAA,EAAc,QAAiB,GAAG,OACjC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,gBAAc,sBAAsB,OAAO;AAAA,MAC3C,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,qBAAqB,MAAM;AACzB,YAAI,QAAQ;AACV,+BAAqB,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,SAAS,eAAe,UAAU;AAAA,MAEjC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAOA,SAAS,UAAU,EAAE,UAAU,cAAc,WAAW,GAAG,SAAyB;AAClF,QAAM,EAAE,OAAA,IAAW,eAAA;AACnB,QAAM,CAAC,qBAAqB,oBAAoB,IAAIA,eAAM,SAAS,KAAK;AAExE,WAAS,iBAAiB,GAAiD;AACzE,MAAE,gBAAA;AAAA,EACJ;AAEA,SACE,oBAAC,aAAA,EAAY,cAAY,WACvB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,gBAAc,sBAAsB,OAAO;AAAA,MAC3C,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,qBAAqB,MAAM;AACzB,YAAI,QAAQ;AACV,+BAAqB,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/BottomSheet/BottomSheet.styled.js

@@ -0,0 +1,112 @@
+import { DialogOverlay, DialogContent } from "../node_modules/.pnpm/@reach_dialog@0.18.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/dialog/dist/reach-dialog.js";
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import { styled } from "styled-components";
+import { width, maxWidth, height, maxHeight } from "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { excludeStyledProps } from "../StyledProps/index.js";
+import Text from "../Type/Text.js";
+import { motion } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import layout from "../node_modules/.pnpm/@styled-system_layout@5.1.2/node_modules/@styled-system/layout/dist/index.esm.js";
+import { compose } from "../node_modules/.pnpm/@styled-system_core@5.1.2/node_modules/@styled-system/core/dist/index.esm.js";
+import { Heading2 } from "../Type/Headings.js";
+const OverlayDialog = styled(DialogOverlay)({});
+const Overlay = styled(motion.div)(({ theme }) => ({
+  position: "fixed",
+  inset: 0,
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "center",
+  backgroundColor: curriedTransparentize$1(0.5, theme.colors.blackBlue),
+  zIndex: theme.zIndices.overlay
+}));
+const SheetDialog = styled(DialogContent)({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  padding: 0,
+  background: "none"
+});
+const styleFns = [width, maxWidth, height, maxHeight, space, layout];
+const Sheet = styled(motion.div).withConfig({
+  shouldForwardProp: excludeStyledProps(...styleFns)
+})(
+  ({ theme }) => ({
+    "&:focus": {
+      outline: "none"
+    },
+    inset: 0,
+    backgroundColor: theme.colors.white,
+    borderTopLeftRadius: theme.radii.large,
+    borderTopRightRadius: theme.radii.large,
+    height: "auto",
+    padding: 0,
+    "*": {
+      boxSizing: "border-box",
+      WebkitTapHighlightColor: "transparent"
+    },
+    color: theme.colors.black,
+    fontSize: theme.fontSizes.medium,
+    lineHeight: theme.lineHeights.base,
+    WebkitFontSmoothing: "antialiased",
+    WebkitTapHighlightColor: "transparent",
+    MozOsxFontSmoothing: "grayscale",
+    position: "relative",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    background: "white",
+    boxShadow: theme.shadows.large
+  }),
+  compose(...styleFns)
+);
+const ContentContainer = styled.div(() => ({
+  overflowY: "auto",
+  flex: 1,
+  WebkitOverflowScrolling: "touch",
+  scrollbarWidth: "none",
+  "&::-webkit-scrollbar": {
+    display: "none"
+  }
+}));
+const Footer = styled.div(({ theme }) => ({
+  position: "fixed",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  marginLeft: theme.space.x1,
+  marginRight: theme.space.x1,
+  padding: theme.space.x2,
+  background: curriedTransparentize$1(0.4, theme.colors.white),
+  backdropFilter: "blur(8px)",
+  borderTop: "1px solid",
+  borderTopColor: theme.colors.lightGrey,
+  marginTop: "auto"
+}));
+const Header = styled.div(({ theme }) => ({
+  textAlign: "left",
+  paddingTop: theme.space.x3,
+  paddingLeft: theme.space.x3,
+  paddingRight: theme.space.x3,
+  paddingBottom: theme.space.none
+}));
+const Title = styled(Heading2)(({ theme }) => ({
+  marginBottom: theme.space.x1
+}));
+const HelpText = styled(Text)(({ theme }) => ({
+  color: theme.colors.midGrey,
+  "&, *": {
+    fontSize: theme.fontSizes.small
+  }
+}));
+export {
+  ContentContainer,
+  Footer,
+  Header,
+  HelpText,
+  Overlay,
+  OverlayDialog,
+  Sheet,
+  SheetDialog,
+  Title
+};
+//# sourceMappingURL=BottomSheet.styled.js.map

package/dist/esm/BottomSheet/BottomSheet.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.styled.js","sources":["../../../src/BottomSheet/BottomSheet.styled.tsx"],"sourcesContent":["import {\n  DialogContent as ReachDialogContent,\n  DialogContentProps,\n  DialogOverlay as ReachDialogOverlay,\n  DialogOverlayProps,\n} from \"@reach/dialog\";\nimport React from \"react\";\nimport type { MotionProps } from \"framer-motion\";\nimport { motion } from \"framer-motion\";\nimport { transparentize } from \"polished\";\nimport { styled } from \"styled-components\";\nimport { compose, height, layout, maxHeight, maxWidth, space, width } from \"styled-system\";\nimport type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from \"styled-system\";\nimport { Heading2, Text } from \"../Type\";\nimport { excludeStyledProps } from \"../StyledProps\";\n\n// Portal + focus-lock + scroll-lock wrapper (no visual styles)\nconst OverlayDialog = styled(ReachDialogOverlay as React.ComponentType<DialogOverlayProps>)({});\n\n// Animated backdrop\nconst Overlay = styled(motion.div)(({ theme }) => ({\n  position: \"fixed\",\n  inset: 0,\n  display: \"flex\",\n  alignItems: \"flex-end\",\n  justifyContent: \"center\",\n  backgroundColor: transparentize(0.5, theme.colors.blackBlue),\n  zIndex: theme.zIndices.overlay,\n}));\n\n// Transparent a11y wrapper (role=\"dialog\", aria-modal, focus containment)\nconst SheetDialog = styled(ReachDialogContent as React.ComponentType<DialogContentProps>)({\n  width: \"100%\",\n  display: \"flex\",\n  justifyContent: \"center\",\n  padding: 0,\n  background: \"none\",\n});\n\ninterface SheetProps\n  extends MotionProps, WidthProps, MaxWidthProps, HeightProps, MaxHeightProps, SpaceProps, LayoutProps {}\n\nconst styleFns = [width, maxWidth, height, maxHeight, space, layout];\n\nconst Sheet = styled(motion.div).withConfig({\n  shouldForwardProp: excludeStyledProps(...styleFns),\n})<SheetProps>(\n  ({ theme }) => ({\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    inset: 0,\n    backgroundColor: theme.colors.white,\n    borderTopLeftRadius: theme.radii.large,\n    borderTopRightRadius: theme.radii.large,\n    height: \"auto\",\n    padding: 0,\n    \"*\": {\n      boxSizing: \"border-box\",\n      WebkitTapHighlightColor: \"transparent\",\n    },\n    color: theme.colors.black,\n    fontSize: theme.fontSizes.medium,\n    lineHeight: theme.lineHeights.base,\n    WebkitFontSmoothing: \"antialiased\",\n    WebkitTapHighlightColor: \"transparent\",\n    MozOsxFontSmoothing: \"grayscale\",\n    position: \"relative\",\n    overflow: \"hidden\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    background: \"white\",\n    boxShadow: theme.shadows.large,\n  }),\n  compose(...styleFns)\n);\n\nconst ContentContainer = styled.div(() => ({\n  overflowY: \"auto\",\n  flex: 1,\n  WebkitOverflowScrolling: \"touch\",\n  scrollbarWidth: \"none\",\n\n  \"&::-webkit-scrollbar\": {\n    display: \"none\",\n  },\n}));\n\nconst Footer = styled.div(({ theme }) => ({\n  position: \"fixed\",\n  bottom: 0,\n  left: 0,\n  right: 0,\n  marginLeft: theme.space.x1,\n  marginRight: theme.space.x1,\n  padding: theme.space.x2,\n  background: transparentize(0.4, theme.colors.white),\n  backdropFilter: \"blur(8px)\",\n  borderTop: \"1px solid\",\n  borderTopColor: theme.colors.lightGrey,\n  marginTop: \"auto\",\n}));\n\nconst Header = styled.div(({ theme }) => ({\n  textAlign: \"left\",\n  paddingTop: theme.space.x3,\n  paddingLeft: theme.space.x3,\n  paddingRight: theme.space.x3,\n  paddingBottom: theme.space.none,\n}));\n\nconst Title = styled(Heading2)(({ theme }) => ({\n  marginBottom: theme.space.x1,\n}));\n\nconst HelpText = styled(Text)(({ theme }) => ({\n  color: theme.colors.midGrey,\n  \"&, *\": {\n    fontSize: theme.fontSizes.small,\n  },\n}));\n\nexport { OverlayDialog, Overlay, SheetDialog, Sheet, ContentContainer, Footer, Header, Title, HelpText };\n"],"names":["ReachDialogOverlay","transparentize","ReachDialogContent"],"mappings":";;;;;;;;;;;AAiBA,MAAM,gBAAgB,OAAOA,aAA6D,EAAE,CAAA,CAAE;AAG9F,MAAM,UAAU,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EACjD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiBC,wBAAe,KAAK,MAAM,OAAO,SAAS;AAAA,EAC3D,QAAQ,MAAM,SAAS;AACzB,EAAE;AAGF,MAAM,cAAc,OAAOC,aAA6D,EAAE;AAAA,EACxF,OAAO;AAAA,EACP,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AACd,CAAC;AAKD,MAAM,WAAW,CAAC,OAAO,UAAU,QAAQ,WAAW,OAAO,MAAM;AAEnE,MAAM,QAAQ,OAAO,OAAO,GAAG,EAAE,WAAW;AAAA,EAC1C,mBAAmB,mBAAmB,GAAG,QAAQ;AACnD,CAAC;AAAA,EACC,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,qBAAqB,MAAM,MAAM;AAAA,IACjC,sBAAsB,MAAM,MAAM;AAAA,IAClC,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,MACH,WAAW;AAAA,MACX,yBAAyB;AAAA,IAAA;AAAA,IAE3B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,qBAAqB;AAAA,IACrB,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,IACrB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,QAAQ,GAAG,QAAQ;AACrB;AAEA,MAAM,mBAAmB,OAAO,IAAI,OAAO;AAAA,EACzC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAEhB,wBAAwB;AAAA,IACtB,SAAS;AAAA,EAAA;AAEb,EAAE;AAEF,MAAM,SAAS,OAAO,IAAI,CAAC,EAAE,aAAa;AAAA,EACxC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY,MAAM,MAAM;AAAA,EACxB,aAAa,MAAM,MAAM;AAAA,EACzB,SAAS,MAAM,MAAM;AAAA,EACrB,YAAYD,wBAAe,KAAK,MAAM,OAAO,KAAK;AAAA,EAClD,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,gBAAgB,MAAM,OAAO;AAAA,EAC7B,WAAW;AACb,EAAE;AAEF,MAAM,SAAS,OAAO,IAAI,CAAC,EAAE,aAAa;AAAA,EACxC,WAAW;AAAA,EACX,YAAY,MAAM,MAAM;AAAA,EACxB,aAAa,MAAM,MAAM;AAAA,EACzB,cAAc,MAAM,MAAM;AAAA,EAC1B,eAAe,MAAM,MAAM;AAC7B,EAAE;AAEF,MAAM,QAAQ,OAAO,QAAQ,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7C,cAAc,MAAM,MAAM;AAC5B,EAAE;AAEF,MAAM,WAAW,OAAO,IAAI,EAAE,CAAC,EAAE,aAAa;AAAA,EAC5C,OAAO,MAAM,OAAO;AAAA,EACpB,QAAQ;AAAA,IACN,UAAU,MAAM,UAAU;AAAA,EAAA;AAE9B,EAAE;"}

package/dist/esm/BottomSheet/BottomSheetProvider.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext } from "react";
+import { noop } from "../utils/noop.js";
+const BottomSheetContext = createContext(void 0);
+function useBottomSheet() {
+  const context = useContext(BottomSheetContext);
+  if (!context) {
+    throw new Error("useBottomSheet must be used within a BottomSheetProvider");
+  }
+  return context;
+}
+function BottomSheetProvider({
+  isOpen = false,
+  onClose = noop,
+  children
+}) {
+  return /* @__PURE__ */ jsx(BottomSheetContext.Provider, { value: { isOpen, onClose }, children });
+}
+export {
+  BottomSheetProvider,
+  useBottomSheet
+};
+//# sourceMappingURL=BottomSheetProvider.js.map

package/dist/esm/BottomSheet/BottomSheetProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetProvider.js","sources":["../../../src/BottomSheet/BottomSheetProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { noop } from \"../utils/noop\";\n\ninterface BottomSheetContextType {\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nconst BottomSheetContext = createContext<BottomSheetContextType | undefined>(undefined);\n\nfunction useBottomSheet() {\n  const context = useContext(BottomSheetContext);\n  if (!context) {\n    throw new Error(\"useBottomSheet must be used within a BottomSheetProvider\");\n  }\n  return context;\n}\n\nfunction BottomSheetProvider({\n  isOpen = false,\n  onClose = noop,\n  children,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n}) {\n  return <BottomSheetContext.Provider value={{ isOpen, onClose }}>{children}</BottomSheetContext.Provider>;\n}\n\nexport { BottomSheetProvider, useBottomSheet };\n"],"names":[],"mappings":";;;AASA,MAAM,qBAAqB,cAAkD,MAAS;AAEtF,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACA,SAAO;AACT;AAEA,SAAS,oBAAoB;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AACF,GAIG;AACD,SAAO,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,QAAQ,WAAY,UAAS;AAC5E;"}

package/dist/esm/Box/Box.js

@@ -0,0 +1,10 @@
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import { motion } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const Box = styled.div(addStyledProps);
+const AnimatedBox = styled(motion.div)(addStyledProps);
+export {
+  AnimatedBox,
+  Box as default
+};
+//# sourceMappingURL=Box.js.map

package/dist/esm/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../src/Box/Box.tsx"],"sourcesContent":["import { ComponentPropsWithRef } from \"react\";\nimport { styled } from \"styled-components\";\nimport { motion, MotionProps } from \"framer-motion\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\n\nexport interface BoxProps extends StyledProps, ComponentPropsWithRef<\"div\"> {\n  as?: React.ElementType;\n}\n\nconst Box = styled.div<BoxProps>(addStyledProps);\n\nexport interface AnimatedBoxProps\n  extends\n    MotionProps,\n    Omit<BoxProps, \"onAnimationStart\" | \"onDrag\" | \"onDragStart\" | \"onDragEnd\" | \"style\" | \"transition\" | \"children\"> {}\n\nexport const AnimatedBox = styled(motion.div)<AnimatedBoxProps>(addStyledProps);\n\nexport default Box;\n"],"names":[],"mappings":";;;AASA,MAAM,MAAM,OAAO,IAAc,cAAc;AAOxC,MAAM,cAAc,OAAO,OAAO,GAAG,EAAoB,cAAc;"}

package/dist/esm/BrandedNavBar/BrandLogoContainer.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "../Box/Box.js";
+import Link from "../Link/Link.js";
+import Branding from "../Branding/Branding.js";
+const MAX_LOGO_WIDTH = "184px";
+const MAX_LOGO_HEIGHT = "36px";
+const BrandLogoContainer = ({
+  logoSrc,
+  brandingLinkHref,
+  brandingLinkTo,
+  brandingLinkComponent,
+  subtext
+}) => {
+  return /* @__PURE__ */ jsx(Box, { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT, children: /* @__PURE__ */ jsxs(
+    Link,
+    {
+      "aria-label": "Home",
+      href: brandingLinkHref,
+      to: brandingLinkTo,
+      as: brandingLinkComponent,
+      underline: false,
+      variant: "desktop",
+      style: { display: "block" },
+      children: [
+        logoSrc && /* @__PURE__ */ jsx("img", { src: logoSrc, style: { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }, alt: "" }),
+        !logoSrc && /* @__PURE__ */ jsx(Branding, { size: subtext ? "small" : "medium", logoColor: "blue", subtext })
+      ]
+    }
+  ) });
+};
+export {
+  BrandLogoContainer as default
+};
+//# sourceMappingURL=BrandLogoContainer.js.map

package/dist/esm/BrandedNavBar/BrandLogoContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandLogoContainer.js","sources":["../../../src/BrandedNavBar/BrandLogoContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"../Box\";\nimport { Link } from \"../Link\";\nimport { Branding } from \"../Branding\";\n\nconst MAX_LOGO_WIDTH = \"184px\";\nconst MAX_LOGO_HEIGHT = \"36px\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type BrandLogoContainerProps = {\n  logoSrc?: string;\n  brandingLinkHref?: string;\n  brandingLinkTo?: string;\n  brandingLinkComponent?: React.ElementType;\n  subtext?: string;\n};\n\nconst BrandLogoContainer = ({\n  logoSrc,\n  brandingLinkHref,\n  brandingLinkTo,\n  brandingLinkComponent,\n  subtext,\n}: BrandLogoContainerProps) => {\n  return (\n    <Box maxWidth={MAX_LOGO_WIDTH} maxHeight={MAX_LOGO_HEIGHT}>\n      <Link\n        aria-label=\"Home\"\n        href={brandingLinkHref}\n        to={brandingLinkTo}\n        as={brandingLinkComponent}\n        underline={false}\n        variant=\"desktop\"\n        style={{ display: \"block\" }}\n      >\n        {logoSrc && <img src={logoSrc} style={{ maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }} alt=\"\" />}\n        {!logoSrc && <Branding size={subtext ? \"small\" : \"medium\"} logoColor=\"blue\" subtext={subtext} />}\n      </Link>\n    </Box>\n  );\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default BrandLogoContainer;\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAWxB,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,SACE,oBAAC,KAAA,EAAI,UAAU,gBAAgB,WAAW,iBACxC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,SAAQ;AAAA,MACR,OAAO,EAAE,SAAS,QAAA;AAAA,MAEjB,UAAA;AAAA,QAAA,WAAW,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,UAAU,gBAAgB,WAAW,gBAAA,GAAmB,KAAI,GAAA,CAAG;AAAA,QACtG,CAAC,WAAW,oBAAC,UAAA,EAAS,MAAM,UAAU,UAAU,UAAU,WAAU,QAAO,QAAA,CAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAElG;AAEJ;"}

package/dist/esm/BrandedNavBar/DesktopMenu.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import MenuTrigger from "./MenuTrigger.js";
+import Icon from "../Icon/Icon.js";
+const getSharedStyles = (color, theme) => {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
+    color: theme.colors[color] || color,
+    textDecoration: "none",
+    border: "none",
+    backgroundColor: "transparent",
+    verticalAlign: "middle",
+    lineHeight: theme.lineHeights.base,
+    fontSize: `${theme.fontSizes.base}`,
+    padding: `${theme.space.x1} ${theme.space.x2}`,
+    borderRadius: theme.radii.medium
+  };
+};
+const MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }) => ({
+  ...getSharedStyles(color, theme),
+  fontWeight: theme.fontWeights.medium,
+  transition: ".2s",
+  "&:hover, &:focus": {
+    outline: "none",
+    color: theme.colors[hoverColor] || hoverColor,
+    backgroundColor: theme.colors[hoverBackground] || hoverBackground,
+    cursor: "pointer"
+  },
+  "&:disabled": {
+    opacity: ".5"
+  },
+  "&:focus": {
+    boxShadow: theme.shadows.focus
+  }
+}));
+const MenuText = styled.div(({ textColor, theme }) => ({
+  ...getSharedStyles(textColor, theme),
+  fontWeight: theme.fontWeights.medium
+}));
+const Nav = styled.nav({
+  display: "flex",
+  alignItems: "center"
+});
+const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  MenuTrigger,
+  {
+    menuType,
+    name: menuItem.name,
+    "aria-label": menuItem.ariaLabel,
+    menuData: menuItem.items,
+    trigger: menuItem.trigger,
+    layer,
+    ...themeColorObject
+  }
+) }, menuItem.key ?? menuItem.name);
+const renderMenuLink = (menuItem, themeColorObject) => {
+  const linkProps = {
+    href: menuItem.href,
+    to: menuItem.to,
+    as: menuItem.as,
+    target: menuItem.openInNew ? "_blank" : void 0
+  };
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(MenuLink, { ...linkProps, ...themeColorObject, children: [
+    menuItem.name,
+    menuItem.openInNew && /* @__PURE__ */ jsx(Icon, { size: "x2", icon: "openInNew" })
+  ] }) }, menuItem.key ?? menuItem.name);
+};
+const renderCustom = (menuItem, _themeColorObject, layer) => /* @__PURE__ */ jsx("div", { children: menuItem.render({ size: "medium", layer }) }, menuItem.key ?? menuItem.name);
+const renderText = (menuItem, themeColorObject) => /* @__PURE__ */ jsx(MenuText, { ...themeColorObject, children: menuItem.name }, menuItem.key ?? menuItem.name);
+const getRenderFunction = (menuItem) => {
+  if (menuItem.items) {
+    return renderMenuTrigger;
+  }
+  if (menuItem.href || menuItem.to) {
+    return renderMenuLink;
+  }
+  if (menuItem.render) {
+    return renderCustom;
+  }
+  return renderText;
+};
+const renderMenuItem = (menuItem, themeColorObject, layer, menuType) => getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);
+const BaseDesktopMenu = React__default.forwardRef(
+  ({ menuData, menuType, themeColorObject, ...props }, ref) => /* @__PURE__ */ jsx(Nav, { ...props, ref, children: menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)) })
+);
+const DesktopMenu = styled(BaseDesktopMenu)({
+  "& > div": {
+    "&:not(:last-of-type)": {
+      marginRight: "8px"
+    }
+  }
+});
+export {
+  DesktopMenu as default
+};
+//# sourceMappingURL=DesktopMenu.js.map

package/dist/esm/BrandedNavBar/DesktopMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopMenu.js","sources":["../../../src/BrandedNavBar/DesktopMenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport type { CSSObject } from \"styled-components\";\nimport { Icon } from \"../Icon\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport MenuTrigger from \"./MenuTrigger\";\nimport type { MenuType } from \"./MenuTrigger\";\n\nconst getSharedStyles = (color, theme): CSSObject => {\n  return {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.half,\n    color: theme.colors[color] || color,\n    textDecoration: \"none\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    verticalAlign: \"middle\",\n    lineHeight: theme.lineHeights.base,\n    fontSize: `${theme.fontSizes.base}`,\n    padding: `${theme.space.x1} ${theme.space.x2}`,\n    borderRadius: theme.radii.medium,\n  };\n};\n\ntype MenuLinkProps = {\n  color?: string;\n  hoverColor?: string;\n  hoverBackground?: string;\n  theme?: DefaultNDSThemeType;\n};\n\nconst MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }: MenuLinkProps) => ({\n  ...getSharedStyles(color, theme),\n  fontWeight: theme.fontWeights.medium,\n  transition: \".2s\",\n  \"&:hover, &:focus\": {\n    outline: \"none\",\n    color: theme.colors[hoverColor] || hoverColor,\n    backgroundColor: theme.colors[hoverBackground] || hoverBackground,\n    cursor: \"pointer\",\n  },\n  \"&:disabled\": {\n    opacity: \".5\",\n  },\n  \"&:focus\": {\n    boxShadow: theme.shadows.focus,\n  },\n}));\n\ntype MenuTextProps = {\n  textColor?: string;\n  theme?: DefaultNDSThemeType;\n};\n\nconst MenuText = styled.div(({ textColor, theme }: MenuTextProps) => ({\n  ...getSharedStyles(textColor, theme),\n  fontWeight: theme.fontWeights.medium,\n}));\n\nconst Nav = styled.nav({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nconst renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (\n  <div key={menuItem.key ?? menuItem.name}>\n    <MenuTrigger\n      menuType={menuType}\n      name={menuItem.name}\n      aria-label={menuItem.ariaLabel}\n      menuData={menuItem.items}\n      trigger={menuItem.trigger}\n      layer={layer}\n      {...themeColorObject}\n    />\n  </div>\n);\n\nconst renderMenuLink = (menuItem, themeColorObject) => {\n  const linkProps = {\n    href: menuItem.href,\n    to: menuItem.to,\n    as: menuItem.as,\n    target: menuItem.openInNew ? \"_blank\" : undefined,\n  };\n\n  return (\n    <div key={menuItem.key ?? menuItem.name}>\n      <MenuLink {...linkProps} {...themeColorObject}>\n        {menuItem.name}\n        {menuItem.openInNew && <Icon size=\"x2\" icon=\"openInNew\" />}\n      </MenuLink>\n    </div>\n  );\n};\n\nconst renderCustom = (menuItem, _themeColorObject, layer) => (\n  <div key={menuItem.key ?? menuItem.name}>{menuItem.render({ size: \"medium\", layer })}</div>\n);\n\nconst renderText = (menuItem, themeColorObject) => (\n  <MenuText key={menuItem.key ?? menuItem.name} {...themeColorObject}>\n    {menuItem.name}\n  </MenuText>\n);\n\nconst getRenderFunction = (menuItem) => {\n  if (menuItem.items) {\n    return renderMenuTrigger;\n  }\n\n  if (menuItem.href || menuItem.to) {\n    return renderMenuLink;\n  }\n\n  if (menuItem.render) {\n    return renderCustom;\n  }\n\n  return renderText;\n};\n\nconst renderMenuItem = (menuItem, themeColorObject, layer, menuType) =>\n  getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type DesktopMenuProps = {\n  menuData: any[];\n  menuType: MenuType;\n  themeColorObject: any;\n};\n\nconst BaseDesktopMenu = React.forwardRef<HTMLElement, DesktopMenuProps>(\n  ({ menuData, menuType, themeColorObject, ...props }, ref) => (\n    <Nav {...props} ref={ref}>\n      {menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType))}\n    </Nav>\n  )\n);\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nconst DesktopMenu = styled(BaseDesktopMenu)({\n  \"& > div\": {\n    \"&:not(:last-of-type)\": {\n      marginRight: \"8px\",\n    },\n  },\n});\n\nexport default DesktopMenu;\n"],"names":["React"],"mappings":"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"}

package/dist/esm/BrandedNavBar/MenuTrigger.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import NavBarDropdownMenu from "./NavBarDropdownMenu.js";
+import SubMenuTrigger from "./SubMenuTrigger.js";
+import renderSubMenuItems from "./renderSubMenuItems.js";
+import MenuTriggerButton from "./MenuTriggerButton.js";
+const MenuTrigger = ({
+  menuData,
+  name,
+  color,
+  hoverColor,
+  hoverBackground,
+  "aria-label": ariaLabel,
+  trigger,
+  layer,
+  menuType,
+  ...props
+}) => {
+  let dropdownMinWidth = "auto";
+  const setDropdownMinWidth = (popperData) => {
+    dropdownMinWidth = `${popperData.instance.reference.clientWidth}px`;
+    return popperData;
+  };
+  const triggerProps = {
+    color,
+    hoverColor,
+    hoverBackground,
+    name,
+    "aria-label": ariaLabel
+  };
+  return /* @__PURE__ */ jsx(
+    NavBarDropdownMenu,
+    {
+      ...props,
+      placement: "bottom-start",
+      modifiers: {
+        flip: { behavior: ["bottom"] },
+        setPopperWidth: {
+          enabled: true,
+          fn: setDropdownMinWidth
+        },
+        preventOverflow: {
+          enabled: true,
+          padding: 8,
+          boundariesElement: "viewport"
+        }
+      },
+      trigger: () => {
+        const defaultRender = () => /* @__PURE__ */ jsx(MenuTriggerButton, { ...triggerProps });
+        return trigger ? trigger({ size: "medium", defaultRender, layer }) : defaultRender();
+      },
+      children: ({ closeMenu }) => /* @__PURE__ */ jsx(
+        "ul",
+        {
+          style: {
+            listStyle: "none",
+            margin: "0",
+            padding: "0",
+            minWidth: dropdownMinWidth
+          },
+          children: renderSubMenuItems(
+            menuData,
+            (e) => {
+              closeMenu(e);
+              e.stopPropagation();
+            },
+            SubMenuTrigger,
+            layer + 1,
+            menuType
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  MenuTrigger as default
+};
+//# sourceMappingURL=MenuTrigger.js.map

package/dist/esm/BrandedNavBar/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.js","sources":["../../../src/BrandedNavBar/MenuTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport NavBarDropdownMenu from \"./NavBarDropdownMenu\";\nimport SubMenuTrigger from \"./SubMenuTrigger\";\nimport renderSubMenuItems from \"./renderSubMenuItems\";\nimport MenuTriggerButton from \"./MenuTriggerButton\";\nimport { TriggerFunctionProps } from \"./TriggerFunctionProps\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type MenuType = \"primary\" | \"secondary\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type MenuTriggerProps = {\n  name?: string;\n  \"aria-label\"?: string;\n  color?: string;\n  hoverColor?: string;\n  hoverBackground?: string;\n  menuData?: any[];\n  trigger?: (props: TriggerFunctionProps) => React.ReactNode;\n  layer: number;\n  menuType: MenuType;\n};\n\nconst MenuTrigger = ({\n  menuData,\n  name,\n  color,\n  hoverColor,\n  hoverBackground,\n  \"aria-label\": ariaLabel,\n  trigger,\n  layer,\n  menuType,\n  ...props\n}: MenuTriggerProps) => {\n  let dropdownMinWidth = \"auto\";\n  const setDropdownMinWidth = (popperData) => {\n    // Popper.js throws an error if popperData is not returned from this fn\n    dropdownMinWidth = `${popperData.instance.reference.clientWidth}px`;\n    return popperData;\n  };\n  const triggerProps = {\n    color,\n    hoverColor,\n    hoverBackground,\n    name,\n    \"aria-label\": ariaLabel,\n  };\n  return (\n    <NavBarDropdownMenu\n      {...props}\n      placement=\"bottom-start\"\n      modifiers={{\n        flip: { behavior: [\"bottom\"] },\n        setPopperWidth: {\n          enabled: true,\n          fn: setDropdownMinWidth,\n        },\n        preventOverflow: {\n          enabled: true,\n          padding: 8,\n          boundariesElement: \"viewport\",\n        },\n      }}\n      trigger={() => {\n        const defaultRender = () => <MenuTriggerButton {...triggerProps} />;\n        return trigger ? trigger({ size: \"medium\", defaultRender, layer }) : defaultRender();\n      }}\n    >\n      {({ closeMenu }) => (\n        <ul\n          style={{\n            listStyle: \"none\",\n            margin: \"0\",\n            padding: \"0\",\n            minWidth: dropdownMinWidth,\n          }}\n        >\n          {renderSubMenuItems(\n            menuData,\n            (e) => {\n              closeMenu(e);\n              e.stopPropagation();\n            },\n            SubMenuTrigger,\n            layer + 1,\n            menuType\n          )}\n        </ul>\n      )}\n    </NavBarDropdownMenu>\n  );\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default MenuTrigger;\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,MAAI,mBAAmB;AACvB,QAAM,sBAAsB,CAAC,eAAe;AAE1C,uBAAmB,GAAG,WAAW,SAAS,UAAU,WAAW;AAC/D,WAAO;AAAA,EACT;AACA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAAA;AAEhB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,WAAW;AAAA,QACT,MAAM,EAAE,UAAU,CAAC,QAAQ,EAAA;AAAA,QAC3B,gBAAgB;AAAA,UACd,SAAS;AAAA,UACT,IAAI;AAAA,QAAA;AAAA,QAEN,iBAAiB;AAAA,UACf,SAAS;AAAA,UACT,SAAS;AAAA,UACT,mBAAmB;AAAA,QAAA;AAAA,MACrB;AAAA,MAEF,SAAS,MAAM;AACb,cAAM,gBAAgB,MAAM,oBAAC,mBAAA,EAAmB,GAAG,aAAA,CAAc;AACjE,eAAO,UAAU,QAAQ,EAAE,MAAM,UAAU,eAAe,OAAO,IAAI,cAAA;AAAA,MACvE;AAAA,MAEC,UAAA,CAAC,EAAE,UAAA,MACF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,UAGX,UAAA;AAAA,YACC;AAAA,YACA,CAAC,MAAM;AACL,wBAAU,CAAC;AACX,gBAAE,gBAAA;AAAA,YACJ;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;"}

package/dist/esm/BrandedNavBar/MenuTriggerButton.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import { themeGet } from "../node_modules/.pnpm/@styled-system_theme-get@5.1.2/node_modules/@styled-system/theme-get/dist/index.esm.js";
+import Icon from "../Icon/Icon.js";
+const StyledButton = styled.button(
+  ({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    fontWeight: theme.fontWeights.medium,
+    color: theme.colors[color] || color,
+    border: "none",
+    backgroundColor: "transparent",
+    textDecoration: "none",
+    lineHeight: theme.lineHeights.base,
+    transition: "background-color .2s",
+    fontSize: `${theme.fontSizes.base}`,
+    padding: `${theme.space.x1} 28px ${theme.space.x1} ${theme.space.x2}`,
+    borderRadius: theme.radii.medium,
+    "&:hover, &:focus": {
+      outline: "none",
+      color: theme.colors[hoverColor] || hoverColor,
+      backgroundColor: theme.colors[hoverBackground] || hoverBackground,
+      cursor: "pointer"
+    },
+    "&:focus": {
+      boxShadow: theme.shadows.focus
+    },
+    "&:disabled": {
+      opacity: ".5"
+    }
+  })
+);
+const MenuTriggerButton = React__default.forwardRef(
+  ({ name, color, hoverColor, hoverBackground, ...props }, ref) => /* @__PURE__ */ jsxs(StyledButton, { color, hoverColor, hoverBackground, ref, ...props, children: [
+    name,
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        style: {
+          position: "absolute",
+          top: "52%",
+          transform: "translateY(-50%)",
+          right: "8px"
+        },
+        icon: "downArrow",
+        color: themeGet(`colors.${color}`, color)(color),
+        size: "20px",
+        p: "2px"
+      }
+    )
+  ] })
+);
+MenuTriggerButton.displayName = "MenuTriggerButton";
+export {
+  MenuTriggerButton as default
+};
+//# sourceMappingURL=MenuTriggerButton.js.map

package/dist/esm/BrandedNavBar/MenuTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerButton.js","sources":["../../../src/BrandedNavBar/MenuTriggerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport { Icon } from \"../Icon\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\ntype StyledButtonProps = React.ComponentPropsWithRef<\"button\"> & {\n  color?: string;\n  hoverColor?: string;\n  hoverBackground?: string;\n  theme?: DefaultNDSThemeType;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>(\n  ({ color = \"white\", hoverColor = \"lightBlue\", hoverBackground = \"black\", theme }) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    fontWeight: theme.fontWeights.medium,\n    color: theme.colors[color] || color,\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    textDecoration: \"none\",\n    lineHeight: theme.lineHeights.base,\n    transition: \"background-color .2s\",\n    fontSize: `${theme.fontSizes.base}`,\n    padding: `${theme.space.x1} 28px ${theme.space.x1} ${theme.space.x2}`,\n    borderRadius: theme.radii.medium,\n    \"&:hover, &:focus\": {\n      outline: \"none\",\n      color: theme.colors[hoverColor] || hoverColor,\n      backgroundColor: theme.colors[hoverBackground] || hoverBackground,\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      boxShadow: theme.shadows.focus,\n    },\n    \"&:disabled\": {\n      opacity: \".5\",\n    },\n  })\n);\n\ntype MenuTriggerButtonProps = React.ComponentPropsWithRef<\"button\"> & {\n  name?: React.ReactNode;\n  color?: string;\n  hoverColor?: string;\n  hoverBackground?: string;\n};\n\nconst MenuTriggerButton = React.forwardRef<HTMLButtonElement, MenuTriggerButtonProps>(\n  ({ name, color, hoverColor, hoverBackground, ...props }: MenuTriggerButtonProps, ref) => (\n    <StyledButton color={color} hoverColor={hoverColor} hoverBackground={hoverBackground} ref={ref} {...props}>\n      {name}\n      <Icon\n        style={{\n          position: \"absolute\",\n          top: \"52%\",\n          transform: \"translateY(-50%)\",\n          right: \"8px\",\n        }}\n        icon=\"downArrow\"\n        color={themeGet(`colors.${color}`, color)(color)}\n        size=\"20px\"\n        p=\"2px\"\n      />\n    </StyledButton>\n  )\n);\n\nMenuTriggerButton.displayName = \"MenuTriggerButton\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default MenuTriggerButton;\n"],"names":["React"],"mappings":";;;;;AAaA,MAAM,eAAe,OAAO;AAAA,EAC1B,CAAC,EAAE,QAAQ,SAAS,aAAa,aAAa,kBAAkB,SAAS,aAAa;AAAA,IACpF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY,MAAM,YAAY;AAAA,IAC9B,OAAO,MAAM,OAAO,KAAK,KAAK;AAAA,IAC9B,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,YAAY,MAAM,YAAY;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU,GAAG,MAAM,UAAU,IAAI;AAAA,IACjC,SAAS,GAAG,MAAM,MAAM,EAAE,SAAS,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IACnE,cAAc,MAAM,MAAM;AAAA,IAC1B,oBAAoB;AAAA,MAClB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO,UAAU,KAAK;AAAA,MACnC,iBAAiB,MAAM,OAAO,eAAe,KAAK;AAAA,MAClD,QAAQ;AAAA,IAAA;AAAA,IAEV,WAAW;AAAA,MACT,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE3B,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AASA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,MAAM,OAAO,YAAY,iBAAiB,GAAG,MAAA,GAAiC,6BAC9E,cAAA,EAAa,OAAc,YAAwB,iBAAkC,KAAW,GAAG,OACjG,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,WAAW;AAAA,UACX,OAAO;AAAA,QAAA;AAAA,QAET,MAAK;AAAA,QACL,OAAO,SAAS,UAAU,KAAK,IAAI,KAAK,EAAE,KAAK;AAAA,QAC/C,MAAK;AAAA,QACL,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,EAAA,CACF;AAEJ;AAEA,kBAAkB,cAAc;"}