@persona/design-system 0.5.0 → 0.6.0

package/dist/components/Slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${Color.PrimaryWhite};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${(props) =>\n    props.disabled ? Color.BackgroundInputDisabled : Color.BackgroundInputDefault};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid ${Color.BorderInputDisabled};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div`\n  ${paragraphMixins.md};\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ percents, track, disabled }) => {\n    const activeColor = disabled ? Color.BorderInputDisabled : Color.CoreBlue700;\n    const trackColor = Color.BorderDivider;\n\n    if (track === false) {\n      return css`\n        background: ${Color.BorderDivider};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderDivider', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}

package/dist/components/SmartTextInput/PillType.d.mts

@@ -0,0 +1,10 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/SmartTextInput/PillType.d.ts
+declare const PillType: _$styled_components0.StyledComponent<"div", any, {
+  purple?: boolean;
+  error?: boolean;
+}, never>;
+//#endregion
+export { PillType as default };
+//# sourceMappingURL=PillType.d.mts.map

package/dist/components/SmartTextInput/PillType.mjs

@@ -0,0 +1,31 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+//#region components/SmartTextInput/PillType.tsx
+const PillType = styled.div`
+  padding: 0 ${Spacing[1]};
+  height: 16px;
+  ${Typography.TextExtraSmall};
+  font-family: ${({ theme }) => theme.text.fontFamily.mono};
+  background: ${Color.CoreSlate100};
+  color: ${({ theme }) => theme.color.text.primary};
+  border: 1px solid ${Color.CoreSlate300};
+  border-radius: ${BorderRadius.Md};
+  white-space: nowrap;
+
+  ${({ purple }) => {
+	if (purple) return css`
+        background: ${Color.CorePurple100};
+        border-color: ${Color.CorePurple300};
+      `;
+}}
+
+  ${({ error }) => {
+	if (error) return css`
+        color: ${Color.TextDanger};
+      `;
+}}
+`;
+//#endregion
+export { PillType as default };
+
+//# sourceMappingURL=PillType.mjs.map

package/dist/components/SmartTextInput/PillType.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillType.mjs","names":[],"sources":["../../../components/SmartTextInput/PillType.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst PillType = styled.div<{ purple?: boolean; error?: boolean }>`\n  padding: 0 ${Spacing[1]};\n  height: 16px;\n  ${Typography.TextExtraSmall};\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  background: ${Color.CoreSlate100};\n  color: ${({ theme }) => theme.color.text.primary};\n  border: 1px solid ${Color.CoreSlate300};\n  border-radius: ${BorderRadius.Md};\n  white-space: nowrap;\n\n  ${({ purple }) => {\n    if (purple) {\n      return css`\n        background: ${Color.CorePurple100};\n        border-color: ${Color.CorePurple300};\n      `;\n    }\n  }}\n\n  ${({ error }) => {\n    if (error) {\n      return css`\n        color: ${Color.TextDanger};\n      `;\n    }\n  }}\n`;\n\nexport default PillType;\n"],"mappings":";;;AAIA,MAAM,WAAW,OAAO,GAA0C;eACnD,QAAQ,GAAG;;IAEtB,WAAW,eAAe;kBACZ,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;gBAC3C,MAAM,aAAa;YACvB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;sBAC7B,MAAM,aAAa;mBACtB,aAAa,GAAG;;;KAG9B,EAAE,aAAa;AAChB,KAAI,OACF,QAAO,GAAG;sBACM,MAAM,cAAc;wBAClB,MAAM,cAAc;;EAGxC;;KAEC,EAAE,YAAY;AACf,KAAI,MACF,QAAO,GAAG;iBACC,MAAM,WAAW;;EAG9B"}

package/dist/components/SmartTextInput/parser/method-chain/grammar.pegjs

