@cerberus-design/react 0.6.1-next-bda4df1 → 0.6.1-next-f9a7124

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -17,6 +17,7 @@ import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
@@ -83,6 +84,58 @@ declare function defineIcons(icons: DefinedIcons): DefinedIcons;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX_2.Element;
+export { FeatureFlag }
+export { FeatureFlag as FeatureFlag_alias_1 }
+
+declare interface FeatureFlagProps {
+    flag: string;
+}
+export { FeatureFlagProps }
+export { FeatureFlagProps as FeatureFlagProps_alias_1 }
+
+declare interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+export { FeatureFlagProviderProps }
+export { FeatureFlagProviderProps as FeatureFlagProviderProps_alias_1 }
+
+/**
+ * Provides feature flags to the application.
+ * @param flags - The flags data for the provider.
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlagProvider flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlagProvider>
+ * ```
+ */
+declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): JSX_2.Element;
+export { FeatureFlags }
+export { FeatureFlags as FeatureFlags_alias_1 }
+
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+declare interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export { FeatureFlagValue }
+export { FeatureFlagValue as FeatureFlagValue_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -318,6 +371,26 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+export { Portal }
+export { Portal as Portal_alias_1 }
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+declare interface PortalProps {
+    container?: Element | DocumentFragment;
+    key?: null | string;
+}
+export { PortalProps }
+export { PortalProps as PortalProps_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
@@ -587,6 +660,10 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+declare function useFeatureFlags(key: string): boolean;
+export { useFeatureFlags }
+export { useFeatureFlags as useFeatureFlags_alias_1 }
+
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }

package/build/legacy/chunk-4CAT3FHV.js

@@ -0,0 +1,11 @@
+// src/components/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal(props) {
+  const container = props.container || document.body;
+  return createPortal(props.children, container, props.key);
+}
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-4CAT3FHV.js.map

package/build/legacy/chunk-4CAT3FHV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  container?: Element | DocumentFragment\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/legacy/{chunk-5XNLWIZO.js → chunk-EVEEQRH6.js}

@@ -9,7 +9,7 @@ import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
-  const palette = (props == null ? void 0 : props.palette) ?? "neutral";
+  const palette = (props == null ? void 0 : props.palette) ?? "page";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
@@ -55,4 +55,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-5XNLWIZO.js.map
+//# sourceMappingURL=chunk-EVEEQRH6.js.map

package/build/legacy/chunk-EVEEQRH6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'page'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/legacy/chunk-JDRWQFCE.js

@@ -0,0 +1,22 @@
+// src/context/feature-flags.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FeatureFlagContext = createContext(null);
+function FeatureFlags(props) {
+  return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+}
+function useFeatureFlags(key) {
+  const context = useContext(FeatureFlagContext);
+  if (context === null) {
+    throw new Error(
+      "useFeatureFlag must be used within a FeatureFlags Provider"
+    );
+  }
+  return context[key] ?? false;
+}
+
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=chunk-JDRWQFCE.js.map

package/build/legacy/chunk-JDRWQFCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlagProvider flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlagProvider>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}

package/build/legacy/{chunk-HE3HFKYU.js → chunk-JJGZRBIR.js}

@@ -32,7 +32,7 @@ function Label(props) {
           "span",
           {
             className: css({
-              color: "neutral.text.100",
+              color: "page.text.100",
               fontSize: "inherit"
             }),
             children: "(required)"
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-HE3HFKYU.js.map
+//# sourceMappingURL=chunk-JJGZRBIR.js.map

package/build/legacy/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-G2QMBSK5.js → chunk-PMCYXRAH.js}

@@ -32,7 +32,7 @@ function getPosition(position) {
 }
 var navListStyles = vstack({
   alignItems: "flex-start",
-  bgColor: "neutral.surface.100",
+  bgColor: "page.surface.100",
   boxShadow: "lg",
   gap: "2",
   opacity: "0",
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-G2QMBSK5.js.map
+//# sourceMappingURL=chunk-PMCYXRAH.js.map

package/build/legacy/chunk-PMCYXRAH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/legacy/chunk-ZVNBWU4J.js

@@ -0,0 +1,18 @@
+import {
+  useFeatureFlags
+} from "./chunk-JDRWQFCE.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/FeatureFlag.tsx
+import { jsx } from "react/jsx-runtime";
+function FeatureFlag(props) {
+  const showContent = useFeatureFlags(props.flag);
+  return /* @__PURE__ */ jsx(Show, { when: showContent, children: props.children });
+}
+
+export {
+  FeatureFlag
+};
+//# sourceMappingURL=chunk-ZVNBWU4J.js.map

package/build/legacy/chunk-ZVNBWU4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FeatureFlag.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../context/feature-flags'\nimport { Show } from './Show'\n\nexport interface FeatureFlagProps {\n  flag: string\n}\n\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n  const showContent = useFeatureFlags(props.flag)\n  return <Show when={showContent}>{props.children}</Show>\n}\n"],"mappings":";;;;;;;;AAYS;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,oBAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":[]}

package/build/legacy/components/FeatureFlag.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlag
+} from "../chunk-ZVNBWU4J.js";
+import "../chunk-JDRWQFCE.js";
+import "../chunk-4O4QFF4S.js";
+export {
+  FeatureFlag
+};
+//# sourceMappingURL=FeatureFlag.js.map

package/build/legacy/components/FeatureFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Label.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Label
-} from "../chunk-HE3HFKYU.js";
+} from "../chunk-JJGZRBIR.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/legacy/components/NavMenuList.js

