@bikdotai/bik-component-library 0.0.865-beta.6 → 0.0.865-beta.8

package/dist/esm/components/schedule-builder/ScheduleBuilder.styled.d.ts

@@ -0,0 +1,81 @@
+/**
+ * A labelled field column — "Start date" and "Time" sit side by side.
+ * 6px label-to-input gap comes from the design's `input-large` component.
+ */
+export declare const FieldColumn: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DateFieldColumn: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Same share as the date column plus the am/pm dropdown's footprint (84px
+ * wide + 8px gap), so the time box itself matches the date box rather than
+ * being squeezed by the dropdown sitting beside it.
+ */
+export declare const TimeFieldColumn: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * The Start date / Time row.
+ *
+ * Aligned to the top rather than centred: the time field grows taller when its
+ * validation message appears, and a centred row would shift the date field up
+ * and down with it.
+ */
+export declare const FieldsRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Wraps the date picker so its button matches the 48px input height. */
+export declare const DatePickerSlot: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * The time box and its am/pm dropdown.
+ *
+ * Top-aligned rather than centred: the validation message renders inside the
+ * time slot, so a centred row would push am/pm downward as the message appears.
+ */
+export declare const TimeInputRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** The hh:mm dropdown takes the free space; am/pm is fixed beside it. */
+export declare const TimeDropdownSlot: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MeridiemDropdownSlot: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Frequency field. Fills its column, which is a DateFieldColumn so it takes the
+ * same share as Start date above it — the design has both as 337px halves of the
+ * 690px row, rather than a fixed 220px box that drifts as the panel resizes.
+ */
+export declare const FrequencyDropdownSlot: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Monthly date grid. Fixed at 337px so six CHIP_WIDTH chips and their 8px gaps
+ * wrap onto a tidy 6-per-row grid rather than reflowing with the panel width.
+ */
+export declare const MonthDateGridSlot: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Icon + text caption under a picker, for both validation errors and the
+ * skipped-month note. The icon is pinned to its 16px box and aligned to the
+ * first line — as a bare flex child it would stretch and open a wide gap.
+ */
+export declare const CaptionWithIcon: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Field label row — holds the caption and its required asterisk. */
+export declare const FieldLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Frequency and time read in semibold inside the summary line. */
+export declare const SummaryHighlight: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const RequiredMark: import('styled-components').StyledComponent<"span", any, {}, never>;
+/** A single selectable send-mode card. */
+export declare const SendModeOption: import('styled-components').StyledComponent<"div", any, {
+    active: boolean;
+    disabled: boolean;
+}, never>;
+/** The row of send-mode cards. */
+export declare const SendModeRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** 1px rule between the send-mode radios and the fields below. */
+export declare const SectionDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** "Ends" row wraps when the three options do not fit on one line. */
+export declare const EndsRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** 44px wide, 32px tall — the design's small input. */
+export declare const RunCountInputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EndDateWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const UpcomingRunItem: import('styled-components').StyledComponent<"div", any, {
+    isLast: boolean;
+}, never>;
+export declare const UpcomingRunDot: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RefreshSegmentRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RefreshSegmentCopy: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Generic vertical stack — the library cannot rely on the app's utility classes. */
+export declare const Column: import('styled-components').StyledComponent<"div", any, {
+    gap?: number | undefined;
+}, never>;
+export declare const Row: import('styled-components').StyledComponent<"div", any, {
+    gap?: number | undefined;
+}, never>;

package/dist/esm/components/schedule-builder/ScheduleBuilder.styled.js