@@ -0,0 +1,219 @@
+/**
+ * ===========================================================================
+ * Run bin/method_chain_parser/generate.sh after making change
+ * See parser.js in this directory for generated output
+ * ===========================================================================
+ */
+
+{{
+  function mkError(start, end, kind, extra) {
+    return { type: 'error', start, end, ...(kind ? { kind } : {}), ...(extra || {}) };
+  }
+  function hasErrors(node) {
+    if (!node || typeof node !== 'object') return false;
+    if (node.type === 'error') return true;
+    const children = node.children || [];
+    return children.some(hasErrors);
+  }
+}}
+
+Chain
+  = first:(SymbolIdentifier / InvalidChainStart)
+    rest:(Link / ErrorLink)*
+    {
+      const chain = { type: 'chain', children: [first, ...rest.flat()],
+                      start: location().start.offset, end: location().end.offset };
+      if (options.strict === true && hasErrors(chain)) { error('Invalid chain'); }
+      return chain;
+    }
+
+// Matches a non-identifier chain start. Excludes }, ,, ) to avoid consuming
+// delimiters in Handlebars / param contexts. Also excludes . so trailing-dot
+// ErrorLink handles dot-after-dot rather than producing two separate errors.
+InvalidChainStart
+  = !"}" !"," !")" !SymbolIdentifier c:. {
+      const s = location().start.offset;
+      const e = location().end.offset;
+      return mkError(s, e, 'invalidMethodChainSyntax');
+    }
+
+ErrorLink
+  = d:DotNode !. {
+      // Dot at absolute end of input — user is still typing (wip).
+      const e = location().end.offset;
+      return [d, mkError(e, e, 'trailingDot', { wip: true })];
+    }
+  / d:DotNode &("}" / "$" / "{") {
+      // Dot immediately before a Handlebars/Code delimiter — user is still
+      // typing the identifier that will follow (wip).
+      const e = location().end.offset;
+      return [d, mkError(e, e, 'trailingDot', { wip: true })];
+    }
+  / d:DotNode "@" (!. / &("}" / "$" / "{")) {
+      // '@' at end of input or before a delimiter — user starting a custom function name (wip).
+      const e = location().end.offset;
+      return [d, mkError(e, e, 'trailingAtSign', { wip: true })];
+    }
+  / d:DotNode !(SymbolIdentifier / "@" / "[") c:. {
+      // Dot followed by a character that is not a valid link start — consume
+      // the bad character and report it as a syntax error (not wip).
+      const s = d.end;
+      const e = location().end.offset;
+      return [d, mkError(s, e, 'invalidMethodChainSyntax')];
+    }
+  / [ \t]+ (!("}" / "$" / "{") .)* {
+      return mkError(location().start.offset, location().end.offset, 'invalidMethodChainSyntax');
+    }
+
+Link
+  = (d:DotNode link:(CustomFunction / Function / SymbolIdentifier) { return [d, link] })
+  / @LiteralIdentifier
+
+DotNode
+  = '.' { return { type: 'dot', start: location().start.offset, end: location().end.offset } }
+
+CustomFunction
+  = '@' name:[a-z0-9_-]i+ po:ParenOpen _ params:Parameters? _ pc:ParenClose
+    { return { type: 'custom_function', name: name.join(''),
+               children: [po, ...(params || []), pc],
+               start: location().start.offset, end: location().end.offset } }
+  / '@' name:[a-z0-9_-]i+ po:ParenOpen _ params:Parameters _ &{ return options.strict !== true; }
+    {
+      const s = location().start.offset;
+      const e = location().end.offset;
+      return { type: 'custom_function', name: name.join(''), start: s, end: e,
+               children: [po, ...params.map(p => ({ ...p, end: e })),
+                          mkError(e, e, 'unclosedFunctionParen', { wip: true })] };
+    }
+  / '@' name:[a-z0-9_-]i+ po:ParenOpen _ &{ return options.strict !== true; }
+    {
+      const e = location().end.offset;
+      return { type: 'custom_function', name: name.join(''),
+               start: location().start.offset, end: e,
+               children: [po, mkError(e, e, 'unclosedFunctionParen', { wip: true })] };
+    }
+  / '@' name:[a-z0-9_-]i+
+    { return { type: 'custom_function', name: name.join(''), children: [],
+               start: location().start.offset, end: location().end.offset } }
+
+Function
+  = id:SymbolIdentifier po:ParenOpen _ params:Parameters? _ pc:ParenClose
+    { return { type: 'function', name: id.name,
+               children: [po, ...(params || []), pc],
+               start: location().start.offset, end: location().end.offset } }
+  / id:SymbolIdentifier po:ParenOpen _ params:Parameters _ "," _ &{ return options.strict !== true; }
+    {
+      const s = location().start.offset;
+      const e = location().end.offset;
+      if (params.length === 0) {
+        return { type: 'function', name: id.name, start: s, end: e,
+                 children: [po, mkError(po.end, e, 'emptyFunctionParam')] };
+      }
+      return { type: 'function', name: id.name, start: s, end: e,
+               children: [po, ...params.map(p => ({ ...p, end: e })),
+                          mkError(po.end, e, 'trailingFunctionComma', { wip: true })] };
+    }
+  / id:SymbolIdentifier po:ParenOpen _ ic:InvalidParamContent _ pc:ParenClose &{ return options.strict !== true; }
+    {
+      return { type: 'function', name: id.name,
+               start: location().start.offset, end: location().end.offset,
+               children: [po, ic, pc] };
+    }
+  / id:SymbolIdentifier po:ParenOpen !. &{ return options.strict !== true; }
+    {
+      return { type: 'function', name: id.name,
+               start: location().start.offset, end: location().end.offset,
+               children: [po, mkError(po.end, po.end, 'unclosedFunctionParen', { wip: true })] };
+    }
+  / id:SymbolIdentifier po:ParenOpen _ params:Parameters _ &{ return options.strict !== true; }
+    {
+      const s = location().start.offset;
+      const e = location().end.offset;
+      return { type: 'function', name: id.name, start: s, end: e,
+               children: [po, ...params.map(p => ({ ...p, end: e })),
+                          mkError(e, e, 'unclosedFunctionParen', { wip: true })] };
+    }
+  / id:SymbolIdentifier po:ParenOpen _ &{ return options.strict !== true; }
+    {
+      const e = location().end.offset;
+      return { type: 'function', name: id.name,
+               start: location().start.offset, end: e,
+               children: [po, mkError(e, e, 'unclosedFunctionParen', { wip: true })] };
+    }
+
+InvalidParamContent
+  = (!ParenClose .)+ {
+      return mkError(location().start.offset, location().end.offset, 'invalidMethodChainSyntax');
+    }
+
+ParenOpen
+  = '(' { return { type: 'paren_open', start: location().start.offset, end: location().end.offset } }
+
+ParenClose
+  = ')' { return { type: 'paren_close', start: location().start.offset, end: location().end.offset } }
+
+Parameters
+  = Parameter|..,  _ ',' _|
+
+// Chain is only attempted when the input starts with a valid chain character
+// (SymbolIdentifier first char, @, or [). This ensures non-identifier content
+// (e.g. bare digits) falls through to InvalidParamContent rather than being
+// wrapped in a Chain containing an error node.
+Parameter
+  = (str:String { return { type: 'string', value: str, start: location().start.offset, end: location().end.offset}})
+  / (num:Number { return { type: 'number', value: num, start: location().start.offset, end: location().end.offset}})
+  / Array
+  / &(SymbolIdentifier / "@" / LiteralIdentifier) chain:Chain { return chain; }
+
+LiteralIdentifier
+  = '[' id:NonEmptyString ']' { return { type: 'identifier', name: id,
+                                         start: location().start.offset, end: location().end.offset } }
+
+SymbolIdentifier
+  = first:[a-zA-Z0-9_] rest:[a-zA-Z0-9_-]* { return { type: 'identifier', name: first + rest.join(''),
+                                               start: location().start.offset, end: location().end.offset } }
+
+NonEmptyString
+  = "'" chars:StringChar+ "'" { return chars.join('') }
+
+String
+  = "'" chars:StringChar* "'" { return chars.join('') }
+
+Array
+  = '[' _ items:ArrayItems? _ ']' {
+    return {
+      type: 'array',
+      children: items || [],
+      start: location().start.offset,
+      end: location().end.offset
+    }
+  }
+
+ArrayItems
+  = ArrayItem|..,  _ ',' _|
+
+ArrayItem
+  = (str:String { return { type: 'string', value: str}})
+  / (num:Number { return { type: 'number', value: num}})
+
+StringChar
+  = !(Quote / "\\") char:. { return char }
+  / "\\" char:Escapables { return char }
+
+Number
+  = _ '#'[0-9]+(Dot[0-9]+)? { return parseFloat(text().substr(1)) }
+
+Escapables
+  = Escape / Quote
+
+Escape
+  = '\\'
+
+Dot
+  = '.'
+
+Quote
+  = "'"
+
+_ "whitespace"
+  = [ \t\n\r]*