@@ -2,7 +2,7 @@
 import {
   NavMenuList,
   getPosition
-} from "../chunk-G2QMBSK5.js";
+} from "../chunk-PMCYXRAH.js";
 import "../chunk-KJUCHZHV.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/legacy/components/Portal.js

@@ -0,0 +1,7 @@
+import {
+  Portal
+} from "../chunk-4CAT3FHV.js";
+export {
+  Portal
+};
+//# sourceMappingURL=Portal.js.map

package/build/legacy/components/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-5XNLWIZO.js";
+} from "../chunk-EVEEQRH6.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/legacy/context/feature-flags.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "../chunk-JDRWQFCE.js";
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=feature-flags.js.map

package/build/legacy/context/feature-flags.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/index.js

@@ -1,3 +1,15 @@
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-734PGVLT.js";
+import {
+  NavMenuTrigger
+} from "./chunk-RPZAPUCF.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-WE3JNSNO.js";
@@ -12,16 +24,17 @@ import {
 } from "./chunk-67S42J4B.js";
 import {
   Tag
-} from "./chunk-5XNLWIZO.js";
-import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
-import {
-  Toggle
-} from "./chunk-734PGVLT.js";
+} from "./chunk-EVEEQRH6.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
+import {
+  FeatureFlag
+} from "./chunk-ZVNBWU4J.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-JDRWQFCE.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -33,7 +46,7 @@ import {
 } from "./chunk-X4YQ27D5.js";
 import {
   Label
-} from "./chunk-HE3HFKYU.js";
+} from "./chunk-JJGZRBIR.js";
 import {
   Field,
   useFieldContext
@@ -44,10 +57,7 @@ import {
 import {
   NavMenuList,
   getPosition
-} from "./chunk-G2QMBSK5.js";
-import {
-  NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
+} from "./chunk-PMCYXRAH.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -85,6 +95,8 @@ import {
 export {
   $cerberusIcons,
   Button,
+  FeatureFlag,
+  FeatureFlags,
   Field,
   FieldMessage,
   IconButton,
@@ -95,6 +107,7 @@ export {
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Portal,
   Radio,
   Show,
   THEME_KEY,
@@ -110,6 +123,7 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  useFeatureFlags,
   useFieldContext,
   useNavMenuContext,
   useTabsContext,

package/build/modern/_tsup-dts-rollup.d.ts

@@ -17,6 +17,7 @@ import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
@@ -83,6 +84,58 @@ declare function defineIcons(icons: DefinedIcons): DefinedIcons;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX_2.Element;
+export { FeatureFlag }
+export { FeatureFlag as FeatureFlag_alias_1 }
+
+declare interface FeatureFlagProps {
+    flag: string;
+}
+export { FeatureFlagProps }
+export { FeatureFlagProps as FeatureFlagProps_alias_1 }
+
+declare interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+export { FeatureFlagProviderProps }
+export { FeatureFlagProviderProps as FeatureFlagProviderProps_alias_1 }
+
+/**
+ * Provides feature flags to the application.
+ * @param flags - The flags data for the provider.
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlagProvider flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlagProvider>
+ * ```
+ */
+declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): JSX_2.Element;
+export { FeatureFlags }
+export { FeatureFlags as FeatureFlags_alias_1 }
+
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+declare interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export { FeatureFlagValue }
+export { FeatureFlagValue as FeatureFlagValue_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -318,6 +371,26 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+export { Portal }
+export { Portal as Portal_alias_1 }
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+declare interface PortalProps {
+    container?: Element | DocumentFragment;
+    key?: null | string;
+}
+export { PortalProps }
+export { PortalProps as PortalProps_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
@@ -587,6 +660,10 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+declare function useFeatureFlags(key: string): boolean;
+export { useFeatureFlags }
+export { useFeatureFlags as useFeatureFlags_alias_1 }
+
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }

package/build/modern/chunk-4CAT3FHV.js

@@ -0,0 +1,11 @@
+// src/components/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal(props) {
+  const container = props.container || document.body;
+  return createPortal(props.children, container, props.key);
+}
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-4CAT3FHV.js.map

package/build/modern/chunk-4CAT3FHV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  container?: Element | DocumentFragment\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/modern/chunk-JDRWQFCE.js

@@ -0,0 +1,22 @@
+// src/context/feature-flags.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FeatureFlagContext = createContext(null);
+function FeatureFlags(props) {
+  return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+}
+function useFeatureFlags(key) {
+  const context = useContext(FeatureFlagContext);
+  if (context === null) {
+    throw new Error(
+      "useFeatureFlag must be used within a FeatureFlags Provider"
+    );
+  }
+  return context[key] ?? false;
+}
+
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=chunk-JDRWQFCE.js.map

package/build/modern/chunk-JDRWQFCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlagProvider flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlagProvider>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}

package/build/modern/{chunk-HE3HFKYU.js → chunk-JJGZRBIR.js}

@@ -32,7 +32,7 @@ function Label(props) {
           "span",
           {
             className: css({
-              color: "neutral.text.100",
+              color: "page.text.100",
               fontSize: "inherit"
             }),
             children: "(required)"
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-HE3HFKYU.js.map
+//# sourceMappingURL=chunk-JJGZRBIR.js.map

package/build/modern/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-G2QMBSK5.js → chunk-PMCYXRAH.js}

@@ -32,7 +32,7 @@ function getPosition(position) {
 }
 var navListStyles = vstack({
   alignItems: "flex-start",
-  bgColor: "neutral.surface.100",
+  bgColor: "page.surface.100",
   boxShadow: "lg",
   gap: "2",
   opacity: "0",
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-G2QMBSK5.js.map
+//# sourceMappingURL=chunk-PMCYXRAH.js.map

package/build/modern/chunk-PMCYXRAH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-SLIOCQBZ.js → chunk-Z6IWNVPN.js}

@@ -9,7 +9,7 @@ import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
-  const palette = props?.palette ?? "neutral";
+  const palette = props?.palette ?? "page";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
@@ -55,4 +55,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-SLIOCQBZ.js.map
+//# sourceMappingURL=chunk-Z6IWNVPN.js.map

package/build/modern/chunk-Z6IWNVPN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'page'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/modern/chunk-ZVNBWU4J.js

@@ -0,0 +1,18 @@
+import {
+  useFeatureFlags
+} from "./chunk-JDRWQFCE.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/FeatureFlag.tsx
+import { jsx } from "react/jsx-runtime";
+function FeatureFlag(props) {
+  const showContent = useFeatureFlags(props.flag);
+  return /* @__PURE__ */ jsx(Show, { when: showContent, children: props.children });
+}
+
+export {
+  FeatureFlag
+};
+//# sourceMappingURL=chunk-ZVNBWU4J.js.map

package/build/modern/chunk-ZVNBWU4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FeatureFlag.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../context/feature-flags'\nimport { Show } from './Show'\n\nexport interface FeatureFlagProps {\n  flag: string\n}\n\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n  const showContent = useFeatureFlags(props.flag)\n  return <Show when={showContent}>{props.children}</Show>\n}\n"],"mappings":";;;;;;;;AAYS;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,oBAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":[]}

package/build/modern/components/FeatureFlag.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlag
+} from "../chunk-ZVNBWU4J.js";
+import "../chunk-JDRWQFCE.js";
+import "../chunk-4O4QFF4S.js";
+export {
+  FeatureFlag
+};
+//# sourceMappingURL=FeatureFlag.js.map

package/build/modern/components/FeatureFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Label.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Label
-} from "../chunk-HE3HFKYU.js";
+} from "../chunk-JJGZRBIR.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/modern/components/NavMenuList.js

@@ -2,7 +2,7 @@
 import {
   NavMenuList,
   getPosition
-} from "../chunk-G2QMBSK5.js";
+} from "../chunk-PMCYXRAH.js";
 import "../chunk-KJUCHZHV.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/modern/components/Portal.js