@@ -0,0 +1,168 @@
+import i from "styled-components";
+import { COLORS as t } from "../../constants/Theme.js";
+const o = 84, n = 8, d = i.div`
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	gap: 6px;
+`, l = i(d)`
+	flex: 1 1 0;
+`, a = i(d)`
+	flex: 1 1 ${o + n}px;
+`, s = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	width: 100%;
+	align-items: flex-start;
+`, x = i.div`
+	height: 48px;
+`, c = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: ${n}px;
+	align-items: flex-start;
+`, g = i.div`
+	flex: 1;
+	min-width: 0;
+`, f = i.div`
+	flex: 0 0 ${o}px;
+`, h = i.div`
+	width: 100%;
+	min-width: 0;
+`, m = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 337px;
+	max-width: 100%;
+`, w = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 4px;
+
+	svg {
+		flex: 0 0 16px;
+		width: 16px;
+		height: 16px;
+	}
+`, u = i.div`
+	display: flex;
+	align-items: center;
+	gap: 2px;
+`, v = i.span`
+	font-weight: 600;
+`, y = i.span`
+	color: ${t.content.negative};
+`, b = i.div`
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+	padding: 16px;
+	flex: 1;
+	height: 56px;
+	border-radius: 4px;
+	border: 1px solid
+		${(e) => e.active ? t.background.inverseLight : t.stroke.primary};
+	background: ${(e) => e.active ? t.background.brandLight : t.surface.standard};
+	cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
+	opacity: ${(e) => e.disabled ? 0.6 : 1};
+`, R = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	width: 100%;
+`, k = i.div`
+	height: 1px;
+	width: 100%;
+	background: ${t.stroke.primary};
+`, $ = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`, S = i.div`
+	width: 44px;
+`, D = i.div`
+	width: 168px;
+`, C = i.div`
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+
+	/* connector spanning the 16px gap to the next run */
+	::before {
+		content: '';
+		position: absolute;
+		left: 4.5px;
+		top: 100%;
+		height: 16px;
+		width: 1px;
+		background: ${(e) => e.isLast ? "transparent" : t.stroke.brandLightAlt};
+	}
+`, I = i.div`
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background: ${t.background.inverseLight};
+	flex-shrink: 0;
+	z-index: 1;
+`, L = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	justify-content: space-between;
+	padding-top: 16px;
+	border-top: 1px solid ${t.stroke.primary};
+`, M = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+`, F = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: ${(e) => e.gap ?? 12}px;
+	width: 100%;
+`, T = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: ${(e) => e.gap ?? 8}px;
+`;
+export {
+  w as CaptionWithIcon,
+  F as Column,
+  l as DateFieldColumn,
+  x as DatePickerSlot,
+  D as EndDateWrapper,
+  $ as EndsRow,
+  d as FieldColumn,
+  u as FieldLabel,
+  s as FieldsRow,
+  h as FrequencyDropdownSlot,
+  f as MeridiemDropdownSlot,
+  m as MonthDateGridSlot,
+  M as RefreshSegmentCopy,
+  L as RefreshSegmentRow,
+  y as RequiredMark,
+  T as Row,
+  S as RunCountInputWrapper,
+  k as SectionDivider,
+  b as SendModeOption,
+  R as SendModeRow,
+  v as SummaryHighlight,
+  g as TimeDropdownSlot,
+  a as TimeFieldColumn,
+  c as TimeInputRow,
+  I as UpcomingRunDot,
+  C as UpcomingRunItem
+};
+//# sourceMappingURL=ScheduleBuilder.styled.js.map