package/dist/components/SmartTextInput/parser/method-chain/parser.d.mts

@@ -0,0 +1,21 @@
+import type { ASTChain } from './types';
+
+export type ParseOptions = {
+  /**
+   * When true, Chain throws on invalid input instead of returning error nodes.
+   * Must be explicitly set to true for workflow/method-chain callers.
+   * Defaults to false (error-recovering) — SmartTextInput callers can omit this.
+   */
+  strict?: boolean;
+};
+
+export function parse(input: string, options?: ParseOptions): ASTChain;
+
+export class SyntaxError extends Error {
+  expected: string[];
+  found: string;
+  location: {
+    start: number;
+    end: number;
+  };
+}

package/dist/components/SmartTextInput/parser/method-chain/parser.mjs

@@ -0,0 +1,2 @@
+import { i as peg$parse, n as peg$SyntaxError, r as peg$allowedStartRules } from "../../../../parser-Kxos6siN.mjs";
+export { peg$allowedStartRules as StartRules, peg$SyntaxError as SyntaxError, peg$parse as parse };

package/dist/components/SmartTextInput/parser/method-chain/types.d.mts

@@ -0,0 +1,105 @@
+//#region components/SmartTextInput/parser/method-chain/types.d.ts
+declare enum ASTNodeType {
+  Chain = "chain",
+  Identifier = "identifier",
+  Function = "function",
+  CustomFunction = "custom_function",
+  String = "string",
+  Number = "number",
+  Array = "array",
+  ParenOpen = "paren_open",
+  ParenClose = "paren_close",
+  Error = "error",
+  Dot = "dot"
+}
+declare enum ErrorKind {
+  InvalidMethodChainSyntax = "invalidMethodChainSyntax",
+  EmptyFunctionParam = "emptyFunctionParam",
+  TrailingFunctionComma = "trailingFunctionComma",
+  UnclosedFunctionParen = "unclosedFunctionParen",
+  TrailingDot = "trailingDot"
+}
+type ASTMethodChainNode = ASTIdentifierNode | ASTFunctionNode | ASTCustomFunctionNode;
+declare const isASTMethodChainNode: (node: {
+  type: string;
+}) => node is ASTMethodChainNode;
+declare const isAnyASTFunctionNode: (node: {
+  type: string;
+}) => node is ASTFunctionNode | ASTCustomFunctionNode;
+declare const isASTCustomFunctionNode: (node: {
+  type: string;
+}) => node is ASTCustomFunctionNode;
+type ASTFunctionParamType = ASTChain | ASTStringNode | ASTNumberNode | ASTArrayNode | ASTParenOpenNode | ASTParenCloseNode | ASTErrorNode;
+declare const isRealASTFunctionParamType: (node: {
+  type: string;
+}) => node is ASTChain | ASTStringNode | ASTNumberNode | ASTArrayNode;
+interface ASTChain {
+  type: ASTNodeType.Chain;
+  children: (ASTMethodChainNode | ASTDotNode | ASTErrorNode)[];
+  start: number;
+  end: number;
+}
+interface ASTStringNode {
+  type: ASTNodeType.String;
+  value: string;
+  start: number;
+  end: number;
+}
+interface ASTNumberNode {
+  type: ASTNodeType.Number;
+  value: number;
+  start: number;
+  end: number;
+}
+interface ASTArrayNode {
+  type: ASTNodeType.Array;
+  children: (ASTStringNode | ASTNumberNode)[];
+  start: number;
+  end: number;
+}
+interface ASTIdentifierNode {
+  type: ASTNodeType.Identifier;
+  name: string;
+  prefix?: string;
+  start: number;
+  end: number;
+}
+interface ASTErrorNode {
+  type: ASTNodeType.Error;
+  start: number;
+  end: number;
+  wip?: boolean;
+  kind?: 'invalidMethodChainSyntax' | 'emptyFunctionParam' | 'trailingFunctionComma' | 'unclosedFunctionParen' | 'trailingDot' | 'trailingAtSign';
+}
+interface ASTDotNode {
+  type: ASTNodeType.Dot;
+  start: number;
+  end: number;
+}
+interface ASTParenOpenNode {
+  type: ASTNodeType.ParenOpen;
+  start: number;
+  end: number;
+}
+interface ASTParenCloseNode {
+  type: ASTNodeType.ParenClose;
+  start: number;
+  end: number;
+}
+interface ASTFunctionNode {
+  type: ASTNodeType.Function;
+  name: string;
+  children: ASTFunctionParamType[];
+  start: number;
+  end: number;
+}
+interface ASTCustomFunctionNode {
+  type: ASTNodeType.CustomFunction;
+  name: string;
+  children: ASTFunctionParamType[];
+  start: number;
+  end: number;
+}
+//#endregion
+export { ASTArrayNode, ASTChain, ASTCustomFunctionNode, ASTDotNode, ASTErrorNode, ASTFunctionNode, ASTFunctionParamType, ASTIdentifierNode, ASTMethodChainNode, ASTNodeType, ASTNumberNode, ASTParenCloseNode, ASTParenOpenNode, ASTStringNode, ErrorKind, isASTCustomFunctionNode, isASTMethodChainNode, isAnyASTFunctionNode, isRealASTFunctionParamType };
+//# sourceMappingURL=types.d.mts.map