@@ -0,0 +1,7 @@
+import {
+  Portal
+} from "../chunk-4CAT3FHV.js";
+export {
+  Portal
+};
+//# sourceMappingURL=Portal.js.map

package/build/modern/components/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-SLIOCQBZ.js";
+} from "../chunk-Z6IWNVPN.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/modern/context/feature-flags.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "../chunk-JDRWQFCE.js";
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=feature-flags.js.map

package/build/modern/context/feature-flags.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -1,3 +1,15 @@
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-734PGVLT.js";
+import {
+  NavMenuTrigger
+} from "./chunk-RPZAPUCF.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-WE3JNSNO.js";
@@ -12,16 +24,17 @@ import {
 } from "./chunk-67S42J4B.js";
 import {
   Tag
-} from "./chunk-SLIOCQBZ.js";
-import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
-import {
-  Toggle
-} from "./chunk-734PGVLT.js";
+} from "./chunk-Z6IWNVPN.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
+import {
+  FeatureFlag
+} from "./chunk-ZVNBWU4J.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-JDRWQFCE.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -33,7 +46,7 @@ import {
 } from "./chunk-X4YQ27D5.js";
 import {
   Label
-} from "./chunk-HE3HFKYU.js";
+} from "./chunk-JJGZRBIR.js";
 import {
   Field,
   useFieldContext
@@ -44,10 +57,7 @@ import {
 import {
   NavMenuList,
   getPosition
-} from "./chunk-G2QMBSK5.js";
-import {
-  NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
+} from "./chunk-PMCYXRAH.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -85,6 +95,8 @@ import {
 export {
   $cerberusIcons,
   Button,
+  FeatureFlag,
+  FeatureFlags,
   Field,
   FieldMessage,
   IconButton,
@@ -95,6 +107,7 @@ export {
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Portal,
   Radio,
   Show,
   THEME_KEY,
@@ -110,6 +123,7 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  useFeatureFlags,
   useFieldContext,
   useNavMenuContext,
   useTabsContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.6.1-next-bda4df1",
+  "version": "0.6.1-next-f9a7124",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -18,11 +18,12 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.46.2",
     "@types/react": "^18",
+    "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.6.1-next-bda4df1"
+    "@cerberus-design/styled-system": "0.6.1-next-f9a7124"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FeatureFlag.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+import { useFeatureFlags } from '../context/feature-flags'
+import { Show } from './Show'
+
+export interface FeatureFlagProps {
+  flag: string
+}
+
+export function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {
+  const showContent = useFeatureFlags(props.flag)
+  return <Show when={showContent}>{props.children}</Show>
+}

package/src/components/Label.tsx

@@ -51,7 +51,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'neutral.text.100',
+            color: 'page.text.100',
             fontSize: 'inherit',
           })}
         >

package/src/components/NavMenuList.tsx

@@ -37,7 +37,7 @@ export function getPosition(position: Positions): GetPositionResult {
 
 const navListStyles = vstack({
   alignItems: 'flex-start',
-  bgColor: 'neutral.surface.100',
+  bgColor: 'page.surface.100',
   boxShadow: 'lg',
   gap: '2',
   opacity: '0',

package/src/components/Portal.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react'
+import { createPortal } from 'react-dom'
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+
+export interface PortalProps {
+  container?: Element | DocumentFragment
+  key?: null | string
+}
+
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+export function Portal(props: PropsWithChildren<PortalProps>) {
+  const container = props.container || document.body
+  return createPortal(props.children, container, props.key)
+}

package/src/components/Tag.tsx

@@ -37,7 +37,7 @@ export type TagProps = StaticTagProps | ClickableTagProps
  */
 export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
-  const palette = props?.palette ?? 'neutral'
+  const palette = props?.palette ?? 'page'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
   const closableStyles = isClosable ? closableCss : ''

package/src/context/feature-flags.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { createContext, useContext, type PropsWithChildren } from 'react'
+
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+
+export interface FeatureFlagValue {
+  [key: string]: boolean
+}
+
+const FeatureFlagContext = createContext<FeatureFlagValue | null>(null)
+
+export interface FeatureFlagProviderProps {
+  flags: FeatureFlagValue
+}
+
+/**
+ * Provides feature flags to the application.
+ * @param flags - The flags data for the provider.
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlagProvider flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlagProvider>
+ * ```
+ */
+export function FeatureFlags(
+  props: PropsWithChildren<FeatureFlagProviderProps>,
+) {
+  return (
+    <FeatureFlagContext.Provider value={props.flags}>
+      {props.children}
+    </FeatureFlagContext.Provider>
+  )
+}
+
+export function useFeatureFlags(key: string): boolean {
+  const context = useContext(FeatureFlagContext)
+  if (context === null) {
+    throw new Error(
+      'useFeatureFlag must be used within a FeatureFlags Provider',
+    )
+  }
+  return context[key] ?? false
+}

package/src/index.ts

@@ -7,12 +7,14 @@
 
 export * from './components/Button'
 export * from './components/FieldMessage'
+export * from './components/FeatureFlag'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'
+export * from './components/Portal'
 export * from './components/Radio'
 export * from './components/Tab'
 export * from './components/TabList'
@@ -24,6 +26,7 @@ export * from './components/Show'
 
 // context
 
+export * from './context/feature-flags'
 export * from './context/field'
 export * from './context/navMenu'
 export * from './context/tabs'

package/build/legacy/chunk-5XNLWIZO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/legacy/chunk-G2QMBSK5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'neutral.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/chunk-G2QMBSK5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'neutral.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/chunk-SLIOCQBZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}