@clubmed/trident-ui 2.0.0-beta.63 → 2.0.0-beta.65

package/ui/forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = false,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(\n                  (hasDropdown && !shouldDisplayClearButton) ||\n                    (shouldDisplayClearButton && internalStatus !== 'error'),\n                ) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n                </button>\n              ) : (\n                <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n              ))}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || (shouldDisplayClearButton && internalStatus !== 'error')) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OACG,KAAe,CAAC,KACd,KAA4B,MAAmB,QACnD,GACD,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,YACjB,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,OAAM;QAAO,MAAM;QAAY,CAAA;OAClD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG5D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAgB,KAA4B,MAAmB,aAC9D,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = false,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(\n                  (hasDropdown && !shouldDisplayClearButton) ||\n                    (shouldDisplayClearButton && internalStatus !== 'error'),\n                ) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n                </button>\n              ) : (\n                <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n              ))}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || (shouldDisplayClearButton && internalStatus !== 'error')) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OACG,KAAe,CAAC,KACd,KAA4B,MAAmB,QACnD,GACD,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,qPACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,YACjB,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,OAAM;QAAO,MAAM;QAAY,CAAA;OAClD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG5D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAgB,KAA4B,MAAmB,aAC9D,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}

package/ui/forms/checkboxes/Checkbox.js