package/dist/components/SmartTextInput/parser/method-chain/types.mjs

@@ -0,0 +1,31 @@
+//#region components/SmartTextInput/parser/method-chain/types.ts
+let ASTNodeType = /* @__PURE__ */ function(ASTNodeType) {
+	ASTNodeType["Chain"] = "chain";
+	ASTNodeType["Identifier"] = "identifier";
+	ASTNodeType["Function"] = "function";
+	ASTNodeType["CustomFunction"] = "custom_function";
+	ASTNodeType["String"] = "string";
+	ASTNodeType["Number"] = "number";
+	ASTNodeType["Array"] = "array";
+	ASTNodeType["ParenOpen"] = "paren_open";
+	ASTNodeType["ParenClose"] = "paren_close";
+	ASTNodeType["Error"] = "error";
+	ASTNodeType["Dot"] = "dot";
+	return ASTNodeType;
+}({});
+let ErrorKind = /* @__PURE__ */ function(ErrorKind) {
+	ErrorKind["InvalidMethodChainSyntax"] = "invalidMethodChainSyntax";
+	ErrorKind["EmptyFunctionParam"] = "emptyFunctionParam";
+	ErrorKind["TrailingFunctionComma"] = "trailingFunctionComma";
+	ErrorKind["UnclosedFunctionParen"] = "unclosedFunctionParen";
+	ErrorKind["TrailingDot"] = "trailingDot";
+	return ErrorKind;
+}({});
+const isASTMethodChainNode = (node) => node.type === "identifier" || node.type === "function" || node.type === "custom_function";
+const isAnyASTFunctionNode = (node) => node.type === "function" || node.type === "custom_function";
+const isASTCustomFunctionNode = (node) => node.type === "custom_function";
+const isRealASTFunctionParamType = (node) => node.type === "chain" || node.type === "string" || node.type === "number" || node.type === "array";
+//#endregion
+export { ASTNodeType, ErrorKind, isASTCustomFunctionNode, isASTMethodChainNode, isAnyASTFunctionNode, isRealASTFunctionParamType };
+
+//# sourceMappingURL=types.mjs.map

