@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/{Card-CyCKL-M5.cjs.map → Card-CaOItkgL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Card-CyCKL-M5.cjs","names":["paragraphMixins","Spacing","Title","headingMixins","Color","Spacing","Paragraph","useToggle","ChevronUpIcon","ChevronDownIcon","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Card-CaOItkgL.cjs","names":["paragraphMixins","Spacing","Title","headingMixins","Color","Spacing","Paragraph","useToggle","ChevronUpIcon","ChevronDownIcon","Spacer"],"sources":["../components/Card/Header/Header.tsx","../components/Card/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { headingMixins, paragraphMixins } from 'design-system/mixins/text';\n\nexport interface HeaderProps {\n  children: ReactNode;\n  subtitle?: ReactNode;\n  variant?: 'title' | 'section';\n  actions?: ReactNode;\n  $matchCardV2?: boolean;\n}\n\nexport const HeaderContainer = styled.div<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  &:not(:only-child) {\n    margin: 0px 0px ${Spacing[4]} 0px;\n    ${({ $matchCardV2 }) =>\n      $matchCardV2 &&\n      css`\n        margin-bottom: ${Spacing[1]};\n      `}\n  }\n  ${({ variant }) =>\n    variant === 'section' &&\n    css`\n      border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n    `}\n`;\n\nexport const TitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nexport const Title = styled.h3<Pick<HeaderProps, 'variant' | '$matchCardV2'>>`\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  gap: ${Spacing[2]};\n  ${({ variant }) => {\n    switch (variant) {\n      case 'section':\n        return paragraphMixins.lgBold;\n      case 'title':\n      default:\n        return headingMixins.sm;\n    }\n  }}\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      ${headingMixins.xsm};\n    `}\n`;\n\nexport const ActionsContainer = styled.div`\n  color: ${({ theme }) => theme.color.text.secondary};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst FullDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n\n  /* Use negative margin to bleed the divider out of the grid. */\n  margin-left: -${Spacing[5]};\n  margin-right: -${Spacing[5]};\n`;\n\nconst Header = ({\n  children,\n  variant,\n  actions,\n  subtitle,\n  $matchCardV2,\n  ...elemProps\n}: HeaderProps & ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <>\n      <HeaderContainer variant={variant} {...elemProps} $matchCardV2={$matchCardV2}>\n        <TitleContainer>\n          <Title variant={variant} $matchCardV2={$matchCardV2}>\n            {children}\n          </Title>\n          {subtitle}\n        </TitleContainer>\n        <ActionsContainer>{actions}</ActionsContainer>\n      </HeaderContainer>\n      {$matchCardV2 && <FullDivider />}\n    </>\n  );\n};\n\nexport const Root = Header;\n\nexport default Header;\n","import type {\n  ComponentPropsWithoutRef,\n  FC,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { ChevronDownIcon, ChevronUpIcon } from '@persona/icons';\nimport Header, { type HeaderProps } from 'design-system/components/Card/Header';\nimport Spacer from 'design-system/components/Spacer';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { BASE } from 'design-system/variables/spacing';\n\nexport interface CardProps {\n  elevated?: boolean;\n  $matchCardV2?: boolean;\n}\n\n/**\n * @deprecated Use CardV2 instead\n */\nconst Card = styled('div')<CardProps>`\n  border-radius: ${({ theme }) => {\n    return theme.card.borderRadius;\n  }};\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ${Spacing[4]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  font-family: ${({ theme }) => theme.text.fontFamily.base};\n  ${({ elevated }) =>\n    elevated &&\n    css`\n      box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n    `}\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      margin-bottom: 0;\n    `}\n`;\n\n/**\n * To be used within cards. Provides padding and basic layout. Should not be\n * used if card's contents are edge-to-edge with no padding.\n */\nconst Body = styled('section')<{ gap?: number; padding?: Spacing; $matchCardV2?: boolean }>`\n  margin: 0;\n  padding: ${({ padding }) => padding ?? Spacing[5]};\n  display: grid;\n  grid-auto-flow: row;\n  grid-gap: ${({ gap }) => (gap != null ? gap : BASE)}px;\n  /**\n    * Prevent grid blowout\n    * https://css-tricks.com/preventing-a-grid-blowout/\n    */\n  grid-template-columns: minmax(0, 1fr);\n\n  ${({ $matchCardV2 }) =>\n    $matchCardV2 &&\n    css`\n      padding: ${Spacing[4]} ${Spacing[5]};\n      grid-gap: ${Spacing[3]};\n    `}\n`;\n\nconst IconContainer = styled('div')`\n  margin-right: ${Spacing[3]};\n  display: flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst ImageWrapper = styled('div')<{ height: number }>`\n  width: 100%;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.card.borderRadius} ${({ theme }) => theme.card.borderRadius}\n    0px 0px;\n\n  ${({ height }) => {\n    return css`\n      height: ${height}px;\n    `;\n  }};\n\n  > img,\n  svg {\n    width: 100%;\n    border-radius: ${({ theme }) => theme.card.borderRadius}\n      ${({ theme }) => theme.card.borderRadius} 0px 0px;\n  }\n`;\n\ninterface TitleBaseProps {\n  icon?: ReactElement;\n}\n\ninterface TitleProps\n  extends\n    TitleBaseProps,\n    Pick<HeaderProps, 'actions' | 'subtitle'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {\n  $matchCardV2?: boolean;\n}\n\n/**\n * Label to be used within cards. Note that some cards lead with a Title while\n * some others lead with a Subtitle (see below).\n */\nconst Title: FC<TitleProps> = ({ icon, children, ...elemProps }) => (\n  <Header variant='title' {...elemProps}>\n    {icon != null && <IconContainer>{icon}</IconContainer>}\n    {children}\n  </Header>\n);\n\n/**\n * Smaller label to be used within cards.\n */\nconst Subtitle = styled(Paragraph).attrs(() => ({ size: 'md' }))`\n  color: ${({ theme }) => theme.color.text.tertiary};\n`;\n\nexport interface SectionProps\n  extends\n    Pick<HeaderProps, 'subtitle' | 'actions'>,\n    Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}\n\n/**\n * Header for section headers within a Card\n */\nconst SectionHeader = ({ children, ...elemProps }: SectionProps) => (\n  <Header variant='section' {...elemProps}>\n    {children}\n  </Header>\n);\n\n/**\n * Wrapper for a full-width image to be used at the top of a card.\n */\n\ninterface ImageProps {\n  height: number;\n  children: ReactNode;\n}\n\nconst Image: FC<ImageProps> = ({ height, children, ...elemProps }) => (\n  <ImageWrapper {...elemProps} height={height}>\n    {children}\n  </ImageWrapper>\n);\n\ninterface CollapsibleSectionProps {\n  id?: string;\n  defaultExpanded?: boolean;\n  title: ReactNode;\n}\n\nconst CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>> = ({\n  id,\n  defaultExpanded,\n  title,\n  children,\n}) => {\n  const [isOpen, { toggle }] = useToggle(defaultExpanded);\n\n  return (\n    <section>\n      <div id={id} onClick={toggle}>\n        <Header variant='section'>\n          <HeaderIcon>\n            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            <Spacer width={0.5} height={0} />\n          </HeaderIcon>\n          {title}\n        </Header>\n      </div>\n      <div>\n        {isOpen && (\n          <>\n            <Spacer height={1} />\n            {children}\n          </>\n        )}\n      </div>\n      <Spacer height={1} />\n    </section>\n  );\n};\n\nconst HeaderIcon = styled.div`\n  display: flex;\n`;\n\nexport default Object.assign(Card, {\n  Title,\n  SectionHeader,\n  Subtitle,\n  Body,\n  Image,\n  CollapsibleSection,\n});\n"],"mappings":"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"}