@@ -14,7 +14,7 @@ function l(l) {
 		"!border-red !text-red": E === "error",
 		"bg-pearl": D
 	}), A = /* @__PURE__ */ c("span", {
-		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, k, p),
+		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2", t(m), n(m), h, k, p),
 		"data-name": "Checkbox",
 		children: [/* @__PURE__ */ s("input", {
 			...T,

package/ui/forms/checkboxes/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n  color?: Colors;\n  size?: string;\n  value?: string | number | boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  ['data-testid']?: string;\n  ref?: Ref<HTMLInputElement>;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    color = 'black',\n    size = 'size-24',\n    disabled = false,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    ref,\n    onChange,\n    value,\n    'data-testid': dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n  const isDisabled = internalStatus === 'disabled';\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  // Apply validation styling to checkbox via className\n  const checkboxClassName = clsx({\n    '!border-red !text-red': internalStatus === 'error',\n    'bg-pearl': isDisabled,\n  });\n\n  const checkbox = (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        checkboxClassName,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n      <Icon\n        className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n        name=\"CheckDefault\"\n        width=\"100%\"\n      />\n    </span>\n  );\n\n  if (!children && !errorMessage) {\n    return checkbox;\n  }\n\n  return (\n    <div\n      className={clsx('flex flex-col space-y-2', className)}\n      data-testid={dataTestId || `checkbox-container-${id}`}\n    >\n      <label\n        className={clsx('relative flex items-center gap-8', {\n          'text-grey': disabled,\n        })}\n      >\n        {checkbox}\n        {children}\n      </label>\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,IACX,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,QACA,aACA,UACA,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,4JACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;GACpD,WAAW,MAAM;AACf,QAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;GAE7C,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG;;AAOT,QAJI,CAAC,KAAY,CAAC,IACT,IAIP,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,KAAc,sBAAsB;YAFnD,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,oCAAoC,EAClD,aAAa,GACd,CAAC;aAHJ,CAKG,GACA,EACK;MACP,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA,CAC7E"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n  color?: Colors;\n  size?: string;\n  value?: string | number | boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  ['data-testid']?: string;\n  ref?: Ref<HTMLInputElement>;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    color = 'black',\n    size = 'size-24',\n    disabled = false,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    ref,\n    onChange,\n    value,\n    'data-testid': dataTestId,\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n  const isDisabled = internalStatus === 'disabled';\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  // Apply validation styling to checkbox via className\n  const checkboxClassName = clsx({\n    '!border-red !text-red': internalStatus === 'error',\n    'bg-pearl': isDisabled,\n  });\n\n  const checkbox = (\n    <span\n      className={clsx(\n        'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2',\n        getBorderColor(color),\n        getTextColor(color),\n        size,\n        checkboxClassName,\n        className,\n      )}\n      data-name=\"Checkbox\"\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        ref={ref}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n      <Icon\n        className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n        name=\"CheckDefault\"\n        width=\"100%\"\n      />\n    </span>\n  );\n\n  if (!children && !errorMessage) {\n    return checkbox;\n  }\n\n  return (\n    <div\n      className={clsx('flex flex-col space-y-2', className)}\n      data-testid={dataTestId || `checkbox-container-${id}`}\n    >\n      <label\n        className={clsx('relative flex items-center gap-8', {\n          'text-grey': disabled,\n        })}\n      >\n        {checkbox}\n        {children}\n      </label>\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,IACX,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,QACA,aACA,UACA,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,0NACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;GACpD,WAAW,MAAM;AACf,QAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;GAE7C,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG;;AAOT,QAJI,CAAC,KAAY,CAAC,IACT,IAIP,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,KAAc,sBAAsB;YAFnD,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,oCAAoC,EAClD,aAAa,GACd,CAAC;aAHJ,CAKG,GACA,EACK;MACP,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA,CAC7E"}

package/ui/forms/password/Password.js

@@ -41,7 +41,7 @@ function d(d) {
 				disabled: _,
 				required: v,
 				onChange: (e) => A(e.target.value, e.nativeEvent),
-				className: e("text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 					"border-middleGrey focus:border-black active:border-black pe-[52px]": (C || b === "default") && O !== "disabled",
 					"bg-white text-black": O !== "disabled",
 					"bg-pearl border-middleGrey": O === "disabled",
@@ -67,7 +67,7 @@ function d(d) {
 						}),
 						!_ && /* @__PURE__ */ l("button", {
 							type: "button",
-							className: "pointer-events-auto size-24 inline-flex",
+							className: "pointer-events-auto size-24 inline-flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 							onClick: N,
 							children: /* @__PURE__ */ l(c, {
 								name: j === "password" ? "Invisible" : "Visible",

package/ui/forms/password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","names":[],"sources":["../../../../lib/ui/forms/password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '../../hooks/useInternalStatus';\nimport clsx from 'clsx';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '../../hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAyB,GAA6B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,cAAW,IACX,cAAW,IACX,qBACA,sBAAmB,WACnB,iBACA,wBAAqB,EAAE,EACvB,4BAAyB,IACzB,cACA,aACA,gBAAa,YACb,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACA;EACD,CAAC,EACI,CAAC,GAAM,KAAW,EAAiC,WAAW;AAEpE,SAAgB;AACd,EACE,EADE,IACM,aAEA,EAAK;IAEd,CAAC,GAAM,EAAS,CAAC;CAEpB,IAAM,UAAmB,EAAQ,MAAS,aAAa,SAAS,WAAW;AAE3E,QACE,kBAAC,GAAD;EACa;EACP;EACG;EACP,UAAS;EACG;EACF;EACA;EACQ;EAClB,kBAAkB,IAAyB,YAAY;EACzC;YAVhB,CAYE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACA;IACC;IACG;IACA;IACV,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,WAAW,EACT,+FACA;KACE,uEACG,KAA0B,MAAqB,cAChD,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,aACE,CAAC,MACA,MAAqB,WAAW,MAAqB;KACxD,cAAc,CAAC,KAA0B,MAAqB;KAC9D,gBAAgB,CAAC,KAA0B,MAAqB;KACjE,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,qFACD;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,CAAC,KAA0B,MAAqB,WAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAM,OAAM;OAAS,CAAA;MAGtD,CAAC,KAA0B,MAAqB,aAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAQ,OAAM;OAAS,CAAA;MAGxD,CAAC,KACA,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;iBAET,kBAAC,GAAD;QACE,MAAM,MAAS,aAAa,cAAc;QAC1C,OAAM;QACN,MAAK;QACL,CAAA;OACK,CAAA;MAEN;;IACH,CAAA,CACF;MAEL,EAAmB,SAAS,KAC3B,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAmB,KAAK,EAAE,UAAO,aAAU,MAC1C,kBAAC,GAAD;IAA0B;IAAe;IAAsB,EAAT,EAAS,CAC/D;GACE,CAAA,CAEI"}
+{"version":3,"file":"Password.js","names":[],"sources":["../../../../lib/ui/forms/password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '../../hooks/useInternalStatus';\nimport clsx from 'clsx';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '../../hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAyB,GAA6B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,cAAW,IACX,cAAW,IACX,qBACA,sBAAmB,WACnB,iBACA,wBAAqB,EAAE,EACvB,4BAAyB,IACzB,cACA,aACA,gBAAa,YACb,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,EAAE,UAAO,gBAAa,EAAgB;EAC1C;EACA;EACD,CAAC,EACI,CAAC,GAAM,KAAW,EAAiC,WAAW;AAEpE,SAAgB;AACd,EACE,EADE,IACM,aAEA,EAAK;IAEd,CAAC,GAAM,EAAS,CAAC;CAEpB,IAAM,UAAmB,EAAQ,MAAS,aAAa,SAAS,WAAW;AAE3E,QACE,kBAAC,GAAD;EACa;EACP;EACG;EACP,UAAS;EACG;EACF;EACA;EACQ;EAClB,kBAAkB,IAAyB,YAAY;EACzC;YAVhB,CAYE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACA;IACC;IACG;IACA;IACV,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,WAAW,EACT,yKACA;KACE,uEACG,KAA0B,MAAqB,cAChD,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,aACE,CAAC,MACA,MAAqB,WAAW,MAAqB;KACxD,cAAc,CAAC,KAA0B,MAAqB;KAC9D,gBAAgB,CAAC,KAA0B,MAAqB;KACjE,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,qFACD;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,CAAC,KAA0B,MAAqB,WAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAM,OAAM;OAAS,CAAA;MAGtD,CAAC,KAA0B,MAAqB,aAC/C,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAQ,OAAM;OAAS,CAAA;MAGxD,CAAC,KACA,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;iBAET,kBAAC,GAAD;QACE,MAAM,MAAS,aAAa,cAAc;QAC1C,OAAM;QACN,MAAK;QACL,CAAA;OACK,CAAA;MAEN;;IACH,CAAA,CACF;MAEL,EAAmB,SAAS,KAC3B,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAmB,KAAK,EAAE,UAAO,aAAU,MAC1C,kBAAC,GAAD;IAA0B;IAAe;IAAsB,EAAT,EAAS,CAC/D;GACE,CAAA,CAEI"}

package/ui/journey-card/FlightSegmentCard.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface AirportInfo {
+    name: string;
+    terminal?: string;
+}
+export interface FlightSegmentCardProps extends ComponentPropsWithoutRef<'div'> {
+    flightNumber: string;
+    departureTime: string;
+    arrivalTime: string;
+    departureAirport: AirportInfo;
+    arrivalAirport: AirportInfo;
+    arrivalDate?: string;
+    plusDays?: number;
+}
+export declare function FlightSegmentCard({ flightNumber, departureTime, arrivalTime, departureAirport, arrivalAirport, arrivalDate, className, ...props }: FlightSegmentCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/FlightSegmentCard.js

@@ -0,0 +1,73 @@
+import { t as e } from "../../chunks/clsx.js";
+import { FlightTimeline as t } from "./FlightTimeline.js";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/journey-card/FlightSegmentCard.tsx
+function a({ flightNumber: a, departureTime: o, arrivalTime: s, departureAirport: c, arrivalAirport: l, arrivalDate: u, className: d, ...f }) {
+	return /* @__PURE__ */ i("div", {
+		"data-name": "FlightSegmentCard",
+		...f,
+		className: e("flex h-fit w-full flex-col gap-12 rounded-32 bg-white p-20", d),
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex h-24 w-full flex-row items-center gap-8",
+			children: [/* @__PURE__ */ r(n, {
+				name: "PlaneOutbound",
+				width: "24px",
+				className: "shrink-0 text-black"
+			}), /* @__PURE__ */ r("span", {
+				className: "font-sans text-b4",
+				children: a
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex w-full flex-col gap-4",
+			children: [
+				/* @__PURE__ */ i("div", {
+					className: "flex w-full flex-row items-end justify-between",
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex flex-1 flex-col justify-center",
+						children: /* @__PURE__ */ r("span", {
+							className: "font-sans text-b3 font-semibold",
+							children: o
+						})
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-col items-end justify-center",
+						children: [u && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4",
+							children: u
+						}), /* @__PURE__ */ r("span", {
+							className: "font-sans text-b3 font-semibold",
+							children: s
+						})]
+					})]
+				}),
+				/* @__PURE__ */ r(t, {}),
+				/* @__PURE__ */ i("div", {
+					className: "flex w-full flex-row items-start justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "flex w-120 min-w-120 flex-col",
+						children: [/* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 font-semibold",
+							children: c.name
+						}), c.terminal && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4",
+							children: c.terminal
+						})]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex w-120 min-w-120 flex-col items-end",
+						children: [/* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 font-semibold",
+							children: l.name
+						}), l.terminal && /* @__PURE__ */ r("span", {
+							className: "font-sans text-b4 text-right",
+							children: l.terminal
+						})]
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { a as FlightSegmentCard };
+
+//# sourceMappingURL=FlightSegmentCard.js.map

package/ui/journey-card/FlightSegmentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightSegmentCard.js","names":[],"sources":["../../../lib/ui/journey-card/FlightSegmentCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { FlightTimeline } from './FlightTimeline';\n\nexport interface AirportInfo {\n  name: string;\n  terminal?: string;\n}\n\nexport interface FlightSegmentCardProps extends ComponentPropsWithoutRef<'div'> {\n  flightNumber: string;\n  departureTime: string;\n  arrivalTime: string;\n  departureAirport: AirportInfo;\n  arrivalAirport: AirportInfo;\n  arrivalDate?: string;\n  plusDays?: number;\n}\n\nexport function FlightSegmentCard({\n  flightNumber,\n  departureTime,\n  arrivalTime,\n  departureAirport,\n  arrivalAirport,\n  arrivalDate,\n  className,\n  ...props\n}: FlightSegmentCardProps) {\n  return (\n    <div\n      data-name=\"FlightSegmentCard\"\n      {...props}\n      className={clsx('flex h-fit w-full flex-col gap-12 rounded-32 bg-white p-20', className)}\n    >\n      <div className=\"flex h-24 w-full flex-row items-center gap-8\">\n        <Icon name=\"PlaneOutbound\" width=\"24px\" className=\"shrink-0 text-black\" />\n        <span className=\"font-sans text-b4\">{flightNumber}</span>\n      </div>\n\n      <div className=\"flex w-full flex-col gap-4\">\n        <div className=\"flex w-full flex-row items-end justify-between\">\n          <div className=\"flex flex-1 flex-col justify-center\">\n            <span className=\"font-sans text-b3 font-semibold\">{departureTime}</span>\n          </div>\n          <div className=\"flex flex-col items-end justify-center\">\n            {arrivalDate && <span className=\"font-sans text-b4\">{arrivalDate}</span>}\n            <span className=\"font-sans text-b3 font-semibold\">{arrivalTime}</span>\n          </div>\n        </div>\n\n        <FlightTimeline />\n\n        <div className=\"flex w-full flex-row items-start justify-between\">\n          <div className=\"flex w-120 min-w-120 flex-col\">\n            <span className=\"font-sans text-b4 font-semibold\">{departureAirport.name}</span>\n            {departureAirport.terminal && (\n              <span className=\"font-sans text-b4\">{departureAirport.terminal}</span>\n            )}\n          </div>\n          <div className=\"flex w-120 min-w-120 flex-col items-end\">\n            <span className=\"font-sans text-b4 font-semibold\">{arrivalAirport.name}</span>\n            {arrivalAirport.terminal && (\n              <span className=\"font-sans text-b4 text-right\">{arrivalAirport.terminal}</span>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAoBA,SAAgB,EAAkB,EAChC,iBACA,kBACA,gBACA,qBACA,mBACA,gBACA,cACA,GAAG,KACsB;AACzB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,8DAA8D,EAAU;YAH1F,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAgB,OAAM;IAAO,WAAU;IAAwB,CAAA,EAC1E,kBAAC,QAAD;IAAM,WAAU;cAAqB;IAAoB,CAAA,CACrD;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OAAM,WAAU;iBAAmC;OAAqB,CAAA;MACpE,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,KAAe,kBAAC,QAAD;OAAM,WAAU;iBAAqB;OAAmB,CAAA,EACxE,kBAAC,QAAD;OAAM,WAAU;iBAAmC;OAAmB,CAAA,CAClE;QACF;;IAEN,kBAAC,GAAD,EAAkB,CAAA;IAElB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmC,EAAiB;OAAY,CAAA,EAC/E,EAAiB,YAChB,kBAAC,QAAD;OAAM,WAAU;iBAAqB,EAAiB;OAAgB,CAAA,CAEpE;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmC,EAAe;OAAY,CAAA,EAC7E,EAAe,YACd,kBAAC,QAAD;OAAM,WAAU;iBAAgC,EAAe;OAAgB,CAAA,CAE7E;QACF;;IACF;KACF"}

package/ui/journey-card/FlightTimeline.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface FlightTimelineProps extends ComponentPropsWithoutRef<'div'> {
+    nbStopovers?: number;
+}
+export declare function FlightTimeline({ nbStopovers, className, ...props }: FlightTimelineProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/FlightTimeline.js

@@ -0,0 +1,27 @@
+import { t as e } from "../../chunks/clsx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/ui/journey-card/FlightTimeline.tsx
+function r({ nbStopovers: r = 0, className: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		"data-name": "FlightTimeline",
+		...a,
+		className: e("relative flex w-full items-center h-12", i),
+		children: [
+			/* @__PURE__ */ t("span", { className: "absolute left-0 h-12 w-12 rounded-full border-2 border-black bg-white" }),
+			/* @__PURE__ */ t("span", { className: "h-2 flex-1 rounded-pill bg-black" }),
+			r > 0 && /* @__PURE__ */ t("div", {
+				className: "flex shrink-0 flex-row items-center gap-2",
+				children: Array.from({ length: r }).map((e, r) => /* @__PURE__ */ n("span", {
+					className: "flex flex-row items-center gap-2",
+					children: [r !== 0 && /* @__PURE__ */ t("span", { className: "h-2 w-8 rounded-pill bg-black" }), /* @__PURE__ */ t("span", { className: "h-12 w-12 rounded-full border-2 border-white bg-black" })]
+				}, r))
+			}),
+			/* @__PURE__ */ t("span", { className: "h-2 flex-1 rounded-pill bg-black" }),
+			/* @__PURE__ */ t("span", { className: "absolute right-0 h-12 w-12 rounded-full border-2 border-black bg-white" })
+		]
+	});
+}
+//#endregion
+export { r as FlightTimeline };
+
+//# sourceMappingURL=FlightTimeline.js.map

package/ui/journey-card/FlightTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightTimeline.js","names":[],"sources":["../../../lib/ui/journey-card/FlightTimeline.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nexport interface FlightTimelineProps extends ComponentPropsWithoutRef<'div'> {\n  nbStopovers?: number;\n}\n\nexport function FlightTimeline({ nbStopovers = 0, className, ...props }: FlightTimelineProps) {\n  return (\n    <div\n      data-name=\"FlightTimeline\"\n      {...props}\n      className={clsx('relative flex w-full items-center h-12', className)}\n    >\n      <span className=\"absolute left-0 h-12 w-12 rounded-full border-2 border-black bg-white\" />\n      <span className=\"h-2 flex-1 rounded-pill bg-black\" />\n      {nbStopovers > 0 && (\n        <div className=\"flex shrink-0 flex-row items-center gap-2\">\n          {Array.from({ length: nbStopovers }).map((_, i) => (\n            <span key={i} className=\"flex flex-row items-center gap-2\">\n              {i !== 0 && <span className=\"h-2 w-8 rounded-pill bg-black\" />}\n              <span className=\"h-12 w-12 rounded-full border-2 border-white bg-black\" />\n            </span>\n          ))}\n        </div>\n      )}\n      <span className=\"h-2 flex-1 rounded-pill bg-black\" />\n      <span className=\"absolute right-0 h-12 w-12 rounded-full border-2 border-black bg-white\" />\n    </div>\n  );\n}\n"],"mappings":";;;AAOA,SAAgB,EAAe,EAAE,iBAAc,GAAG,cAAW,GAAG,KAA8B;AAC5F,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,0CAA0C,EAAU;YAHtE;GAKE,kBAAC,QAAD,EAAM,WAAU,yEAA0E,CAAA;GAC1F,kBAAC,QAAD,EAAM,WAAU,oCAAqC,CAAA;GACpD,IAAc,KACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAa,CAAC,CAAC,KAAK,GAAG,MAC3C,kBAAC,QAAD;KAAc,WAAU;eAAxB,CACG,MAAM,KAAK,kBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA,EAC9D,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA,CACrE;OAHI,EAGJ,CACP;IACE,CAAA;GAER,kBAAC,QAAD,EAAM,WAAU,oCAAqC,CAAA;GACrD,kBAAC,QAAD,EAAM,WAAU,0EAA2E,CAAA;GACvF"}

package/ui/journey-card/ItineraryDetails.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { AirportInfo, FlightSegmentCardProps } from './FlightSegmentCard';
+export type { AirportInfo };
+export interface ItineraryDetailsProps extends ComponentPropsWithoutRef<'div'> {
+    segments: FlightSegmentCardProps[];
+    connectionTime?: string;
+    flexibleOption?: string;
+}
+export declare function ItineraryDetails({ segments, connectionTime, flexibleOption, className, ...props }: ItineraryDetailsProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/ItineraryDetails.js

@@ -0,0 +1,40 @@
+import { t as e } from "../../chunks/clsx.js";
+import { FlightSegmentCard as t } from "./FlightSegmentCard.js";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/journey-card/ItineraryDetails.tsx
+function a({ segments: a, connectionTime: o, flexibleOption: s, className: c, ...l }) {
+	return /* @__PURE__ */ i("div", {
+		"data-name": "ItineraryDetails",
+		...l,
+		className: e("flex h-fit w-full flex-col gap-8 rounded-44 bg-lightSand p-16", c),
+		children: [a.map((e, s) => /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ r(t, { ...e }), o && s < a.length - 1 && /* @__PURE__ */ i("div", {
+				className: "flex h-fit w-full flex-row items-center gap-2 pl-20",
+				children: [/* @__PURE__ */ r(n, {
+					name: "ClockDefault",
+					width: "24px",
+					className: "shrink-0 text-black"
+				}), /* @__PURE__ */ r("span", {
+					className: "font-sans text-b4",
+					children: o
+				})]
+			})]
+		}, s)), s && /* @__PURE__ */ i("div", {
+			className: "flex w-full flex-row items-start gap-2",
+			children: [/* @__PURE__ */ r(n, {
+				name: "LightBulb",
+				width: "24px",
+				className: "mt-2 shrink-0 text-black"
+			}), /* @__PURE__ */ r("div", {
+				className: "whitespace-pre-wrap font-sans text-b4",
+				children: s
+			})]
+		})]
+	});
+}
+//#endregion
+export { a as ItineraryDetails };
+
+//# sourceMappingURL=ItineraryDetails.js.map

package/ui/journey-card/ItineraryDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItineraryDetails.js","names":[],"sources":["../../../lib/ui/journey-card/ItineraryDetails.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { FlightSegmentCard } from './FlightSegmentCard';\nimport type { AirportInfo, FlightSegmentCardProps } from './FlightSegmentCard';\n\nexport type { AirportInfo };\n\nexport interface ItineraryDetailsProps extends ComponentPropsWithoutRef<'div'> {\n  segments: FlightSegmentCardProps[];\n  connectionTime?: string;\n  flexibleOption?: string;\n}\n\nexport function ItineraryDetails({\n  segments,\n  connectionTime,\n  flexibleOption,\n  className,\n  ...props\n}: ItineraryDetailsProps) {\n  return (\n    <div\n      data-name=\"ItineraryDetails\"\n      {...props}\n      className={clsx('flex h-fit w-full flex-col gap-8 rounded-44 bg-lightSand p-16', className)}\n    >\n      {segments.map((segment, index) => (\n        <div key={index} className=\"flex flex-col gap-8\">\n          <FlightSegmentCard {...segment} />\n\n          {connectionTime && index < segments.length - 1 && (\n            <div className=\"flex h-fit w-full flex-row items-center gap-2 pl-20\">\n              <Icon name=\"ClockDefault\" width=\"24px\" className=\"shrink-0 text-black\" />\n              <span className=\"font-sans text-b4\">{connectionTime}</span>\n            </div>\n          )}\n        </div>\n      ))}\n\n      {flexibleOption && (\n        <div className=\"flex w-full flex-row items-start gap-2\">\n          <Icon name=\"LightBulb\" width=\"24px\" className=\"mt-2 shrink-0 text-black\" />\n          <div className=\"whitespace-pre-wrap font-sans text-b4\">{flexibleOption}</div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAcA,SAAgB,EAAiB,EAC/B,aACA,mBACA,mBACA,cACA,GAAG,KACqB;AACxB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,iEAAiE,EAAU;YAH7F,CAKG,EAAS,KAAK,GAAS,MACtB,kBAAC,OAAD;GAAiB,WAAU;aAA3B,CACE,kBAAC,GAAD,EAAmB,GAAI,GAAW,CAAA,EAEjC,KAAkB,IAAQ,EAAS,SAAS,KAC3C,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAO,WAAU;KAAwB,CAAA,EACzE,kBAAC,QAAD;KAAM,WAAU;eAAqB;KAAsB,CAAA,CACvD;MAEJ;KATI,EASJ,CACN,EAED,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAY,OAAM;IAAO,WAAU;IAA6B,CAAA,EAC3E,kBAAC,OAAD;IAAK,WAAU;cAAyC;IAAqB,CAAA,CACzE;KAEJ"}

package/ui/journey-card/JourneyCard.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { JourneyDetailsProps } from './JourneyDetails';
+export type { JourneyDetailsProps };
+export type { AirportInfo, ItineraryDetailsProps } from './ItineraryDetails';
+export type { FlightSegmentCardProps } from './FlightSegmentCard';
+export interface JourneyCardProps extends ComponentPropsWithoutRef<'div'> {
+    /** Outbound or inbound flight leg */
+    flight1Journey: JourneyDetailsProps;
+    /** Return flight leg */
+    flight2Journey: JourneyDetailsProps;
+    /**
+     * When true, both legs are displayed side-by-side with a vertical divider
+     * instead of stacked with a horizontal divider.
+     */
+    compact?: boolean;
+}
+export declare function JourneyCard({ flight1Journey, flight2Journey, compact, className, ...props }: JourneyCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/JourneyCard.js

@@ -0,0 +1,34 @@
+import { t as e } from "../../chunks/clsx.js";
+import { JourneyDetails as t } from "./JourneyDetails.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/ui/journey-card/JourneyCard.tsx
+function i({ flight1Journey: i, flight2Journey: a, compact: o = !1, className: s, ...c }) {
+	return /* @__PURE__ */ n("div", {
+		"data-name": "JourneyCard",
+		...c,
+		className: e("flex h-fit w-full flex-col", s),
+		children: /* @__PURE__ */ r("div", {
+			className: e("flex w-full rounded-32 border border-lightGrey bg-white p-20", o ? "flex-row gap-0" : "flex-col gap-12"),
+			children: [
+				/* @__PURE__ */ n(t, {
+					...i,
+					className: e(o && "flex-1 pe-12"),
+					vertical: o
+				}),
+				!o && /* @__PURE__ */ n("div", {
+					role: "separator",
+					className: e("shrink-0 bg-lightGrey h-px w-full")
+				}),
+				/* @__PURE__ */ n(t, {
+					...a,
+					className: e(o && "flex-1 ps-12"),
+					vertical: o
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { i as JourneyCard };
+
+//# sourceMappingURL=JourneyCard.js.map

package/ui/journey-card/JourneyCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JourneyCard.js","names":[],"sources":["../../../lib/ui/journey-card/JourneyCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { JourneyDetails } from './JourneyDetails';\nimport type { JourneyDetailsProps } from './JourneyDetails';\n\nexport type { JourneyDetailsProps };\nexport type { AirportInfo, ItineraryDetailsProps } from './ItineraryDetails';\nexport type { FlightSegmentCardProps } from './FlightSegmentCard';\n\nexport interface JourneyCardProps extends ComponentPropsWithoutRef<'div'> {\n  /** Outbound or inbound flight leg */\n  flight1Journey: JourneyDetailsProps;\n  /** Return flight leg */\n  flight2Journey: JourneyDetailsProps;\n  /**\n   * When true, both legs are displayed side-by-side with a vertical divider\n   * instead of stacked with a horizontal divider.\n   */\n  compact?: boolean;\n}\n\nexport function JourneyCard({\n  flight1Journey,\n  flight2Journey,\n  compact = false,\n  className,\n  ...props\n}: JourneyCardProps) {\n  return (\n    <div\n      data-name=\"JourneyCard\"\n      {...props}\n      className={clsx('flex h-fit w-full flex-col', className)}\n    >\n      <div\n        className={clsx(\n          'flex w-full rounded-32 border border-lightGrey bg-white p-20',\n          compact ? 'flex-row gap-0' : 'flex-col gap-12',\n        )}\n      >\n        <JourneyDetails\n          {...flight1Journey}\n          className={clsx(compact && 'flex-1 pe-12')}\n          vertical={compact}\n        />\n        {!compact && <div role=\"separator\" className={clsx('shrink-0 bg-lightGrey h-px w-full')} />}\n        <JourneyDetails\n          {...flight2Journey}\n          className={clsx(compact && 'flex-1 ps-12')}\n          vertical={compact}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAqBA,SAAgB,EAAY,EAC1B,mBACA,mBACA,aAAU,IACV,cACA,GAAG,KACgB;AACnB,QACE,kBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EAAK,8BAA8B,EAAU;YAExD,kBAAC,OAAD;GACE,WAAW,EACT,gEACA,IAAU,mBAAmB,kBAC9B;aAJH;IAME,kBAAC,GAAD;KACE,GAAI;KACJ,WAAW,EAAK,KAAW,eAAe;KAC1C,UAAU;KACV,CAAA;IACD,CAAC,KAAW,kBAAC,OAAD;KAAK,MAAK;KAAY,WAAW,EAAK,oCAAoC;KAAI,CAAA;IAC3F,kBAAC,GAAD;KACE,GAAI;KACJ,WAAW,EAAK,KAAW,eAAe;KAC1C,UAAU;KACV,CAAA;IACE;;EACF,CAAA"}

package/ui/journey-card/JourneyDetails.d.ts

@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ItineraryDetailsProps } from './ItineraryDetails';
+export interface AirportInfo {
+    name: string;
+    terminal?: string;
+}
+export interface JourneyDetailsProps extends ComponentPropsWithoutRef<'div'> {
+    /** Human-readable leg label, e.g. "Outbound" or "Inbound" */
+    direction: string;
+    /** Controls which plane icon is rendered; falls back to `direction` when omitted */
+    directionType?: 'Inbound' | 'Outbound';
+    departureDate: string;
+    departureTime: string;
+    arrivalDate: string;
+    arrivalTime: string;
+    /** Total flight duration, e.g. "9h30mn" */
+    duration: string;
+    departureAirport: AirportInfo;
+    arrivalAirport: AirportInfo;
+    /** Connection label shown on the timeline, e.g. "Direct" or "1 Stop over" */
+    stopLabel: string;
+    /** Number of stopover dots on the timeline */
+    nbStopovers?: number;
+    airlineLogoSrc: string;
+    airlineLogoAlt: string;
+    /** Primary operator name */
+    operatedBy: string;
+    /** Secondary operator line, e.g. "Operated by Hop" */
+    companyName?: string;
+    /** Cabin / luggage summary text */
+    characteristics: string;
+    /** Carbon footprint text */
+    carbonEmission: string;
+    carbonEmissionLearnMoreUrl?: string;
+    carbonEmissionLearnMoreLabel: string;
+    /** How many calendar days after departure the arrival falls */
+    plusDays?: number;
+    /** Label appended to plusDays value, e.g. "day" */
+    plusDaysLabel: string;
+    /** Local time qualifier shown near arrival time, e.g. "(local time)" */
+    localTimeLabel: string;
+    /** Optional expanded itinerary with per-segment flight cards */
+    itinerary?: ItineraryDetailsProps;
+    /** When true, the component is displayed in a vertical layout for side-by-side JourneyCards */
+    vertical?: boolean;
+}
+export declare function JourneyDetails({ itinerary, direction, directionType, departureDate, departureTime, arrivalDate, arrivalTime, duration, departureAirport, arrivalAirport, stopLabel, nbStopovers, airlineLogoSrc, airlineLogoAlt, operatedBy, companyName, characteristics, carbonEmission, carbonEmissionLearnMoreUrl, carbonEmissionLearnMoreLabel, plusDays, plusDaysLabel, localTimeLabel, className, vertical, ...props }: JourneyDetailsProps): import("react/jsx-runtime").JSX.Element;

package/ui/journey-card/JourneyDetails.js

@@ -0,0 +1,183 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ElasticHeight as t } from "../ElasticHeight.js";
+import { Tag as n } from "../Tag.js";
+import { FlightTimeline as r } from "./FlightTimeline.js";
+import { ItineraryDetails as i } from "./ItineraryDetails.js";
+import { useState as a } from "react";
+import { Icon as o } from "@clubmed/trident-icons";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/ui/journey-card/JourneyDetails.tsx
+function l({ itinerary: l, direction: u, directionType: d, departureDate: f, departureTime: p, arrivalDate: m, arrivalTime: h, duration: g, departureAirport: _, arrivalAirport: v, stopLabel: y, nbStopovers: b, airlineLogoSrc: x, airlineLogoAlt: S, operatedBy: C, companyName: w, characteristics: T, carbonEmission: E, carbonEmissionLearnMoreUrl: D, carbonEmissionLearnMoreLabel: O, plusDays: k, plusDaysLabel: A, localTimeLabel: j, className: M, vertical: N = !1, ...P }) {
+	let [F, I] = a(!1), L = (d ?? u) === "Outbound";
+	return /* @__PURE__ */ c("div", {
+		"data-name": "JourneyDetails",
+		...P,
+		className: e("flex h-fit w-full flex-col gap-8", M),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex h-48 w-full flex-row items-center justify-between",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex h-fit flex-row items-center gap-12",
+					children: [/* @__PURE__ */ s(o, {
+						name: L ? "PlaneOutbound" : "PlaneInBound",
+						width: "24px",
+						className: "text-black"
+					}), /* @__PURE__ */ s("span", {
+						className: "font-sans text-b3 font-semibold",
+						children: u
+					})]
+				}), /* @__PURE__ */ s("img", {
+					src: x,
+					alt: S,
+					width: 100,
+					height: 28,
+					className: "object-contain"
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex h-fit w-full flex-col gap-4",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "flex w-full flex-row items-end justify-between",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4",
+									children: f
+								}), /* @__PURE__ */ s("span", {
+									className: "font-sans text-b1 font-semibold",
+									children: p
+								})]
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-1 justify-center",
+								children: /* @__PURE__ */ s("span", {
+									className: "text-center font-sans text-b4",
+									children: g
+								})
+							}),
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [
+									/* @__PURE__ */ c("div", {
+										className: e("flex", !N && "flex-row items-center justify-end gap-4", N && "flex-col items-end justify-start gap-0"),
+										children: [/* @__PURE__ */ s("span", {
+											className: "font-sans text-b4",
+											children: m
+										}), k && k > 0 && /* @__PURE__ */ s(n, {
+											label: `+${k} ${A}`,
+											theme: "label",
+											backgroundColor: "black",
+											color: "white",
+											className: "rounded-full"
+										})]
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "text-right font-sans text-b4",
+										children: j
+									}),
+									/* @__PURE__ */ s("span", {
+										className: "text-right font-sans text-b1 font-semibold",
+										children: h
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ s(r, { nbStopovers: b }),
+					/* @__PURE__ */ c("div", {
+						className: "flex w-full flex-row items-start justify-between",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: _.name
+								}), _.terminal && /* @__PURE__ */ s("span", {
+									className: "font-sans text-b4",
+									children: _.terminal
+								})]
+							}),
+							/* @__PURE__ */ s("span", {
+								className: "flex-1 text-center font-sans text-b4",
+								children: y
+							}),
+							/* @__PURE__ */ c("div", {
+								className: "flex flex-1 flex-col items-end",
+								children: [/* @__PURE__ */ s("span", {
+									className: "font-sans text-b4 font-semibold",
+									children: v.name
+								}), v.terminal && /* @__PURE__ */ s("span", {
+									className: "text-right font-sans text-b4",
+									children: v.terminal
+								})]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: () => I((e) => !e),
+				"aria-expanded": F,
+				className: "flex w-full cursor-pointer flex-row items-end justify-between border-none bg-transparent p-0 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex flex-col text-left",
+					children: [/* @__PURE__ */ s("span", {
+						className: "font-sans text-b4 font-semibold",
+						children: C
+					}), w && /* @__PURE__ */ s("span", {
+						className: "font-sans text-b4",
+						children: w
+					})]
+				}), /* @__PURE__ */ s(o, {
+					name: "ArrowOutlinedUp",
+					width: "24px",
+					className: e("text-black transition-transform duration-200", { "rotate-180": !F })
+				})]
+			}),
+			/* @__PURE__ */ c(t, {
+				isExpanded: F,
+				innerClassName: "flex flex-col gap-8",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ s(o, {
+							name: "Luggage",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ s("span", {
+							className: "font-sans text-b4",
+							children: T
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "flex h-fit w-full flex-row items-start gap-8",
+						children: [/* @__PURE__ */ s(o, {
+							name: "HappyToCare",
+							width: "24px",
+							className: "shrink-0 text-black"
+						}), /* @__PURE__ */ c("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ s("span", {
+								className: "font-sans text-b4",
+								children: E
+							}), D && /* @__PURE__ */ s("a", {
+								href: D,
+								className: "font-sans text-b4 underline outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill",
+								children: O
+							})]
+						})]
+					}),
+					l && /* @__PURE__ */ s(i, { ...l })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { l as JourneyDetails };
+
+//# sourceMappingURL=JourneyDetails.js.map