package/dist/components/SmartTextInput/parser/method-chain/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../components/SmartTextInput/parser/method-chain/types.ts"],"sourcesContent":["export enum ASTNodeType {\n  Chain = 'chain',\n  Identifier = 'identifier',\n  Function = 'function',\n  CustomFunction = 'custom_function',\n  String = 'string',\n  Number = 'number',\n  Array = 'array',\n  ParenOpen = 'paren_open',\n  ParenClose = 'paren_close',\n  Error = 'error',\n  Dot = 'dot',\n}\n\nexport enum ErrorKind {\n  InvalidMethodChainSyntax = 'invalidMethodChainSyntax',\n  EmptyFunctionParam = 'emptyFunctionParam',\n  TrailingFunctionComma = 'trailingFunctionComma',\n  UnclosedFunctionParen = 'unclosedFunctionParen',\n  TrailingDot = 'trailingDot',\n}\n\nexport type ASTMethodChainNode = ASTIdentifierNode | ASTFunctionNode | ASTCustomFunctionNode;\n\nexport const isASTMethodChainNode = (node: { type: string }): node is ASTMethodChainNode =>\n  node.type === ASTNodeType.Identifier ||\n  node.type === ASTNodeType.Function ||\n  node.type === ASTNodeType.CustomFunction;\n\nexport const isAnyASTFunctionNode = (node: {\n  type: string;\n}): node is ASTFunctionNode | ASTCustomFunctionNode =>\n  node.type === ASTNodeType.Function || node.type === ASTNodeType.CustomFunction;\n\nexport const isASTCustomFunctionNode = (node: { type: string }): node is ASTCustomFunctionNode =>\n  node.type === ASTNodeType.CustomFunction;\n\nexport type ASTFunctionParamType =\n  | ASTChain\n  | ASTStringNode\n  | ASTNumberNode\n  | ASTArrayNode\n  | ASTParenOpenNode\n  | ASTParenCloseNode\n  | ASTErrorNode;\n\nexport const isRealASTFunctionParamType = (node: {\n  type: string;\n}): node is ASTChain | ASTStringNode | ASTNumberNode | ASTArrayNode =>\n  node.type === ASTNodeType.Chain ||\n  node.type === ASTNodeType.String ||\n  node.type === ASTNodeType.Number ||\n  node.type === ASTNodeType.Array;\n\nexport interface ASTChain {\n  type: ASTNodeType.Chain;\n  children: (ASTMethodChainNode | ASTDotNode | ASTErrorNode)[];\n  start: number;\n  end: number;\n}\n\nexport interface ASTStringNode {\n  type: ASTNodeType.String;\n  value: string;\n  start: number;\n  end: number;\n}\n\nexport interface ASTNumberNode {\n  type: ASTNodeType.Number;\n  value: number;\n  start: number;\n  end: number;\n}\n\nexport interface ASTArrayNode {\n  type: ASTNodeType.Array;\n  children: (ASTStringNode | ASTNumberNode)[];\n  start: number;\n  end: number;\n}\n\nexport interface ASTIdentifierNode {\n  type: ASTNodeType.Identifier;\n  name: string;\n  prefix?: string;\n  start: number;\n  end: number;\n}\n\nexport interface ASTErrorNode {\n  type: ASTNodeType.Error;\n  start: number;\n  end: number;\n  wip?: boolean;\n  kind?:\n    | 'invalidMethodChainSyntax'\n    | 'emptyFunctionParam'\n    | 'trailingFunctionComma'\n    | 'unclosedFunctionParen'\n    | 'trailingDot'\n    | 'trailingAtSign';\n}\n\nexport interface ASTDotNode {\n  type: ASTNodeType.Dot;\n  start: number;\n  end: number;\n}\n\nexport interface ASTParenOpenNode {\n  type: ASTNodeType.ParenOpen;\n  start: number;\n  end: number;\n}\n\nexport interface ASTParenCloseNode {\n  type: ASTNodeType.ParenClose;\n  start: number;\n  end: number;\n}\n\nexport interface ASTFunctionNode {\n  type: ASTNodeType.Function;\n  name: string;\n  children: ASTFunctionParamType[];\n  start: number;\n  end: number;\n}\n\nexport interface ASTCustomFunctionNode {\n  type: ASTNodeType.CustomFunction;\n  name: string;\n  children: ASTFunctionParamType[];\n  start: number;\n  end: number;\n}\n"],"mappings":";AAAA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,WAAA;AACA,aAAA,gBAAA;AACA,aAAA,cAAA;AACA,aAAA,oBAAA;AACA,aAAA,YAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;AACA,aAAA,eAAA;AACA,aAAA,gBAAA;AACA,aAAA,WAAA;AACA,aAAA,SAAA;;KACD;AAED,IAAY,YAAL,yBAAA,WAAA;AACL,WAAA,8BAAA;AACA,WAAA,wBAAA;AACA,WAAA,2BAAA;AACA,WAAA,2BAAA;AACA,WAAA,iBAAA;;KACD;AAID,MAAa,wBAAwB,SACnC,KAAK,SAAA,gBACL,KAAK,SAAA,cACL,KAAK,SAAA;AAEP,MAAa,wBAAwB,SAGnC,KAAK,SAAA,cAAiC,KAAK,SAAA;AAE7C,MAAa,2BAA2B,SACtC,KAAK,SAAA;AAWP,MAAa,8BAA8B,SAGzC,KAAK,SAAA,WACL,KAAK,SAAA,YACL,KAAK,SAAA,YACL,KAAK,SAAA"}