package/dist/esm/components/schedule-builder/ScheduleBuilder.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleBuilder.styled.js","sources":["../../../../src/components/schedule-builder/ScheduleBuilder.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\n/** Fixed width of the am/pm dropdown, and the gap separating it from the time box. */\nconst MERIDIEM_SLOT_WIDTH = 84;\nconst TIME_ROW_GAP = 8;\n\n/**\n * A labelled field column — \"Start date\" and \"Time\" sit side by side.\n * 6px label-to-input gap comes from the design's `input-large` component.\n */\nexport const FieldColumn = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tgap: 6px;\n`;\n\nexport const DateFieldColumn = styled(FieldColumn)`\n\tflex: 1 1 0;\n`;\n\n/**\n * Same share as the date column plus the am/pm dropdown's footprint (84px\n * wide + 8px gap), so the time box itself matches the date box rather than\n * being squeezed by the dropdown sitting beside it.\n */\nexport const TimeFieldColumn = styled(FieldColumn)`\n\tflex: 1 1 ${MERIDIEM_SLOT_WIDTH + TIME_ROW_GAP}px;\n`;\n\n/**\n * The Start date / Time row.\n *\n * Aligned to the top rather than centred: the time field grows taller when its\n * validation message appears, and a centred row would shift the date field up\n * and down with it.\n */\nexport const FieldsRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 16px;\n\twidth: 100%;\n\talign-items: flex-start;\n`;\n\n/** Wraps the date picker so its button matches the 48px input height. */\nexport const DatePickerSlot = styled.div`\n\theight: 48px;\n`;\n\n/**\n * The time box and its am/pm dropdown.\n *\n * Top-aligned rather than centred: the validation message renders inside the\n * time slot, so a centred row would push am/pm downward as the message appears.\n */\nexport const TimeInputRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: ${TIME_ROW_GAP}px;\n\talign-items: flex-start;\n`;\n\n/** The hh:mm dropdown takes the free space; am/pm is fixed beside it. */\nexport const TimeDropdownSlot = styled.div`\n\tflex: 1;\n\tmin-width: 0;\n`;\n\nexport const MeridiemDropdownSlot = styled.div`\n\tflex: 0 0 ${MERIDIEM_SLOT_WIDTH}px;\n`;\n\n/**\n * Frequency field. Fills its column, which is a DateFieldColumn so it takes the\n * same share as Start date above it — the design has both as 337px halves of the\n * 690px row, rather than a fixed 220px box that drifts as the panel resizes.\n */\nexport const FrequencyDropdownSlot = styled.div`\n\twidth: 100%;\n\tmin-width: 0;\n`;\n\n/**\n * Monthly date grid. Fixed at 337px so six CHIP_WIDTH chips and their 8px gaps\n * wrap onto a tidy 6-per-row grid rather than reflowing with the panel width.\n */\nexport const MonthDateGridSlot = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\twidth: 337px;\n\tmax-width: 100%;\n`;\n\n/**\n * Icon + text caption under a picker, for both validation errors and the\n * skipped-month note. The icon is pinned to its 16px box and aligned to the\n * first line — as a bare flex child it would stretch and open a wide gap.\n */\nexport const CaptionWithIcon = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tgap: 4px;\n\n\tsvg {\n\t\tflex: 0 0 16px;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\n/** Field label row — holds the caption and its required asterisk. */\nexport const FieldLabel = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 2px;\n`;\n\n/** Frequency and time read in semibold inside the summary line. */\nexport const SummaryHighlight = styled.span`\n\tfont-weight: 600;\n`;\n\nexport const RequiredMark = styled.span`\n\tcolor: ${COLORS.content.negative};\n`;\n\n/** A single selectable send-mode card. */\nexport const SendModeOption = styled.div<{\n\tactive: boolean;\n\tdisabled: boolean;\n}>`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 4px;\n\tpadding: 16px;\n\tflex: 1;\n\theight: 56px;\n\tborder-radius: 4px;\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.active ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.surface.standard};\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.6 : 1)};\n`;\n\n/** The row of send-mode cards. */\nexport const SendModeRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 16px;\n\twidth: 100%;\n`;\n\n/** 1px rule between the send-mode radios and the fields below. */\nexport const SectionDivider = styled.div`\n\theight: 1px;\n\twidth: 100%;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\n/** \"Ends\" row wraps when the three options do not fit on one line. */\nexport const EndsRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\n/** 44px wide, 32px tall — the design's small input. */\nexport const RunCountInputWrapper = styled.div`\n\twidth: 44px;\n`;\n\nexport const EndDateWrapper = styled.div`\n\twidth: 168px;\n`;\n\nexport const UpcomingRunItem = styled.div<{ isLast: boolean }>`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 8px;\n\n\t/* connector spanning the 16px gap to the next run */\n\t::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 4.5px;\n\t\ttop: 100%;\n\t\theight: 16px;\n\t\twidth: 1px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.isLast ? 'transparent' : COLORS.stroke.brandLightAlt};\n\t}\n`;\n\nexport const UpcomingRunDot = styled.div`\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.background.inverseLight};\n\tflex-shrink: 0;\n\tz-index: 1;\n`;\n\nexport const RefreshSegmentRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 12px;\n\twidth: 100%;\n\tjustify-content: space-between;\n\tpadding-top: 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const RefreshSegmentCopy = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n/** Generic vertical stack — the library cannot rely on the app's utility classes. */\nexport const Column = styled.div<{ gap?: number }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: ${(props) => props.gap ?? 12}px;\n\twidth: 100%;\n`;\n\nexport const Row = styled.div<{ gap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: ${(props) => props.gap ?? 8}px;\n`;\n"],"names":["MERIDIEM_SLOT_WIDTH","TIME_ROW_GAP","FieldColumn","styled","DateFieldColumn","TimeFieldColumn","FieldsRow","DatePickerSlot","TimeInputRow","TimeDropdownSlot","MeridiemDropdownSlot","FrequencyDropdownSlot","MonthDateGridSlot","CaptionWithIcon","FieldLabel","SummaryHighlight","RequiredMark","COLORS","SendModeOption","props","SendModeRow","SectionDivider","EndsRow","RunCountInputWrapper","EndDateWrapper","UpcomingRunItem","UpcomingRunDot","RefreshSegmentRow","RefreshSegmentCopy","Column","Row"],"mappings":";;AAIA,MAAMA,IAAsB,IACtBC,IAAe,GAMRC,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrBC,IAAkBD,EAAOD,CAAW;AAAA;AAAA,GASpCG,IAAkBF,EAAOD,CAAW;AAAA,aACpCF,IAAsBC,CAAY;AAAA,GAUlCK,IAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBI,IAAiBJ,EAAO;AAAA;AAAA,GAUxBK,IAAeL,EAAO;AAAA;AAAA;AAAA,QAG3BF,CAAY;AAAA;AAAA,GAKPQ,IAAmBN,EAAO;AAAA;AAAA;AAAA,GAK1BO,IAAuBP,EAAO;AAAA,aAC9BH,CAAmB;AAAA,GAQnBW,IAAwBR,EAAO;AAAA;AAAA;AAAA,GAS/BS,IAAoBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAa3BU,IAAkBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAczBW,IAAaX,EAAO;AAAA;AAAA;AAAA;AAAA,GAOpBY,IAAmBZ,EAAO;AAAA;AAAA,GAI1Ba,IAAeb,EAAO;AAAA,UACzBc,EAAO,QAAQ,QAAQ;AAAA,GAIpBC,IAAiBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcjC,CAACgB,MACFA,EAAM,SAASF,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,eACzD,CAACE,MACdA,EAAM,SAASF,EAAO,WAAW,aAAaA,EAAO,QAAQ,QAAQ;AAAA,WAC5D,CAACE,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA,YACtD,CAACA,MAAWA,EAAM,WAAW,MAAM,CAAE;AAAA,GAIpCC,IAAcjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBkB,IAAiBlB,EAAO;AAAA;AAAA;AAAA,eAGtBc,EAAO,OAAO,OAAO;AAAA,GAIvBK,IAAUnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjBoB,IAAuBpB,EAAO;AAAA;AAAA,GAI9BqB,IAAiBrB,EAAO;AAAA;AAAA,GAIxBsB,IAAkBtB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAetB,CAACgB,MACdA,EAAM,SAAS,gBAAgBF,EAAO,OAAO,aAAa;AAAA;AAAA,GAIhDS,IAAiBvB,EAAO;AAAA;AAAA;AAAA;AAAA,eAItBc,EAAO,WAAW,YAAY;AAAA;AAAA;AAAA,GAKhCU,IAAoBxB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQfc,EAAO,OAAO,OAAO;AAAA,GAGjCW,IAAqBzB,EAAO;AAAA;AAAA;AAAA;AAAA,GAO5B0B,IAAS1B,EAAO;AAAA;AAAA;AAAA,QAGrB,CAACgB,MAAUA,EAAM,OAAO,EAAE;AAAA;AAAA,GAIrBW,IAAM3B,EAAO;AAAA;AAAA;AAAA;AAAA,QAIlB,CAACgB,MAAUA,EAAM,OAAO,CAAC;AAAA;"}

package/dist/esm/components/schedule-builder/ScheduleEndPicker.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { RecurrenceValue } from './model';
+export interface ScheduleEndPickerProps {
+    value: RecurrenceValue;
+    onChange: (patch: Partial<RecurrenceValue>) => void;
+    /** Earliest selectable end date — normally the series' own start date. */
+    minEndDate?: Date;
+    'data-test'?: string;
+}
+/**
+ * "Never / After N runs / On <date>".
+ *
+ * The run-count input and the end-date picker stay mounted and go disabled with
+ * their mode rather than unmounting, so the row keeps its width and the controls
+ * do not jump as the merchant switches between them.
+ */
+export declare const ScheduleEndPicker: React.FC<ScheduleEndPickerProps>;

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js

@@ -0,0 +1,105 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { COLORS as s } from "../../constants/Theme.js";
+import { BodySecondary as R } from "../TypographyStyle.js";
+import { RECURRENCE_END_MODE as e } from "./model.js";
+import { FieldColumn as u, FieldLabel as N, EndsRow as O, Row as p, RunCountInputWrapper as D, EndDateWrapper as _ } from "./ScheduleBuilder.styled.js";
+import { MAX_RECURRENCE_RUNS as m } from "./ScheduleHelper.js";
+import { RadioButton as l } from "../radioButton/RadioButton.js";
+import { Input as S } from "../input/Input.js";
+import { DatePickerWrapper as h } from "../datePicker/DatePickerWrapper.js";
+const c = s.background.inverseLight, F = ({
+  value: o,
+  onChange: t,
+  minEndDate: f,
+  "data-test": A
+}) => {
+  const n = o?.endMode ?? e.NEVER;
+  return /* @__PURE__ */ a(u, { "data-test": A, children: [
+    /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(R, { color: s.content.primary, children: "Ends" }) }),
+    /* @__PURE__ */ a(O, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          isActive: n === e.NEVER,
+          label: "Never",
+          value: e.NEVER,
+          onValueChange: () => t({ endMode: e.NEVER }),
+          activeColor: c,
+          skipSelectingOff: n === e.NEVER
+        }
+      ),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.AFTER_RUNS,
+            label: "After",
+            value: e.AFTER_RUNS,
+            onValueChange: () => t({ endMode: e.AFTER_RUNS }),
+            activeColor: c,
+            skipSelectingOff: n === e.AFTER_RUNS
+          }
+        ),
+        /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
+          S,
+          {
+            variant: "small",
+            type: "number",
+            placeholder: String(m),
+            value: o?.endAfterRuns ? String(o.endAfterRuns) : "",
+            state: n === e.AFTER_RUNS ? "none" : "disabled",
+            onChangeText: (i) => {
+              const d = i.replace(/\D/g, "");
+              if (!d) {
+                t({ endAfterRuns: void 0 });
+                return;
+              }
+              t({
+                endAfterRuns: Math.min(
+                  Number(d),
+                  m
+                )
+              });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ r(R, { color: s.content.primary, children: "runs" })
+      ] }),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.ON_DATE,
+            label: "On",
+            value: e.ON_DATE,
+            onValueChange: () => t({ endMode: e.ON_DATE }),
+            activeColor: c,
+            skipSelectingOff: n === e.ON_DATE
+          }
+        ),
+        /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(
+          h,
+          {
+            val: o?.endOnDate ? new Date(o.endOnDate * 1e3) : void 0,
+            disabled: n !== e.ON_DATE,
+            onChange: (i) => {
+              const d = Array.isArray(i) ? i[0] : i;
+              if (!d) return;
+              const E = new Date(d);
+              E.setHours(23, 59, 59, 0), t({
+                endMode: e.ON_DATE,
+                endOnDate: Math.floor(E.getTime() / 1e3)
+              });
+            },
+            calendarProps: { minDate: f },
+            pickerStyles: { top: 8, zIndex: 4 }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  F as ScheduleEndPicker
+};
+//# sourceMappingURL=ScheduleEndPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleEndPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleEndPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { DatePickerWrapper } from '../datePicker';\nimport { Input } from '../input';\nimport { RadioButton } from '../radioButton';\nimport { BodySecondary } from '../TypographyStyle';\nimport { RECURRENCE_END_MODE, RecurrenceValue } from './model';\nimport {\n\tEndDateWrapper,\n\tEndsRow,\n\tFieldColumn,\n\tFieldLabel,\n\tRow,\n\tRunCountInputWrapper,\n} from './ScheduleBuilder.styled';\nimport { MAX_RECURRENCE_RUNS } from './ScheduleHelper';\n\n/**\n * Radios in this section read brand purple when selected. The library defaults\n * to the positive green, which is not what the design shows.\n */\nconst RADIO_ACTIVE_COLOR = COLORS.background.inverseLight;\n\nexport interface ScheduleEndPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/** Earliest selectable end date — normally the series' own start date. */\n\tminEndDate?: Date;\n\t'data-test'?: string;\n}\n\n/**\n * \"Never / After N runs / On <date>\".\n *\n * The run-count input and the end-date picker stay mounted and go disabled with\n * their mode rather than unmounting, so the row keeps its width and the controls\n * do not jump as the merchant switches between them.\n */\nexport const ScheduleEndPicker: React.FC<ScheduleEndPickerProps> = ({\n\tvalue,\n\tonChange,\n\tminEndDate,\n\t'data-test': dataTest,\n}) => {\n\tconst endMode = value?.endMode ?? RECURRENCE_END_MODE.NEVER;\n\n\treturn (\n\t\t<FieldColumn data-test={dataTest}>\n\t\t\t<FieldLabel>\n\t\t\t\t<BodySecondary color={COLORS.content.primary}>Ends</BodySecondary>\n\t\t\t</FieldLabel>\n\t\t\t<EndsRow>\n\t\t\t\t<RadioButton\n\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tlabel=\"Never\"\n\t\t\t\t\tvalue={RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tonValueChange={() => onChange({ endMode: RECURRENCE_END_MODE.NEVER })}\n\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t// Inert only once selected — an end mode is always required, so the\n\t\t\t\t\t// active option cannot be clicked off.\n\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t/>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tlabel=\"After\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.AFTER_RUNS })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t/>\n\t\t\t\t\t<RunCountInputWrapper>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tplaceholder={String(MAX_RECURRENCE_RUNS)}\n\t\t\t\t\t\t\tvalue={value?.endAfterRuns ? String(value.endAfterRuns) : ''}\n\t\t\t\t\t\t\tstate={\n\t\t\t\t\t\t\t\tendMode === RECURRENCE_END_MODE.AFTER_RUNS ? 'none' : 'disabled'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChangeText={(input: string) => {\n\t\t\t\t\t\t\t\tconst digitsOnly = input.replace(/\\D/g, '');\n\t\t\t\t\t\t\t\tif (!digitsOnly) {\n\t\t\t\t\t\t\t\t\tonChange({ endAfterRuns: undefined });\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendAfterRuns: Math.min(\n\t\t\t\t\t\t\t\t\t\tNumber(digitsOnly),\n\t\t\t\t\t\t\t\t\t\tMAX_RECURRENCE_RUNS,\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RunCountInputWrapper>\n\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>runs</BodySecondary>\n\t\t\t\t</Row>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tlabel=\"On\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.ON_DATE })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t/>\n\t\t\t\t\t<EndDateWrapper>\n\t\t\t\t\t\t<DatePickerWrapper\n\t\t\t\t\t\t\tval={\n\t\t\t\t\t\t\t\tvalue?.endOnDate ? new Date(value.endOnDate * 1000) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={endMode !== RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\t\tonChange={(picked: Date | Date[]) => {\n\t\t\t\t\t\t\t\tconst dateValue = Array.isArray(picked) ? picked[0] : picked;\n\t\t\t\t\t\t\t\tif (!dateValue) return;\n\t\t\t\t\t\t\t\t// End of the chosen day, so a run landing that day still fires.\n\t\t\t\t\t\t\t\tconst endOfDay = new Date(dateValue);\n\t\t\t\t\t\t\t\tendOfDay.setHours(23, 59, 59, 0);\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendMode: RECURRENCE_END_MODE.ON_DATE,\n\t\t\t\t\t\t\t\t\tendOnDate: Math.floor(endOfDay.getTime() / 1000),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcalendarProps={{ minDate: minEndDate }}\n\t\t\t\t\t\t\tpickerStyles={{ top: 8, zIndex: 4 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</EndDateWrapper>\n\t\t\t\t</Row>\n\t\t\t</EndsRow>\n\t\t</FieldColumn>\n\t);\n};\n"],"names":["RADIO_ACTIVE_COLOR","COLORS","ScheduleEndPicker","value","onChange","minEndDate","dataTest","endMode","RECURRENCE_END_MODE","jsxs","FieldColumn","jsx","FieldLabel","BodySecondary","EndsRow","RadioButton","Row","RunCountInputWrapper","Input","MAX_RECURRENCE_RUNS","input","digitsOnly","EndDateWrapper","DatePickerWrapper","picked","dateValue","endOfDay"],"mappings":"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"}

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { RecurrenceValue } from './model';
+export interface ScheduleFrequencyPickerProps {
+    value: RecurrenceValue;
+    onChange: (patch: Partial<RecurrenceValue>) => void;
+    /**
+     * Width of the frequency menu. Defaults to matching its button — pass a
+     * measured width when the button sits in a narrow column and the menu should
+     * still be readable.
+     */
+    frequencyMenuWidth?: string;
+    'data-test'?: string;
+}
+/**
+ * Frequency, plus whichever "Repeat on" picker that frequency needs.
+ *
+ * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown
+ * and — for Custom — the 1-31 date grid. All three live here so a caller does not
+ * have to know which control belongs to which frequency.
+ */
+export declare const ScheduleFrequencyPicker: React.FC<ScheduleFrequencyPickerProps>;

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js

@@ -0,0 +1,136 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { COLORS as o } from "../../constants/Theme.js";
+import y from "../../icons/Informational/General/Info.js";
+import { ChipSelectorGroup as O } from "../chip-selector/ChipSelectorGroup.js";
+import { BodySecondary as a, BodyCaption as u } from "../TypographyStyle.js";
+import { RECURRENCE_FREQUENCY as c, MONTHLY_REPEAT_OPTION as h } from "./model.js";
+import { Column as g, FieldsRow as A, DateFieldColumn as C, FieldLabel as s, FrequencyDropdownSlot as M, FieldColumn as b, CaptionWithIcon as m, Row as W, MonthDateGridSlot as N } from "./ScheduleBuilder.styled.js";
+import { ScheduleHelper as P, getSkippedMonthCaption as Y, LAST_DAY_CHIP_VALUE as R, DAY_CHIP_OPTIONS as k, CHIP_WIDTH as v, DATE_CHIP_OPTIONS as w } from "./ScheduleHelper.js";
+import { Dropdown as T } from "../dropdown/Dropdown.js";
+const E = [
+  { label: "Daily", value: c.DAILY },
+  { label: "Weekly", value: c.WEEKLY },
+  { label: "Monthly", value: c.MONTHLY }
+], H = [
+  { label: "First", value: h.FIRST },
+  { label: "Last", value: h.LAST },
+  { label: "Custom", value: h.CUSTOM }
+], Q = ({ value: l, onChange: d, frequencyMenuWidth: L, "data-test": D }) => {
+  const i = new P(l), f = i.frequency === c.WEEKLY, p = i.frequency === c.MONTHLY, I = p && l?.monthlyRepeatOption === h.CUSTOM, S = Y(l?.datesOfMonth), _ = [
+    ...l?.datesOfMonth ?? [],
+    ...l?.lastDaySelected ? [R] : []
+  ];
+  return /* @__PURE__ */ n(g, { gap: 12, "data-test": D, children: [
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Select frequency" }) }),
+        /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+          T,
+          {
+            size: "default",
+            isSearchable: !1,
+            isMultiSelect: !1,
+            options: E,
+            buttonWidth: "100%",
+            width: L || "100%",
+            placeHolderHeight: "48px",
+            placeHolder: "Select frequency",
+            value: E.find(
+              (t) => t.value === i.frequency
+            )?.label,
+            onSelect: (t) => {
+              const r = Array.isArray(t) ? t[0] : t;
+              r?.value && d({
+                frequency: r.value
+              });
+            }
+          }
+        ) })
+      ] }),
+      !f && !p && /* @__PURE__ */ e(C, { "aria-hidden": !0 }),
+      f && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            "data-test": "recurrence-days-of-week",
+            ariaLabel: "Repeat on",
+            chipWidth: v,
+            options: k,
+            value: l?.daysOfWeek ?? [],
+            onChange: (t) => d({
+              daysOfWeek: t.filter(
+                (r) => typeof r == "number"
+              )
+            })
+          }
+        ),
+        i.isMissingWeeklyDays && /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+          /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this weekly recurring" })
+        ] })
+      ] }),
+      p && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat every" }) }),
+        /* @__PURE__ */ n(W, { gap: 8, children: [
+          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+            T,
+            {
+              size: "default",
+              isSearchable: !1,
+              isMultiSelect: !1,
+              options: H,
+              buttonWidth: "100%",
+              width: "220px",
+              placeHolderHeight: "48px",
+              placeHolder: "Select",
+              value: H.find(
+                (t) => t.value === l?.monthlyRepeatOption
+              )?.label,
+              onSelect: (t) => {
+                const r = Array.isArray(t) ? t[0] : t;
+                r?.value && d({
+                  monthlyRepeatOption: r.value
+                });
+              }
+            }
+          ) }),
+          /* @__PURE__ */ e(a, { color: o.content.primary, children: "day of the month" })
+        ] })
+      ] })
+    ] }),
+    I && /* @__PURE__ */ n(N, { children: [
+      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+      /* @__PURE__ */ e(
+        O,
+        {
+          "data-test": "recurrence-dates-of-month",
+          ariaLabel: "Repeat on dates",
+          chipWidth: v,
+          options: w,
+          size: "small",
+          wrap: !0,
+          value: _,
+          onChange: (t) => d({
+            datesOfMonth: t.filter(
+              (r) => typeof r == "number"
+            ),
+            lastDaySelected: t.includes(R)
+          })
+        }
+      ),
+      !!S && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.secondary }),
+        /* @__PURE__ */ e(u, { color: o.content.secondary, children: S })
+      ] }),
+      i.isMissingMonthlyDates && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+        /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this monthly recurring" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as ScheduleFrequencyPicker
+};
+//# sourceMappingURL=ScheduleFrequencyPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleFrequencyPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleFrequencyPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport Info from '../../icons/Informational/General/Info';\nimport { ChipSelectorGroup } from '../chip-selector';\nimport { Dropdown, DropdownOption, SingleOption } from '../dropdown';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tMONTHLY_REPEAT_OPTION,\n\tRECURRENCE_FREQUENCY,\n\tRecurrenceValue,\n} from './model';\nimport {\n\tCaptionWithIcon,\n\tColumn,\n\tDateFieldColumn,\n\tFieldColumn,\n\tFieldLabel,\n\tFieldsRow,\n\tFrequencyDropdownSlot,\n\tMonthDateGridSlot,\n\tRow,\n} from './ScheduleBuilder.styled';\nimport {\n\tCHIP_WIDTH,\n\tDATE_CHIP_OPTIONS,\n\tDAY_CHIP_OPTIONS,\n\tgetSkippedMonthCaption,\n\tLAST_DAY_CHIP_VALUE,\n\tScheduleHelper,\n} from './ScheduleHelper';\n\nconst FREQUENCY_OPTIONS: SingleOption[] = [\n\t{ label: 'Daily', value: RECURRENCE_FREQUENCY.DAILY },\n\t{ label: 'Weekly', value: RECURRENCE_FREQUENCY.WEEKLY },\n\t{ label: 'Monthly', value: RECURRENCE_FREQUENCY.MONTHLY },\n];\n\n/** \"Repeat every\" presets for a monthly recurrence. */\nconst MONTHLY_REPEAT_OPTIONS: SingleOption[] = [\n\t{ label: 'First', value: MONTHLY_REPEAT_OPTION.FIRST },\n\t{ label: 'Last', value: MONTHLY_REPEAT_OPTION.LAST },\n\t{ label: 'Custom', value: MONTHLY_REPEAT_OPTION.CUSTOM },\n];\n\nexport interface ScheduleFrequencyPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/**\n\t * Width of the frequency menu. Defaults to matching its button — pass a\n\t * measured width when the button sits in a narrow column and the menu should\n\t * still be readable.\n\t */\n\tfrequencyMenuWidth?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Frequency, plus whichever \"Repeat on\" picker that frequency needs.\n *\n * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown\n * and — for Custom — the 1-31 date grid. All three live here so a caller does not\n * have to know which control belongs to which frequency.\n */\nexport const ScheduleFrequencyPicker: React.FC<\n\tScheduleFrequencyPickerProps\n> = ({ value, onChange, frequencyMenuWidth, 'data-test': dataTest }) => {\n\tconst helper = new ScheduleHelper(value);\n\tconst isWeekly = helper.frequency === RECURRENCE_FREQUENCY.WEEKLY;\n\tconst isMonthly = helper.frequency === RECURRENCE_FREQUENCY.MONTHLY;\n\tconst isCustomMonthly =\n\t\tisMonthly && value?.monthlyRepeatOption === MONTHLY_REPEAT_OPTION.CUSTOM;\n\n\tconst skippedMonthCaption = getSkippedMonthCaption(value?.datesOfMonth);\n\n\t/** The last-day sentinel rides alongside the numeric dates in one chip group. */\n\tconst monthlyChipValue: (string | number)[] = [\n\t\t...(value?.datesOfMonth ?? []),\n\t\t...(value?.lastDaySelected ? [LAST_DAY_CHIP_VALUE] : []),\n\t];\n\n\treturn (\n\t\t<Column gap={12} data-test={dataTest}>\n\t\t\t<FieldsRow>\n\t\t\t\t{/*\n          Same flex share as the Start date column above it, per the design\n          where both fields are 337px halves of the 690px row.\n        */}\n\t\t\t\t<DateFieldColumn>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tSelect frequency\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\toptions={FREQUENCY_OPTIONS}\n\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\twidth={frequencyMenuWidth || '100%'}\n\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\tplaceHolder=\"Select frequency\"\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tFREQUENCY_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t(option) => option.value === helper.frequency,\n\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tfrequency: normalized.value as RECURRENCE_FREQUENCY,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t</DateFieldColumn>\n\t\t\t\t{/*\n          Holds the other half of the row when no picker follows, so the\n          frequency field stays the same width as Start date instead of\n          stretching across the whole row.\n        */}\n\t\t\t\t{!isWeekly && !isMonthly && <DateFieldColumn aria-hidden />}\n\t\t\t\t{isWeekly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\t\tdata-test=\"recurrence-days-of-week\"\n\t\t\t\t\t\t\tariaLabel=\"Repeat on\"\n\t\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\t\toptions={DAY_CHIP_OPTIONS}\n\t\t\t\t\t\t\tvalue={value?.daysOfWeek ?? []}\n\t\t\t\t\t\t\tonChange={(days) =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tdaysOfWeek: days.filter(\n\t\t\t\t\t\t\t\t\t\t(day): day is number => typeof day === 'number',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{helper.isMissingWeeklyDays && (\n\t\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\t\tSelect day(s) above to send this weekly recurring\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t\t{isMonthly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat every\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<Row gap={8}>\n\t\t\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\t\t\toptions={MONTHLY_REPEAT_OPTIONS}\n\t\t\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\t\t\twidth=\"220px\"\n\t\t\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\t\t\tplaceHolder=\"Select\"\n\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\tMONTHLY_REPEAT_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t\t\t(option) => option.value === value?.monthlyRepeatOption,\n\t\t\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t\t\tmonthlyRepeatOption:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalized.value as MONTHLY_REPEAT_OPTION,\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tday of the month\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t</FieldsRow>\n\n\t\t\t{isCustomMonthly && (\n\t\t\t\t<MonthDateGridSlot>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\tdata-test=\"recurrence-dates-of-month\"\n\t\t\t\t\t\tariaLabel=\"Repeat on dates\"\n\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\toptions={DATE_CHIP_OPTIONS}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t\tvalue={monthlyChipValue}\n\t\t\t\t\t\tonChange={(selected) =>\n\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\tdatesOfMonth: selected.filter(\n\t\t\t\t\t\t\t\t\t(item): item is number => typeof item === 'number',\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tlastDaySelected: selected.includes(LAST_DAY_CHIP_VALUE),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!skippedMonthCaption && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.secondary} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{skippedMonthCaption}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t\t{helper.isMissingMonthlyDates && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\tSelect day(s) above to send this monthly recurring\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t</MonthDateGridSlot>\n\t\t\t)}\n\t\t</Column>\n\t);\n};\n"],"names":["FREQUENCY_OPTIONS","RECURRENCE_FREQUENCY","MONTHLY_REPEAT_OPTIONS","MONTHLY_REPEAT_OPTION","ScheduleFrequencyPicker","value","onChange","frequencyMenuWidth","dataTest","helper","ScheduleHelper","isWeekly","isMonthly","isCustomMonthly","skippedMonthCaption","getSkippedMonthCaption","monthlyChipValue","LAST_DAY_CHIP_VALUE","jsxs","Column","FieldsRow","DateFieldColumn","jsx","FieldLabel","BodySecondary","COLORS","FrequencyDropdownSlot","Dropdown","option","selected","normalized","FieldColumn","ChipSelectorGroup","CHIP_WIDTH","DAY_CHIP_OPTIONS","days","day","CaptionWithIcon","Info","BodyCaption","Row","MonthDateGridSlot","DATE_CHIP_OPTIONS","item"],"mappings":"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"}