package/dist/{Card-CcU9cKCd.d.mts → Card-YzGS3nQI.d.mts}

@@ -1,9 +1,9 @@
-import { c as ParagraphProps, u as SpanProps } from "./Text-CnXedFut.mjs";
-import { i as HeaderProps } from "./Header-t1plnZc0.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CPd0r0w2.mjs";
+import { i as HeaderProps } from "./Header-WNGlG541.mjs";
 import { Spacing } from "@persona/design-tokens";
 import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
 
 //#region components/Card/Card.d.ts
@@ -49,4 +49,4 @@ declare const _default: string & _$styled_components0.StyledComponentBase<"div",
 };
 //#endregion
 export { SectionProps as n, _default as r, CardProps as t };
-//# sourceMappingURL=Card-CcU9cKCd.d.mts.map
+//# sourceMappingURL=Card-YzGS3nQI.d.mts.map

package/dist/Card.d.mts

@@ -1,2 +1,2 @@
-import { n as SectionProps, r as _default, t as CardProps } from "./Card-CcU9cKCd.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "./Card-YzGS3nQI.mjs";
 export { CardProps, SectionProps, _default as default };

package/dist/Card2.d.cts

@@ -1,4 +1,4 @@
-import { t as SectionHeading } from "./SectionHeading-DVSXofwK.cjs";
+import { t as SectionHeading } from "./SectionHeading-DZyfNPn0.cjs";
 import { ComponentProps, FC, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 
@@ -63,7 +63,7 @@ declare const _default: FC<{
   fullHeight?: boolean;
 } & {
   children?: ReactNode | undefined;
-}, "children" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "loadingProps" | "empty" | "emptyProps"> & {
+}, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps"> & {
   children?: ReactNode | undefined;
 }> & {
   Section: FC<Pick<{
@@ -86,7 +86,7 @@ declare const _default: FC<{
     fullHeight?: boolean;
   } & {
     children?: ReactNode | undefined;
-  }, "children" | "collapsible" | "defaultCollapsed" | "heading" | "loading" | "loadingProps" | "empty" | "emptyProps">>;
+  }, "children" | "loading" | "heading" | "collapsible" | "defaultCollapsed" | "loadingProps" | "empty" | "emptyProps">>;
   Stacked: FC<{
     children: ReactNode[];
   }>;

package/dist/Card2.d.mts

@@ -1,4 +1,4 @@
-import { t as SectionHeading } from "./SectionHeading-QvAmhVmD.mjs";
+import { t as SectionHeading } from "./SectionHeading-BLDimf5d.mjs";
 import * as _$styled_components0 from "styled-components";
 import { ComponentProps, FC, ReactNode } from "react";
 

package/dist/{Checkbox-D4nv7eNs.cjs → Checkbox-B83WfsOZ.cjs}

@@ -1,16 +1,16 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
 const require_mixins_focus = require("./mixins/focus.cjs");
 require("./variables/transitions.cjs");
-const require_Stack = require("./Stack-BHb3ZB2A.cjs");
-const require_Tooltip = require("./Tooltip-0i_15ysU.cjs");
+const require_Tooltip = require("./Tooltip-vylydKVv.cjs");
 const require_lib_useControlled = require("./lib/useControlled.cjs");
-const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+const require_Stack = require("./Stack-BF-9YjA1.cjs");
+const require_useFormField = require("./useFormField-BpYf3CAW.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
 let lodash = require("lodash");
 //#region components/Checkbox/Checkbox.tsx
@@ -180,4 +180,4 @@ Object.defineProperty(exports, "Checkbox", {
 	}
 });
 
-//# sourceMappingURL=Checkbox-D4nv7eNs.cjs.map
+//# sourceMappingURL=Checkbox-B83WfsOZ.cjs.map

package/dist/{Checkbox-D4nv7eNs.cjs.map → Checkbox-B83WfsOZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-D4nv7eNs.cjs","names":["Stack","isDisabled","Spacing","Color","isHovered","isNotDisabled","isChecked","isIndeterminate","isFocusedVisible","focusStyle","Typography","useFormField","useControlled","InputDashIcon","InputCheckIcon","Tooltip","TextWithDashedUnderline"],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox-B83WfsOZ.cjs","names":["Stack","isDisabled","Spacing","Color","isHovered","isNotDisabled","isChecked","isIndeterminate","isFocusedVisible","focusStyle","Typography","useFormField","useControlled","InputDashIcon","InputCheckIcon","Tooltip","TextWithDashedUnderline"],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/{Checkbox-BWJNAP27.d.mts → Checkbox-Bc2kzl9q.d.mts}

@@ -43,4 +43,4 @@ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value'
 declare const Checkbox: _$react.ForwardRefExoticComponent<CheckboxProps & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { CheckboxProps as n, Checkbox as t };
-//# sourceMappingURL=Checkbox-BWJNAP27.d.mts.map
+//# sourceMappingURL=Checkbox-Bc2kzl9q.d.mts.map

package/dist/{Checkbox-C5bGcb-r.mjs → Checkbox-UWdk4pqb.mjs}

@@ -1,14 +1,14 @@
 import { isChecked, isDisabled, isFocusedVisible, isHovered, isIndeterminate, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
-import { n as Stack } from "./Stack-hwgS2FU1.mjs";
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-T7RQpy_a.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-CDvOu1UN.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { n as Stack } from "./Stack-ckRN7LrP.mjs";
+import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InputCheckIcon, InputDashIcon } from "@persona/icons";
 import { uniqueId } from "lodash";
 //#region components/Checkbox/Checkbox.tsx
@@ -173,4 +173,4 @@ const Checkbox = forwardRef(function Checkbox({ className, disabled, indetermina
 //#endregion
 export { Checkbox as t };
 
-//# sourceMappingURL=Checkbox-C5bGcb-r.mjs.map
+//# sourceMappingURL=Checkbox-UWdk4pqb.mjs.map

package/dist/{Checkbox-C5bGcb-r.mjs.map → Checkbox-UWdk4pqb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-C5bGcb-r.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox-UWdk4pqb.mjs","names":[],"sources":["../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Stack from 'design-system/components/Stack/Stack';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { TextWithDashedUnderline } from 'design-system/components/Tooltip/TextUnderlineTooltip';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport useControlled from 'design-system/lib/useControlled';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast},\n    background-color ${TransitionDuration.Fast},\n    border-color ${TransitionDuration.Fast};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.BackgroundInputDefault};\n\n  svg {\n    color: ${Color.BorderIconInverse};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  ${({ checked }) =>\n    checked &&\n    css`\n      border-color: ${Color.BackgroundInputActive};\n      background: ${Color.BackgroundInputActive};\n\n      &${isDisabled} {\n        border-color: ${Color.BackgroundInputActiveDisabled};\n        background: ${Color.BackgroundInputActiveDisabled};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${Color.TextPrimary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={ref || inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox.d.mts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "./Checkbox-BWJNAP27.mjs";
+import { n as CheckboxProps, t as Checkbox } from "./Checkbox-Bc2kzl9q.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/CheckboxGroupField.d.mts

@@ -1,7 +1,7 @@
-import { n as CheckboxProps } from "./Checkbox-BWJNAP27.mjs";
+import { n as CheckboxProps } from "./Checkbox-Bc2kzl9q.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCheckboxGroupProps } from "react-aria";
 
 //#region components/FormField/CheckboxGroupField.d.ts

package/dist/{Combobox-DjbJYK_u.d.mts → Combobox-DtD1XXaf.d.mts}

@@ -1,5 +1,5 @@
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-Dq9DGH8S.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-WwBJRb0e.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-CdLQDBMN.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CxiQ2o6t.mjs";
 
 //#region components/Combobox/Combobox.d.ts
 type ComboboxProps<T = string> = ComboboxSingleSelectProps<T> | ComboboxMultiSelectProps<T>;
@@ -8,4 +8,4 @@ declare const Combobox: <T = string>(props: ComboboxProps<T> & {
 }) => React.ReactElement;
 //#endregion
 export { ComboboxProps as n, Combobox as t };
-//# sourceMappingURL=Combobox-DjbJYK_u.d.mts.map
+//# sourceMappingURL=Combobox-DtD1XXaf.d.mts.map

package/dist/Combobox-Dx1u-L1A.d.cts

@@ -0,0 +1,11 @@
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-CRHf5TI-.cjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-DvK8QioK.cjs";
+
+//#region components/Combobox/Combobox.d.ts
+type ComboboxProps<T = string> = ComboboxSingleSelectProps<T> | ComboboxMultiSelectProps<T>;
+declare const Combobox: <T = string>(props: ComboboxProps<T> & {
+  ref?: React.Ref<HTMLInputElement>;
+}) => React.ReactElement;
+//#endregion
+export { ComboboxProps as n, Combobox as t };
+//# sourceMappingURL=Combobox-Dx1u-L1A.d.cts.map

package/dist/{Combobox-B_-swcix.mjs → Combobox-I44W5oX0.mjs}

@@ -1,26 +1,23 @@
 import { focusStyle } from "./mixins/focus.mjs";
-import { n as Stack } from "./Stack-hwgS2FU1.mjs";
-import "./components/Stack/index.mjs";
-import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Button } from "./IconButton-C28qxOdi.mjs";
-import "./components/Button/index.mjs";
-import { n as Sticker } from "./Sticker-D6bwBTGr.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-DNRHo2i_.mjs";
-import { t as Checkbox } from "./Checkbox-C5bGcb-r.mjs";
-import { r as InputGroup } from "./Input-eoFk39bE.mjs";
+import { n as Stack } from "./Stack-ckRN7LrP.mjs";
+import { n as Button } from "./IconButton-DC4rh6ow.mjs";
+import { n as Sticker } from "./Sticker-B0TbkV4o.mjs";
+import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { t as Checkbox } from "./Checkbox-UWdk4pqb.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-BbSyWxFD.mjs";
+import { r as InputGroup } from "./Input-Bl7633Ux.mjs";
 import Input_default from "./components/Input/index.mjs";
-import "./components/Menu/index.mjs";
-import { t as Spinner } from "./Spinner-C05An_fn.mjs";
+import { t as Spinner } from "./Spinner-D9-u_5zS.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, CaretDownIcon, ChevronRightIcon, CircleXInverseIcon, SearchIcon } from "@persona/icons";
 import Fuse from "fuse.js";
+import { createPortal } from "react-dom";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useCombobox, useMultipleSelection } from "downshift";
 //#region components/Combobox/ComboboxBase.tsx
@@ -240,7 +237,7 @@ function renderOptionsWithGroups({ options, filteredOptions, renderOption, virtu
 			if (item.nested) return null;
 			const visibleLeaves = flattenOptions(item.options).filter((opt) => filteredOptions.some((filtered) => filtered.value === opt.value));
 			if (visibleLeaves.length === 0) return null;
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
 				flatIndex++;
 				return renderOption(option, flatIndex);
 			})] }, `group-${groupIndex}`);
@@ -440,9 +437,10 @@ function DropdownPortalWrapper({ children, portal }) {
 	}, [portal]);
 	if (portal && portalRoot.current) return createPortal(/* @__PURE__ */ jsx("div", {
 		id: "combobox-dropdown-portal-wrapper",
+		"data-react-aria-top-layer": "true",
 		children
 	}), portalRoot.current);
-	return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 //#endregion
 //#region components/Combobox/useTruncation.ts
@@ -908,7 +906,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					children: option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 						variant: option.labelStickerVariant,
 						children: option.label
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 						title: option.label,
 						$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 						children: option.label
@@ -1004,7 +1002,8 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const handleSearchInputBlur = useCallback((e) => {
 		if (!isMenuOpen) return;
 		const relatedTarget = e.relatedTarget;
-		if (!embedded && (!relatedTarget || !comboboxContainerRef.current?.contains(relatedTarget))) closeMenu();
+		const staysInCombobox = relatedTarget != null && (Boolean(comboboxContainerRef.current?.contains(relatedTarget)) || Boolean(relatedTarget.closest("#combobox-dropdown-portal-wrapper")));
+		if (!embedded && !staysInCombobox) closeMenu();
 	}, [
 		embedded,
 		isMenuOpen,
@@ -1149,7 +1148,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					$embedded: embedded,
 					tabIndex: -1,
 					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ jsx(Fragment, { children: isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+					children: isMenuOpen && /* @__PURE__ */ jsx(Fragment$1, { children: isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
 						options: optionsToRender,
 						filteredOptions: navigableItems,
 						renderOption,
@@ -1238,7 +1237,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		inputId: id
 	});
 	const [inputValue, setInputValue] = useState("");
-	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [isDropdownOpen, setIsDropdownOpen] = useState(embedded);
 	const [navigationPath, setNavigationPath] = useState([]);
 	const comboboxInputRef = useRef(null);
 	const internalContainerRef = useRef(null);
@@ -1336,6 +1335,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			onInputChange?.(newInputValue || "");
 		},
 		onIsOpenChange({ isOpen: newIsOpen }) {
+			if (embedded) return;
 			setIsDropdownOpen(newIsOpen);
 			if (newIsOpen) {
 				if (selectedOption || value && inputValue === flatOptionsForFallback.find((opt) => opt.value === value)?.label) setInputValue("");
@@ -1399,7 +1399,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		const labelContent = option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 			variant: option.labelStickerVariant,
 			children: option.label
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionLabel, {
 			title: option.label,
 			$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
 			children: option.label
@@ -1457,7 +1457,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				if (node.nested) {
 					if (!downshiftItems.some((i) => i.kind === "group" && i.group === node)) return null;
 					navIndex++;
-					return /* @__PURE__ */ jsx(Fragment$1, { children: renderNestedGroupRow(node, navIndex) }, key);
+					return /* @__PURE__ */ jsx(Fragment, { children: renderNestedGroupRow(node, navIndex) }, key);
 				}
 				const childNodes = [];
 				for (let i = 0; i < node.options.length; i++) {
@@ -1465,7 +1465,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 					if (rendered != null) childNodes.push(rendered);
 				}
 				if (childNodes.length === 0) return null;
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
 			}
 			if (!downshiftItems.some((i) => i.kind === "leaf" && i.option === node)) return null;
 			navIndex++;
@@ -1517,10 +1517,6 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	useEffect(() => {
 		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
 	}, [selectedOption, isMenuOpen]);
-	const selectedLabel = selectedOption?.label || "";
-	useEffect(() => {
-		if (embedded) setInputValue(selectedLabel);
-	}, [selectedLabel, embedded]);
 	useEffect(() => {
 		if (isMenuOpen && downshiftItems.length > 0) {
 			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
@@ -1621,7 +1617,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				}), /* @__PURE__ */ jsx(SingleSelectScrollableMenuList, {
 					$embedded: embedded,
 					tabIndex: -1,
-					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [showBackRow && /* @__PURE__ */ jsxs(BackRow, {
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [showBackRow && /* @__PURE__ */ jsxs(BackRow, {
 						type: "button",
 						tabIndex: -1,
 						onMouseDown: (event) => {
@@ -1669,4 +1665,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-B_-swcix.mjs.map
+//# sourceMappingURL=Combobox-I44W5oX0.mjs.map