pebble-web 2.22.1 → 2.24.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/components/shared/MountTransition.d.ts +4 -4
  2. package/dist/pebble-web.dev.js +37 -35
  3. package/dist/pebble-web.dev.js.map +1 -1
  4. package/dist/pebble-web.es.dev.js +21 -16
  5. package/dist/pebble-web.es.dev.js.map +1 -1
  6. package/dist/pebble-web.es.js +20 -15
  7. package/dist/pebble-web.es.js.map +1 -1
  8. package/dist/pebble-web.js +36 -34
  9. package/dist/pebble-web.js.map +1 -1
  10. package/dist/pebble-web.module.dev.js +31 -29
  11. package/dist/pebble-web.module.dev.js.map +1 -1
  12. package/dist/pebble-web.module.js +30 -28
  13. package/dist/pebble-web.module.js.map +1 -1
  14. package/dist/pebble-web.umd.dev.js +3330 -1832
  15. package/dist/pebble-web.umd.dev.js.map +1 -1
  16. package/dist/pebble-web.umd.js +3341 -1843
  17. package/dist/pebble-web.umd.js.map +1 -1
  18. package/dist/utils/animation.d.ts +6 -18
  19. package/package.json +4 -4
  20. package/src/components/DropDown.tsx +6 -6
  21. package/src/components/Modal.tsx +10 -11
  22. package/src/components/Popper.tsx +6 -5
  23. package/src/components/Sidebar.tsx +1 -1
  24. package/src/components/Toast.tsx +4 -5
  25. package/src/components/TypeAhead.tsx +2 -2
  26. package/src/components/__tests__/__snapshots__/popper.test.tsx.snap +1 -1
  27. package/src/components/shared/MountTransition.tsx +25 -14
  28. package/src/utils/animation.ts +13 -4
package/dist/pebble-web.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pebble-web.js","sources":["../src/theme/mixins.ts","../src/theme/constants.ts","../src/theme/typography.ts","../src/theme/styles.ts","../src/components/styles/Button.styles.ts","../src/components/styles/Loader.styles.ts","../src/components/Loader.tsx","../src/components/Button.tsx","../src/components/styles/Calendar.styles.ts","../src/components/Calendar.tsx","../src/components/styles/Control.styles.ts","../src/components/shared/Control.tsx","../src/components/utils/getSelectedCheckboxes.ts","../src/components/CheckboxGroup.tsx","../src/components/styles/Dropdown.styles.ts","../src/components/OutsideClick.tsx","../src/utils/animation.ts","../src/components/DropDown.tsx","../src/components/styles/Input.styles.ts","../src/components/styles/Date.styles.ts","../src/components/Input.tsx","../src/components/NativeDateInput.tsx","../src/utils/useragent/index.tsx","../src/components/DateInput.tsx","../src/components/Logo.tsx","../src/components/styles/Toast.styles.ts","../src/components/Toast.tsx","../src/components/styles/Message.styles.ts","../src/components/Message.tsx","../src/components/Modal.tsx","../src/components/styles/Options.styles.ts","../src/components/Option.tsx","../src/components/styles/Search.styles.ts","../src/components/Search.tsx","../src/components/styles/OptionGroup.styles.ts","../src/components/shared/OptionGroup.tsx","../src/components/styles/OptionGroupCheckBox.styles.ts","../src/components/OptionGroupCheckBox.tsx","../src/components/OptionGroupRadio.tsx","../src/components/styles/Select.styles.ts","../src/components/Select.tsx","../src/components/styles/PhoneNumberInput.styles.ts","../src/components/PhoneNumberInput.tsx","../src/components/styles/Popper.styles.ts","../src/components/Popper.tsx","../src/components/styles/PopUp.styles.ts","../src/components/PopUp.tsx","../src/components/styles/Tabs.styles.ts","../src/components/Tabs.tsx","../src/components/styles/PresetCalendar.styles.ts","../src/components/PresetCalendar.tsx","../src/components/RadioGroup.tsx","../src/components/styles/Rating.styles.ts","../src/components/Rating.tsx","../src/components/styles/SecondaryInput.styles.ts","../src/components/SecondaryInput.tsx","../src/components/styles/Sidebar.styles.ts","../src/components/Sidebar.tsx","../src/components/Slider.tsx","../src/components/styles/Stepper.styles.ts","../src/components/Stepper.tsx","../src/components/styles/Switch.styles.ts","../src/components/Switch.tsx","../src/components/styles/Tag.styles.ts","../src/components/Tag.tsx","../src/components/Text.tsx","../src/components/styles/TimePicker.styles.ts","../src/components/TimePicker.tsx","../src/components/styles/Tooltip.styles.ts","../src/components/Tooltip.tsx","../src/components/styles/TypeAhead.styles.ts","../src/components/TypeAhead.tsx","../src/utils/strings/capitalize.ts","../src/utils/numbers/format.ts","../src/utils/analytics/ga.ts"],"sourcesContent":["export const textEllipsis = {\n overflowX: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\"\n} as const;\n\nexport const flexRow = {\n display: \"flex\",\n flexDirection: \"row\"\n} as const;\n\nexport const flexSpaceBetween = {\n ...flexRow,\n justifyContent: \"space-between\",\n alignContent: \"initial\"\n} as const;\n\nexport const flexMiddleAlign = {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n} as const;\n\nexport const getPlaceholderStyle = (color: string) =>\n ({\n \"::-webkit-input-placeholder\": { color },\n \"::-moz-placeholder\": { color },\n \":-ms-input-placeholder\": { color },\n \":-moz-placeholder\": { color },\n \"::placeholder\": { color }\n } as const);\n","import { ThemeConstants } from \"./typings/constants\";\nimport { colors } from \"pebble-shared\";\n\nexport const constants: ThemeConstants = {\n borderRadius: 3,\n buttonHeight: 40,\n animationCurve: \"cubic-bezier(.64,.09,.08,1)\",\n padding: {\n base: 20,\n higher: 60\n },\n\n border: {\n base: `1px solid ${colors.gray.light}`,\n light: `1px solid ${colors.gray.lighter}`\n },\n\n boxShadow: {\n base: `0 2px 7px 0 #F2F2F2`,\n elevated: `0 4px 7px 0 ${colors.gray.light}`,\n xElevated: \"0 2px 15px 0 rgba(0,0,0,0.1)\"\n }\n};\n","import { Typography } from \"./typings/typography\";\nimport { colors } from \"pebble-shared\";\n\nconst fontSize = {\n xs: 10,\n s: 12,\n normal: 14,\n l: 16,\n xl: 18,\n xll: 22\n};\n\nconst enum FontWeight {\n NORMAL = 400,\n BOLD = 500\n}\n\nexport const typography: Typography = {\n xll: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.xll\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xll\n }\n },\n\n xl: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xl\n }\n },\n\n l: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.dark,\n fontSize: fontSize.l\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.l\n }\n },\n\n normal: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.normal\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.normal\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.normal\n },\n lighter: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.base,\n fontSize: fontSize.normal\n },\n link: {\n fontWeight: FontWeight.NORMAL,\n color: colors.violet.base,\n fontSize: fontSize.normal\n }\n },\n\n s: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.s\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.s\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.s\n },\n lighter: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.base,\n fontSize: fontSize.s\n },\n link: {\n fontWeight: FontWeight.NORMAL,\n color: colors.violet.base,\n fontSize: fontSize.s\n }\n },\n\n xs: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xs\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.xs\n }\n }\n};\n","import { css } from \"emotion\";\nimport { constants } from \"./constants\";\nimport { typography } from \"./typography\";\nimport { colors } from \"pebble-shared\";\n\nexport const tableStyle = css({\n borderRadius: constants.borderRadius,\n border: constants.border.dark,\n ...typography.s.regular,\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n backgroundColor: colors.gray.lightest,\n \"tr:last-child\": {\n td: {\n border: 0\n },\n \"td:first-child\": {\n borderBottomLeftRadius: constants.borderRadius\n },\n \"td:last-child\": {\n borderBottomRightRadius: constants.borderRadius\n }\n },\n \"tr:first-child\": {\n \"th:first-child\": {\n borderLeftLeftRadius: constants.borderRadius\n },\n \"th:last-child\": {\n borderLeftRightRadius: constants.borderRadius\n }\n },\n th: {\n textAlign: \"left\",\n ...typography.xs.bold,\n color: colors.gray.dark\n },\n \"tbody > tr:nth-of-type(2n + 1)\": {\n backgroundColor: colors.white.base\n },\n \"th, td\": {\n height: 50,\n padding: \"10px 25px\",\n borderBottom: constants.border.dark\n }\n});\n\nexport const disableScrollY = css({\n overflowY: \"hidden\"\n});\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { ButtonType, MappingColorByType } from \"../typings/Button\";\nimport { colors } from \"pebble-shared\";\n\nconst { violet, gray, white, red, emerald } = colors;\n\nexport const smallButtonHeight = 40;\n\nconst commonButtonStyle = css({\n lineHeight: \"23px\",\n height: constants.buttonHeight,\n padding: \"0 20px\",\n display: \"flex\",\n alignItems: \"center\",\n transition: \"all ease-out .2s\",\n borderRadius: constants.borderRadius,\n outline: \"none\",\n position: \"relative\",\n overflow: \"hidden\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n justifyContent: \"center\",\n border: 0,\n \"&[disabled]\": {\n cursor: \"not-allowed\"\n }\n});\n\nconst mappingColorByType: MappingColorByType = {\n primary: {\n base: violet.base,\n hover: violet.light,\n active: violet.dark,\n disabled: violet.lighter\n },\n secondary: {\n textColor: gray.darker,\n base: gray.lighter,\n hover: gray.lightest,\n active: gray.base,\n disabled: gray.lighter\n },\n success: {\n base: emerald.base,\n hover: emerald.light,\n active: emerald.dark,\n disabled: emerald.lighter\n },\n alert: {\n base: red.base,\n hover: red.light,\n active: red.dark,\n disabled: red.lighter\n }\n};\n\nconst linkStyle = {\n backgroundColor: \"transparent\",\n border: 0,\n color: violet.base,\n minWidth: 0,\n padding: 0,\n \":not([disabled]):hover\": {\n textDecoration: \"underline\"\n },\n \"&[disabled]\": {\n color: violet.lighter\n }\n};\n\nconst getStyleByType = (type: ButtonType, filled: boolean) => {\n if (type === \"link\") return linkStyle;\n\n const _color = mappingColorByType[type];\n const { base: colorBase, disabled, hover, active, textColor } = _color;\n\n const defaultFontColor = filled ? textColor || white.base : colorBase;\n\n return {\n color: defaultFontColor,\n backgroundColor: filled ? colorBase : white.base,\n border: filled ? \"none\" : `1px solid ${colorBase}`,\n \"&:not([disabled]):hover\": {\n color: textColor || white.base,\n backgroundColor: hover,\n borderColor: hover\n },\n \"&:not([disabled]):active\": {\n color: textColor || white.base,\n backgroundColor: active,\n borderColor: active\n },\n \"&[disabled]\": {\n color: textColor || white.base,\n backgroundColor: disabled,\n borderColor: disabled\n }\n };\n};\n\nconst styleBasedOnSize = {\n \"x-small\": {\n height: 25,\n minWidth: 70,\n ...typography.xs.light\n },\n small: {\n height: smallButtonHeight,\n minWidth: 100,\n ...typography.s.regular\n },\n large: {\n height: 50,\n minWidth: 140,\n ...typography.normal.regular\n }\n};\n\nexport const getButtonStyle = (\n size: keyof typeof styleBasedOnSize,\n type: ButtonType,\n showShadow: boolean,\n filled: boolean\n) => {\n return css([\n commonButtonStyle,\n {\n ...styleBasedOnSize[size],\n ...getStyleByType(type, filled),\n boxShadow: showShadow ? constants.boxShadow.base : \"none\"\n }\n ]);\n};\n\nexport const iconStyle = css({\n marginLeft: 15,\n fontWeight: \"bold\",\n fontSize: 8,\n transition: \"transform ease-out .2s\",\n willTransform: \"transform\",\n marginTop: 2,\n color: colors.gray.dark\n});\n\nexport const dropDownButtonStyle = css({\n border: constants.border.base,\n \"&:not([disabled]):hover\": {\n backgroundColor: colors.gray.lighter\n }\n});\n\nexport const dropDownButtonDefaultStyle = css({\n backgroundColor: colors.white.base,\n color: colors.gray.darker,\n \"&:not([disabled]):hover\": {\n backgroundColor: colors.gray.lighter\n }\n});\n","import { keyframes, css } from \"emotion\";\nimport { mixins } from \"../../theme\";\n\nconst bounceDelay = keyframes({\n \"0%, 80%, 100%\": {\n transform: \"scale(0)\"\n },\n \"40%\": {\n transform: \"scale(1)\"\n }\n});\n\nexport const spinnerStyle = css({\n ...mixins.flexSpaceBetween,\n width: 70,\n \"> div\": {\n width: 18,\n height: 18,\n borderRadius: \"100%\",\n display: \"inline-block\",\n animation: `${bounceDelay} 1.4s infinite ease-in-out both`,\n \"&:first-of-type\": {\n animationDelay: \"-0.32s\"\n },\n \"&:nth-of-type(2n)\": {\n animationDelay: \"-0.16s\"\n }\n }\n});\n","import * as React from \"react\";\nimport { LoaderProps } from \"./typings/Loader\";\nimport { spinnerStyle } from \"./styles/Loader.styles\";\nimport { colors } from \"pebble-shared\";\nimport { cx } from \"emotion\";\n\nconst Loader: React.FunctionComponent<LoaderProps> = ({\n color = colors.gray.darker,\n scale = 1,\n className\n}) => {\n const style = {\n backgroundColor: color\n };\n return (\n <div\n className={cx(spinnerStyle, className)}\n style={{ transform: `scale(${scale})` }}\n >\n <div style={style} />\n <div style={style} />\n <div style={style} />\n </div>\n );\n};\n\nexport default Loader;\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport {\n iconStyle,\n getButtonStyle,\n dropDownButtonStyle,\n dropDownButtonDefaultStyle\n} from \"./styles/Button.styles\";\nimport Ink from \"react-ink\";\nimport { ButtonProps, DropDownButtonProps } from \"./typings/Button\";\nimport Loader from \"./Loader\";\nimport { colors } from \"pebble-shared\";\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n type = \"primary\",\n disabled,\n children,\n onClick,\n width,\n showShadow,\n className,\n showRipple = true,\n loading,\n outline,\n size = \"small\",\n buttonProps\n}: ButtonProps) => {\n const disableAction = disabled || loading;\n\n const _outline = size === \"x-small\" || !!outline;\n\n const _className = cx(\n getButtonStyle(size, type, !!showShadow, !_outline),\n className\n );\n\n return (\n <button\n className={_className}\n onClick={!disableAction ? onClick : undefined}\n style={{ width }}\n disabled={disabled}\n {...buttonProps}\n >\n {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}\n {!disableAction && showRipple && type !== \"link\" && <Ink />}\n </button>\n );\n};\n\nexport const DropDownButton = ({\n isOpen,\n isSelected,\n children,\n className,\n ...props\n}: DropDownButtonProps) => {\n const _className = cx(dropDownButtonStyle, {\n [dropDownButtonDefaultStyle]: !(isOpen || isSelected)\n });\n\n return (\n <Button {...props} type=\"secondary\" className={cx(_className, className)}>\n <React.Fragment>\n {children}{\" \"}\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{\n transform: isOpen ? \"rotate(180deg)\" : \"none\"\n }}\n />\n </React.Fragment>\n </Button>\n );\n};\n\nexport default Button;\n","import { css } from \"emotion\";\nimport { constants, mixins, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const wrapperStyle = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n boxShadow: constants.boxShadow.xElevated,\n overflow: \"hidden\",\n padding: 20,\n position: \"relative\"\n});\n\nexport const tileStyle = css({\n ...typography.normal.regular,\n height: 48,\n width: 48,\n padding: 0,\n position: \"relative\",\n textAlign: \"center\",\n cursor: \"pointer\",\n outline: \"none\",\n backgroundColor: colors.gray.lightest,\n borderRadius: constants.borderRadius,\n display: \"table\",\n borderCollapse: \"collapse\",\n border: `1px solid ${colors.white.base}`,\n borderLeft: 0,\n borderTop: 0,\n time: {\n fontFamily: \"inherit\"\n },\n \"&.react-calendar__tile--now\": {\n color: colors.violet.base\n },\n \"&:hover\": {\n backgroundColor: colors.gray.lighter\n },\n \"&[disabled]\": {\n color: colors.gray.base,\n \"&:hover\": {\n backgroundColor: colors.gray.lightest,\n cursor: \"not-allowed\"\n }\n },\n \"&.react-calendar__tile--active\": {\n backgroundColor: colors.violet.lightest,\n color: colors.violet.base\n },\n \"&.react-calendar__tile--rangeStart\": {\n backgroundColor: colors.violet.base,\n color: `${colors.white.base} !important`\n },\n \"&.react-calendar__tile--rangeEnd\": {\n backgroundColor: colors.violet.base,\n color: `${colors.white.base} !important`\n },\n \"&.react-calendar__tile--singleSelect\": {\n backgroundColor: colors.violet.base,\n color: colors.white.base\n },\n \"&.react-calendar__month-view__days__day--neighboringMonth\": {\n color: colors.gray.base\n }\n});\n\nexport const dateStyle = css({\n width: 356,\n margin: 10,\n position: \"relative\",\n \".react-calendar__month-view__weekdays__weekday\": {\n color: colors.gray.dark,\n lineSpacing: \"7px\",\n fontSize: 12,\n textAlign: \"center\"\n },\n \".react-calendar__navigation__arrow\": {\n border: `1px solid ${colors.gray.light}`,\n padding: \"8px 10px\",\n borderRadius: constants.borderRadius,\n alignItems: \"center\",\n display: \"flex\",\n cursor: \"pointer\",\n outline: \"none\",\n height: 40,\n width: 40,\n backgroundColor: colors.white.base,\n \"&.react-calendar__navigation__prev-button\": {\n position: \"absolute\",\n right: 47\n },\n \"&:disabled\": {\n cursor: \"not-allowed\"\n }\n },\n \".react-calendar__navigation__label\": {\n ...typography.xl.bold,\n textAlign: \"left\",\n border: 0,\n outline: \"none\",\n cursor: \"pointer\",\n backgroundColor: colors.white.base,\n paddingLeft: 5\n },\n \".react-calendar__month-view \": {\n marginTop: 30\n },\n \".react-calendar__month-view__weekdays\": {\n marginBottom: 20\n },\n \".react-calendar__decade-view__years, .react-calendar__century-view, .react-calendar__year-view\": {\n marginTop: 15\n }\n});\n\nexport const dotWrapper = css({\n display: \"flex\",\n justifyContent: \"center\",\n position: \"absolute\",\n width: \"100%\"\n});\n\nexport const dotStyle = css({\n height: 4,\n width: 4,\n display: \"inline-block\",\n borderRadius: constants.borderRadius,\n margin: \"5px 2px 0\"\n});\n\nexport const buttonsWrapper = css({\n ...mixins.flexSpaceBetween,\n marginTop: 20\n});\n","import * as React from \"react\";\nimport { CalendarTileProperties } from \"react-calendar/dist/entry.nostyle\";\nimport RCalendar from \"react-calendar/dist/Calendar\";\nimport { css, cx } from \"emotion\";\nimport { CalendarProps, CalendarState } from \"./typings/Calendar\";\nimport {\n buttonsWrapper,\n dateStyle,\n dotStyle,\n dotWrapper,\n tileStyle,\n wrapperStyle\n} from \"./styles/Calendar.styles\";\nimport Button from \"./Button\";\nimport { isSameDay, endOfDay, startOfDay, addDays, subDays } from \"date-fns\";\n\nclass Calendar extends React.PureComponent<CalendarProps, CalendarState> {\n static defaultProps: Partial<CalendarProps> = {\n onChange: () => {},\n tileDots: []\n };\n\n state: Readonly<CalendarState> = {\n value: this.props.selected,\n singleSelectedDate: null\n };\n\n private onChange = (value: Date | Date[]) => {\n // tslint:disable-next-line no-this-assignment Doing this to reduce lookups on this, not avoiding to use fat arrow functions\n const { props } = this;\n // The following is exactly the same code.\n // But Typescript cannot merge into one.\n if (props.range) {\n if (Array.isArray(value) && value.length === 2) {\n this.setState(\n {\n value: value as [Date, Date],\n singleSelectedDate: null,\n maxRangeDates: undefined\n },\n () => props.onChange(value as [Date, Date])\n );\n }\n } else {\n if (!Array.isArray(value)) {\n this.setState(\n {\n value,\n singleSelectedDate: null,\n maxRangeDates: undefined\n },\n () => props.onChange(value)\n );\n }\n }\n };\n\n private onDayClick = (day: Date) => {\n const { onClickDay } = this.props;\n if (this.props.range && this.props.maxRange) {\n const { maxRange } = this.props;\n this.setState({\n maxRangeDates: {\n future: addDays(day, maxRange),\n past: subDays(day, maxRange)\n }\n });\n }\n this.setState({ singleSelectedDate: [startOfDay(day), endOfDay(day)] });\n if (onClickDay) onClickDay(day);\n };\n\n private getTileContent = ({ date }: CalendarTileProperties) => {\n const dot = this.props.tileDots.find(\n datum => !!datum.timeStamp && isSameDay(date, datum.timeStamp)\n );\n\n return dot ? (\n <div className={dotWrapper}>\n {dot.colors &&\n dot.colors.map((color, i) => (\n <span\n key={i}\n className={dotStyle}\n style={{ backgroundColor: color }}\n />\n ))}\n </div>\n ) : null;\n };\n\n private getDisabledDays = ({ date }: CalendarTileProperties) => {\n const { disabledDays } = this.props;\n return (\n (disabledDays &&\n disabledDays.length &&\n disabledDays.some(_date => isSameDay(_date, date))) ||\n false\n );\n };\n\n private onApply = () => {\n // tslint:disable-next-line no-this-assignment\n const { props } = this;\n const { value, singleSelectedDate } = this.state;\n if (props.range && props.onApply) {\n if (singleSelectedDate) {\n props.onApply(singleSelectedDate);\n } else if (Array.isArray(value)) {\n props.onApply(value);\n } else if (value === undefined) {\n props.onApply(value);\n }\n } else if (!props.range && props.onApply && !Array.isArray(value)) {\n props.onApply(value);\n }\n };\n\n private onClear = () => {\n const { onClear } = this.props;\n this.setState({\n value: undefined\n });\n if (onClear) {\n onClear();\n }\n };\n\n render() {\n const {\n range,\n selected,\n hideShadow,\n className,\n onApply,\n onClear,\n maxDate,\n minDate,\n ...rest\n } = this.props;\n const { maxRangeDates } = this.state;\n\n return (\n <div\n className={cx(\n wrapperStyle,\n {\n [css({ boxShadow: \"none\" })]: !!hideShadow\n },\n className\n )}\n >\n <RCalendar\n {...rest}\n onChange={this.onChange}\n selectRange={range}\n view=\"month\"\n value={selected}\n next2Label={null}\n prev2Label={null}\n tileClassName={tileStyle}\n className={dateStyle}\n showNeighboringMonth={false}\n tileContent={this.getTileContent}\n tileDisabled={this.getDisabledDays}\n onClickDay={this.onDayClick}\n prevLabel={\n <i style={{ fontSize: 14 }} className=\"pi pi-chevron-left\" />\n }\n nextLabel={\n <i style={{ fontSize: 14 }} className=\"pi pi-arrow-right\" />\n }\n maxDate={maxDate || (maxRangeDates && maxRangeDates.future)}\n minDate={minDate || (maxRangeDates && maxRangeDates.past)}\n />\n\n {(onClear || onApply) && (\n <div className={buttonsWrapper}>\n {onClear && (\n <Button onClick={this.onClear} type=\"secondary\">\n Clear\n </Button>\n )}\n {onApply && <Button onClick={this.onApply}>Apply</Button>}\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Calendar;\n","import { css } from \"emotion\";\nimport { typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const radioIconStyle = css({\n marginRight: 10,\n fontSize: 16,\n paddingTop: 2,\n height: 18\n});\n\nexport const controlStyle = css({\n cursor: \"pointer\",\n display: \"flex\",\n outline: \"none\",\n padding: \"10px 0\",\n position: \"relative\",\n alignItems: \"center\",\n ...typography.normal.regular,\n \"&[data-disabled='true']\": {\n cursor: \"not-allowed\",\n \".i\": {\n color: colors.gray.light\n }\n }\n});\n","import * as React from \"react\";\nimport { controlStyle, radioIconStyle } from \"../styles/Control.styles\";\nimport { ControlProps } from \"../typings/Control\";\nimport { cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nfunction Control<OptionType>(props: ControlProps<OptionType>) {\n const {\n checked,\n onChange,\n value,\n disabled,\n children = ControlView,\n type,\n className,\n indeterminate\n } = props;\n return (\n <div\n className={cx(controlStyle, className)}\n role={type}\n aria-disabled={disabled}\n aria-checked={checked}\n data-disabled={disabled}\n data-indeterminate={indeterminate}\n tabIndex={checked ? 0 : -1}\n onClick={\n !disabled\n ? (e: React.MouseEvent) =>\n onChange && onChange({ value, checked: !checked }, e)\n : undefined\n }\n >\n {children(props)}\n </div>\n );\n}\n\ninterface ControlViewProps {\n label: React.ReactNode;\n checked?: boolean;\n type: \"radio\" | \"checkbox\";\n disabled?: boolean;\n iconClassName?: string;\n indeterminate?: boolean;\n}\n\nexport const ControlView = ({\n checked,\n label,\n type,\n disabled,\n iconClassName,\n indeterminate\n}: ControlViewProps) => {\n const isRadio = type === \"radio\";\n\n const wrapClass = cx(radioIconStyle, iconClassName);\n const iconClass = cx(\"pi\", {\n \"pi-radio\": !!isRadio && !checked,\n \"pi-radio-selected\": !!isRadio && !!checked,\n \"pi-checkbox-selected\": !indeterminate && !isRadio && !!checked,\n \"pi-checkbox-unselected\": !indeterminate && !isRadio && !checked,\n \"pi-checkbox-indeterminate\": !!indeterminate && !isRadio\n });\n\n const getColor = () => {\n if (disabled) {\n return colors.gray.base;\n }\n if (checked) {\n return colors.violet.base;\n }\n return colors.gray.light;\n };\n\n return (\n <>\n <div className={wrapClass}>\n <i style={{ color: getColor() }} className={iconClass} />\n </div>{\" \"}\n {label}\n </>\n );\n};\n\nexport default Control;\n","export function getSelectedCheckboxes<OptionType>(\n changedValue: OptionType,\n prevSelected?: OptionType[]\n): OptionType[] {\n const _selected = prevSelected || [];\n const cloned = _selected.slice(0);\n const index = _selected.findIndex(datum => datum === changedValue);\n if (index >= 0) {\n cloned.splice(index, 1);\n } else {\n cloned.push(changedValue);\n }\n return cloned;\n}\n","import * as React from \"react\";\nimport { CheckboxGroupProps } from \"./typings/CheckboxGroup\";\nimport { CheckboxProps } from \"./typings/Checkbox\";\nimport { getSelectedCheckboxes } from \"./utils/getSelectedCheckboxes\";\n\nexport default class CheckboxGroup<OptionType> extends React.PureComponent<\n CheckboxGroupProps<OptionType>\n> {\n private handleChange = (\n { value }: { value: OptionType },\n event: React.MouseEvent\n ) => {\n const { onChange, selected } = this.props;\n onChange(getSelectedCheckboxes(value, selected), event);\n };\n\n render() {\n const { children, selected, className, name, disabled } = this.props;\n\n const _children = React.Children.map(children, _checkbox => {\n // `_checkbox as React.ReactElement<CheckboxProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const checkbox = _checkbox as React.ReactElement<\n CheckboxProps<OptionType>\n >;\n return React.cloneElement(checkbox, {\n onChange: this.handleChange,\n checked: selected.indexOf(checkbox.props.value) >= 0,\n disabled\n });\n });\n\n return (\n <div role=\"checkboxgroup\" aria-label={name} className={className}>\n {_children}\n </div>\n );\n }\n}\n","import { constants } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const wrapperStyle = css({\n position: \"relative\"\n});\n\nexport const dropDownStyle = css({\n minWidth: 100,\n boxShadow: constants.boxShadow.xElevated,\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n position: \"absolute\",\n top: \"100%\",\n zIndex: 999,\n transformOrigin: \"top left\"\n});\n","import * as React from \"react\";\nimport { OutsideClickProps } from \"./typings/OutsideClick\";\n\nclass OutsideClick extends React.PureComponent<OutsideClickProps> {\n childRef: React.RefObject<HTMLDivElement> = React.createRef();\n\n handleClick = (e: MouseEvent) => {\n if (\n this.childRef.current &&\n !this.childRef.current.contains(e.target as HTMLElement)\n ) {\n this.props.onOutsideClick();\n }\n };\n\n addListener = () => {\n document.addEventListener(\"mousedown\", this.handleClick);\n };\n\n removeListener = () => {\n document.removeEventListener(\"mousedown\", this.handleClick);\n };\n\n componentDidMount() {\n if (!this.props.disabled) {\n this.addListener();\n }\n }\n\n componentWillUnmount() {\n this.removeListener();\n }\n\n componentDidUpdate(prevProps: OutsideClickProps) {\n if (prevProps.disabled !== this.props.disabled) {\n this.props.disabled ? this.removeListener() : this.addListener();\n }\n }\n\n render() {\n const { className, children } = this.props;\n return (\n <div ref={this.childRef} className={className}>\n {children}\n </div>\n );\n }\n}\n\nexport default OutsideClick;\n","import { State } from \"react-spring\";\n\nexport const animationConfig = {\n from: { opacity: 0, transform: \"scale(0.95)\" },\n enter: { opacity: 1, transform: \"scale(1)\" },\n leave: { opacity: 0, transform: \"scale(0.95)\", pointerEvents: \"none\" },\n config: (_a: boolean, motion: State) =>\n motion === \"leave\" ? { duration: 80 } : { duration: 200 }\n};\n","import * as React from \"react\";\nimport { DropdownProps, DropdownState } from \"./typings/Dropdown\";\nimport { DropDownButton } from \"./Button\";\nimport { dropDownStyle, wrapperStyle } from \"./styles/Dropdown.styles\";\nimport { cx } from \"emotion\";\nimport OutsideClick from \"./OutsideClick\";\nimport { animated } from \"react-spring/renderprops.cjs\";\nimport MountTransition from \"./shared/MountTransition\";\nimport { Manager, Reference, Popper } from \"react-popper\";\nimport { colors } from \"pebble-shared\";\n\nclass DropDown extends React.PureComponent<DropdownProps, DropdownState> {\n state: DropdownState = {\n isOpen: !!this.props.initiallyOpen\n };\n\n static defaultProps: Partial<DropdownProps> = {\n closeOnOutsideClick: true,\n placement: \"bottom-start\",\n modifiers: {\n hide: {\n enabled: false\n },\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n }\n };\n\n private toggleDropdown = () => {\n this.setState({\n isOpen: !this.state.isOpen\n });\n };\n\n render() {\n const {\n buttonLabel,\n children,\n labelComponent,\n padding,\n className,\n dropDownClassName,\n isSelected,\n disabled,\n labelClassName,\n controlled,\n onOutsideClick\n } = this.props;\n\n const _isDropDownOpen = controlled\n ? !!this.props.isOpen\n : this.state.isOpen;\n\n return (\n <OutsideClick\n className={cx(wrapperStyle, className)}\n onOutsideClick={() => {\n this.setState({\n isOpen: false\n });\n if (onOutsideClick) onOutsideClick(_isDropDownOpen);\n }}\n disabled={!_isDropDownOpen}\n >\n <Manager>\n <Reference>\n {({ ref }) => (\n <div style={{ display: \"inline-block\", width: \"100%\" }} ref={ref}>\n {labelComponent ? (\n labelComponent({\n isOpen: _isDropDownOpen,\n toggleDropdown: this.toggleDropdown\n })\n ) : (\n <DropDownButton\n isSelected={!!isSelected}\n isOpen={_isDropDownOpen}\n onClick={this.toggleDropdown}\n disabled={disabled}\n className={labelClassName}\n >\n {buttonLabel}\n </DropDownButton>\n )}\n </div>\n )}\n </Reference>\n\n {/* TODO: Add native flag. */}\n <MountTransition visible={_isDropDownOpen}>\n {transitionStyles => (\n <animated.div\n className={cx(dropDownStyle, dropDownClassName)}\n style={{ padding, ...transitionStyles }}\n >\n <Popper {...this.props} positionFixed>\n {({ ref, style, placement, arrowProps }) => {\n const popperWrapperStyle = {\n ...style,\n ...transitionStyles,\n backgroundColor: colors.white.base,\n transform: `${style.transform || \"\"} ${\n transitionStyles.transform || \"\"\n }`,\n transformOrigin: `${arrowProps.style.left || 0}px ${\n arrowProps.style.top || 0\n }px`,\n padding\n };\n\n return (\n <div\n className={cx(dropDownStyle, dropDownClassName)}\n ref={ref}\n style={popperWrapperStyle}\n data-placement={placement}\n >\n {children({\n toggle: this.toggleDropdown,\n isOpen: _isDropDownOpen\n })}\n </div>\n );\n }}\n </Popper>\n </animated.div>\n )}\n </MountTransition>\n </Manager>\n </OutsideClick>\n );\n }\n}\n\nexport default DropDown;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n// import { isDesktop } from \"../../utils\";\n\nconst animation = \"all 0.3s cubic-bezier(.64,.09,.08,1)\";\n\nexport const inputMarginBottom = 20;\n\nexport const wrapperStyle = css({\n position: \"relative\",\n display: \"flex\",\n backgroundColor: colors.white.base,\n width: \"100%\",\n flexDirection: \"column\",\n marginBottom: inputMarginBottom,\n height: 68,\n \"&._pebble_input_wrapper_textarea\": {\n height: 110\n }\n});\n\nexport const inputWrapperStyle = css({\n display: \"flex\",\n alignItems: \"baseline\",\n borderBottom: `1px solid ${colors.gray.lighter}`\n});\n\nexport const inputStyle = css({\n outline: 0,\n border: 0,\n padding: \"24px 0 12px 0\",\n height: 48,\n borderRadius: 0,\n ...typography.normal.regular,\n width: \"100%\",\n ...mixins.textEllipsis,\n \"&:disabled\": {\n backgroundColor: colors.white.base\n },\n .../*#__PURE__*/ mixins.getPlaceholderStyle(colors.gray.light)\n // \"&[type='date']\": {\n // \"-webkit-appearance\": \"textfield\"\n // },\n // \"&[type='date']::-webkit-inner-spin-button, &[type='date']::-webkit-calendar-picker-indicator\": {\n // webkitAppearance: \"none\",\n // display: \"none\"\n // }\n});\n\nexport const inputReadOnlyStyle = css({\n color: colors.gray.dark\n});\n\nexport const inputDisabledStyle = css({\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: colors.gray.base\n});\n\nexport const inputTextAreaStyle = css({\n height: 88,\n padding: \"0 0 52px 0\",\n marginTop: 22,\n resize: \"none\"\n});\n\nexport const highlightStyle = css({\n height: 2,\n backgroundColor: colors.violet.base,\n marginTop: -2,\n position: \"relative\",\n width: 0,\n transition: animation,\n zIndex: 9,\n \"&._pebble_input_highlight_state, &._pebble_input_highlight_focused\": {\n width: \"100%\"\n }\n});\n\nexport const labelStyle = css({\n color: colors.gray.base,\n fontSize: 14,\n lineHeight: \"12px\",\n position: \"absolute\",\n transition: animation,\n transform: \"translate(0, 24px)\",\n pointerEvents: \"none\",\n \"&._pebble_input_label_focused\": {\n fontSize: 12,\n lineHeight: \"10px\",\n transform: \"translate(0, 0)\",\n color: colors.gray.dark\n }\n});\n\nexport const messageStyle = css({\n ...typography.s.regular,\n marginTop: 9,\n lineHeight: \"10px\",\n textAlign: \"left\"\n});\n\nexport const loadingStyle = css({\n position: \"relative\",\n top: 4\n});\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\nimport { inputMarginBottom } from \"./Input.styles\";\n\nexport const dateClass = css({\n padding: 20,\n width: \"100%\"\n});\n\nexport const dropDownClassName = css({\n marginTop: -inputMarginBottom\n});\n\nexport const inputStyle = css({\n marginBottom: 0\n});\n\nexport const wrapperStyle = css({\n marginBottom: 20\n});\n\nexport const errorStyle = css({\n ...typography.s.bold,\n backgroundColor: colors.red.lightest,\n color: colors.red.darker,\n textAlign: \"left\",\n padding: \"11px 30px\"\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { InputProps, InputState } from \"./typings/Input\";\nimport {\n highlightStyle,\n labelStyle,\n wrapperStyle,\n messageStyle,\n inputWrapperStyle,\n inputStyle,\n inputReadOnlyStyle,\n inputDisabledStyle,\n inputTextAreaStyle,\n loadingStyle\n} from \"./styles/Input.styles\";\nimport { colors } from \"pebble-shared\";\nimport Loader from \"./Loader\";\n\nfunction getColor(\n error: string | undefined,\n success: string | undefined,\n isUnderlineColor?: boolean\n) {\n let color = colors.gray.dark;\n if (error) {\n color = colors.red.base;\n } else if (success) {\n color = colors.emerald.base;\n } else if (isUnderlineColor) {\n color = colors.violet.base;\n }\n\n return color;\n}\n\nclass Input extends React.PureComponent<InputProps, InputState> {\n readonly state: InputState = {\n isFocused: false\n };\n\n static defaultProps = {\n value: \"\",\n readOnly: false\n };\n\n private addFocus = () => {\n this.setState({\n isFocused: true\n });\n };\n\n private removeFocus = () => {\n this.setState({\n isFocused: false\n });\n };\n\n private handleChange = (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.ChangeEvent<HTMLTextAreaElement>\n ) => {\n this.props.onChange(e.target.value || \"\");\n };\n\n render() {\n const {\n type,\n placeholder,\n className,\n inputWrapperClassName,\n inputClassName,\n highlightClassName,\n loadingClassName,\n fixLabelAtTop,\n value,\n readOnly,\n disabled,\n errorMessage,\n successMessage,\n message,\n textArea,\n required,\n onClick,\n loading,\n leftElement,\n rightElement\n } = this.props;\n const { isFocused } = this.state;\n\n const _message = errorMessage || successMessage || message;\n\n const _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);\n\n const _inputClassName = cx(\n inputStyle,\n {\n [inputDisabledStyle]: !!disabled,\n [inputReadOnlyStyle]: !!readOnly,\n [inputTextAreaStyle]: !!textArea\n },\n inputClassName\n );\n\n const _inputProps = {\n \"aria-label\": placeholder ? placeholder : undefined,\n className: _inputClassName,\n disabled,\n onChange: this.handleChange,\n readOnly,\n value: value || \"\"\n };\n\n const _highlightClassName = cx(\n highlightStyle,\n {\n _pebble_input_highlight_focused: !!isFocused,\n _pebble_input_highlight_state: !!errorMessage || !!successMessage,\n _pebble_input_highlight_read_only: !!readOnly,\n _pebble_input_highlight_disabled: !!disabled\n },\n highlightClassName\n );\n\n const labelClassName = cx(labelStyle, {\n _pebble_input_label_focused: !!(\n isFocused ||\n value ||\n fixLabelAtTop ||\n leftElement\n )\n });\n\n const _wrapperStyle = cx(\n wrapperStyle,\n {\n _pebble_input_wrapper_textarea: !!textArea\n },\n className\n );\n\n const _loadingStyle = cx(loadingStyle, loadingClassName);\n\n return (\n <div\n className={_wrapperStyle}\n onFocus={this.addFocus}\n onBlur={this.removeFocus}\n onClick={onClick}\n >\n <div className={_inputWrapperClassName}>\n {leftElement?.()}\n\n {this.props.textArea ? (\n <textarea {..._inputProps} {...this.props.inputProps} />\n ) : (\n <input type={type} {..._inputProps} {...this.props.inputProps} />\n )}\n\n {loading && (\n <Loader\n color={colors.violet.base}\n scale={0.6}\n className={_loadingStyle}\n />\n )}\n\n {rightElement?.()}\n </div>\n\n {!!placeholder && (\n <label className={labelClassName}>\n {placeholder}\n {required && (\n <span style={{ color: colors.red.base }}>&nbsp;*</span>\n )}\n </label>\n )}\n\n <div\n className={_highlightClassName}\n style={{\n backgroundColor: getColor(errorMessage, successMessage, true)\n }}\n />\n\n {_message && (\n <div\n className={messageStyle}\n style={{ color: getColor(errorMessage, successMessage) }}\n >\n {_message}\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Input;\n","import * as React from \"react\";\nimport { format, parseISO } from \"date-fns\";\nimport { DateInputProps } from \"./typings/DateInput\";\nimport Input from \"./Input\";\n\nexport default class NativeDateInput extends React.PureComponent<\n DateInputProps\n> {\n private onDateInputChange = (value: string) => {\n const date = parseISO(value);\n this.props.onChange(date && date.getTime());\n };\n\n render() {\n const { inputProps, placeholder, value, disabled } = this.props;\n\n return (\n <Input\n onChange={this.onDateInputChange}\n type=\"date\"\n // This format does not define the presentation format.\n // value will always be in YYYY-MM-DD format.\n // https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome\n value={value && format(value, \"yyyy-MM-dd\")}\n placeholder={placeholder}\n fixLabelAtTop\n {...inputProps}\n disabled={disabled}\n />\n );\n }\n}\n","import * as React from \"react\";\n\ninterface UserAgentInfoProviderProps {\n userAgent: string;\n}\n\n// This is an object because more attributes might get added.\n// Don't change to string.\nexport interface UserAgentInfo {\n // Add more attributes of the userAgent as neccessary.\n // Eg. isMobile, isDesktop, isBot etc.\n userAgent: string;\n}\n\nconst defaultContext: UserAgentInfo = {\n userAgent: \"\"\n};\n\nexport const UserAgentInfoContext = /*@__PURE__*/ React.createContext<\n UserAgentInfo\n>(defaultContext);\n\nfunction computeUserAgentInfo(userAgent: string): UserAgentInfo {\n return {\n userAgent\n };\n}\n\nexport class UserAgentInfoProvider extends React.PureComponent<\n UserAgentInfoProviderProps,\n UserAgentInfo\n> {\n // State is used to avoid creating new objects in render.\n // Can memoize computeUserAgentInfo but then might consume\n // a lot of memory on server.\n constructor(props: UserAgentInfoProviderProps) {\n super(props);\n if (typeof navigator !== \"undefined\" && navigator.userAgent) {\n this.state = computeUserAgentInfo(navigator.userAgent);\n } else if (props.userAgent) {\n this.state = computeUserAgentInfo(props.userAgent);\n } else {\n this.state = defaultContext;\n }\n }\n render() {\n return (\n <UserAgentInfoContext.Provider value={this.state}>\n {this.props.children}\n </UserAgentInfoContext.Provider>\n );\n }\n}\n","import * as React from \"react\";\nimport { DateInputProps, DateInputState } from \"./typings/DateInput\";\nimport DropDown from \"./DropDown\";\nimport {\n dateClass,\n dropDownClassName,\n inputStyle,\n wrapperStyle,\n errorStyle\n} from \"./styles/Date.styles\";\nimport Calendar from \"./Calendar\";\nimport Input from \"./Input\";\nimport { Rifm } from \"rifm\";\nimport { startOfDay, format } from \"date-fns\";\nimport NativeDateInput from \"./NativeDateInput\";\nimport { UserAgentInfoContext } from \"../utils/useragent\";\nimport { cx } from \"emotion\";\n\nconst noop = () => {};\n\nfunction dateFormat(str: string) {\n const clean = str.replace(/[^\\d]+/gi, \"\");\n const chars = clean.split(\"\");\n return chars.reduce(\n (r, v, index) =>\n `${r}${v}${index === 1 || index === 3 ? \"/\" : \"\"}`.substr(0, 10),\n \"\"\n );\n}\n\nconst modifiers = {\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n};\n\nexport default class DateInput extends React.PureComponent<\n DateInputProps & typeof DateInput.defaultProps,\n DateInputState\n> {\n static defaultProps = {\n placement: \"bottom-start\"\n };\n state: Readonly<DateInputState> = {\n stringInput: \"\"\n };\n\n static getDerivedStateFromProps(\n props: DateInputProps,\n state: DateInputState\n ): Partial<DateInputState> | null {\n let newState: Partial<DateInputState> | null = null;\n if (props.value !== state.propsValue) {\n newState = {\n propsValue: props.value,\n stringInput: props.value ? format(props.value, \"dd/MM/yyyy\") : \"\"\n };\n }\n return newState;\n }\n\n private onCalendarDateChange = (date: Date) => {\n this.props.onChange(date.getTime());\n };\n\n private onInputChange = (input: string) => {\n this.setState({ stringInput: input });\n // TODO: Modify when close to year 9999\n if (input.length === 10) {\n // RIFM will ensure the length of the input.\n const date = startOfDay(new Date());\n date.setFullYear(\n parseInt(input.substr(6, 4), 10),\n parseInt(input.substr(3, 5), 10) - 1,\n parseInt(input.substr(0, 2), 10)\n );\n this.props.onChange(date.getTime());\n }\n };\n\n render() {\n const {\n calendarProps,\n inputProps,\n placeholder,\n value: propsValue,\n disabled,\n errorMessage,\n placement,\n wrapperClassName,\n initiallyOpen,\n onOutsideClick,\n controlled,\n isOpen\n } = this.props;\n\n const _wrapperClassName = cx(wrapperStyle, wrapperClassName);\n\n const _dropDownClassName = cx(\n dropDownClassName,\n this.props.dropDownClassName\n );\n return (\n <DropDown\n dropDownClassName={_dropDownClassName}\n labelComponent={({ toggleDropdown }) => (\n <Rifm\n value={this.state.stringInput}\n onChange={this.onInputChange}\n format={dateFormat}\n >\n {({ value, onChange }) => (\n <Input\n onChange={noop}\n type={\"tel\"}\n value={value}\n placeholder={placeholder}\n onClick={() => {\n if (disabled || controlled) return;\n toggleDropdown();\n }}\n fixLabelAtTop\n {...inputProps}\n inputProps={{\n placeholder: \"DD/MM/YYYY\",\n ...(inputProps && inputProps.inputProps),\n onChange\n }}\n className={cx(inputStyle, inputProps && inputProps.className)}\n disabled={disabled}\n />\n )}\n </Rifm>\n )}\n className={_wrapperClassName}\n placement={placement}\n modifiers={modifiers}\n initiallyOpen={initiallyOpen}\n onOutsideClick={onOutsideClick}\n controlled={controlled}\n isOpen={isOpen}\n >\n {({ toggle }) => (\n <>\n <Calendar\n hideShadow\n className={dateClass}\n selected={propsValue ? new Date(propsValue) : undefined}\n {...calendarProps}\n range={false}\n onChange={date => {\n this.onCalendarDateChange(date);\n if (controlled) {\n return;\n }\n toggle();\n }}\n />\n {errorMessage && <div className={errorStyle}>{errorMessage}</div>}\n </>\n )}\n </DropDown>\n );\n }\n}\n\nfunction checkDateInputSupport(): boolean {\n try {\n const input = document.createElement(\"input\");\n const type = \"date\";\n input.setAttribute(\"type\", \"date\");\n input.value = \"\\x01\";\n return (\n input.type === type && (input.value !== \"\\x01\" || !input.checkValidity())\n );\n } catch (e) {\n return true;\n }\n}\n\nconst hasDateInputSupport = /*@__PURE__*/ checkDateInputSupport();\n\n// tslint:disable-next-line max-classes-per-file\nexport class BrowserBasedDateInput extends React.PureComponent<DateInputProps> {\n static contextType = UserAgentInfoContext;\n render() {\n return (\n <UserAgentInfoContext.Consumer>\n {({ userAgent }: { userAgent: string }) => {\n if (/Android|iPhone|iPad/i.test(userAgent) && hasDateInputSupport) {\n return <NativeDateInput {...this.props} />;\n }\n return <DateInput {...this.props} />;\n }}\n </UserAgentInfoContext.Consumer>\n );\n }\n}\n","import * as React from \"react\";\nimport { LogoProps } from \"./typings/Logo\";\n\nconst Logo: React.FunctionComponent<LogoProps> = ({\n height = 40,\n color = \"#000000\"\n}) => {\n return (\n <svg\n version=\"1.1\"\n id=\"Layer_1\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n height={height}\n viewBox=\"0 0 655.35 175.08\"\n xmlSpace=\"preserve\"\n style={{ fill: color }}\n >\n <path\n className=\"st0\"\n d=\"M168.92 65.96l-66.1-64.85v100.61h17.39V40.78l66.11 64.56V4.73h-17.4v61.23zm446.77-18.51L653.4 4.73h-20.6l-41.04 46.48V4.73h-17.4v96.99h17.4V73.34L604 59.84l30.19 41.88h20.33l-38.83-54.27zM422.66 2.92c-27.78 0-50.31 22.53-50.31 50.31s22.52 50.3 50.31 50.3c27.78 0 50.3-22.52 50.3-50.3s-22.52-50.31-50.3-50.31zm0 84.84c-19.05 0-34.54-15.49-34.54-34.53s15.49-34.54 34.54-34.54c19.04 0 34.54 15.49 34.54 34.54 0 19.04-15.5 34.53-34.54 34.53zM0 101.72h18.38L27 82.93h41.75l8.63 18.79h18.51L48.02 0 0 101.72zM33.55 67.9l14.32-31.58L62.21 67.9H33.55zm159.61 33.82h18.37l8.62-18.79h41.75l8.62 18.79h18.51L241.16 0l-48 101.72zm33.53-33.82l14.33-31.58 14.33 31.58h-28.66zm138.43-32.42c0-8.76-3.07-16-9.19-21.84-6.12-5.99-13.5-8.91-22.26-8.91h-37.71v96.99h17.4V67.21h17.25l20.73 34.51h19.62l-23.51-38.68c10.57-4.46 17.67-14.89 17.67-27.56zm-33.25 16.15h-18.51V20.46h19.9c8.34 0 14.6 6.4 14.6 15.31 0 9.32-6.54 15.86-15.99 15.86zm197.61-32.94c9.22 0 17.9 3.59 24.42 10.12l11.15-11.15c-9.82-9.83-22.7-14.74-35.57-14.74-12.87 0-25.75 4.91-35.56 14.74-19.65 19.64-19.65 51.49 0 71.14 9.82 9.82 22.69 14.73 35.56 14.73 12.87 0 25.75-4.91 35.57-14.73L553.9 77.65c-6.52 6.52-15.2 10.11-24.42 10.11-9.23 0-17.89-3.59-24.42-10.11-13.46-13.46-13.46-35.37 0-48.84 6.53-6.52 15.2-10.12 24.42-10.12z\"\n />\n <rect\n y=\"123.84\"\n className=\"st1\"\n width=\"654.52\"\n height=\"4.26\"\n id=\"XMLID_9_\"\n />\n <path\n className=\"st0\"\n d=\"M90.05 150.11h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm39.59-.17h5.03l10.63 24.97h-5.7l-2.28-5.56h-10.47l-2.27 5.56h-5.56l10.62-24.97zm5.75 14.59l-3.3-8.04-3.29 8.04h6.59zM154 150.11h5.46v19.83h12.36v4.96H154v-24.79zm36.79 25.18c-3.33 0-5.95-.92-7.86-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.46 3.56 1.41 4.58.94 1.03 2.26 1.54 3.93 1.54 1.68 0 2.98-.49 3.93-1.49.95-.99 1.42-2.48 1.42-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.77 4.92-.51 1.39-1.23 2.55-2.17 3.49-.95.93-2.08 1.63-3.44 2.08-1.35.47-2.85.7-4.5.7zm21.83-25.18h18.66v4.85H218v5.03h11.7v4.85H218v5.2h13.46v4.86h-18.84v-24.79zm37.74 25.15c-1.89 0-3.75-.33-5.57-.98-1.82-.65-3.47-1.64-4.94-2.99l3.21-3.86c1.14.92 2.3 1.65 3.49 2.19 1.2.54 2.51.82 3.91.82 1.13 0 2.01-.21 2.64-.62.63-.41.94-.99.94-1.72v-.07c0-.36-.07-.67-.19-.94-.14-.27-.39-.53-.75-.77-.36-.23-.87-.47-1.52-.71s-1.49-.48-2.53-.74c-1.26-.31-2.38-.64-3.4-1.03-1.01-.38-1.88-.84-2.59-1.4a5.85 5.85 0 0 1-1.65-2.07c-.38-.82-.58-1.86-.58-3.08v-.07c0-1.13.21-2.16.63-3.07.42-.91 1.01-1.7 1.78-2.35.76-.66 1.67-1.17 2.73-1.52 1.06-.35 2.23-.54 3.5-.54 1.83 0 3.5.28 5.02.82 1.52.54 2.92 1.32 4.19 2.34l-2.83 4.11c-1.1-.76-2.2-1.35-3.26-1.79-1.06-.44-2.12-.66-3.19-.66-1.06 0-1.85.21-2.38.62-.53.41-.8.93-.8 1.54v.07c0 .4.08.75.23 1.04.15.29.43.56.84.79.39.24.94.46 1.64.67.7.21 1.57.47 2.63.75 1.26.33 2.37.7 3.35 1.11.98.41 1.81.91 2.48 1.49.68.58 1.18 1.25 1.52 2.04.34.78.52 1.71.52 2.8v.07c0 1.22-.23 2.32-.67 3.27a6.71 6.71 0 0 1-1.86 2.41c-.81.65-1.76 1.14-2.87 1.48-1.11.37-2.33.55-3.67.55zm46.42.07c-1.92 0-3.68-.34-5.28-1.01-1.61-.67-3-1.58-4.16-2.72-1.17-1.15-2.08-2.5-2.73-4.04-.65-1.55-.98-3.2-.98-4.98v-.07c0-1.77.32-3.42.99-4.97a12.64 12.64 0 0 1 2.74-4.07c1.16-1.17 2.57-2.09 4.18-2.77 1.62-.67 3.39-1.01 5.3-1.01 1.91 0 3.67.34 5.28 1.01 1.61.68 2.99 1.59 4.16 2.73 1.16 1.14 2.07 2.49 2.73 4.04.64 1.54.97 3.21.97 4.98v.07c0 1.77-.33 3.43-.99 4.98-.67 1.55-1.57 2.9-2.74 4.07-1.17 1.17-2.56 2.08-4.18 2.76-1.61.66-3.37 1-5.29 1zm.08-5.03c1.08 0 2.09-.2 3.01-.6.92-.4 1.71-.95 2.35-1.66.65-.71 1.16-1.53 1.53-2.47.36-.93.54-1.93.54-2.99v-.07c0-1.06-.18-2.06-.54-3.01-.36-.94-.89-1.77-1.56-2.47a7.49 7.49 0 0 0-2.39-1.68c-.91-.41-1.93-.62-3.01-.62-1.11 0-2.12.21-3.03.6-.91.4-1.69.96-2.34 1.66a7.76 7.76 0 0 0-1.52 2.46c-.37.94-.55 1.94-.55 3v.07c0 1.06.18 2.07.55 3.02.36.94.88 1.76 1.55 2.47.67.71 1.47 1.27 2.38 1.68.91.4 1.91.61 3.03.61zm19.48-20.19h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm33.54 0h18.66v4.85h-13.28v5.03h11.68v4.85h-11.68v5.2h13.46v4.86h-18.84v-24.79zm29.16 0h11.34c3.13 0 5.54.83 7.22 2.51 1.42 1.42 2.12 3.31 2.12 5.67v.07c0 2.01-.49 3.65-1.47 4.91-.98 1.26-2.26 2.19-3.84 2.77l6.05 8.86h-6.37l-5.31-7.94h-4.3v7.94h-5.45v-24.79zm10.98 12.04c1.35 0 2.39-.32 3.1-.95.72-.64 1.08-1.48 1.08-2.54v-.07c0-1.17-.37-2.06-1.13-2.64-.75-.59-1.8-.88-3.15-.88h-5.42v7.08h5.52zm33.05-12.04h6.02l6.48 17.46 6.48-17.46h5.87l-10.02 24.97h-4.81l-10.02-24.97zm39.59-.17h5.02l10.63 24.97h-5.7l-2.26-5.56h-10.48l-2.27 5.56h-5.56l10.62-24.97zm5.73 14.59l-3.29-8.04-3.29 8.04h6.58zm18.62-14.42h5.46v19.83h12.36v4.96h-17.82v-24.79zm36.8 25.18c-3.34 0-5.95-.92-7.87-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.47 3.56 1.42 4.58.95 1.03 2.26 1.54 3.93 1.54 1.67 0 2.99-.49 3.94-1.49.94-.99 1.41-2.48 1.41-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.76 4.92-.51 1.39-1.24 2.55-2.18 3.49-.95.93-2.09 1.63-3.44 2.08-1.36.47-2.85.7-4.5.7zm21.82-25.18h18.67v4.85h-13.28v5.03h11.69v4.85h-11.69v5.2h13.46v4.86h-18.85v-24.79z\"\n />\n </svg>\n );\n};\n\nexport default Logo;\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const toastWrapper = css({\n position: \"fixed\",\n borderRadius: constants.borderRadius,\n ...typography.normal.regular,\n color: colors.white.base,\n display: \"flex\",\n alignItems: \"center\",\n padding: \"15px 20px\",\n zIndex: 99999,\n\n \"> i\": {\n marginRight: 10\n }\n});\n","import * as React from \"react\";\nimport { toastWrapper } from \"./styles/Toast.styles\";\nimport { colors } from \"pebble-shared\";\nimport {\n ToastProps,\n ToastState,\n ToastType,\n ToastPosition\n} from \"./typings/Toast\";\nimport { Transition, animated } from \"react-spring/renderprops.cjs\";\nimport { cx } from \"emotion\";\nimport mitt from \"mitt\";\nimport { animationConfig } from \"../utils/animation\";\n\nconst emitter = /*#__PURE__*/ mitt();\n\nexport const _colors = {\n success: colors.emerald.base,\n error: colors.red.base\n};\n\nconst toastTransitionsLeft = {\n from: { transform: \"translateX(-10px)\" },\n enter: { transform: \"translateX(0)\" },\n leave: { transform: \"translateX(-10px)\" }\n};\n\nconst toastTransitionsRight = {\n from: { transform: \"translateX(10px)\" },\n enter: { transform: \"translateX(0)\" },\n leave: { transform: \"translateX(10px)\" }\n};\n\nconst customStyles = {\n TOP: {\n style: {\n top: 20,\n left: \"50%\"\n },\n\n transitions: {\n from: { transform: \"translateX(-50%) translateY(-10px)\" },\n enter: { transform: \"translateX(-50%) translateY(0)\" },\n leave: { transform: \"translateX(-50%) translateY(-10px)\" }\n }\n },\n\n TOP_LEFT: {\n style: {\n top: 20,\n left: 20\n },\n\n transitions: toastTransitionsLeft\n },\n\n TOP_RIGHT: {\n style: {\n top: 20,\n right: 20\n },\n\n transitions: toastTransitionsRight\n },\n\n BOTTOM: {\n style: {\n bottom: 20,\n left: \"50%\"\n },\n\n transitions: {\n from: { transform: \"translateX(-50%) translateY(10px)\" },\n enter: { transform: \"translateX(-50%) translateY(0)\" },\n leave: { transform: \"translateX(-50%) translateY(10px)\" }\n }\n },\n\n BOTTOM_LEFT: {\n style: {\n bottom: 20,\n left: 20\n },\n\n transitions: toastTransitionsLeft\n },\n\n BOTTOM_RIGHT: {\n style: {\n bottom: 20,\n right: 20\n },\n\n transitions: toastTransitionsRight\n }\n};\n\ntype EventType = Partial<ToastState> & {\n text: string;\n time?: number;\n position: ToastPosition;\n};\n\nclass Toast extends React.PureComponent<ToastProps, ToastState> {\n static show(\n text: string,\n type: ToastType,\n { time, position }: { time?: number; position?: ToastPosition } = {}\n ) {\n emitter.emit(\"showToast\", { text, type, time, position });\n }\n\n showTimer?: number | null;\n\n static hide() {\n emitter.emit(\"hideToast\");\n }\n\n state: ToastState = {\n text: \"\",\n type: \"success\",\n show: false,\n position: \"BOTTOM\"\n };\n\n componentDidMount() {\n emitter.on<EventType>(\"showToast\", this.show);\n emitter.on<EventType>(\"hideToast\", this.hide);\n }\n\n componentWillUnmount() {\n emitter.off<EventType>(\"showToast\", this.show);\n emitter.off(\"hideToast\", this.hide);\n }\n\n private show = ({ text, type = \"success\", position, time }: EventType) => {\n this.setState({\n text,\n type,\n position,\n show: true\n });\n\n if (this.showTimer) {\n clearTimeout(this.showTimer);\n this.showTimer = null;\n }\n\n this.showTimer = window.setTimeout(\n () =>\n this.setState({\n show: false\n }),\n time ? time : this.props.defaultTime || 5000\n );\n };\n\n private hide = () => this.setState({ show: false });\n\n render() {\n const bColor = _colors[this.state.type];\n\n const iconClass = cx(\"pi\", {\n \"pi-radio-check-filled\": this.state.type === \"success\",\n \"pi-close-circle-filled\": this.state.type === \"error\"\n });\n\n const position =\n this.state.position || this.props.defaultPosition || \"BOTTOM\";\n\n return (\n <Transition\n native\n items={this.state.show}\n key={position}\n from={{\n opacity: 0,\n ...customStyles[position].transitions.from\n }}\n enter={{\n opacity: 1,\n ...customStyles[position].transitions.enter\n }}\n leave={{\n opacity: 0,\n pointerEvents: \"none\",\n ...customStyles[position].transitions.leave\n }}\n config={animationConfig.config}\n >\n {show =>\n show &&\n (styles => (\n <animated.div\n className={cx(toastWrapper, this.props.className)}\n style={{\n backgroundColor: bColor,\n ...(styles as React.CSSProperties),\n ...customStyles[position].style\n }}\n >\n <i className={iconClass} />\n {this.state.text}\n </animated.div>\n ))\n }\n </Transition>\n );\n }\n}\n\nexport default Toast;\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const messageWrapper = css({\n borderRadius: constants.borderRadius,\n ...typography.normal.regular,\n color: colors.white.base,\n height: 46,\n display: \"flex\",\n alignItems: \"center\",\n padding: 20,\n\n \"> i\": {\n marginRight: 10\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { _colors } from \"./Toast\";\nimport { messageWrapper } from \"./styles/Message.styles\";\nimport { AlertProps } from \"./typings/Message\";\n\nconst Message: React.FunctionComponent<AlertProps> = ({\n intent,\n className,\n text\n}) => {\n const bColor = _colors[intent];\n\n const iconClass = cx(\"pi\", {\n \"pi-radio-check-filled\": intent === \"success\",\n \"pi-close-circle-filled\": intent === \"error\"\n });\n\n return (\n <div\n className={cx(messageWrapper, className)}\n style={{\n backgroundColor: bColor\n }}\n >\n <i className={iconClass} />\n {text}\n </div>\n );\n};\n\nexport default Message;\n","import * as React from \"react\";\nimport { ModalProps } from \"./typings/Modal\";\nimport { modalContainer } from \"./styles/Modal.styles\";\nimport { cx, css } from \"emotion\";\nimport isBrowser from \"is-in-browser\";\nimport * as ReactDOM from \"react-dom\";\nimport MountTransition from \"./shared/MountTransition\";\n\nclass Modal extends React.PureComponent<ModalProps> {\n private node = isBrowser ? document.createElement(\"div\") : null;\n\n componentDidMount() {\n if (this.node) {\n document.body.appendChild(this.node);\n }\n }\n\n componentWillUnmount() {\n if (this.node) {\n document.body.removeChild(this.node);\n }\n }\n\n componentDidUpdate(prevProps: ModalProps) {\n if (prevProps.visible === this.props.visible) return;\n\n if (this.props.visible) {\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n } else {\n document.getElementsByTagName(\"body\")[0].style.overflow = \"\";\n }\n }\n\n render(): React.ReactNode {\n if (!isBrowser) return null;\n\n const { children, visible, backDropClassName, modalClassName } = this.props;\n const node = this.node;\n\n return ReactDOM.createPortal(\n // tslint:disable-next-line:jsx-wrap-multiline\n <MountTransition visible={visible}>\n {transitionStyles => (\n <div\n style={{\n opacity: transitionStyles.opacity\n }}\n className={cx(modalContainer, backDropClassName)}\n >\n <div\n className={cx(\n css({\n transform: transitionStyles.transform\n }),\n modalClassName\n )}\n >\n {children}\n </div>\n </div>\n )}\n </MountTransition>,\n node as NonNullable<typeof node>\n );\n }\n}\n\nexport default Modal;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const rowWrapper = css({\n ...typography.normal.regular,\n cursor: \"pointer\",\n padding: \"12px 18px\",\n position: \"relative\",\n lineHeight: \"28px\",\n zIndex: 999,\n ...mixins.textEllipsis,\n alignItems: \"center\",\n display: \"flex\",\n \"&:last-of-type\": {\n border: 0\n },\n \"&:hover\": {\n backgroundColor: colors.gray.lightest\n }\n});\n\nexport const labelWrap = css({\n userSelect: \"none\",\n flexGrow: 1,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\"\n});\n\nexport const activeRow = css({\n backgroundColor: colors.gray.lightest\n});\n\nexport const selectedRow = css({\n color: colors.violet.base,\n ...typography.normal.bold\n});\n\nexport const advancedActionsWrapper = css({\n display: \"flex\",\n justifyContent: \"space-around\",\n fontSize: \"12px\",\n color: colors.gray.dark\n});\n","import * as React from \"react\";\nimport { OptionProps } from \"./typings/Option\";\nimport Control from \"./shared/Control\";\nimport { cx, css } from \"emotion\";\nimport {\n activeRow,\n rowWrapper,\n selectedRow,\n labelWrap\n} from \"./styles/Options.styles\";\nimport Ink from \"react-ink\";\nimport { colors } from \"pebble-shared\";\n\nconst defaultProps = {\n rightElement: <T extends unknown>({\n isSelected,\n multiSelect,\n indeterminate,\n iconClassName\n }: OptionProps<T>) => {\n const iconClass = cx(\n \"pi\",\n {\n \"pi-checkbox-selected\": !indeterminate && isSelected,\n \"pi-checkbox-unselected\": !indeterminate && !isSelected,\n \"pi-checkbox-indeterminate\": !!indeterminate\n },\n css({\n marginLeft: \"10px\",\n color:\n indeterminate || isSelected ? colors.violet.base : colors.gray.light,\n fontSize: \"20px\"\n })\n );\n return multiSelect ? <i className={cx(iconClass, iconClassName)} /> : null;\n }\n};\n\nclass Option<OptionType> extends React.Component<\n OptionProps<OptionType> & Required<typeof defaultProps>\n> {\n static defaultProps = defaultProps;\n render() {\n const {\n label,\n isActive,\n isSelected,\n leftElement,\n rightElement,\n labelClassName,\n className\n } = this.props;\n const _class = cx(\n rowWrapper,\n {\n [activeRow]: !!isActive,\n [selectedRow]: !!isSelected\n },\n className\n );\n return (\n <Control\n {...this.props}\n checked={this.props.isSelected}\n type={this.props.multiSelect ? \"checkbox\" : \"radio\"}\n className={_class}\n >\n {() => {\n return (\n <>\n {leftElement && leftElement(this.props)}\n <div className={cx(labelWrap, labelClassName)}>{label}</div>\n {rightElement(this.props)}\n <Ink />\n </>\n );\n }}\n </Control>\n );\n }\n}\n\nexport default Option;\n","import { css } from \"emotion\";\nimport { constants, mixins, typography } from \"../../theme\";\nimport { getPlaceholderStyle } from \"../../theme/mixins\";\nimport { colors } from \"pebble-shared\";\n\nexport const searchWrapperStyle = css({\n minWidth: \"200px\",\n borderRadius: constants.borderRadius,\n padding: \"0 20px\",\n ...mixins.flexRow,\n alignItems: \"center\",\n height: 40,\n \"> i\": {\n marginRight: 10,\n fontSize: 12\n },\n \"&.__pebble__search__small\": {\n backgroundColor: colors.gray.lightest\n },\n \"&.__pebble__search__large\": {\n backgroundColor: colors.white.base,\n height: 76,\n padding: \"0 25px\",\n boxShadow: constants.boxShadow.base\n // input: typography.normal.regular\n },\n \"&.__pebble__search__table\": {\n border: `1px solid ${colors.gray.light}`,\n backgroundColor: colors.white.base,\n i: {\n color: colors.gray.dark\n }\n }\n});\n\nexport const searchStyle = css({\n borderRadius: constants.borderRadius,\n outline: \"none\",\n border: 0,\n height: \"inherit\",\n flexGrow: 1,\n ...mixins.textEllipsis,\n ...typography.s.regular,\n .../*#__PURE__*/ getPlaceholderStyle(colors.gray.base),\n backgroundColor: \"transparent\"\n});\n\nexport const clearContainer = css({\n display: \"table\",\n height: 16,\n width: 16,\n backgroundColor: colors.gray.light,\n fontSize: 6,\n borderRadius: 16,\n textAlign: \"center\",\n cursor: \"pointer\",\n pointerEvents: \"none\",\n transition: \"opacity 0.3s\",\n opacity: 0,\n \"&.__display\": {\n opacity: 1,\n pointerEvents: \"unset\"\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { SearchProps } from \"./typings/Search\";\nimport {\n searchStyle,\n searchWrapperStyle,\n clearContainer\n} from \"./styles/Search.styles\";\nimport Loader from \"./Loader\";\nimport { colors } from \"pebble-shared\";\n\nclass Search extends React.PureComponent<SearchProps> {\n searchInputRef: React.RefObject<HTMLInputElement> = React.createRef();\n\n static defaultProps = {\n showSearchIcon: true,\n clearable: true\n };\n\n render() {\n const {\n type,\n inputProps,\n onChange,\n placeholder,\n showSearchIcon,\n className,\n clearable,\n value,\n loading\n } = this.props;\n\n const wrapperClassName = cx(searchWrapperStyle, {\n __pebble__search__small: type === \"small\",\n __pebble__search__large: type === \"large\",\n __pebble__search__table: type === \"table\"\n });\n\n return (\n <div className={cx(wrapperClassName, className)}>\n {type !== \"large\" && showSearchIcon && <i className=\"pi pi-search\" />}\n <input\n className={searchStyle}\n type=\"text\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n }}\n ref={this.searchInputRef}\n value={value}\n {...inputProps}\n />\n {loading && <Loader scale={0.4} color={colors.violet.base} />}\n {clearable && (\n <div\n className={cx(clearContainer, {\n __display: !!value && !!value.length\n })}\n onClick={() => {\n if (this.searchInputRef.current) {\n this.searchInputRef.current.value = \"\";\n }\n onChange(\"\");\n }}\n >\n <i\n className=\"pi pi-close\"\n style={{ display: \"table-cell\", verticalAlign: \"middle\" }}\n />\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Search;\n","import { constants } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const optionWrapperMaxHeight = 316;\nexport const searchBoxHeight = 80;\nexport const initialPadding = 20;\nexport const onScrollPadding = 10;\n\nexport const optionsWrapper = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n position: \"relative\",\n width: \"inherit\",\n zIndex: 9,\n maxHeight: optionWrapperMaxHeight,\n minWidth: 100,\n overflowY: \"auto\",\n padding: \"10px 1px\"\n});\n\nexport const searchBoxWrapper = css({\n padding: initialPadding,\n boxShadow: \"none\",\n transition: \"all 100ms linear\",\n zIndex: 10,\n willChange: \"padding\",\n position: \"absolute\",\n top: 0,\n background: \"white\",\n width: \"100%\",\n boxSizing: \"border-box\"\n});\n\nexport const searchBoxScrolledStyle = css({\n boxShadow: constants.boxShadow.base,\n padding: onScrollPadding\n});\n","import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { OptionProps } from \"../typings/Option\";\nimport { OptionGroupProps, OptionGroupState } from \"../typings/OptionGroup\";\nimport scrollIntoView from \"scroll-into-view-if-needed\";\nimport { cx } from \"emotion\";\nimport Search from \"../Search\";\nimport {\n searchBoxScrolledStyle,\n searchBoxWrapper,\n optionsWrapper,\n searchBoxHeight\n} from \"../styles/OptionGroup.styles\";\nimport { rowWrapper, advancedActionsWrapper } from \"../styles/Options.styles\";\n\nclass OptionGroup<OptionType> extends React.PureComponent<\n OptionGroupProps<OptionType>,\n OptionGroupState\n> {\n optionRef: React.RefObject<HTMLDivElement> = React.createRef();\n optionsRefsSet = new Map<number, React.RefObject<React.ReactInstance>>();\n observer?: IntersectionObserver;\n\n state: Readonly<OptionGroupState> = {\n highlighted: -1,\n isScrolled: false\n };\n\n private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { handleChange, isSelected } = this.props;\n const children = React.Children.toArray(this.props.children);\n const { highlighted } = this.state;\n const { which } = e;\n\n if (which === 13 && children && children[highlighted]) {\n // Enter key\n // @ts-ignore\n const { value } =\n // @ts-ignore\n children && children[highlighted] && children[highlighted].props;\n\n handleChange(\n {\n value,\n checked: !isSelected(value)\n },\n e\n );\n }\n\n this.setState(\n () => {\n let _highlighted = highlighted;\n if (which === 40) {\n _highlighted = Math.min(\n _highlighted + 1,\n React.Children.count(children) - 1\n );\n }\n if (which === 38) {\n _highlighted = Math.max(_highlighted - 1, 0);\n }\n\n return { highlighted: _highlighted };\n },\n () => {\n const currentRef = this.optionsRefsSet.get(highlighted);\n if (\n this.optionRef.current &&\n (which === 40 || which === 38) &&\n currentRef &&\n currentRef.current\n ) {\n const element = ReactDOM.findDOMNode(currentRef.current) as Element;\n if (element) {\n scrollIntoView(element, {\n behavior: \"smooth\",\n boundary: this.optionRef.current\n });\n }\n }\n }\n );\n };\n\n componentDidMount() {\n this.observer = new IntersectionObserver(\n entries => {\n this.setState({\n isScrolled: entries[0].intersectionRatio < 0.9\n });\n },\n {\n root: this.optionRef.current,\n threshold: 0.9\n }\n );\n\n if (\n this.optionRef.current &&\n this.optionRef.current.childNodes &&\n this.optionRef.current.childNodes.length\n ) {\n this.observer.observe(this.optionRef.current.childNodes[0] as Element);\n }\n }\n\n componentWillUnmount() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const {\n searchBox,\n advancedOptions,\n advancedOptionsProps,\n children,\n multiSelect,\n className,\n isSelected,\n handleChange,\n searchBoxProps\n } = this.props;\n const { isScrolled, highlighted } = this.state;\n\n const _children = React.Children.map(children, (_option, i) => {\n // `_option as React.ReactElement<OptionProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const option = _option as React.ReactElement<OptionProps<OptionType>>;\n let ref = this.optionsRefsSet.get(i);\n if (!ref) {\n ref = React.createRef<HTMLDivElement>();\n this.optionsRefsSet.set(i, ref);\n }\n return React.cloneElement(option, {\n onChange: handleChange,\n isActive: highlighted === i,\n isSelected: isSelected(option.props.value),\n multiSelect,\n // @ts-ignore\n ref\n });\n });\n\n const searchBoxClassName = cx(searchBoxWrapper, {\n [searchBoxScrolledStyle]: isScrolled\n });\n\n const _class = cx(\n rowWrapper,\n advancedActionsWrapper,\n advancedOptionsProps && advancedOptionsProps.className\n );\n\n return (\n <React.Fragment>\n {searchBox && searchBoxProps && (\n <div className={searchBoxClassName}>\n <Search\n type=\"small\"\n {...searchBoxProps}\n inputProps={{\n ...(searchBoxProps && searchBoxProps.inputProps),\n onKeyDown: this.handleKeyPress,\n autoFocus: true\n }}\n />\n </div>\n )}\n {!!React.Children.count(children) && (\n <div\n ref={this.optionRef}\n style={{\n paddingTop: searchBox ? searchBoxHeight : undefined\n }}\n className={cx(optionsWrapper, className)}\n role={multiSelect ? \"group\" : \"radiogroup\"}\n data-test-id=\"optiongroup\"\n aria-label={searchBoxProps && searchBoxProps.placeholder}\n >\n {advancedOptions && advancedOptionsProps && (\n <div className={_class}>\n <div onClick={advancedOptionsProps.selectVisible}>\n Select Visible\n </div>\n <div onClick={advancedOptionsProps.clearVisible}>\n Clear Visible\n </div>\n </div>\n )}\n {_children}\n </div>\n )}\n </React.Fragment>\n );\n }\n}\n\nexport default OptionGroup;\n","import * as mixins from \"../../theme/mixins\";\nimport { css } from \"emotion\";\nimport {\n optionWrapperMaxHeight,\n searchBoxHeight,\n initialPadding,\n onScrollPadding\n} from \"./OptionGroup.styles\";\nimport { smallButtonHeight } from \"./Button.styles\";\nimport { colors } from \"pebble-shared\";\nexport const optionGroupCheckBoxButtonWrapPadding = 20;\nexport const optionGroupCheckBoxButtonWrapPaddingTop = 10;\n\nexport const optionGroupCheckBoxWrap = css({\n maxHeight:\n optionWrapperMaxHeight +\n searchBoxHeight +\n 2 * (initialPadding - onScrollPadding) +\n optionGroupCheckBoxButtonWrapPadding +\n optionGroupCheckBoxButtonWrapPaddingTop +\n smallButtonHeight,\n position: \"relative\"\n});\n\nexport const optionGroupCheckBoxButtonWrap = css({\n ...mixins.flexSpaceBetween,\n gap: 60,\n padding: optionGroupCheckBoxButtonWrapPadding,\n paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,\n backgroundColor: colors.white.base\n});\n","import { cx } from \"emotion\";\nimport * as React from \"react\";\nimport { getSelectedCheckboxes } from \"./utils/getSelectedCheckboxes\";\nimport Button from \"./Button\";\nimport OptionGroup from \"./shared/OptionGroup\";\nimport { OptionGroupCheckBoxProps } from \"./typings/OptionGroupCheckBox\";\nimport * as styles from \"../components/styles/OptionGroupCheckBox.styles\";\nimport { OptionProps } from \"./typings/Option\";\n\nexport default class OptionGroupCheckBox<\n OptionType\n> extends React.PureComponent<OptionGroupCheckBoxProps<OptionType>> {\n isSelected = (value: OptionType) => {\n const { selected } = this.props;\n return !!selected && selected.includes(value);\n };\n handleChange: OptionGroup<OptionType>[\"props\"][\"handleChange\"] = (\n { value },\n event\n ) => {\n this.props.onChange(\n getSelectedCheckboxes<OptionType>(value, this.props.selected),\n {\n props: this.props,\n event\n }\n );\n };\n selectVisible = () => {\n const { children } = this.props;\n const _values = (\n React.Children.map(\n children,\n child => child as React.ReactElement<OptionProps<OptionType>>\n ) || []\n )\n .filter(_child => _child && _child.props && _child.props.value)\n .map(_child => _child && _child.props && _child.props.value);\n this.props.onChange(_values, { props: this.props });\n };\n clearVisible = () => {\n this.props.onChange([], { props: this.props, event });\n };\n onApply = () => {\n const { onApply, selected } = this.props;\n if (onApply) onApply(selected || [], this.props);\n };\n render() {\n const {\n wrapClassName,\n onApply,\n onClear,\n isSelected,\n onChange,\n ...rest\n } = this.props;\n const advancedOptionsProps = {\n selectVisible: this.selectVisible,\n clearVisible: this.clearVisible,\n ...this.props.advancedOptionsProps\n };\n return (\n <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>\n <OptionGroup<OptionType>\n {...rest}\n advancedOptionsProps={advancedOptionsProps}\n isSelected={isSelected || this.isSelected}\n handleChange={this.handleChange}\n multiSelect\n />\n\n {(onApply || onClear) && (\n <div className={styles.optionGroupCheckBoxButtonWrap}>\n {onClear && (\n <Button type=\"secondary\" onClick={onClear}>\n Clear\n </Button>\n )}\n {onApply && <Button onClick={this.onApply}>Apply</Button>}\n </div>\n )}\n </div>\n );\n }\n}\n","import * as React from \"react\";\nimport OptionGroup from \"./shared/OptionGroup\";\nimport { OptionGroupRadio as OptionGroupRadioProps } from \"./typings/OptionGroupRadio\";\n\nexport default class OptionGroupRadio<OptionType> extends React.PureComponent<\n OptionGroupRadioProps<OptionType>\n> {\n isSelected = (value: OptionType) => {\n return this.props.selected === value;\n };\n handleChange: OptionGroup<OptionType>[\"props\"][\"handleChange\"] = (\n { value, checked },\n event\n ) => {\n const { onChange } = this.props;\n onChange(checked ? value : undefined, {\n props: this.props,\n event\n });\n };\n render() {\n const { selected, onChange, isSelected, ...rest } = this.props;\n return (\n <OptionGroup<OptionType>\n {...rest}\n isSelected={isSelected || this.isSelected}\n handleChange={this.handleChange}\n />\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { inputMarginBottom } from \"./Input.styles\";\n\nexport const selectWrapper = css({\n marginBottom: 20\n});\n\nexport const relativePosition = css({\n position: \"relative\"\n});\n\nexport const selectInputWrapper = css({\n pointerEvents: \"none\",\n marginBottom: 0\n});\n\nexport const selectInput = css({\n color: colors.gray.darker,\n paddingRight: 15\n});\n\nexport const dropDownClass = css({\n marginTop: -inputMarginBottom\n});\n\nexport const fullWidth = css({\n width: \"100%\"\n});\n\nexport const inputWrapper = css({\n cursor: \"pointer\",\n position: \"relative\"\n});\n\nexport const disabledSelect = css({\n cursor: \"not-allowed\"\n});\n\nexport const chevronStyle = css({\n position: \"absolute\",\n top: 0,\n bottom: 0,\n margin: \"auto\",\n height: \"10px\",\n right: 7,\n color: colors.gray.base,\n fontSize: 10,\n \"&.__pebble__select__open\": {\n transform: \"rotate(180deg)\"\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { SelectProps } from \"./typings/Select\";\nimport {\n chevronStyle,\n dropDownClass,\n inputWrapper,\n selectInput,\n selectInputWrapper,\n selectWrapper,\n fullWidth,\n relativePosition,\n disabledSelect\n} from \"./styles/Select.styles\";\nimport DropDown from \"./DropDown\";\nimport Input from \"./Input\";\nimport OptionGroupCheckBox from \"./OptionGroupCheckBox\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\n\nfunction noop() {}\n\nfunction Select<OptionType>(props: SelectProps<OptionType>) {\n const {\n className,\n placeholder,\n required,\n errorMessage,\n value,\n dropdownClassName,\n arrowClassName,\n inputProps,\n fullWidthDropdown,\n onDropdownToggle = noop,\n disabled,\n isSelected,\n placement,\n modifiers\n } = props;\n\n return (\n <div\n className={cx(selectWrapper, className, {\n [relativePosition]: !!fullWidthDropdown\n })}\n >\n <DropDown\n dropDownClassName={cx(dropDownClass, dropdownClassName, {\n [fullWidth]: !!fullWidthDropdown\n })}\n onOutsideClick={isOpen => onDropdownToggle(isOpen)}\n labelComponent={({ toggleDropdown, isOpen }) => {\n const chevron = cx(\n chevronStyle,\n \"pi pi-arrow-drop-down\",\n {\n __pebble__select__open: isOpen\n },\n arrowClassName\n );\n return (\n <div\n className={cx(inputWrapper, disabled && disabledSelect)}\n onClick={\n disabled\n ? undefined\n : () => {\n toggleDropdown();\n onDropdownToggle(isOpen);\n }\n }\n >\n <Input\n className={selectInputWrapper}\n inputClassName={selectInput}\n placeholder={placeholder}\n value={value || \"\"}\n onChange={noop}\n required={required}\n message={isOpen ? \" \" : \"\"}\n errorMessage={errorMessage}\n readOnly\n disabled={disabled}\n {...inputProps}\n />\n <i className={chevron} />\n </div>\n );\n }}\n placement={placement}\n modifiers={modifiers}\n >\n {({ toggle, isOpen }) => {\n const { children, onClear, searchBox, searchBoxProps } = props;\n const commonProps = {\n isSelected,\n onClear:\n onClear &&\n (() => {\n onClear();\n onDropdownToggle(isOpen);\n toggle();\n }),\n searchBox,\n searchBoxProps\n };\n\n // This would have been the ideal way to write this but typescript is crying.\n // const OptionGroup = props.multiSelect\n // ? OptionGroupCheckBox\n // : OptionGroupRadio;\n // return (\n // <OptionGroup\n // selected={props.selected}\n // onChange={(_value, extras) => {\n // if (_value) {\n // props.onChange(_value, extras);\n // }\n // if (!props.multiSelect) {\n // onDropdownToggle(isOpen);\n // toggle();\n // }\n // }}\n // onApply={\n // props.multiSelect &&\n // props.onApply &&\n // (_value => {\n // if (props.onApply) {\n // props.onApply(_value, props);\n // }\n // onDropdownToggle(isOpen);\n // toggle();\n // })\n // }\n // {...commonProps}\n // >\n // {children}\n // </OptionGroup>\n // );\n\n if (props.multiSelect) {\n return (\n <OptionGroupCheckBox<OptionType>\n selected={props.selected}\n onChange={(_value, extras) => {\n props.onChange(_value, extras);\n }}\n onApply={\n props.onApply &&\n (_value => {\n if (props.onApply) props.onApply(_value, props);\n onDropdownToggle(isOpen);\n toggle();\n })\n }\n {...commonProps}\n >\n {children}\n </OptionGroupCheckBox>\n );\n } else {\n return (\n <OptionGroupRadio\n selected={props.selected}\n onChange={(_value, extras) => {\n if (_value !== undefined) props.onChange(_value, extras);\n onDropdownToggle(isOpen);\n toggle();\n }}\n {...commonProps}\n >\n {children}\n </OptionGroupRadio>\n );\n }\n }}\n </DropDown>\n </div>\n );\n}\n\nexport default Select;\n","import { css } from \"emotion\";\n\nexport const wrapper = css({\n display: \"flex\"\n});\n\nexport const selectStyle = css({\n width: \"80px\",\n marginBottom: 0\n});\n\nexport const combinedLabelStyle = css({\n zIndex: 1\n});\n","import * as React from \"react\";\nimport Select from \"./Select\";\nimport Input from \"./Input\";\nimport { cx } from \"emotion\";\nimport { PhoneNumberInputProps } from \"./typings/PhoneNumberInput\";\nimport {\n wrapper,\n selectStyle,\n combinedLabelStyle\n} from \"./styles/PhoneNumberInput.styles\";\nimport { labelStyle } from \"./styles/Input.styles\";\nimport { colors } from \"pebble-shared\";\n\nexport default class PhoneNumberInput<\n OptionType = string\n> extends React.Component<PhoneNumberInputProps<OptionType>> {\n onCountrySelect = (countryCode: OptionType) => {\n this.props.onChange({\n countryCode,\n phone: this.props.phone\n });\n };\n\n onNumberChange = (value: string) => {\n const _value = value.replace(/\\D/g, \"\");\n if (_value === this.props.phone) {\n return;\n }\n this.props.onChange({\n countryCode: this.props.countryCode,\n phone: _value\n });\n };\n\n render() {\n const {\n phone,\n countryCode,\n className,\n selectProps,\n inputProps,\n required,\n placeholder\n } = this.props;\n return (\n <div className={cx(wrapper, className)}>\n <label\n className={cx(\n labelStyle,\n \"_pebble_input_label_focused\",\n combinedLabelStyle\n )}\n >\n {placeholder || \"Phone No.\"}\n {required && <span style={{ color: colors.red.base }}>&nbsp;*</span>}\n </label>\n <Select<OptionType>\n placeholder=\"\"\n onChange={this.onCountrySelect}\n value={countryCode + \"\"}\n selected={countryCode}\n {...selectProps}\n className={cx(selectStyle, selectProps && selectProps.className)}\n >\n {this.props.children}\n </Select>\n <Input\n onChange={this.onNumberChange}\n placeholder=\"\"\n value={phone}\n {...inputProps}\n />\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\n\nexport const popperStyle = css({\n margin: 14,\n boxShadow: constants.boxShadow.xElevated,\n borderRadius: constants.borderRadius\n});\n\nexport const arrowStyle = css({\n position: \"absolute\",\n textShadow: \"1px 0 20px rgba(0,0,0,0.1)\",\n \"&[data-placement^='top']\": {\n transform: \"rotate(90deg)\",\n bottom: -11\n },\n \"&[data-placement^='bottom']\": {\n transform: \"rotate(-90deg)\",\n top: -11\n },\n \"&[data-placement^='right']\": {\n transform: \"rotate(180deg)\",\n left: -11\n },\n \"&[data-placement^='left']\": {\n right: -11\n }\n});\n","import * as React from \"react\";\nimport { PopperProps, PopperState } from \"./typings/Popper\";\nimport { Manager, Reference, Popper } from \"react-popper\";\nimport { arrowStyle, popperStyle } from \"./styles/Popper.styles\";\nimport { colors } from \"pebble-shared\";\nimport { cx } from \"emotion\";\nimport OutsideClick from \"./OutsideClick\";\nimport MountTransition from \"./shared/MountTransition\";\n\nexport default class PebblePopper extends React.PureComponent<\n PopperProps,\n PopperState\n> {\n static defaultProps: Partial<PopperProps> = {\n placement: \"bottom\",\n closeOnOutsideClick: true\n };\n\n state: PopperState = {\n isOpen: !!this.props.isOpen\n };\n\n private toggle = () => {\n this.setState({\n isOpen: !this.state.isOpen\n });\n };\n\n render() {\n const {\n label,\n popperBackgroundColor = colors.white.base,\n children,\n controlled,\n isOpen,\n popperClassName,\n onOutsideClick,\n ...props\n } = this.props;\n\n const _isPopperOpen = controlled ? !!isOpen : this.state.isOpen;\n\n return (\n <OutsideClick\n onOutsideClick={() => {\n this.setState({\n isOpen: false\n });\n if (onOutsideClick) {\n onOutsideClick();\n }\n }}\n disabled={!_isPopperOpen}\n >\n <Manager>\n <Reference>\n {({ ref }) => (\n <div style={{ display: \"inline-block\" }} ref={ref}>\n {typeof label === \"function\"\n ? label({ toggle: this.toggle, isOpen: this.state.isOpen })\n : label}\n </div>\n )}\n </Reference>\n\n <MountTransition visible={_isPopperOpen}>\n {transitionStyles => (\n <Popper {...props} positionFixed>\n {({ ref, style, placement, arrowProps }) => {\n const wrapperStyle = {\n ...style,\n ...transitionStyles,\n backgroundColor: popperBackgroundColor,\n transform: `${style.transform || \"\"} ${\n transitionStyles.transform || \"\"\n }`,\n transformOrigin: `${arrowProps.style.left || 0}px ${\n arrowProps.style.top || 0\n }px`\n };\n\n return (\n <div\n className={cx(popperStyle, popperClassName)}\n ref={ref}\n style={wrapperStyle}\n data-placement={placement}\n >\n {children({\n toggle: this.toggle,\n isOpen: this.state.isOpen\n })}\n <div\n className={arrowStyle}\n ref={arrowProps.ref}\n style={{\n ...arrowProps.style,\n color: popperBackgroundColor\n }}\n data-placement={placement}\n >\n ▶\n </div>\n </div>\n );\n }}\n </Popper>\n )}\n </MountTransition>\n </Manager>\n </OutsideClick>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { mixins, constants } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nconst modalPadding = 30;\n\nexport const modalContainer = css({\n background: \"white\",\n width: \"360px\",\n alignSelf: \"center\",\n borderRadius: constants.borderRadius,\n padding: modalPadding,\n position: \"relative\"\n});\n\nexport const flexCenter = css({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: \"100%\"\n});\n\nexport const buttonsContainer = css({\n ...mixins.flexSpaceBetween,\n marginTop: \"40px\"\n});\n\nexport const iconCloseClassName = css({\n cursor: \"pointer\",\n position: \"absolute\",\n right: modalPadding,\n top: modalPadding,\n fontSize: \"14px\",\n color: colors.gray.base,\n \"&:hover\": {\n color: colors.gray.darker\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport Modal from \"./Modal\";\nimport Button from \"./Button\";\nimport {\n modalContainer,\n buttonsContainer,\n iconCloseClassName,\n flexCenter\n} from \"./styles/PopUp.styles\";\nimport { PopUpProps } from \"./typings/PopUp\";\n\nconst PopUp: React.FunctionComponent<PopUpProps> = props => {\n const {\n onClose,\n onApprove,\n onReject,\n visible,\n approveButtonText = \"Yes\",\n rejectButtonText = \"No\",\n children,\n approveButtonProps,\n rejectButtonProps\n } = props;\n return (\n <Modal visible={visible} modalClassName={flexCenter}>\n <div className={modalContainer}>\n {onClose && (\n <i\n className={cx(\"pi\", \"pi-close\", iconCloseClassName)}\n onClick={onClose}\n />\n )}\n {children}\n {(onReject || onApprove) && (\n <div className={buttonsContainer}>\n {onReject && (\n <Button\n size=\"large\"\n type=\"secondary\"\n onClick={onReject}\n {...rejectButtonProps}\n >\n {rejectButtonText}\n </Button>\n )}\n {onApprove && (\n <Button\n size=\"large\"\n type=\"primary\"\n onClick={onApprove}\n {...approveButtonProps}\n >\n {approveButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </Modal>\n );\n};\n\nexport default PopUp;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\n\nexport const selectedTabStyle = css({\n borderBottom: `2px solid ${colors.violet.base}`,\n color: colors.violet.base\n});\n\nexport const tabStyle = css({\n padding: \"10px 20px 20px\",\n cursor: \"pointer\",\n ...typography.s.bold\n});\n\nexport const tabsWrap = css({\n display: \"flex\",\n justifyContent: \"space-around\",\n overflow: \"auto\",\n borderBottom: `1px solid ${colors.gray.lighter}`,\n background: colors.white.base\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { TabsState, TabsProps, TabSectionProps } from \"./typings/Tabs\";\nimport { tabStyle, tabsWrap, selectedTabStyle } from \"./styles/Tabs.styles\";\n\nconst TabSelectedContext = /*@__PURE__*/ React.createContext<string | null>(\n null\n);\n\nexport class Tabs extends React.PureComponent<TabsProps, TabsState> {\n state: Readonly<TabsState> = {\n selectedTab:\n this.props.initialSelectedTab ||\n (this.props.tabs.length && this.props.tabs[0]) ||\n \"\"\n };\n\n static getDerivedStateFromProps(props: TabsProps): Partial<TabsState> | null {\n if (!props.selectedTab) {\n return null;\n }\n return {\n selectedTab: props.selectedTab\n };\n }\n\n render() {\n const _className = cx(tabStyle, this.props.tabClassName);\n\n const { labels } = this.props;\n\n return (\n <TabSelectedContext.Provider value={this.state.selectedTab}>\n <div className={cx(tabsWrap, this.props.wrapClassName)}>\n {this.props.tabs.map((tab, i) => {\n const isSelected = this.state.selectedTab === tab;\n return (\n <span\n key={`${tab}-${i}`}\n data-test-id={`${tab\n .replace(/\\d/g, \"\")\n .replace(\"(\", \"\")\n .replace(\")\", \"\")\n .trim()}`}\n className={cx(\n _className,\n isSelected && selectedTabStyle,\n isSelected && this.props.selectedTabClassName\n )}\n onClick={() => {\n this.setState({\n selectedTab: tab\n });\n if (this.props.onTabChange) {\n this.props.onTabChange(tab);\n }\n }}\n >\n {labels && labels[tab] ? labels[tab] : tab}\n </span>\n );\n })}\n </div>\n {this.props.children}\n </TabSelectedContext.Provider>\n );\n }\n}\n\n// tslint:disable-next-line:max-classes-per-file\nexport class TabSection extends React.PureComponent<TabSectionProps, {}> {\n static context = TabSelectedContext;\n render() {\n const { section, children } = this.props;\n return (\n <TabSelectedContext.Consumer>\n {selectedTab => <>{section === selectedTab && children}</>}\n </TabSelectedContext.Consumer>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const tabsStyle = css({\n width: \"100%\",\n textAlign: \"center\",\n padding: \"20px\",\n color: colors.gray.dark,\n fontSize: \"16px\"\n});\n\nexport const dateBtnsWrap = css({\n display: \"flex\",\n flexWrap: \"wrap\",\n width: \"416px\",\n padding: \"20px 40px\",\n justifyContent: \"space-between\"\n});\n\nexport const unSelectedDateButton = css({\n marginBottom: \"20px\",\n border: `1px solid ${colors.gray.light}`,\n background: colors.white.base,\n color: colors.gray.darker,\n width: \"158px\",\n \"&:not([disabled]):hover\": {\n border: \"none\",\n background: colors.gray.light,\n color: colors.gray.darker\n }\n});\n\nexport const selectedDateButton = css({\n border: \"none\",\n background: colors.violet.lightest,\n color: colors.violet.dark,\n \"&:not([disabled]):hover\": {\n border: \"none\",\n background: colors.violet.lightest,\n color: colors.violet.dark\n }\n});\n","import * as React from \"react\";\nimport Calendar from \"./Calendar\";\nimport { cx } from \"emotion\";\nimport {\n PresetCalendarProps,\n PresetCalendarState\n} from \"./typings/PresetCalendar\";\nimport { Tabs, TabSection } from \"./Tabs\";\nimport Button from \"./Button\";\nimport {\n tabsStyle,\n selectedDateButton,\n unSelectedDateButton,\n dateBtnsWrap\n} from \"./styles/PresetCalendar.styles\";\n\nconst DATE_TABS = [\"Presets\", \"Custom\"];\n\nclass PresetCalendar extends React.PureComponent<\n PresetCalendarProps,\n PresetCalendarState\n> {\n state = {\n startTime: this.props.defaultValue && this.props.defaultValue[0],\n endTime: this.props.defaultValue && this.props.defaultValue[1]\n };\n\n render() {\n const { startTime, endTime } = this.state;\n const { defaultValue } = this.props;\n\n return (\n <Tabs\n tabs={DATE_TABS}\n initialSelectedTab=\"Presets\"\n tabClassName={tabsStyle}\n >\n <TabSection section={DATE_TABS[0]}>\n <div className={dateBtnsWrap}>\n {this.props.presetDateOptions.map((btn, index) => (\n <Button\n onClick={() => {\n this.setState({\n startTime: btn.dateRange[0],\n endTime: btn.dateRange[1]\n });\n if (this.props.onApply) {\n this.props.onApply(btn.dateRange as [Date, Date]);\n }\n }}\n type=\"primary\"\n size=\"large\"\n className={cx({\n [unSelectedDateButton]: true,\n [selectedDateButton]:\n btn.dateRange[0] === this.state.startTime &&\n btn.dateRange[1] === this.state.endTime\n })}\n key={`${btn.label}-${index}`}\n >\n {btn.label}\n </Button>\n ))}\n </div>\n </TabSection>\n <TabSection section={DATE_TABS[1]}>\n <Calendar\n hideShadow\n range\n onChange={(value: Date[] | Date | undefined) => {\n if (value && Array.isArray(value)) {\n this.setState({\n startTime: value[0],\n endTime: value[1]\n });\n this.props.onChange(value as [Date, Date]);\n }\n }}\n selected={\n (startTime && endTime && [startTime, endTime]) || undefined\n }\n onApply={(value: Date[] | Date | undefined) => {\n if (value && Array.isArray(value)) {\n this.setState({\n startTime: value[0],\n endTime: value[1]\n });\n this.props.onApply(value as [Date, Date]);\n }\n }}\n onClear={() => {\n this.setState({\n startTime: defaultValue && defaultValue[0],\n endTime: defaultValue && defaultValue[1]\n });\n if (this.props.onClear) {\n this.props.onClear();\n }\n }}\n />\n </TabSection>\n </Tabs>\n );\n }\n}\n\nexport default PresetCalendar;\n","import * as React from \"react\";\nimport { RadioProps } from \"./typings/Radio\";\nimport { RadioGroupProps } from \"./typings/RadioGroup\";\n\nexport default class RadioGroup<OptionType> extends React.PureComponent<\n RadioGroupProps<OptionType>\n> {\n private handleChange = (\n { value, checked }: { value: OptionType; checked: boolean },\n event: React.MouseEvent\n ) => {\n const { toggle, selected, onChange } = this.props;\n if (!toggle && value === selected) return;\n onChange(checked ? value : undefined, event);\n };\n\n render() {\n const { children, selected, className, name, disabled } = this.props;\n\n const _children = React.Children.map(children, _radio => {\n // `_radio as React.ReactElement<RadioProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const radio = _radio as React.ReactElement<RadioProps<OptionType>>;\n return React.cloneElement(radio, {\n onChange: this.handleChange,\n checked: selected === radio.props.value,\n disabled\n });\n });\n\n return (\n <div role=\"radiogroup\" aria-label={name} className={className}>\n {_children}\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { mixins } from \"../../theme\";\n\nexport const wrapStyle = css({\n ...mixins.flexRow,\n cursor: \"pointer\"\n});\n\nexport const disabledStyle = css({\n cursor: \"not-allowed\"\n});\n\nexport const unSelectedStar = css({\n marginLeft: \"2px\",\n color: colors.gray.border,\n fontSize: \"20px\"\n});\n\nexport const selectedStar = css({\n color: colors.yellow.base\n});\n","import { cx } from \"emotion\";\nimport * as React from \"react\";\nimport {\n disabledStyle,\n selectedStar,\n unSelectedStar,\n wrapStyle\n} from \"./styles/Rating.styles\";\nimport { RatingProps, RatingState } from \"./typings/Rating\";\n\nfunction generateStars(maxRating: number, selectedValue: number) {\n return Array.from({ length: maxRating }, (_, i) => {\n return { active: i + 1 <= selectedValue };\n });\n}\n\nclass Rating extends React.PureComponent<RatingProps, RatingState> {\n constructor(props: RatingProps) {\n super(props);\n this.state = {\n stars: generateStars(props.maxRating, props.value)\n };\n }\n\n componentDidUpdate(prevProps: RatingProps) {\n const { maxRating, value } = this.props;\n if (prevProps.maxRating !== maxRating) {\n this.setState({\n stars: generateStars(maxRating, value)\n });\n }\n }\n\n setRating = (rating: number) => {\n const { maxRating, disabled } = this.props;\n if (disabled) {\n return;\n }\n this.setState({\n stars: generateStars(maxRating, rating)\n });\n };\n\n render() {\n const { name, value, onChange, disabled, className } = this.props;\n const { stars } = this.state;\n\n const _className = cx(wrapStyle, className, disabled && disabledStyle);\n\n return (\n <div className={_className}>\n {stars.map((star, starIndex) => {\n const rating = starIndex + 1;\n return (\n <span\n key={`${name}-${rating}`}\n onMouseEnter={() => this.setRating(rating)}\n onMouseLeave={() => this.setRating(value)}\n onClick={() => {\n if (disabled) {\n return;\n }\n this.setRating(rating);\n onChange(rating);\n }}\n >\n <i\n className={cx(\n \"pi pi-grade\",\n unSelectedStar,\n star.active && selectedStar\n )}\n />\n </span>\n );\n })}\n </div>\n );\n }\n}\n\nexport default Rating;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const inputReadOnlyStyle = css({\n color: colors.gray.dark\n});\n\nexport const inputDisabledStyle = css({\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: colors.gray.base\n});\n\nexport const messageStyle = css({\n ...typography.s.regular,\n marginTop: 10,\n lineHeight: \"10px\",\n textAlign: \"left\"\n});\n\nexport const infoTextStyle = css({\n ...typography.s.light,\n marginRight: \"15px\",\n lineHeight: \"12px\"\n});\n\nexport const placeholderStyle = css({\n position: \"absolute\",\n left: \"15px\",\n color: colors.gray.base,\n cursor: \"text\",\n transition: \"transform 100ms ease\",\n transform: \"translate(0, 0px)\",\n pointerEvents: \"none\",\n \"&._pebble_secondary_input_label_focused\": {\n fontSize: \"12px\",\n transform: \"translate(0, -10px)\"\n }\n});\n\nexport const inputStyle = css({\n border: 0,\n outline: 0,\n borderRadius: \"3px\",\n padding: \"15px 15px 0px\",\n width: \"100%\",\n fontSize: \"14px\",\n lineHeight: \"12px\",\n ...mixins.textEllipsis,\n height: \"48px\"\n});\n\nexport const inputWrapperStyle = css({\n position: \"relative\",\n borderRadius: \"3px\",\n fontSize: \"14px\",\n lineHeight: \"12px\",\n background: colors.white.base,\n boxSizing: \"border-box\",\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\"\n});\n\nexport const wrapperStyle = css({ width: \"100%\", height: \"70px\" });\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport Loader from \"./Loader\";\nimport {\n inputDisabledStyle,\n inputReadOnlyStyle,\n infoTextStyle,\n inputStyle,\n inputWrapperStyle,\n wrapperStyle,\n messageStyle,\n placeholderStyle\n} from \"./styles/SecondaryInput.styles\";\nimport {\n SecondaryInputProps,\n SecondaryInputState\n} from \"./typings/SecondaryInput\";\n\nfunction getColor(\n error: string | undefined,\n success: string | undefined,\n isFocused?: boolean,\n isBorder?: boolean\n) {\n let color = isBorder ? colors.gray.light : colors.gray.dark;\n if (error) {\n color = colors.red.base;\n } else if (success) {\n color = colors.emerald.base;\n } else if (isFocused) {\n color = colors.violet.base;\n }\n\n return color;\n}\n\nexport default class SecondaryInput extends React.PureComponent<\n SecondaryInputProps,\n SecondaryInputState\n> {\n state: Readonly<SecondaryInputState> = {\n isFocused: false\n };\n\n private addFocus = () => {\n this.setState({\n isFocused: true\n });\n };\n\n private removeFocus = () => {\n this.setState({\n isFocused: false\n });\n };\n\n private handleChange = (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.ChangeEvent<HTMLTextAreaElement>\n ) => {\n this.props.onChange(e.target.value || \"\");\n };\n\n render() {\n const {\n placeholder,\n inputClassName,\n required,\n infoText,\n value,\n disabled,\n errorMessage,\n successMessage,\n message,\n readOnly,\n loading,\n className\n } = this.props;\n const { isFocused } = this.state;\n\n const _message = errorMessage || successMessage || message;\n\n const _inputProps = {\n \"aria-label\": placeholder ? placeholder : undefined,\n disabled,\n readOnly,\n value: value || \"\",\n className: inputStyle,\n onChange: this.handleChange\n };\n\n const inputWrapperClassName = cx(\n inputWrapperStyle,\n {\n [inputDisabledStyle]: !!disabled,\n [inputReadOnlyStyle]: !!readOnly\n },\n inputClassName\n );\n\n const placeholderClassName = cx(placeholderStyle, {\n _pebble_secondary_input_label_focused: isFocused || !!value\n });\n\n return (\n <div className={cx(wrapperStyle, className)}>\n <div\n className={inputWrapperClassName}\n style={{\n border: `1px solid ${getColor(\n errorMessage,\n successMessage,\n isFocused,\n true\n )}`\n }}\n onFocus={this.addFocus}\n onBlur={this.removeFocus}\n >\n <input {..._inputProps} {...this.props.inputProps} />\n <label className={placeholderClassName}>\n {placeholder}\n {required && (\n <span style={{ color: colors.red.base }}>&nbsp;*</span>\n )}\n </label>\n {infoText && !loading && (value || isFocused) && (\n <label className={infoTextStyle}>{infoText}</label>\n )}\n {loading && <Loader color={colors.violet.base} scale={0.4} />}\n </div>\n {_message && (\n <div\n className={messageStyle}\n style={{ color: getColor(errorMessage, successMessage) }}\n >\n {_message}\n </div>\n )}\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const sidebarWrapperStyle = css({\n backgroundColor: \"rgba(16,23,33,0.3)\",\n position: \"fixed\",\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 99\n});\n\nexport const closeStyle = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n height: 40,\n width: 40,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n marginLeft: -60,\n marginTop: 20,\n position: \"absolute\",\n i: {\n fontSize: 14,\n color: colors.gray.darker\n },\n \"@media (max-width: 800px)\": {\n left: 80,\n marginTop: -45,\n borderRadius: 0,\n display: \"flex\",\n justifyContent: \"flex-end\",\n padding: \"0 20px\",\n i: {\n float: \"right\",\n color: colors.gray.dark,\n fontSize: 14\n }\n }\n});\n\nexport const sidebarStyle = css({\n backgroundColor: colors.white.base,\n position: \"fixed\",\n top: 0,\n bottom: 0,\n right: 0,\n willChange: \"transform\",\n zIndex: 99,\n \"@media (max-width: 800px)\": {\n width: \"100%\",\n paddingTop: 50\n },\n webkitOverflowScrolling: \"touch\"\n});\n","import * as React from \"react\";\nimport {\n closeStyle,\n sidebarStyle,\n sidebarWrapperStyle\n} from \"./styles/Sidebar.styles\";\nimport { SidebarProps } from \"./typings/Sidebar\";\nimport { animated } from \"react-spring/renderprops.cjs\";\nimport Ink from \"react-ink\";\nimport { css, cx } from \"emotion\";\nimport { disableScrollY } from \"../theme/styles\";\nimport MountTransition from \"./shared/MountTransition\";\n\nconst transitionProps = {\n from: { opacity: 0, transform: \"translateX(100%)\" },\n enter: { opacity: 1, transform: \"translateX(0)\" },\n leave: { opacity: 0, transform: \"translateX(100%)\", pointerEvents: \"none\" }\n};\n\nclass SideBar extends React.PureComponent<SidebarProps> {\n static defaultProps: Partial<SidebarProps> = {\n closeOnOutsideClick: true\n };\n\n componentDidMount() {\n if (this.props.isOpen) document.body.classList.add(disableScrollY);\n }\n\n componentDidUpdate() {\n if (this.props.isOpen) {\n document.body.classList.add(disableScrollY);\n } else {\n document.body.classList.remove(disableScrollY);\n }\n }\n\n componentWillUnmount() {\n if (this.props.isOpen) {\n document.body.classList.remove(disableScrollY);\n }\n }\n\n onOutsideClick = () => {\n const { onOutsideClick, closeOnOutsideClick, onClose } = this.props;\n if (closeOnOutsideClick) {\n onClose();\n }\n if (onOutsideClick) onOutsideClick();\n };\n\n render() {\n const {\n width,\n isOpen,\n children,\n onClose,\n onOutsideClick,\n closeOnOutsideClick\n } = this.props;\n const _sidebarStyle = cx(sidebarStyle, css({ width }));\n\n return (\n <MountTransition visible={isOpen} {...transitionProps}>\n {styles => (\n <>\n <animated.div\n style={{ opacity: styles.opacity }}\n className={sidebarWrapperStyle}\n onClick={\n onOutsideClick || closeOnOutsideClick\n ? this.onOutsideClick\n : undefined\n }\n data-testid=\"shadowArea\"\n />\n\n <animated.div className={_sidebarStyle} style={styles}>\n <div className={closeStyle} onClick={onClose}>\n <i className=\"pi pi-close\" />\n <Ink />\n </div>\n\n <div style={{ overflowY: \"auto\", height: \"100%\" }}>\n {children}\n </div>\n </animated.div>\n </>\n )}\n </MountTransition>\n );\n }\n}\n\nexport default SideBar;\n","import * as React from \"react\";\nimport Rheostat from \"rheostat\";\nimport { cx, injectGlobal } from \"emotion\";\nimport { typography } from \"../theme\";\nimport { SliderProps } from \"./typings/Slider\";\nimport { sliderHeader, rheostatOverrides } from \"./styles/Slider.styles\";\nimport { colors } from \"pebble-shared\";\n\nlet rheostatStylesOverriden = false;\nfunction overrideRheostatStyles() {\n if (rheostatStylesOverriden) return;\n injectGlobal(rheostatOverrides);\n rheostatStylesOverriden = true;\n}\n\nconst Slider: React.FunctionComponent<SliderProps> = ({\n className,\n large,\n title,\n disabled,\n required,\n valueLabelExtractor,\n values,\n onValuesUpdated,\n ...rest\n}) => {\n overrideRheostatStyles();\n const mainClass = cx(className, {\n __pebble__slider__disabled: !!disabled,\n __pebble__slider__large: !!large\n });\n\n const _values = Array.isArray(values) ? values.slice(0) : values || [];\n\n if (Array.isArray(values)) {\n if (!values[0] && rest.min !== undefined) {\n _values[0] = rest.min;\n }\n if (!values[1] && rest.max) {\n _values[1] = rest.max;\n }\n }\n\n return (\n <div className={mainClass}>\n <div className={sliderHeader}>\n <div style={large ? typography.normal.light : typography.normal.light}>\n {title}\n {required && <span style={{ color: colors.red.base }}>&nbsp;*</span>}\n </div>\n <div style={large ? typography.l.regular : typography.normal.regular}>\n {valueLabelExtractor\n ? valueLabelExtractor()\n : `${_values[0]} - ${_values[1]}`}\n </div>\n </div>\n <Rheostat\n aria-valuemax={rest.max}\n aria-valuemin={rest.min}\n disabled={disabled}\n onValuesUpdated={onValuesUpdated && (args => onValuesUpdated(args))}\n values={_values}\n {...rest}\n />\n </div>\n );\n};\n\nexport default Slider;\n","import { typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const headStyle = css({\n display: \"flex\",\n flexDirection: \"row\",\n position: \"relative\"\n});\n\nexport const headSection = css({\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n cursor: \"pointer\",\n \"> div\": {\n fontSize: 14\n }\n});\n\nexport const headingStyle = css({ ...typography.normal.regular });\n\nexport const dotStyle = css({\n height: 20,\n width: 20,\n backgroundColor: colors.gray.base,\n borderRadius: \"50%\",\n border: \"5px solid white\",\n marginTop: 18,\n position: \"relative\",\n zIndex: 9\n});\n\nexport const activeDotStyle = css({\n backgroundColor: colors.violet.base\n});\n\nexport const contentWrapper = css({\n marginTop: -10\n});\n\nexport const footerStyle = css({\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n marginTop: 50\n});\n\nexport const stepperLineStyle = css({\n height: 2,\n bottom: 9,\n position: \"absolute\",\n transition: \"width 100ms ease-out\",\n backgroundColor: colors.violet.base\n});\n","import * as React from \"react\";\nimport { css, cx } from \"emotion\";\nimport { StepperProps, StepperState } from \"./typings/Stepper\";\nimport Button from \"./Button\";\nimport {\n activeDotStyle,\n contentWrapper,\n dotStyle,\n footerStyle,\n headingStyle,\n headSection,\n headStyle,\n stepperLineStyle\n} from \"./styles/Stepper.styles\";\nimport { colors } from \"pebble-shared\";\n\nfunction noop() {}\n\nclass Stepper extends React.PureComponent<StepperProps, StepperState> {\n static defaultProps: Partial<StepperProps> = {\n allowSkip: true,\n cancelLabel: \"Cancel\",\n nextLabel: \"Next\",\n prevLabel: \"Prev\",\n doneLabel: \"Done\",\n onBeforeNext: () => true,\n onBeforePrev: () => true,\n onChange: () => {},\n onCancel: () => {},\n onDone: () => {},\n renderFooterElement: ({ leftButtonData, rightButtonData }, props) => {\n return (\n <footer className={footerStyle}>\n <Button\n size=\"large\"\n width={100}\n type={\"secondary\"}\n onClick={leftButtonData.action}\n >\n {leftButtonData.label}\n </Button>\n <Button\n size=\"large\"\n width={100}\n loading={props.isRightButtonLoading}\n onClick={rightButtonData.action}\n >\n {rightButtonData.label}\n </Button>\n </footer>\n );\n }\n };\n\n state: StepperState = {\n active: this.props.initialSelectedIndex || 0\n };\n\n private goToNextPage = async () => {\n const { onBeforeNext, data } = this.props;\n const allow = await onBeforeNext(this.state.active);\n if (allow) this.goToPage(Math.min(data.length - 1, this.state.active + 1));\n };\n\n private goToPrevPage = async () => {\n const allow = await this.props.onBeforePrev(this.state.active);\n if (allow) this.goToPage(Math.max(0, this.state.active - 1));\n };\n\n private goToPage = (index: number): void => {\n const prev = this.state.active;\n this.setState(\n {\n active: index\n },\n () =>\n this.props.onChange({\n prev,\n current: this.state.active\n })\n );\n };\n\n private getHeadings = (): string[] => {\n const { headingExtractor, data } = this.props;\n return data.map(datum => headingExtractor({ item: datum }));\n };\n\n private getLeftButtonData = () => {\n const { cancelLabel, prevLabel, onCancel } = this.props;\n return this.state.active === 0\n ? {\n label: cancelLabel,\n action: onCancel\n }\n : {\n label: prevLabel,\n action: this.goToPrevPage\n };\n };\n\n private getRightButtonData = () => {\n const { nextLabel, onDone, data, doneLabel } = this.props;\n return this.state.active === data.length - 1\n ? {\n label: doneLabel,\n action: onDone\n }\n : {\n label: nextLabel,\n action: this.goToNextPage\n };\n };\n\n render() {\n const {\n data,\n renderContentElement,\n keyExtractor,\n renderFooterElement,\n className,\n allowSkip\n } = this.props;\n\n const { active } = this.state;\n\n const args = {\n goToNext: this.goToNextPage,\n goToPage: this.goToPage,\n goToPrev: this.goToPrevPage,\n leftButtonData: this.getLeftButtonData(),\n rightButtonData: this.getRightButtonData()\n };\n\n return (\n <div className={className}>\n <div className={headStyle}>\n {this.getHeadings().map((heading, i) => {\n const dotClass = cx(dotStyle, {\n [activeDotStyle]: i <= active\n });\n\n const headingColor =\n i === active\n ? colors.violet.base\n : allowSkip\n ? colors.gray.base\n : undefined;\n\n return (\n <div\n key={keyExtractor(data[i])}\n className={cx(headSection, {\n [css({ cursor: \"inherit\" })]: !allowSkip\n })}\n onClick={allowSkip ? () => this.goToPage(i) : noop}\n >\n <div className={headingStyle} style={{ color: headingColor }}>\n {heading}\n </div>\n <div className={dotClass} />\n </div>\n );\n })}\n <div\n className={stepperLineStyle}\n style={{\n width: `${(100 / (2 * data.length)) * 2 * active}%`,\n marginLeft: `${100 / (2 * data.length)}%`\n }}\n />\n </div>\n\n <div className={contentWrapper}>\n {data.map((datum, i) => (\n <div\n key={keyExtractor(datum)}\n className={cx({\n [css({ display: \"none\" })]: i !== this.state.active\n })}\n >\n {renderContentElement({\n item: datum,\n isSelected: i === this.state.active,\n ...args\n })}\n </div>\n ))}\n\n {renderFooterElement(\n {\n activeIndex: this.state.active,\n ...args\n },\n this.props\n )}\n </div>\n </div>\n );\n }\n}\n\nexport default Stepper;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\n\nexport const labelTextStyle = css({\n ...typography.s.bold,\n color: colors.gray.dark,\n marginRight: \"10px\"\n});\n\nexport const disabledStyle = css({ cursor: \"not-allowed\" });\n\nexport const labelStyle = css({\n width: \"28px\",\n height: \"14px\",\n backgroundColor: colors.gray.base,\n position: \"relative\",\n display: \"inline-block\",\n borderRadius: \"14px\",\n cursor: \"pointer\"\n});\n// for accessible and touch areas for ios android\nexport const fixedLabelStyle = css({\n padding: \"15px 0px\",\n display: \"flex\",\n cursor: \"pointer\",\n userSelect: \"none\"\n});\n\nexport const inputStyle = css({\n width: 0,\n height: 0,\n opacity: 0\n});\n\nexport const switchStyle = css({\n position: \"absolute\",\n height: \"10px\",\n width: \"10px\",\n left: \"2px\",\n bottom: \"2px\",\n borderRadius: \"50%\",\n backgroundColor: colors.white.base,\n transition: \".4s\"\n});\n\nexport const selectedLabel = css({ backgroundColor: colors.violet.base });\n\nexport const selectedSwitch = css({ transform: \"translateX(14px)\" });\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport {\n labelTextStyle,\n labelStyle,\n selectedLabel,\n inputStyle,\n selectedSwitch,\n switchStyle,\n fixedLabelStyle,\n disabledStyle\n} from \"./styles/Switch.styles\";\nimport { SwitchProps, SwitchState } from \"./typings/Switch\";\n\nexport default class Switch extends React.PureComponent<\n SwitchProps,\n SwitchState\n> {\n state = {\n value: this.props.initialValue || false\n };\n\n render() {\n const { onChange, className, label, disabled } = this.props;\n const { value } = this.state;\n\n return (\n <label\n className={cx(className, fixedLabelStyle, {\n [disabledStyle]: !!disabled\n })}\n >\n <span className={labelTextStyle}>{label}</span>\n <div\n className={cx(labelStyle, {\n [selectedLabel]: value,\n [disabledStyle]: !!disabled\n })}\n >\n <input\n type=\"checkbox\"\n checked={value}\n className={inputStyle}\n onChange={() => {\n this.setState({\n value: !value\n });\n if (onChange) {\n onChange(!value);\n }\n }}\n disabled={disabled}\n />\n <span\n className={cx({\n [switchStyle]: true,\n [selectedSwitch]: value\n })}\n />\n </div>\n </label>\n );\n }\n}\n","import { constants, mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const tagStyle = css({\n ...typography.s.bold,\n ...mixins.flexSpaceBetween,\n borderRadius: constants.borderRadius,\n padding: \"0 10px\",\n height: 28,\n alignItems: \"center\",\n justifyContent: \"center\",\n display: \"inline-flex\",\n lineHeight: \"10px\",\n \"&.__pebble__tag__with__close\": {\n paddingRight: 0\n }\n});\n\nexport const iconClass = css({\n fontSize: 7,\n marginLeft: 5,\n height: \"inherit\",\n padding: \"10px 10px\",\n cursor: \"pointer\",\n position: \"relative\",\n \":hover\": {\n backgroundColor: colors.violet.lighter,\n borderTopRightRadius: constants.borderRadius,\n borderBottomRightRadius: constants.borderRadius\n }\n});\n","import * as React from \"react\";\nimport { colors } from \"pebble-shared\";\nimport { tagStyle, iconClass } from \"./styles/Tag.styles\";\nimport { TagProps } from \"./typings/Tag\";\nimport { cx } from \"emotion\";\nimport Ink from \"react-ink\";\n\nconst Tag: React.FunctionComponent<TagProps> = ({\n label,\n color,\n onClose,\n className\n}) => {\n const wrapperClassName = cx(tagStyle, {\n __pebble__tag__with__close: !!onClose\n });\n const _className = cx(wrapperClassName, className);\n return (\n <div\n className={_className}\n style={{\n color: colors[color].base,\n // @ts-ignore\n backgroundColor: colors[color].lightest || colors[color].light\n }}\n >\n {label}{\" \"}\n {onClose && (\n <i onClick={onClose} className={cx(\"pi\", \"pi-close\", iconClass)}>\n <Ink />\n </i>\n )}\n </div>\n );\n};\n\nexport default Tag;\n","import React from \"react\";\nimport { css, cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { TextProps } from \"./typings/Text\";\n\nconst Text: React.FunctionComponent<TextProps> = ({\n typography,\n color = colors.gray.darker,\n children,\n className\n}) => {\n const _className = css({\n ...typography,\n color\n });\n\n return <span className={cx(_className, className)}>{children}</span>;\n};\n\nexport default Text;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const timePickerWrap = css({\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${colors.gray.light}`,\n borderRadius: \"3px\",\n cursor: \"pointer\",\n \"&:not([disabled]):hover\": {\n background: colors.gray.light\n }\n});\n\nexport const timePickerSelected = css({\n backgroundColor: colors.gray.lighter\n});\n\nexport const hourPicker = css({\n borderRadius: \"3px 0px 0px 3px\",\n borderRight: \"none\"\n});\n\nexport const seperator = css({\n color: colors.gray.dark,\n lineHeight: \"40px\"\n});\n\nexport const minutePicker = css({\n borderLeft: \"none\",\n borderRadius: \"0px 3px 3px 0px\"\n});\n\nexport const optionStyle = css({\n width: \"100px\"\n});\n","import * as React from \"react\";\nimport DropDown from \"./DropDown\";\nimport Option from \"./Option\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\nimport { cx, css } from \"emotion\";\nimport {\n timePickerWrap,\n timePickerSelected,\n hourPicker,\n minutePicker,\n optionStyle,\n seperator\n} from \"./styles/TimePicker.styles\";\nimport { TimePickerProps } from \"./typings/TimePicker\";\nimport { colors } from \"pebble-shared\";\n\nconst HOURS = /*#__PURE__*/ [...Array(12)].map((_, i) =>\n (\"00\" + (i + 1).toString(10)).slice(-2)\n);\nconst TWENTY_FOUR_HOURS = /*#__PURE__*/ [...Array(24)].map((_, i) =>\n (\"00\" + i.toString(10)).slice(-2)\n);\nconst MINUTES = /*#__PURE__*/ [...Array(4)].map((_, i) =>\n (\"00\" + (i * 15).toString(10)).slice(-2)\n);\n\nexport const iconStyle = css({\n marginLeft: 15,\n fontWeight: \"bold\",\n fontSize: 8,\n transition: \"transform ease-out .2s\",\n willTransform: \"transform\",\n marginTop: 2,\n color: colors.gray.dark,\n display: \"inline-block\"\n});\n\nexport const buttonStyle = css({\n padding: \"15px 20px\",\n fontSize: \"12px\",\n color: colors.gray.darker,\n lineHeight: \"9px\",\n width: \"105px\"\n});\n\nconst modifiers = {\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n};\n\nconst TimePicker: React.FunctionComponent<TimePickerProps> = props => {\n const {\n selectedHour,\n selectedMinute,\n onHourChange,\n onMinuteChange,\n twentyFourHourFormat\n } = props;\n const selected = !!selectedHour || selectedMinute !== undefined;\n\n return (\n <div\n className={cx({\n [timePickerWrap]: true,\n [timePickerSelected]: selected\n })}\n >\n <DropDown\n labelClassName={hourPicker}\n isSelected={selected}\n labelComponent={({ isOpen, toggleDropdown }) => (\n <div\n onClick={() => {\n toggleDropdown();\n }}\n className={buttonStyle}\n data-test-id=\"hour-label\"\n >\n <span className={css({ marginRight: \"15px\" })}>\n {selectedHour !== undefined\n ? (\"00\" + selectedHour).slice(-2)\n : \"Hrs\"}\n </span>\n <span>\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{ transform: isOpen ? \"rotate(180deg)\" : \"none\" }}\n />\n </span>\n </div>\n )}\n placement=\"bottom-start\"\n modifiers={modifiers}\n >\n {({ toggle }) => (\n <OptionGroupRadio\n onChange={value => {\n if (value !== undefined) {\n onHourChange(value);\n }\n toggle();\n }}\n selected={selectedHour}\n className={optionStyle}\n >\n {(twentyFourHourFormat ? TWENTY_FOUR_HOURS : HOURS).map(hour => (\n <Option\n key={hour}\n value={parseInt(hour, 10)}\n label={hour}\n className={optionStyle}\n />\n ))}\n </OptionGroupRadio>\n )}\n </DropDown>\n <span className={seperator}>:</span>\n <DropDown\n labelClassName={minutePicker}\n isSelected={selected}\n labelComponent={({ isOpen, toggleDropdown }) => (\n <div\n onClick={() => {\n toggleDropdown();\n }}\n className={buttonStyle}\n data-test-id=\"minute-label\"\n >\n <span className={css({ marginRight: \"15px\" })}>\n {selectedMinute !== undefined\n ? (\"00\" + selectedMinute).slice(-2)\n : \"mins\"}\n </span>\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{ transform: isOpen ? \"rotate(180deg)\" : \"none\" }}\n />\n </div>\n )}\n placement=\"bottom-start\"\n modifiers={modifiers}\n >\n {({ toggle }) => (\n <OptionGroupRadio\n onChange={value => {\n if (value !== undefined) {\n onMinuteChange(value);\n }\n toggle();\n }}\n selected={selectedMinute}\n className={optionStyle}\n >\n {MINUTES.map(min => (\n <Option\n key={min}\n value={parseInt(min, 10)}\n label={min}\n className={optionStyle}\n />\n ))}\n </OptionGroupRadio>\n )}\n </DropDown>\n </div>\n );\n};\n\nexport default TimePicker;\n","import { css } from \"emotion\";\nimport { typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const textStyle = css({\n ...typography.s.regular,\n color: colors.white.base,\n display: \"block\",\n padding: \"10px 16px\"\n});\n\nexport const popperStyle = css({\n margin: 4,\n boxShadow: \"none\",\n maxWidth: 320\n});\n","import * as React from \"react\";\nimport Popper from \"./Popper\";\nimport { TooltipProps, TooltipState } from \"./typings/Tooltip\";\nimport { colors } from \"pebble-shared\";\nimport { popperStyle, textStyle } from \"./styles/Tooltip.styles\";\nimport { cx } from \"emotion\";\n\nclass Tooltip extends React.PureComponent<TooltipProps, TooltipState> {\n state = {\n isOpen: !!this.props.isOpen\n };\n\n private defaultTooltip = () => (\n <span className={textStyle}>{this.props.text}</span>\n );\n\n private showTooltip = () => {\n if (this.props.disabled) return;\n this.setState({\n isOpen: true\n });\n };\n\n private hideTooltip = () => {\n this.setState({\n isOpen: false\n });\n };\n\n render() {\n const {\n placement,\n label,\n modifiers,\n isError,\n popperClassName\n } = this.props;\n\n return (\n <Popper\n label={() =>\n label({\n onMouseEnter: this.showTooltip,\n onMouseLeave: this.hideTooltip\n })\n }\n placement={placement}\n controlled\n popperBackgroundColor={isError ? colors.red.base : colors.gray.darker}\n modifiers={modifiers}\n isOpen={this.props.isOpen || this.state.isOpen}\n popperClassName={cx(popperStyle, popperClassName)}\n closeOnOutsideClick={false}\n >\n {this.props.renderElement || this.defaultTooltip}\n </Popper>\n );\n }\n}\n\nexport default Tooltip;\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\n\nexport const wrapper = css({\n position: \"relative\"\n});\n\nexport const optionsWrapper = css({\n width: \"100%\",\n position: \"absolute\",\n marginTop: -40,\n zIndex: 999,\n boxShadow: constants.boxShadow.elevated,\n transformOrigin: \"0 0\"\n});\n","import * as React from \"react\";\nimport debounce from \"just-debounce-it\";\nimport {\n TypeaheadProps,\n TypeaheadState,\n SearchBoxArgs\n} from \"./typings/Typeahead\";\nimport { cx } from \"emotion\";\nimport Input from \"./Input\";\nimport { optionsWrapper, wrapper } from \"./styles/TypeAhead.styles\";\nimport OutsideClick from \"./OutsideClick\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\nimport { animated } from \"react-spring/renderprops.cjs\";\nimport MountTransition from \"./shared/MountTransition\";\n\nfunction defaultSearchBox<OptionType>(\n { registerChange, onFocus, value }: SearchBoxArgs,\n props: TypeaheadProps<OptionType> & Required<typeof TypeAhead.defaultProps>\n) {\n const _inputProps = props.inputProps\n ? {\n ...props.inputProps.inputProps\n }\n : {};\n return (\n <Input\n {...props.inputProps}\n onChange={registerChange}\n placeholder={props.placeholder}\n inputProps={{\n ..._inputProps,\n onFocus,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n if (e.keyCode === 8 && props.selected) {\n // keyCode for delete\n registerChange(\"\");\n props.onClear();\n }\n }\n }}\n value={value}\n errorMessage={props.errorMessage}\n loading={props.loading}\n required={props.required}\n disabled={props.disabled}\n />\n );\n}\n\nexport default class TypeAhead<OptionType> extends React.PureComponent<\n TypeaheadProps<OptionType> & Required<typeof TypeAhead.defaultProps>,\n TypeaheadState\n> {\n static defaultProps = {\n debounceTime: 500,\n onClear: () => {}\n };\n\n state: TypeaheadState = {\n value: this.props.initialValue || \"\",\n showSuggestions: false\n };\n\n private onChange = () => {\n this.props.onChange(this.state.value, this.props);\n };\n\n private debouncedChange = debounce(this.onChange, this.props.debounceTime);\n\n private registerChange = (value: string) => {\n this.setState(\n {\n value\n },\n this.debouncedChange\n );\n };\n\n private onFocus = () => {\n this.setState({\n showSuggestions: true\n });\n };\n\n private onSelect = (_value?: OptionType) => {\n this.props.onSelect(_value, this.props);\n\n this.setState({\n showSuggestions: false,\n value: (_value && this.props.valueExtractor(_value)) || \"\"\n });\n };\n\n render() {\n const {\n className,\n searchBox = defaultSearchBox,\n dropdownClassName,\n children\n } = this.props;\n\n const { showSuggestions, value } = this.state;\n\n return (\n <OutsideClick\n onOutsideClick={() =>\n this.setState({\n showSuggestions: false\n })\n }\n disabled={!showSuggestions}\n className={cx(wrapper, className)}\n >\n {searchBox(\n {\n registerChange: this.registerChange,\n onFocus: this.onFocus,\n value\n },\n this.props\n )}\n\n <MountTransition visible={showSuggestions} native>\n {transitionStyles => (\n <animated.div\n style={transitionStyles}\n className={cx(optionsWrapper, dropdownClassName)}\n >\n <OptionGroupRadio onChange={this.onSelect}>\n {children}\n </OptionGroupRadio>\n </animated.div>\n )}\n </MountTransition>\n </OutsideClick>\n );\n }\n}\n","export function capitalize(str: string): string {\n return str\n ? str\n .split(\" \")\n .map(s => s.charAt(0).toUpperCase() + s.slice(1))\n .join(\" \")\n : str;\n}\n","export function getShortenedNumber(\n num?: number | null,\n toFixed: number = 1\n): string | undefined {\n let formattedNum: string;\n if (!num && num !== 0) {\n return;\n }\n\n if (num >= 10000000) {\n formattedNum = (num / 10000000).toFixed(toFixed) + \" Cr\";\n } else if (num >= 100000) {\n formattedNum = (num / 100000).toFixed(toFixed) + \" L\";\n } else if (num >= 1000) {\n formattedNum = (num / 1000).toFixed(toFixed) + \" K\";\n } else if (num !== Math.floor(num)) {\n // has decimal part\n formattedNum = `${num.toFixed(toFixed)}`;\n } else {\n formattedNum = `${num}`;\n }\n return formattedNum;\n}\n","import isBrowser from \"is-in-browser\";\n\ndeclare global {\n interface Window {\n GoogleAnalyticsObject: string;\n ga: UniversalAnalytics.ga;\n }\n}\n\nexport function initGoogleAnalytics(gaId: string) {\n if (isBrowser) {\n ((s, o, g) => {\n window.GoogleAnalyticsObject = \"ga\";\n window.ga =\n window.ga ||\n (() => {\n (window.ga.q = window.ga.q || []).push(arguments);\n });\n window.ga.l = Date.now();\n const a = s.createElement(o) as HTMLScriptElement;\n const m = s.getElementsByTagName(o)[0];\n a.async = true;\n a.src = g;\n if (m.parentNode) m.parentNode.insertBefore(a, m);\n })(document, \"script\", \"https://www.google-analytics.com/analytics.js\");\n\n window.ga(\"create\", gaId, \"auto\");\n window.ga(\"send\", \"pageview\");\n }\n}\n"],"names":["colors","_css","React.createElement","inputStyle","_cx","React.createRef","React.Children","React.Component","disabledStyle","popperStyle"],"mappings":"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"}
1
+ {"version":3,"file":"pebble-web.js","sources":["../src/theme/mixins.ts","../src/theme/constants.ts","../src/theme/typography.ts","../src/theme/styles.ts","../src/components/styles/Button.styles.ts","../src/components/styles/Loader.styles.ts","../src/components/Loader.tsx","../src/components/Button.tsx","../src/components/styles/Calendar.styles.ts","../src/components/Calendar.tsx","../src/components/styles/Control.styles.ts","../src/components/shared/Control.tsx","../src/components/utils/getSelectedCheckboxes.ts","../src/components/CheckboxGroup.tsx","../src/components/styles/Dropdown.styles.ts","../src/components/OutsideClick.tsx","../src/components/DropDown.tsx","../src/components/styles/Input.styles.ts","../src/components/styles/Date.styles.ts","../src/components/Input.tsx","../src/components/NativeDateInput.tsx","../src/utils/useragent/index.tsx","../src/components/DateInput.tsx","../src/components/Logo.tsx","../src/components/styles/Toast.styles.ts","../src/components/Toast.tsx","../src/components/styles/Message.styles.ts","../src/components/Message.tsx","../src/components/Modal.tsx","../src/components/styles/Options.styles.ts","../src/components/Option.tsx","../src/components/styles/Search.styles.ts","../src/components/Search.tsx","../src/components/styles/OptionGroup.styles.ts","../src/components/shared/OptionGroup.tsx","../src/components/styles/OptionGroupCheckBox.styles.ts","../src/components/OptionGroupCheckBox.tsx","../src/components/OptionGroupRadio.tsx","../src/components/styles/Select.styles.ts","../src/components/Select.tsx","../src/components/styles/PhoneNumberInput.styles.ts","../src/components/PhoneNumberInput.tsx","../src/components/styles/Popper.styles.ts","../src/components/Popper.tsx","../src/components/styles/PopUp.styles.ts","../src/components/PopUp.tsx","../src/components/styles/Tabs.styles.ts","../src/components/Tabs.tsx","../src/components/styles/PresetCalendar.styles.ts","../src/components/PresetCalendar.tsx","../src/components/RadioGroup.tsx","../src/components/styles/Rating.styles.ts","../src/components/Rating.tsx","../src/components/styles/SecondaryInput.styles.ts","../src/components/SecondaryInput.tsx","../src/components/styles/Sidebar.styles.ts","../src/components/Sidebar.tsx","../src/components/Slider.tsx","../src/components/styles/Stepper.styles.ts","../src/components/Stepper.tsx","../src/components/styles/Switch.styles.ts","../src/components/Switch.tsx","../src/components/styles/Tag.styles.ts","../src/components/Tag.tsx","../src/components/Text.tsx","../src/components/styles/TimePicker.styles.ts","../src/components/TimePicker.tsx","../src/components/styles/Tooltip.styles.ts","../src/components/Tooltip.tsx","../src/components/styles/TypeAhead.styles.ts","../src/components/TypeAhead.tsx","../src/utils/strings/capitalize.ts","../src/utils/numbers/format.ts","../src/utils/analytics/ga.ts"],"sourcesContent":["export const textEllipsis = {\n overflowX: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\"\n} as const;\n\nexport const flexRow = {\n display: \"flex\",\n flexDirection: \"row\"\n} as const;\n\nexport const flexSpaceBetween = {\n ...flexRow,\n justifyContent: \"space-between\",\n alignContent: \"initial\"\n} as const;\n\nexport const flexMiddleAlign = {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n} as const;\n\nexport const getPlaceholderStyle = (color: string) =>\n ({\n \"::-webkit-input-placeholder\": { color },\n \"::-moz-placeholder\": { color },\n \":-ms-input-placeholder\": { color },\n \":-moz-placeholder\": { color },\n \"::placeholder\": { color }\n } as const);\n","import { ThemeConstants } from \"./typings/constants\";\nimport { colors } from \"pebble-shared\";\n\nexport const constants: ThemeConstants = {\n borderRadius: 3,\n buttonHeight: 40,\n animationCurve: \"cubic-bezier(.64,.09,.08,1)\",\n padding: {\n base: 20,\n higher: 60\n },\n\n border: {\n base: `1px solid ${colors.gray.light}`,\n light: `1px solid ${colors.gray.lighter}`\n },\n\n boxShadow: {\n base: `0 2px 7px 0 #F2F2F2`,\n elevated: `0 4px 7px 0 ${colors.gray.light}`,\n xElevated: \"0 2px 15px 0 rgba(0,0,0,0.1)\"\n }\n};\n","import { Typography } from \"./typings/typography\";\nimport { colors } from \"pebble-shared\";\n\nconst fontSize = {\n xs: 10,\n s: 12,\n normal: 14,\n l: 16,\n xl: 18,\n xll: 22\n};\n\nconst enum FontWeight {\n NORMAL = 400,\n BOLD = 500\n}\n\nexport const typography: Typography = {\n xll: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.xll\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xll\n }\n },\n\n xl: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xl\n }\n },\n\n l: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.dark,\n fontSize: fontSize.l\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.l\n }\n },\n\n normal: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.normal\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.normal\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.normal\n },\n lighter: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.base,\n fontSize: fontSize.normal\n },\n link: {\n fontWeight: FontWeight.NORMAL,\n color: colors.violet.base,\n fontSize: fontSize.normal\n }\n },\n\n s: {\n regular: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.darker,\n fontSize: fontSize.s\n },\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.s\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.s\n },\n lighter: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.base,\n fontSize: fontSize.s\n },\n link: {\n fontWeight: FontWeight.NORMAL,\n color: colors.violet.base,\n fontSize: fontSize.s\n }\n },\n\n xs: {\n bold: {\n fontWeight: FontWeight.BOLD,\n color: colors.gray.darker,\n fontSize: fontSize.xs\n },\n light: {\n fontWeight: FontWeight.NORMAL,\n color: colors.gray.dark,\n fontSize: fontSize.xs\n }\n }\n};\n","import { css } from \"emotion\";\nimport { constants } from \"./constants\";\nimport { typography } from \"./typography\";\nimport { colors } from \"pebble-shared\";\n\nexport const tableStyle = css({\n borderRadius: constants.borderRadius,\n border: constants.border.dark,\n ...typography.s.regular,\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n backgroundColor: colors.gray.lightest,\n \"tr:last-child\": {\n td: {\n border: 0\n },\n \"td:first-child\": {\n borderBottomLeftRadius: constants.borderRadius\n },\n \"td:last-child\": {\n borderBottomRightRadius: constants.borderRadius\n }\n },\n \"tr:first-child\": {\n \"th:first-child\": {\n borderLeftLeftRadius: constants.borderRadius\n },\n \"th:last-child\": {\n borderLeftRightRadius: constants.borderRadius\n }\n },\n th: {\n textAlign: \"left\",\n ...typography.xs.bold,\n color: colors.gray.dark\n },\n \"tbody > tr:nth-of-type(2n + 1)\": {\n backgroundColor: colors.white.base\n },\n \"th, td\": {\n height: 50,\n padding: \"10px 25px\",\n borderBottom: constants.border.dark\n }\n});\n\nexport const disableScrollY = css({\n overflowY: \"hidden\"\n});\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { ButtonType, MappingColorByType } from \"../typings/Button\";\nimport { colors } from \"pebble-shared\";\n\nconst { violet, gray, white, red, emerald } = colors;\n\nexport const smallButtonHeight = 40;\n\nconst commonButtonStyle = css({\n lineHeight: \"23px\",\n height: constants.buttonHeight,\n padding: \"0 20px\",\n display: \"flex\",\n alignItems: \"center\",\n transition: \"all ease-out .2s\",\n borderRadius: constants.borderRadius,\n outline: \"none\",\n position: \"relative\",\n overflow: \"hidden\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n justifyContent: \"center\",\n border: 0,\n \"&[disabled]\": {\n cursor: \"not-allowed\"\n }\n});\n\nconst mappingColorByType: MappingColorByType = {\n primary: {\n base: violet.base,\n hover: violet.light,\n active: violet.dark,\n disabled: violet.lighter\n },\n secondary: {\n textColor: gray.darker,\n base: gray.lighter,\n hover: gray.lightest,\n active: gray.base,\n disabled: gray.lighter\n },\n success: {\n base: emerald.base,\n hover: emerald.light,\n active: emerald.dark,\n disabled: emerald.lighter\n },\n alert: {\n base: red.base,\n hover: red.light,\n active: red.dark,\n disabled: red.lighter\n }\n};\n\nconst linkStyle = {\n backgroundColor: \"transparent\",\n border: 0,\n color: violet.base,\n minWidth: 0,\n padding: 0,\n \":not([disabled]):hover\": {\n textDecoration: \"underline\"\n },\n \"&[disabled]\": {\n color: violet.lighter\n }\n};\n\nconst getStyleByType = (type: ButtonType, filled: boolean) => {\n if (type === \"link\") return linkStyle;\n\n const _color = mappingColorByType[type];\n const { base: colorBase, disabled, hover, active, textColor } = _color;\n\n const defaultFontColor = filled ? textColor || white.base : colorBase;\n\n return {\n color: defaultFontColor,\n backgroundColor: filled ? colorBase : white.base,\n border: filled ? \"none\" : `1px solid ${colorBase}`,\n \"&:not([disabled]):hover\": {\n color: textColor || white.base,\n backgroundColor: hover,\n borderColor: hover\n },\n \"&:not([disabled]):active\": {\n color: textColor || white.base,\n backgroundColor: active,\n borderColor: active\n },\n \"&[disabled]\": {\n color: textColor || white.base,\n backgroundColor: disabled,\n borderColor: disabled\n }\n };\n};\n\nconst styleBasedOnSize = {\n \"x-small\": {\n height: 25,\n minWidth: 70,\n ...typography.xs.light\n },\n small: {\n height: smallButtonHeight,\n minWidth: 100,\n ...typography.s.regular\n },\n large: {\n height: 50,\n minWidth: 140,\n ...typography.normal.regular\n }\n};\n\nexport const getButtonStyle = (\n size: keyof typeof styleBasedOnSize,\n type: ButtonType,\n showShadow: boolean,\n filled: boolean\n) => {\n return css([\n commonButtonStyle,\n {\n ...styleBasedOnSize[size],\n ...getStyleByType(type, filled),\n boxShadow: showShadow ? constants.boxShadow.base : \"none\"\n }\n ]);\n};\n\nexport const iconStyle = css({\n marginLeft: 15,\n fontWeight: \"bold\",\n fontSize: 8,\n transition: \"transform ease-out .2s\",\n willTransform: \"transform\",\n marginTop: 2,\n color: colors.gray.dark\n});\n\nexport const dropDownButtonStyle = css({\n border: constants.border.base,\n \"&:not([disabled]):hover\": {\n backgroundColor: colors.gray.lighter\n }\n});\n\nexport const dropDownButtonDefaultStyle = css({\n backgroundColor: colors.white.base,\n color: colors.gray.darker,\n \"&:not([disabled]):hover\": {\n backgroundColor: colors.gray.lighter\n }\n});\n","import { keyframes, css } from \"emotion\";\nimport { mixins } from \"../../theme\";\n\nconst bounceDelay = keyframes({\n \"0%, 80%, 100%\": {\n transform: \"scale(0)\"\n },\n \"40%\": {\n transform: \"scale(1)\"\n }\n});\n\nexport const spinnerStyle = css({\n ...mixins.flexSpaceBetween,\n width: 70,\n \"> div\": {\n width: 18,\n height: 18,\n borderRadius: \"100%\",\n display: \"inline-block\",\n animation: `${bounceDelay} 1.4s infinite ease-in-out both`,\n \"&:first-of-type\": {\n animationDelay: \"-0.32s\"\n },\n \"&:nth-of-type(2n)\": {\n animationDelay: \"-0.16s\"\n }\n }\n});\n","import * as React from \"react\";\nimport { LoaderProps } from \"./typings/Loader\";\nimport { spinnerStyle } from \"./styles/Loader.styles\";\nimport { colors } from \"pebble-shared\";\nimport { cx } from \"emotion\";\n\nconst Loader: React.FunctionComponent<LoaderProps> = ({\n color = colors.gray.darker,\n scale = 1,\n className\n}) => {\n const style = {\n backgroundColor: color\n };\n return (\n <div\n className={cx(spinnerStyle, className)}\n style={{ transform: `scale(${scale})` }}\n >\n <div style={style} />\n <div style={style} />\n <div style={style} />\n </div>\n );\n};\n\nexport default Loader;\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport {\n iconStyle,\n getButtonStyle,\n dropDownButtonStyle,\n dropDownButtonDefaultStyle\n} from \"./styles/Button.styles\";\nimport Ink from \"react-ink\";\nimport { ButtonProps, DropDownButtonProps } from \"./typings/Button\";\nimport Loader from \"./Loader\";\nimport { colors } from \"pebble-shared\";\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n type = \"primary\",\n disabled,\n children,\n onClick,\n width,\n showShadow,\n className,\n showRipple = true,\n loading,\n outline,\n size = \"small\",\n buttonProps\n}: ButtonProps) => {\n const disableAction = disabled || loading;\n\n const _outline = size === \"x-small\" || !!outline;\n\n const _className = cx(\n getButtonStyle(size, type, !!showShadow, !_outline),\n className\n );\n\n return (\n <button\n className={_className}\n onClick={!disableAction ? onClick : undefined}\n style={{ width }}\n disabled={disabled}\n {...buttonProps}\n >\n {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}\n {!disableAction && showRipple && type !== \"link\" && <Ink />}\n </button>\n );\n};\n\nexport const DropDownButton = ({\n isOpen,\n isSelected,\n children,\n className,\n ...props\n}: DropDownButtonProps) => {\n const _className = cx(dropDownButtonStyle, {\n [dropDownButtonDefaultStyle]: !(isOpen || isSelected)\n });\n\n return (\n <Button {...props} type=\"secondary\" className={cx(_className, className)}>\n <React.Fragment>\n {children}{\" \"}\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{\n transform: isOpen ? \"rotate(180deg)\" : \"none\"\n }}\n />\n </React.Fragment>\n </Button>\n );\n};\n\nexport default Button;\n","import { css } from \"emotion\";\nimport { constants, mixins, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const wrapperStyle = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n boxShadow: constants.boxShadow.xElevated,\n overflow: \"hidden\",\n padding: 20,\n position: \"relative\"\n});\n\nexport const tileStyle = css({\n ...typography.normal.regular,\n height: 48,\n width: 48,\n padding: 0,\n position: \"relative\",\n textAlign: \"center\",\n cursor: \"pointer\",\n outline: \"none\",\n backgroundColor: colors.gray.lightest,\n borderRadius: constants.borderRadius,\n display: \"table\",\n borderCollapse: \"collapse\",\n border: `1px solid ${colors.white.base}`,\n borderLeft: 0,\n borderTop: 0,\n time: {\n fontFamily: \"inherit\"\n },\n \"&.react-calendar__tile--now\": {\n color: colors.violet.base\n },\n \"&:hover\": {\n backgroundColor: colors.gray.lighter\n },\n \"&[disabled]\": {\n color: colors.gray.base,\n \"&:hover\": {\n backgroundColor: colors.gray.lightest,\n cursor: \"not-allowed\"\n }\n },\n \"&.react-calendar__tile--active\": {\n backgroundColor: colors.violet.lightest,\n color: colors.violet.base\n },\n \"&.react-calendar__tile--rangeStart\": {\n backgroundColor: colors.violet.base,\n color: `${colors.white.base} !important`\n },\n \"&.react-calendar__tile--rangeEnd\": {\n backgroundColor: colors.violet.base,\n color: `${colors.white.base} !important`\n },\n \"&.react-calendar__tile--singleSelect\": {\n backgroundColor: colors.violet.base,\n color: colors.white.base\n },\n \"&.react-calendar__month-view__days__day--neighboringMonth\": {\n color: colors.gray.base\n }\n});\n\nexport const dateStyle = css({\n width: 356,\n margin: 10,\n position: \"relative\",\n \".react-calendar__month-view__weekdays__weekday\": {\n color: colors.gray.dark,\n lineSpacing: \"7px\",\n fontSize: 12,\n textAlign: \"center\"\n },\n \".react-calendar__navigation__arrow\": {\n border: `1px solid ${colors.gray.light}`,\n padding: \"8px 10px\",\n borderRadius: constants.borderRadius,\n alignItems: \"center\",\n display: \"flex\",\n cursor: \"pointer\",\n outline: \"none\",\n height: 40,\n width: 40,\n backgroundColor: colors.white.base,\n \"&.react-calendar__navigation__prev-button\": {\n position: \"absolute\",\n right: 47\n },\n \"&:disabled\": {\n cursor: \"not-allowed\"\n }\n },\n \".react-calendar__navigation__label\": {\n ...typography.xl.bold,\n textAlign: \"left\",\n border: 0,\n outline: \"none\",\n cursor: \"pointer\",\n backgroundColor: colors.white.base,\n paddingLeft: 5\n },\n \".react-calendar__month-view \": {\n marginTop: 30\n },\n \".react-calendar__month-view__weekdays\": {\n marginBottom: 20\n },\n \".react-calendar__decade-view__years, .react-calendar__century-view, .react-calendar__year-view\": {\n marginTop: 15\n }\n});\n\nexport const dotWrapper = css({\n display: \"flex\",\n justifyContent: \"center\",\n position: \"absolute\",\n width: \"100%\"\n});\n\nexport const dotStyle = css({\n height: 4,\n width: 4,\n display: \"inline-block\",\n borderRadius: constants.borderRadius,\n margin: \"5px 2px 0\"\n});\n\nexport const buttonsWrapper = css({\n ...mixins.flexSpaceBetween,\n marginTop: 20\n});\n","import * as React from \"react\";\nimport { CalendarTileProperties } from \"react-calendar/dist/entry.nostyle\";\nimport RCalendar from \"react-calendar/dist/Calendar\";\nimport { css, cx } from \"emotion\";\nimport { CalendarProps, CalendarState } from \"./typings/Calendar\";\nimport {\n buttonsWrapper,\n dateStyle,\n dotStyle,\n dotWrapper,\n tileStyle,\n wrapperStyle\n} from \"./styles/Calendar.styles\";\nimport Button from \"./Button\";\nimport { isSameDay, endOfDay, startOfDay, addDays, subDays } from \"date-fns\";\n\nclass Calendar extends React.PureComponent<CalendarProps, CalendarState> {\n static defaultProps: Partial<CalendarProps> = {\n onChange: () => {},\n tileDots: []\n };\n\n state: Readonly<CalendarState> = {\n value: this.props.selected,\n singleSelectedDate: null\n };\n\n private onChange = (value: Date | Date[]) => {\n // tslint:disable-next-line no-this-assignment Doing this to reduce lookups on this, not avoiding to use fat arrow functions\n const { props } = this;\n // The following is exactly the same code.\n // But Typescript cannot merge into one.\n if (props.range) {\n if (Array.isArray(value) && value.length === 2) {\n this.setState(\n {\n value: value as [Date, Date],\n singleSelectedDate: null,\n maxRangeDates: undefined\n },\n () => props.onChange(value as [Date, Date])\n );\n }\n } else {\n if (!Array.isArray(value)) {\n this.setState(\n {\n value,\n singleSelectedDate: null,\n maxRangeDates: undefined\n },\n () => props.onChange(value)\n );\n }\n }\n };\n\n private onDayClick = (day: Date) => {\n const { onClickDay } = this.props;\n if (this.props.range && this.props.maxRange) {\n const { maxRange } = this.props;\n this.setState({\n maxRangeDates: {\n future: addDays(day, maxRange),\n past: subDays(day, maxRange)\n }\n });\n }\n this.setState({ singleSelectedDate: [startOfDay(day), endOfDay(day)] });\n if (onClickDay) onClickDay(day);\n };\n\n private getTileContent = ({ date }: CalendarTileProperties) => {\n const dot = this.props.tileDots.find(\n datum => !!datum.timeStamp && isSameDay(date, datum.timeStamp)\n );\n\n return dot ? (\n <div className={dotWrapper}>\n {dot.colors &&\n dot.colors.map((color, i) => (\n <span\n key={i}\n className={dotStyle}\n style={{ backgroundColor: color }}\n />\n ))}\n </div>\n ) : null;\n };\n\n private getDisabledDays = ({ date }: CalendarTileProperties) => {\n const { disabledDays } = this.props;\n return (\n (disabledDays &&\n disabledDays.length &&\n disabledDays.some(_date => isSameDay(_date, date))) ||\n false\n );\n };\n\n private onApply = () => {\n // tslint:disable-next-line no-this-assignment\n const { props } = this;\n const { value, singleSelectedDate } = this.state;\n if (props.range && props.onApply) {\n if (singleSelectedDate) {\n props.onApply(singleSelectedDate);\n } else if (Array.isArray(value)) {\n props.onApply(value);\n } else if (value === undefined) {\n props.onApply(value);\n }\n } else if (!props.range && props.onApply && !Array.isArray(value)) {\n props.onApply(value);\n }\n };\n\n private onClear = () => {\n const { onClear } = this.props;\n this.setState({\n value: undefined\n });\n if (onClear) {\n onClear();\n }\n };\n\n render() {\n const {\n range,\n selected,\n hideShadow,\n className,\n onApply,\n onClear,\n maxDate,\n minDate,\n ...rest\n } = this.props;\n const { maxRangeDates } = this.state;\n\n return (\n <div\n className={cx(\n wrapperStyle,\n {\n [css({ boxShadow: \"none\" })]: !!hideShadow\n },\n className\n )}\n >\n <RCalendar\n {...rest}\n onChange={this.onChange}\n selectRange={range}\n view=\"month\"\n value={selected}\n next2Label={null}\n prev2Label={null}\n tileClassName={tileStyle}\n className={dateStyle}\n showNeighboringMonth={false}\n tileContent={this.getTileContent}\n tileDisabled={this.getDisabledDays}\n onClickDay={this.onDayClick}\n prevLabel={\n <i style={{ fontSize: 14 }} className=\"pi pi-chevron-left\" />\n }\n nextLabel={\n <i style={{ fontSize: 14 }} className=\"pi pi-arrow-right\" />\n }\n maxDate={maxDate || (maxRangeDates && maxRangeDates.future)}\n minDate={minDate || (maxRangeDates && maxRangeDates.past)}\n />\n\n {(onClear || onApply) && (\n <div className={buttonsWrapper}>\n {onClear && (\n <Button onClick={this.onClear} type=\"secondary\">\n Clear\n </Button>\n )}\n {onApply && <Button onClick={this.onApply}>Apply</Button>}\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Calendar;\n","import { css } from \"emotion\";\nimport { typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const radioIconStyle = css({\n marginRight: 10,\n fontSize: 16,\n paddingTop: 2,\n height: 18\n});\n\nexport const controlStyle = css({\n cursor: \"pointer\",\n display: \"flex\",\n outline: \"none\",\n padding: \"10px 0\",\n position: \"relative\",\n alignItems: \"center\",\n ...typography.normal.regular,\n \"&[data-disabled='true']\": {\n cursor: \"not-allowed\",\n \".i\": {\n color: colors.gray.light\n }\n }\n});\n","import * as React from \"react\";\nimport { controlStyle, radioIconStyle } from \"../styles/Control.styles\";\nimport { ControlProps } from \"../typings/Control\";\nimport { cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nfunction Control<OptionType>(props: ControlProps<OptionType>) {\n const {\n checked,\n onChange,\n value,\n disabled,\n children = ControlView,\n type,\n className,\n indeterminate\n } = props;\n return (\n <div\n className={cx(controlStyle, className)}\n role={type}\n aria-disabled={disabled}\n aria-checked={checked}\n data-disabled={disabled}\n data-indeterminate={indeterminate}\n tabIndex={checked ? 0 : -1}\n onClick={\n !disabled\n ? (e: React.MouseEvent) =>\n onChange && onChange({ value, checked: !checked }, e)\n : undefined\n }\n >\n {children(props)}\n </div>\n );\n}\n\ninterface ControlViewProps {\n label: React.ReactNode;\n checked?: boolean;\n type: \"radio\" | \"checkbox\";\n disabled?: boolean;\n iconClassName?: string;\n indeterminate?: boolean;\n}\n\nexport const ControlView = ({\n checked,\n label,\n type,\n disabled,\n iconClassName,\n indeterminate\n}: ControlViewProps) => {\n const isRadio = type === \"radio\";\n\n const wrapClass = cx(radioIconStyle, iconClassName);\n const iconClass = cx(\"pi\", {\n \"pi-radio\": !!isRadio && !checked,\n \"pi-radio-selected\": !!isRadio && !!checked,\n \"pi-checkbox-selected\": !indeterminate && !isRadio && !!checked,\n \"pi-checkbox-unselected\": !indeterminate && !isRadio && !checked,\n \"pi-checkbox-indeterminate\": !!indeterminate && !isRadio\n });\n\n const getColor = () => {\n if (disabled) {\n return colors.gray.base;\n }\n if (checked) {\n return colors.violet.base;\n }\n return colors.gray.light;\n };\n\n return (\n <>\n <div className={wrapClass}>\n <i style={{ color: getColor() }} className={iconClass} />\n </div>{\" \"}\n {label}\n </>\n );\n};\n\nexport default Control;\n","export function getSelectedCheckboxes<OptionType>(\n changedValue: OptionType,\n prevSelected?: OptionType[]\n): OptionType[] {\n const _selected = prevSelected || [];\n const cloned = _selected.slice(0);\n const index = _selected.findIndex(datum => datum === changedValue);\n if (index >= 0) {\n cloned.splice(index, 1);\n } else {\n cloned.push(changedValue);\n }\n return cloned;\n}\n","import * as React from \"react\";\nimport { CheckboxGroupProps } from \"./typings/CheckboxGroup\";\nimport { CheckboxProps } from \"./typings/Checkbox\";\nimport { getSelectedCheckboxes } from \"./utils/getSelectedCheckboxes\";\n\nexport default class CheckboxGroup<OptionType> extends React.PureComponent<\n CheckboxGroupProps<OptionType>\n> {\n private handleChange = (\n { value }: { value: OptionType },\n event: React.MouseEvent\n ) => {\n const { onChange, selected } = this.props;\n onChange(getSelectedCheckboxes(value, selected), event);\n };\n\n render() {\n const { children, selected, className, name, disabled } = this.props;\n\n const _children = React.Children.map(children, _checkbox => {\n // `_checkbox as React.ReactElement<CheckboxProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const checkbox = _checkbox as React.ReactElement<\n CheckboxProps<OptionType>\n >;\n return React.cloneElement(checkbox, {\n onChange: this.handleChange,\n checked: selected.indexOf(checkbox.props.value) >= 0,\n disabled\n });\n });\n\n return (\n <div role=\"checkboxgroup\" aria-label={name} className={className}>\n {_children}\n </div>\n );\n }\n}\n","import { constants } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const wrapperStyle = css({\n position: \"relative\"\n});\n\nexport const dropDownStyle = css({\n minWidth: 100,\n boxShadow: constants.boxShadow.xElevated,\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n position: \"absolute\",\n top: \"100%\",\n zIndex: 999,\n transformOrigin: \"top left\"\n});\n","import * as React from \"react\";\nimport { OutsideClickProps } from \"./typings/OutsideClick\";\n\nclass OutsideClick extends React.PureComponent<OutsideClickProps> {\n childRef: React.RefObject<HTMLDivElement> = React.createRef();\n\n handleClick = (e: MouseEvent) => {\n if (\n this.childRef.current &&\n !this.childRef.current.contains(e.target as HTMLElement)\n ) {\n this.props.onOutsideClick();\n }\n };\n\n addListener = () => {\n document.addEventListener(\"mousedown\", this.handleClick);\n };\n\n removeListener = () => {\n document.removeEventListener(\"mousedown\", this.handleClick);\n };\n\n componentDidMount() {\n if (!this.props.disabled) {\n this.addListener();\n }\n }\n\n componentWillUnmount() {\n this.removeListener();\n }\n\n componentDidUpdate(prevProps: OutsideClickProps) {\n if (prevProps.disabled !== this.props.disabled) {\n this.props.disabled ? this.removeListener() : this.addListener();\n }\n }\n\n render() {\n const { className, children } = this.props;\n return (\n <div ref={this.childRef} className={className}>\n {children}\n </div>\n );\n }\n}\n\nexport default OutsideClick;\n","import * as React from \"react\";\nimport { DropdownProps, DropdownState } from \"./typings/Dropdown\";\nimport { DropDownButton } from \"./Button\";\nimport { dropDownStyle, wrapperStyle } from \"./styles/Dropdown.styles\";\nimport { cx } from \"emotion\";\nimport OutsideClick from \"./OutsideClick\";\nimport { animated } from \"react-spring\";\nimport MountTransition from \"./shared/MountTransition\";\nimport { Manager, Reference, Popper } from \"react-popper\";\nimport { colors } from \"pebble-shared\";\n\nclass DropDown extends React.PureComponent<DropdownProps, DropdownState> {\n state: DropdownState = {\n isOpen: !!this.props.initiallyOpen\n };\n\n static defaultProps: Partial<DropdownProps> = {\n closeOnOutsideClick: true,\n placement: \"bottom-start\",\n modifiers: {\n hide: {\n enabled: false\n },\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n }\n };\n\n private toggleDropdown = () => {\n this.setState({\n isOpen: !this.state.isOpen\n });\n };\n\n render() {\n const {\n buttonLabel,\n children,\n labelComponent,\n padding,\n className,\n dropDownClassName,\n isSelected,\n disabled,\n labelClassName,\n controlled,\n onOutsideClick\n } = this.props;\n\n const _isDropDownOpen = controlled\n ? !!this.props.isOpen\n : this.state.isOpen;\n\n return (\n <OutsideClick\n className={cx(wrapperStyle, className)}\n onOutsideClick={() => {\n this.setState({\n isOpen: false\n });\n if (onOutsideClick) onOutsideClick(_isDropDownOpen);\n }}\n disabled={!_isDropDownOpen}\n >\n <Manager>\n <Reference>\n {({ ref }) => (\n <div style={{ display: \"inline-block\", width: \"100%\" }} ref={ref}>\n {labelComponent ? (\n labelComponent({\n isOpen: _isDropDownOpen,\n toggleDropdown: this.toggleDropdown\n })\n ) : (\n <DropDownButton\n isSelected={!!isSelected}\n isOpen={_isDropDownOpen}\n onClick={this.toggleDropdown}\n disabled={disabled}\n className={labelClassName}\n >\n {buttonLabel}\n </DropDownButton>\n )}\n </div>\n )}\n </Reference>\n\n {/* TODO: Add native flag. */}\n <MountTransition visible={_isDropDownOpen}>\n {transitionStyles => (\n <animated.div\n className={cx(dropDownStyle, dropDownClassName)}\n style={{ padding, ...transitionStyles }}\n >\n <Popper {...this.props} positionFixed>\n {({ ref, style, placement, arrowProps }) => {\n const popperWrapperStyle = {\n ...style,\n ...transitionStyles,\n backgroundColor: colors.white.base,\n transform: transitionStyles.transform.to(\n t => `${style.transform || \"\"} ${t || \"\"}`\n ),\n transformOrigin: `${arrowProps.style.left || 0}px ${\n arrowProps.style.top || 0\n }px`,\n padding\n };\n\n return (\n <animated.div\n className={cx(dropDownStyle, dropDownClassName)}\n ref={ref}\n style={popperWrapperStyle}\n data-placement={placement}\n >\n {children({\n toggle: this.toggleDropdown,\n isOpen: _isDropDownOpen\n })}\n </animated.div>\n );\n }}\n </Popper>\n </animated.div>\n )}\n </MountTransition>\n </Manager>\n </OutsideClick>\n );\n }\n}\n\nexport default DropDown;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n// import { isDesktop } from \"../../utils\";\n\nconst animation = \"all 0.3s cubic-bezier(.64,.09,.08,1)\";\n\nexport const inputMarginBottom = 20;\n\nexport const wrapperStyle = css({\n position: \"relative\",\n display: \"flex\",\n backgroundColor: colors.white.base,\n width: \"100%\",\n flexDirection: \"column\",\n marginBottom: inputMarginBottom,\n height: 68,\n \"&._pebble_input_wrapper_textarea\": {\n height: 110\n }\n});\n\nexport const inputWrapperStyle = css({\n display: \"flex\",\n alignItems: \"baseline\",\n borderBottom: `1px solid ${colors.gray.lighter}`\n});\n\nexport const inputStyle = css({\n outline: 0,\n border: 0,\n padding: \"24px 0 12px 0\",\n height: 48,\n borderRadius: 0,\n ...typography.normal.regular,\n width: \"100%\",\n ...mixins.textEllipsis,\n \"&:disabled\": {\n backgroundColor: colors.white.base\n },\n .../*#__PURE__*/ mixins.getPlaceholderStyle(colors.gray.light)\n // \"&[type='date']\": {\n // \"-webkit-appearance\": \"textfield\"\n // },\n // \"&[type='date']::-webkit-inner-spin-button, &[type='date']::-webkit-calendar-picker-indicator\": {\n // webkitAppearance: \"none\",\n // display: \"none\"\n // }\n});\n\nexport const inputReadOnlyStyle = css({\n color: colors.gray.dark\n});\n\nexport const inputDisabledStyle = css({\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: colors.gray.base\n});\n\nexport const inputTextAreaStyle = css({\n height: 88,\n padding: \"0 0 52px 0\",\n marginTop: 22,\n resize: \"none\"\n});\n\nexport const highlightStyle = css({\n height: 2,\n backgroundColor: colors.violet.base,\n marginTop: -2,\n position: \"relative\",\n width: 0,\n transition: animation,\n zIndex: 9,\n \"&._pebble_input_highlight_state, &._pebble_input_highlight_focused\": {\n width: \"100%\"\n }\n});\n\nexport const labelStyle = css({\n color: colors.gray.base,\n fontSize: 14,\n lineHeight: \"12px\",\n position: \"absolute\",\n transition: animation,\n transform: \"translate(0, 24px)\",\n pointerEvents: \"none\",\n \"&._pebble_input_label_focused\": {\n fontSize: 12,\n lineHeight: \"10px\",\n transform: \"translate(0, 0)\",\n color: colors.gray.dark\n }\n});\n\nexport const messageStyle = css({\n ...typography.s.regular,\n marginTop: 9,\n lineHeight: \"10px\",\n textAlign: \"left\"\n});\n\nexport const loadingStyle = css({\n position: \"relative\",\n top: 4\n});\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\nimport { inputMarginBottom } from \"./Input.styles\";\n\nexport const dateClass = css({\n padding: 20,\n width: \"100%\"\n});\n\nexport const dropDownClassName = css({\n marginTop: -inputMarginBottom\n});\n\nexport const inputStyle = css({\n marginBottom: 0\n});\n\nexport const wrapperStyle = css({\n marginBottom: 20\n});\n\nexport const errorStyle = css({\n ...typography.s.bold,\n backgroundColor: colors.red.lightest,\n color: colors.red.darker,\n textAlign: \"left\",\n padding: \"11px 30px\"\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { InputProps, InputState } from \"./typings/Input\";\nimport {\n highlightStyle,\n labelStyle,\n wrapperStyle,\n messageStyle,\n inputWrapperStyle,\n inputStyle,\n inputReadOnlyStyle,\n inputDisabledStyle,\n inputTextAreaStyle,\n loadingStyle\n} from \"./styles/Input.styles\";\nimport { colors } from \"pebble-shared\";\nimport Loader from \"./Loader\";\n\nfunction getColor(\n error: string | undefined,\n success: string | undefined,\n isUnderlineColor?: boolean\n) {\n let color = colors.gray.dark;\n if (error) {\n color = colors.red.base;\n } else if (success) {\n color = colors.emerald.base;\n } else if (isUnderlineColor) {\n color = colors.violet.base;\n }\n\n return color;\n}\n\nclass Input extends React.PureComponent<InputProps, InputState> {\n readonly state: InputState = {\n isFocused: false\n };\n\n static defaultProps = {\n value: \"\",\n readOnly: false\n };\n\n private addFocus = () => {\n this.setState({\n isFocused: true\n });\n };\n\n private removeFocus = () => {\n this.setState({\n isFocused: false\n });\n };\n\n private handleChange = (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.ChangeEvent<HTMLTextAreaElement>\n ) => {\n this.props.onChange(e.target.value || \"\");\n };\n\n render() {\n const {\n type,\n placeholder,\n className,\n inputWrapperClassName,\n inputClassName,\n highlightClassName,\n loadingClassName,\n fixLabelAtTop,\n value,\n readOnly,\n disabled,\n errorMessage,\n successMessage,\n message,\n textArea,\n required,\n onClick,\n loading,\n leftElement,\n rightElement\n } = this.props;\n const { isFocused } = this.state;\n\n const _message = errorMessage || successMessage || message;\n\n const _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);\n\n const _inputClassName = cx(\n inputStyle,\n {\n [inputDisabledStyle]: !!disabled,\n [inputReadOnlyStyle]: !!readOnly,\n [inputTextAreaStyle]: !!textArea\n },\n inputClassName\n );\n\n const _inputProps = {\n \"aria-label\": placeholder ? placeholder : undefined,\n className: _inputClassName,\n disabled,\n onChange: this.handleChange,\n readOnly,\n value: value || \"\"\n };\n\n const _highlightClassName = cx(\n highlightStyle,\n {\n _pebble_input_highlight_focused: !!isFocused,\n _pebble_input_highlight_state: !!errorMessage || !!successMessage,\n _pebble_input_highlight_read_only: !!readOnly,\n _pebble_input_highlight_disabled: !!disabled\n },\n highlightClassName\n );\n\n const labelClassName = cx(labelStyle, {\n _pebble_input_label_focused: !!(\n isFocused ||\n value ||\n fixLabelAtTop ||\n leftElement\n )\n });\n\n const _wrapperStyle = cx(\n wrapperStyle,\n {\n _pebble_input_wrapper_textarea: !!textArea\n },\n className\n );\n\n const _loadingStyle = cx(loadingStyle, loadingClassName);\n\n return (\n <div\n className={_wrapperStyle}\n onFocus={this.addFocus}\n onBlur={this.removeFocus}\n onClick={onClick}\n >\n <div className={_inputWrapperClassName}>\n {leftElement?.()}\n\n {this.props.textArea ? (\n <textarea {..._inputProps} {...this.props.inputProps} />\n ) : (\n <input type={type} {..._inputProps} {...this.props.inputProps} />\n )}\n\n {loading && (\n <Loader\n color={colors.violet.base}\n scale={0.6}\n className={_loadingStyle}\n />\n )}\n\n {rightElement?.()}\n </div>\n\n {!!placeholder && (\n <label className={labelClassName}>\n {placeholder}\n {required && (\n <span style={{ color: colors.red.base }}>&nbsp;*</span>\n )}\n </label>\n )}\n\n <div\n className={_highlightClassName}\n style={{\n backgroundColor: getColor(errorMessage, successMessage, true)\n }}\n />\n\n {_message && (\n <div\n className={messageStyle}\n style={{ color: getColor(errorMessage, successMessage) }}\n >\n {_message}\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Input;\n","import * as React from \"react\";\nimport { format, parseISO } from \"date-fns\";\nimport { DateInputProps } from \"./typings/DateInput\";\nimport Input from \"./Input\";\n\nexport default class NativeDateInput extends React.PureComponent<\n DateInputProps\n> {\n private onDateInputChange = (value: string) => {\n const date = parseISO(value);\n this.props.onChange(date && date.getTime());\n };\n\n render() {\n const { inputProps, placeholder, value, disabled } = this.props;\n\n return (\n <Input\n onChange={this.onDateInputChange}\n type=\"date\"\n // This format does not define the presentation format.\n // value will always be in YYYY-MM-DD format.\n // https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome\n value={value && format(value, \"yyyy-MM-dd\")}\n placeholder={placeholder}\n fixLabelAtTop\n {...inputProps}\n disabled={disabled}\n />\n );\n }\n}\n","import * as React from \"react\";\n\ninterface UserAgentInfoProviderProps {\n userAgent: string;\n}\n\n// This is an object because more attributes might get added.\n// Don't change to string.\nexport interface UserAgentInfo {\n // Add more attributes of the userAgent as neccessary.\n // Eg. isMobile, isDesktop, isBot etc.\n userAgent: string;\n}\n\nconst defaultContext: UserAgentInfo = {\n userAgent: \"\"\n};\n\nexport const UserAgentInfoContext = /*@__PURE__*/ React.createContext<\n UserAgentInfo\n>(defaultContext);\n\nfunction computeUserAgentInfo(userAgent: string): UserAgentInfo {\n return {\n userAgent\n };\n}\n\nexport class UserAgentInfoProvider extends React.PureComponent<\n UserAgentInfoProviderProps,\n UserAgentInfo\n> {\n // State is used to avoid creating new objects in render.\n // Can memoize computeUserAgentInfo but then might consume\n // a lot of memory on server.\n constructor(props: UserAgentInfoProviderProps) {\n super(props);\n if (typeof navigator !== \"undefined\" && navigator.userAgent) {\n this.state = computeUserAgentInfo(navigator.userAgent);\n } else if (props.userAgent) {\n this.state = computeUserAgentInfo(props.userAgent);\n } else {\n this.state = defaultContext;\n }\n }\n render() {\n return (\n <UserAgentInfoContext.Provider value={this.state}>\n {this.props.children}\n </UserAgentInfoContext.Provider>\n );\n }\n}\n","import * as React from \"react\";\nimport { DateInputProps, DateInputState } from \"./typings/DateInput\";\nimport DropDown from \"./DropDown\";\nimport {\n dateClass,\n dropDownClassName,\n inputStyle,\n wrapperStyle,\n errorStyle\n} from \"./styles/Date.styles\";\nimport Calendar from \"./Calendar\";\nimport Input from \"./Input\";\nimport { Rifm } from \"rifm\";\nimport { startOfDay, format } from \"date-fns\";\nimport NativeDateInput from \"./NativeDateInput\";\nimport { UserAgentInfoContext } from \"../utils/useragent\";\nimport { cx } from \"emotion\";\n\nconst noop = () => {};\n\nfunction dateFormat(str: string) {\n const clean = str.replace(/[^\\d]+/gi, \"\");\n const chars = clean.split(\"\");\n return chars.reduce(\n (r, v, index) =>\n `${r}${v}${index === 1 || index === 3 ? \"/\" : \"\"}`.substr(0, 10),\n \"\"\n );\n}\n\nconst modifiers = {\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n};\n\nexport default class DateInput extends React.PureComponent<\n DateInputProps & typeof DateInput.defaultProps,\n DateInputState\n> {\n static defaultProps = {\n placement: \"bottom-start\"\n };\n state: Readonly<DateInputState> = {\n stringInput: \"\"\n };\n\n static getDerivedStateFromProps(\n props: DateInputProps,\n state: DateInputState\n ): Partial<DateInputState> | null {\n let newState: Partial<DateInputState> | null = null;\n if (props.value !== state.propsValue) {\n newState = {\n propsValue: props.value,\n stringInput: props.value ? format(props.value, \"dd/MM/yyyy\") : \"\"\n };\n }\n return newState;\n }\n\n private onCalendarDateChange = (date: Date) => {\n this.props.onChange(date.getTime());\n };\n\n private onInputChange = (input: string) => {\n this.setState({ stringInput: input });\n // TODO: Modify when close to year 9999\n if (input.length === 10) {\n // RIFM will ensure the length of the input.\n const date = startOfDay(new Date());\n date.setFullYear(\n parseInt(input.substr(6, 4), 10),\n parseInt(input.substr(3, 5), 10) - 1,\n parseInt(input.substr(0, 2), 10)\n );\n this.props.onChange(date.getTime());\n }\n };\n\n render() {\n const {\n calendarProps,\n inputProps,\n placeholder,\n value: propsValue,\n disabled,\n errorMessage,\n placement,\n wrapperClassName,\n initiallyOpen,\n onOutsideClick,\n controlled,\n isOpen\n } = this.props;\n\n const _wrapperClassName = cx(wrapperStyle, wrapperClassName);\n\n const _dropDownClassName = cx(\n dropDownClassName,\n this.props.dropDownClassName\n );\n return (\n <DropDown\n dropDownClassName={_dropDownClassName}\n labelComponent={({ toggleDropdown }) => (\n <Rifm\n value={this.state.stringInput}\n onChange={this.onInputChange}\n format={dateFormat}\n >\n {({ value, onChange }) => (\n <Input\n onChange={noop}\n type={\"tel\"}\n value={value}\n placeholder={placeholder}\n onClick={() => {\n if (disabled || controlled) return;\n toggleDropdown();\n }}\n fixLabelAtTop\n {...inputProps}\n inputProps={{\n placeholder: \"DD/MM/YYYY\",\n ...(inputProps && inputProps.inputProps),\n onChange\n }}\n className={cx(inputStyle, inputProps && inputProps.className)}\n disabled={disabled}\n />\n )}\n </Rifm>\n )}\n className={_wrapperClassName}\n placement={placement}\n modifiers={modifiers}\n initiallyOpen={initiallyOpen}\n onOutsideClick={onOutsideClick}\n controlled={controlled}\n isOpen={isOpen}\n >\n {({ toggle }) => (\n <>\n <Calendar\n hideShadow\n className={dateClass}\n selected={propsValue ? new Date(propsValue) : undefined}\n {...calendarProps}\n range={false}\n onChange={date => {\n this.onCalendarDateChange(date);\n if (controlled) {\n return;\n }\n toggle();\n }}\n />\n {errorMessage && <div className={errorStyle}>{errorMessage}</div>}\n </>\n )}\n </DropDown>\n );\n }\n}\n\nfunction checkDateInputSupport(): boolean {\n try {\n const input = document.createElement(\"input\");\n const type = \"date\";\n input.setAttribute(\"type\", \"date\");\n input.value = \"\\x01\";\n return (\n input.type === type && (input.value !== \"\\x01\" || !input.checkValidity())\n );\n } catch (e) {\n return true;\n }\n}\n\nconst hasDateInputSupport = /*@__PURE__*/ checkDateInputSupport();\n\n// tslint:disable-next-line max-classes-per-file\nexport class BrowserBasedDateInput extends React.PureComponent<DateInputProps> {\n static contextType = UserAgentInfoContext;\n render() {\n return (\n <UserAgentInfoContext.Consumer>\n {({ userAgent }: { userAgent: string }) => {\n if (/Android|iPhone|iPad/i.test(userAgent) && hasDateInputSupport) {\n return <NativeDateInput {...this.props} />;\n }\n return <DateInput {...this.props} />;\n }}\n </UserAgentInfoContext.Consumer>\n );\n }\n}\n","import * as React from \"react\";\nimport { LogoProps } from \"./typings/Logo\";\n\nconst Logo: React.FunctionComponent<LogoProps> = ({\n height = 40,\n color = \"#000000\"\n}) => {\n return (\n <svg\n version=\"1.1\"\n id=\"Layer_1\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n height={height}\n viewBox=\"0 0 655.35 175.08\"\n xmlSpace=\"preserve\"\n style={{ fill: color }}\n >\n <path\n className=\"st0\"\n d=\"M168.92 65.96l-66.1-64.85v100.61h17.39V40.78l66.11 64.56V4.73h-17.4v61.23zm446.77-18.51L653.4 4.73h-20.6l-41.04 46.48V4.73h-17.4v96.99h17.4V73.34L604 59.84l30.19 41.88h20.33l-38.83-54.27zM422.66 2.92c-27.78 0-50.31 22.53-50.31 50.31s22.52 50.3 50.31 50.3c27.78 0 50.3-22.52 50.3-50.3s-22.52-50.31-50.3-50.31zm0 84.84c-19.05 0-34.54-15.49-34.54-34.53s15.49-34.54 34.54-34.54c19.04 0 34.54 15.49 34.54 34.54 0 19.04-15.5 34.53-34.54 34.53zM0 101.72h18.38L27 82.93h41.75l8.63 18.79h18.51L48.02 0 0 101.72zM33.55 67.9l14.32-31.58L62.21 67.9H33.55zm159.61 33.82h18.37l8.62-18.79h41.75l8.62 18.79h18.51L241.16 0l-48 101.72zm33.53-33.82l14.33-31.58 14.33 31.58h-28.66zm138.43-32.42c0-8.76-3.07-16-9.19-21.84-6.12-5.99-13.5-8.91-22.26-8.91h-37.71v96.99h17.4V67.21h17.25l20.73 34.51h19.62l-23.51-38.68c10.57-4.46 17.67-14.89 17.67-27.56zm-33.25 16.15h-18.51V20.46h19.9c8.34 0 14.6 6.4 14.6 15.31 0 9.32-6.54 15.86-15.99 15.86zm197.61-32.94c9.22 0 17.9 3.59 24.42 10.12l11.15-11.15c-9.82-9.83-22.7-14.74-35.57-14.74-12.87 0-25.75 4.91-35.56 14.74-19.65 19.64-19.65 51.49 0 71.14 9.82 9.82 22.69 14.73 35.56 14.73 12.87 0 25.75-4.91 35.57-14.73L553.9 77.65c-6.52 6.52-15.2 10.11-24.42 10.11-9.23 0-17.89-3.59-24.42-10.11-13.46-13.46-13.46-35.37 0-48.84 6.53-6.52 15.2-10.12 24.42-10.12z\"\n />\n <rect\n y=\"123.84\"\n className=\"st1\"\n width=\"654.52\"\n height=\"4.26\"\n id=\"XMLID_9_\"\n />\n <path\n className=\"st0\"\n d=\"M90.05 150.11h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm39.59-.17h5.03l10.63 24.97h-5.7l-2.28-5.56h-10.47l-2.27 5.56h-5.56l10.62-24.97zm5.75 14.59l-3.3-8.04-3.29 8.04h6.59zM154 150.11h5.46v19.83h12.36v4.96H154v-24.79zm36.79 25.18c-3.33 0-5.95-.92-7.86-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.46 3.56 1.41 4.58.94 1.03 2.26 1.54 3.93 1.54 1.68 0 2.98-.49 3.93-1.49.95-.99 1.42-2.48 1.42-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.77 4.92-.51 1.39-1.23 2.55-2.17 3.49-.95.93-2.08 1.63-3.44 2.08-1.35.47-2.85.7-4.5.7zm21.83-25.18h18.66v4.85H218v5.03h11.7v4.85H218v5.2h13.46v4.86h-18.84v-24.79zm37.74 25.15c-1.89 0-3.75-.33-5.57-.98-1.82-.65-3.47-1.64-4.94-2.99l3.21-3.86c1.14.92 2.3 1.65 3.49 2.19 1.2.54 2.51.82 3.91.82 1.13 0 2.01-.21 2.64-.62.63-.41.94-.99.94-1.72v-.07c0-.36-.07-.67-.19-.94-.14-.27-.39-.53-.75-.77-.36-.23-.87-.47-1.52-.71s-1.49-.48-2.53-.74c-1.26-.31-2.38-.64-3.4-1.03-1.01-.38-1.88-.84-2.59-1.4a5.85 5.85 0 0 1-1.65-2.07c-.38-.82-.58-1.86-.58-3.08v-.07c0-1.13.21-2.16.63-3.07.42-.91 1.01-1.7 1.78-2.35.76-.66 1.67-1.17 2.73-1.52 1.06-.35 2.23-.54 3.5-.54 1.83 0 3.5.28 5.02.82 1.52.54 2.92 1.32 4.19 2.34l-2.83 4.11c-1.1-.76-2.2-1.35-3.26-1.79-1.06-.44-2.12-.66-3.19-.66-1.06 0-1.85.21-2.38.62-.53.41-.8.93-.8 1.54v.07c0 .4.08.75.23 1.04.15.29.43.56.84.79.39.24.94.46 1.64.67.7.21 1.57.47 2.63.75 1.26.33 2.37.7 3.35 1.11.98.41 1.81.91 2.48 1.49.68.58 1.18 1.25 1.52 2.04.34.78.52 1.71.52 2.8v.07c0 1.22-.23 2.32-.67 3.27a6.71 6.71 0 0 1-1.86 2.41c-.81.65-1.76 1.14-2.87 1.48-1.11.37-2.33.55-3.67.55zm46.42.07c-1.92 0-3.68-.34-5.28-1.01-1.61-.67-3-1.58-4.16-2.72-1.17-1.15-2.08-2.5-2.73-4.04-.65-1.55-.98-3.2-.98-4.98v-.07c0-1.77.32-3.42.99-4.97a12.64 12.64 0 0 1 2.74-4.07c1.16-1.17 2.57-2.09 4.18-2.77 1.62-.67 3.39-1.01 5.3-1.01 1.91 0 3.67.34 5.28 1.01 1.61.68 2.99 1.59 4.16 2.73 1.16 1.14 2.07 2.49 2.73 4.04.64 1.54.97 3.21.97 4.98v.07c0 1.77-.33 3.43-.99 4.98-.67 1.55-1.57 2.9-2.74 4.07-1.17 1.17-2.56 2.08-4.18 2.76-1.61.66-3.37 1-5.29 1zm.08-5.03c1.08 0 2.09-.2 3.01-.6.92-.4 1.71-.95 2.35-1.66.65-.71 1.16-1.53 1.53-2.47.36-.93.54-1.93.54-2.99v-.07c0-1.06-.18-2.06-.54-3.01-.36-.94-.89-1.77-1.56-2.47a7.49 7.49 0 0 0-2.39-1.68c-.91-.41-1.93-.62-3.01-.62-1.11 0-2.12.21-3.03.6-.91.4-1.69.96-2.34 1.66a7.76 7.76 0 0 0-1.52 2.46c-.37.94-.55 1.94-.55 3v.07c0 1.06.18 2.07.55 3.02.36.94.88 1.76 1.55 2.47.67.71 1.47 1.27 2.38 1.68.91.4 1.91.61 3.03.61zm19.48-20.19h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm33.54 0h18.66v4.85h-13.28v5.03h11.68v4.85h-11.68v5.2h13.46v4.86h-18.84v-24.79zm29.16 0h11.34c3.13 0 5.54.83 7.22 2.51 1.42 1.42 2.12 3.31 2.12 5.67v.07c0 2.01-.49 3.65-1.47 4.91-.98 1.26-2.26 2.19-3.84 2.77l6.05 8.86h-6.37l-5.31-7.94h-4.3v7.94h-5.45v-24.79zm10.98 12.04c1.35 0 2.39-.32 3.1-.95.72-.64 1.08-1.48 1.08-2.54v-.07c0-1.17-.37-2.06-1.13-2.64-.75-.59-1.8-.88-3.15-.88h-5.42v7.08h5.52zm33.05-12.04h6.02l6.48 17.46 6.48-17.46h5.87l-10.02 24.97h-4.81l-10.02-24.97zm39.59-.17h5.02l10.63 24.97h-5.7l-2.26-5.56h-10.48l-2.27 5.56h-5.56l10.62-24.97zm5.73 14.59l-3.29-8.04-3.29 8.04h6.58zm18.62-14.42h5.46v19.83h12.36v4.96h-17.82v-24.79zm36.8 25.18c-3.34 0-5.95-.92-7.87-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.47 3.56 1.42 4.58.95 1.03 2.26 1.54 3.93 1.54 1.67 0 2.99-.49 3.94-1.49.94-.99 1.41-2.48 1.41-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.76 4.92-.51 1.39-1.24 2.55-2.18 3.49-.95.93-2.09 1.63-3.44 2.08-1.36.47-2.85.7-4.5.7zm21.82-25.18h18.67v4.85h-13.28v5.03h11.69v4.85h-11.69v5.2h13.46v4.86h-18.85v-24.79z\"\n />\n </svg>\n );\n};\n\nexport default Logo;\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const toastWrapper = css({\n position: \"fixed\",\n borderRadius: constants.borderRadius,\n ...typography.normal.regular,\n color: colors.white.base,\n display: \"flex\",\n alignItems: \"center\",\n padding: \"15px 20px\",\n zIndex: 99999,\n\n \"> i\": {\n marginRight: 10\n }\n});\n","import * as React from \"react\";\nimport { toastWrapper } from \"./styles/Toast.styles\";\nimport { colors } from \"pebble-shared\";\nimport {\n ToastProps,\n ToastState,\n ToastType,\n ToastPosition\n} from \"./typings/Toast\";\nimport { Transition, animated } from \"react-spring\";\nimport { cx } from \"emotion\";\nimport mitt from \"mitt\";\nimport { animationConfig } from \"../utils/animation\";\n\nconst emitter = /*#__PURE__*/ mitt();\n\nexport const _colors = {\n success: colors.emerald.base,\n error: colors.red.base\n};\n\nconst toastTransitionsLeft = {\n from: { transform: \"translateX(-10px)\" },\n enter: { transform: \"translateX(0)\" },\n leave: { transform: \"translateX(-10px)\" }\n};\n\nconst toastTransitionsRight = {\n from: { transform: \"translateX(10px)\" },\n enter: { transform: \"translateX(0)\" },\n leave: { transform: \"translateX(10px)\" }\n};\n\nconst customStyles = {\n TOP: {\n style: {\n top: 20,\n left: \"50%\"\n },\n\n transitions: {\n from: { transform: \"translateX(-50%) translateY(-10px)\" },\n enter: { transform: \"translateX(-50%) translateY(0)\" },\n leave: { transform: \"translateX(-50%) translateY(-10px)\" }\n }\n },\n\n TOP_LEFT: {\n style: {\n top: 20,\n left: 20\n },\n\n transitions: toastTransitionsLeft\n },\n\n TOP_RIGHT: {\n style: {\n top: 20,\n right: 20\n },\n\n transitions: toastTransitionsRight\n },\n\n BOTTOM: {\n style: {\n bottom: 20,\n left: \"50%\"\n },\n\n transitions: {\n from: { transform: \"translateX(-50%) translateY(10px)\" },\n enter: { transform: \"translateX(-50%) translateY(0)\" },\n leave: { transform: \"translateX(-50%) translateY(10px)\" }\n }\n },\n\n BOTTOM_LEFT: {\n style: {\n bottom: 20,\n left: 20\n },\n\n transitions: toastTransitionsLeft\n },\n\n BOTTOM_RIGHT: {\n style: {\n bottom: 20,\n right: 20\n },\n\n transitions: toastTransitionsRight\n }\n};\n\ntype EventType = Partial<ToastState> & {\n text: string;\n time?: number;\n position: ToastPosition;\n};\n\nclass Toast extends React.PureComponent<ToastProps, ToastState> {\n static show(\n text: string,\n type: ToastType,\n { time, position }: { time?: number; position?: ToastPosition } = {}\n ) {\n emitter.emit(\"showToast\", { text, type, time, position });\n }\n\n showTimer?: number | null;\n\n static hide() {\n emitter.emit(\"hideToast\");\n }\n\n state: ToastState = {\n text: \"\",\n type: \"success\",\n show: false,\n position: \"BOTTOM\"\n };\n\n componentDidMount() {\n emitter.on<EventType>(\"showToast\", this.show);\n emitter.on<EventType>(\"hideToast\", this.hide);\n }\n\n componentWillUnmount() {\n emitter.off<EventType>(\"showToast\", this.show);\n emitter.off(\"hideToast\", this.hide);\n }\n\n private show = ({ text, type = \"success\", position, time }: EventType) => {\n this.setState({\n text,\n type,\n position,\n show: true\n });\n\n if (this.showTimer) {\n clearTimeout(this.showTimer);\n this.showTimer = null;\n }\n\n this.showTimer = window.setTimeout(\n () =>\n this.setState({\n show: false\n }),\n time ? time : this.props.defaultTime || 5000\n );\n };\n\n private hide = () => this.setState({ show: false });\n\n render() {\n const bColor = _colors[this.state.type];\n\n const iconClass = cx(\"pi\", {\n \"pi-radio-check-filled\": this.state.type === \"success\",\n \"pi-close-circle-filled\": this.state.type === \"error\"\n });\n\n const position =\n this.state.position || this.props.defaultPosition || \"BOTTOM\";\n\n return (\n <Transition\n native\n items={this.state.show}\n key={position}\n from={{\n opacity: 0,\n ...customStyles[position].transitions.from\n }}\n enter={{\n opacity: 1,\n ...customStyles[position].transitions.enter\n }}\n leave={{\n opacity: 0,\n pointerEvents: \"none\",\n ...customStyles[position].transitions.leave\n }}\n config={animationConfig.config}\n >\n {(styles, show) =>\n show && (\n <animated.div\n className={cx(toastWrapper, this.props.className)}\n style={{\n backgroundColor: bColor,\n ...(styles as React.CSSProperties),\n ...customStyles[position].style\n }}\n >\n <i className={iconClass} />\n {this.state.text}\n </animated.div>\n )\n }\n </Transition>\n );\n }\n}\n\nexport default Toast;\n","import { css } from \"emotion\";\nimport { constants, typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const messageWrapper = css({\n borderRadius: constants.borderRadius,\n ...typography.normal.regular,\n color: colors.white.base,\n height: 46,\n display: \"flex\",\n alignItems: \"center\",\n padding: 20,\n\n \"> i\": {\n marginRight: 10\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { _colors } from \"./Toast\";\nimport { messageWrapper } from \"./styles/Message.styles\";\nimport { AlertProps } from \"./typings/Message\";\n\nconst Message: React.FunctionComponent<AlertProps> = ({\n intent,\n className,\n text\n}) => {\n const bColor = _colors[intent];\n\n const iconClass = cx(\"pi\", {\n \"pi-radio-check-filled\": intent === \"success\",\n \"pi-close-circle-filled\": intent === \"error\"\n });\n\n return (\n <div\n className={cx(messageWrapper, className)}\n style={{\n backgroundColor: bColor\n }}\n >\n <i className={iconClass} />\n {text}\n </div>\n );\n};\n\nexport default Message;\n","import * as React from \"react\";\nimport { ModalProps } from \"./typings/Modal\";\nimport { modalContainer } from \"./styles/Modal.styles\";\nimport { cx } from \"emotion\";\nimport isBrowser from \"is-in-browser\";\nimport * as ReactDOM from \"react-dom\";\nimport MountTransition from \"./shared/MountTransition\";\nimport { animated } from \"react-spring\";\n\nclass Modal extends React.PureComponent<ModalProps> {\n private node = isBrowser ? document.createElement(\"div\") : null;\n\n componentDidMount() {\n if (this.node) {\n document.body.appendChild(this.node);\n }\n }\n\n componentWillUnmount() {\n if (this.node) {\n document.body.removeChild(this.node);\n }\n }\n\n componentDidUpdate(prevProps: ModalProps) {\n if (prevProps.visible === this.props.visible) return;\n\n if (this.props.visible) {\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n } else {\n document.getElementsByTagName(\"body\")[0].style.overflow = \"\";\n }\n }\n\n render(): React.ReactNode {\n if (!isBrowser) return null;\n\n const { children, visible, backDropClassName, modalClassName } = this.props;\n const node = this.node;\n\n return ReactDOM.createPortal(\n // tslint:disable-next-line:jsx-wrap-multiline\n <MountTransition visible={visible}>\n {transitionStyles => (\n <animated.div\n style={{\n opacity: transitionStyles.opacity\n }}\n className={cx(modalContainer, backDropClassName)}\n >\n <animated.div\n style={{\n transform: transitionStyles.transform\n }}\n className={modalClassName}\n >\n {children}\n </animated.div>\n </animated.div>\n )}\n </MountTransition>,\n node as NonNullable<typeof node>\n );\n }\n}\n\nexport default Modal;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const rowWrapper = css({\n ...typography.normal.regular,\n cursor: \"pointer\",\n padding: \"12px 18px\",\n position: \"relative\",\n lineHeight: \"28px\",\n zIndex: 999,\n ...mixins.textEllipsis,\n alignItems: \"center\",\n display: \"flex\",\n \"&:last-of-type\": {\n border: 0\n },\n \"&:hover\": {\n backgroundColor: colors.gray.lightest\n }\n});\n\nexport const labelWrap = css({\n userSelect: \"none\",\n flexGrow: 1,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\"\n});\n\nexport const activeRow = css({\n backgroundColor: colors.gray.lightest\n});\n\nexport const selectedRow = css({\n color: colors.violet.base,\n ...typography.normal.bold\n});\n\nexport const advancedActionsWrapper = css({\n display: \"flex\",\n justifyContent: \"space-around\",\n fontSize: \"12px\",\n color: colors.gray.dark\n});\n","import * as React from \"react\";\nimport { OptionProps } from \"./typings/Option\";\nimport Control from \"./shared/Control\";\nimport { cx, css } from \"emotion\";\nimport {\n activeRow,\n rowWrapper,\n selectedRow,\n labelWrap\n} from \"./styles/Options.styles\";\nimport Ink from \"react-ink\";\nimport { colors } from \"pebble-shared\";\n\nconst defaultProps = {\n rightElement: <T extends unknown>({\n isSelected,\n multiSelect,\n indeterminate,\n iconClassName\n }: OptionProps<T>) => {\n const iconClass = cx(\n \"pi\",\n {\n \"pi-checkbox-selected\": !indeterminate && isSelected,\n \"pi-checkbox-unselected\": !indeterminate && !isSelected,\n \"pi-checkbox-indeterminate\": !!indeterminate\n },\n css({\n marginLeft: \"10px\",\n color:\n indeterminate || isSelected ? colors.violet.base : colors.gray.light,\n fontSize: \"20px\"\n })\n );\n return multiSelect ? <i className={cx(iconClass, iconClassName)} /> : null;\n }\n};\n\nclass Option<OptionType> extends React.Component<\n OptionProps<OptionType> & Required<typeof defaultProps>\n> {\n static defaultProps = defaultProps;\n render() {\n const {\n label,\n isActive,\n isSelected,\n leftElement,\n rightElement,\n labelClassName,\n className\n } = this.props;\n const _class = cx(\n rowWrapper,\n {\n [activeRow]: !!isActive,\n [selectedRow]: !!isSelected\n },\n className\n );\n return (\n <Control\n {...this.props}\n checked={this.props.isSelected}\n type={this.props.multiSelect ? \"checkbox\" : \"radio\"}\n className={_class}\n >\n {() => {\n return (\n <>\n {leftElement && leftElement(this.props)}\n <div className={cx(labelWrap, labelClassName)}>{label}</div>\n {rightElement(this.props)}\n <Ink />\n </>\n );\n }}\n </Control>\n );\n }\n}\n\nexport default Option;\n","import { css } from \"emotion\";\nimport { constants, mixins, typography } from \"../../theme\";\nimport { getPlaceholderStyle } from \"../../theme/mixins\";\nimport { colors } from \"pebble-shared\";\n\nexport const searchWrapperStyle = css({\n minWidth: \"200px\",\n borderRadius: constants.borderRadius,\n padding: \"0 20px\",\n ...mixins.flexRow,\n alignItems: \"center\",\n height: 40,\n \"> i\": {\n marginRight: 10,\n fontSize: 12\n },\n \"&.__pebble__search__small\": {\n backgroundColor: colors.gray.lightest\n },\n \"&.__pebble__search__large\": {\n backgroundColor: colors.white.base,\n height: 76,\n padding: \"0 25px\",\n boxShadow: constants.boxShadow.base\n // input: typography.normal.regular\n },\n \"&.__pebble__search__table\": {\n border: `1px solid ${colors.gray.light}`,\n backgroundColor: colors.white.base,\n i: {\n color: colors.gray.dark\n }\n }\n});\n\nexport const searchStyle = css({\n borderRadius: constants.borderRadius,\n outline: \"none\",\n border: 0,\n height: \"inherit\",\n flexGrow: 1,\n ...mixins.textEllipsis,\n ...typography.s.regular,\n .../*#__PURE__*/ getPlaceholderStyle(colors.gray.base),\n backgroundColor: \"transparent\"\n});\n\nexport const clearContainer = css({\n display: \"table\",\n height: 16,\n width: 16,\n backgroundColor: colors.gray.light,\n fontSize: 6,\n borderRadius: 16,\n textAlign: \"center\",\n cursor: \"pointer\",\n pointerEvents: \"none\",\n transition: \"opacity 0.3s\",\n opacity: 0,\n \"&.__display\": {\n opacity: 1,\n pointerEvents: \"unset\"\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { SearchProps } from \"./typings/Search\";\nimport {\n searchStyle,\n searchWrapperStyle,\n clearContainer\n} from \"./styles/Search.styles\";\nimport Loader from \"./Loader\";\nimport { colors } from \"pebble-shared\";\n\nclass Search extends React.PureComponent<SearchProps> {\n searchInputRef: React.RefObject<HTMLInputElement> = React.createRef();\n\n static defaultProps = {\n showSearchIcon: true,\n clearable: true\n };\n\n render() {\n const {\n type,\n inputProps,\n onChange,\n placeholder,\n showSearchIcon,\n className,\n clearable,\n value,\n loading\n } = this.props;\n\n const wrapperClassName = cx(searchWrapperStyle, {\n __pebble__search__small: type === \"small\",\n __pebble__search__large: type === \"large\",\n __pebble__search__table: type === \"table\"\n });\n\n return (\n <div className={cx(wrapperClassName, className)}>\n {type !== \"large\" && showSearchIcon && <i className=\"pi pi-search\" />}\n <input\n className={searchStyle}\n type=\"text\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n }}\n ref={this.searchInputRef}\n value={value}\n {...inputProps}\n />\n {loading && <Loader scale={0.4} color={colors.violet.base} />}\n {clearable && (\n <div\n className={cx(clearContainer, {\n __display: !!value && !!value.length\n })}\n onClick={() => {\n if (this.searchInputRef.current) {\n this.searchInputRef.current.value = \"\";\n }\n onChange(\"\");\n }}\n >\n <i\n className=\"pi pi-close\"\n style={{ display: \"table-cell\", verticalAlign: \"middle\" }}\n />\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default Search;\n","import { constants } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const optionWrapperMaxHeight = 316;\nexport const searchBoxHeight = 80;\nexport const initialPadding = 20;\nexport const onScrollPadding = 10;\n\nexport const optionsWrapper = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n position: \"relative\",\n width: \"inherit\",\n zIndex: 9,\n maxHeight: optionWrapperMaxHeight,\n minWidth: 100,\n overflowY: \"auto\",\n padding: \"10px 1px\"\n});\n\nexport const searchBoxWrapper = css({\n padding: initialPadding,\n boxShadow: \"none\",\n transition: \"all 100ms linear\",\n zIndex: 10,\n willChange: \"padding\",\n position: \"absolute\",\n top: 0,\n background: \"white\",\n width: \"100%\",\n boxSizing: \"border-box\"\n});\n\nexport const searchBoxScrolledStyle = css({\n boxShadow: constants.boxShadow.base,\n padding: onScrollPadding\n});\n","import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { OptionProps } from \"../typings/Option\";\nimport { OptionGroupProps, OptionGroupState } from \"../typings/OptionGroup\";\nimport scrollIntoView from \"scroll-into-view-if-needed\";\nimport { cx } from \"emotion\";\nimport Search from \"../Search\";\nimport {\n searchBoxScrolledStyle,\n searchBoxWrapper,\n optionsWrapper,\n searchBoxHeight\n} from \"../styles/OptionGroup.styles\";\nimport { rowWrapper, advancedActionsWrapper } from \"../styles/Options.styles\";\n\nclass OptionGroup<OptionType> extends React.PureComponent<\n OptionGroupProps<OptionType>,\n OptionGroupState\n> {\n optionRef: React.RefObject<HTMLDivElement> = React.createRef();\n optionsRefsSet = new Map<number, React.RefObject<React.ReactInstance>>();\n observer?: IntersectionObserver;\n\n state: Readonly<OptionGroupState> = {\n highlighted: -1,\n isScrolled: false\n };\n\n private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { handleChange, isSelected } = this.props;\n const children = React.Children.toArray(this.props.children);\n const { highlighted } = this.state;\n const { which } = e;\n\n if (which === 13 && children && children[highlighted]) {\n // Enter key\n // @ts-ignore\n const { value } =\n // @ts-ignore\n children && children[highlighted] && children[highlighted].props;\n\n handleChange(\n {\n value,\n checked: !isSelected(value)\n },\n e\n );\n }\n\n this.setState(\n () => {\n let _highlighted = highlighted;\n if (which === 40) {\n _highlighted = Math.min(\n _highlighted + 1,\n React.Children.count(children) - 1\n );\n }\n if (which === 38) {\n _highlighted = Math.max(_highlighted - 1, 0);\n }\n\n return { highlighted: _highlighted };\n },\n () => {\n const currentRef = this.optionsRefsSet.get(highlighted);\n if (\n this.optionRef.current &&\n (which === 40 || which === 38) &&\n currentRef &&\n currentRef.current\n ) {\n const element = ReactDOM.findDOMNode(currentRef.current) as Element;\n if (element) {\n scrollIntoView(element, {\n behavior: \"smooth\",\n boundary: this.optionRef.current\n });\n }\n }\n }\n );\n };\n\n componentDidMount() {\n this.observer = new IntersectionObserver(\n entries => {\n this.setState({\n isScrolled: entries[0].intersectionRatio < 0.9\n });\n },\n {\n root: this.optionRef.current,\n threshold: 0.9\n }\n );\n\n if (\n this.optionRef.current &&\n this.optionRef.current.childNodes &&\n this.optionRef.current.childNodes.length\n ) {\n this.observer.observe(this.optionRef.current.childNodes[0] as Element);\n }\n }\n\n componentWillUnmount() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const {\n searchBox,\n advancedOptions,\n advancedOptionsProps,\n children,\n multiSelect,\n className,\n isSelected,\n handleChange,\n searchBoxProps\n } = this.props;\n const { isScrolled, highlighted } = this.state;\n\n const _children = React.Children.map(children, (_option, i) => {\n // `_option as React.ReactElement<OptionProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const option = _option as React.ReactElement<OptionProps<OptionType>>;\n let ref = this.optionsRefsSet.get(i);\n if (!ref) {\n ref = React.createRef<HTMLDivElement>();\n this.optionsRefsSet.set(i, ref);\n }\n return React.cloneElement(option, {\n onChange: handleChange,\n isActive: highlighted === i,\n isSelected: isSelected(option.props.value),\n multiSelect,\n // @ts-ignore\n ref\n });\n });\n\n const searchBoxClassName = cx(searchBoxWrapper, {\n [searchBoxScrolledStyle]: isScrolled\n });\n\n const _class = cx(\n rowWrapper,\n advancedActionsWrapper,\n advancedOptionsProps && advancedOptionsProps.className\n );\n\n return (\n <React.Fragment>\n {searchBox && searchBoxProps && (\n <div className={searchBoxClassName}>\n <Search\n type=\"small\"\n {...searchBoxProps}\n inputProps={{\n ...(searchBoxProps && searchBoxProps.inputProps),\n onKeyDown: this.handleKeyPress,\n autoFocus: true\n }}\n />\n </div>\n )}\n {!!React.Children.count(children) && (\n <div\n ref={this.optionRef}\n style={{\n paddingTop: searchBox ? searchBoxHeight : undefined\n }}\n className={cx(optionsWrapper, className)}\n role={multiSelect ? \"group\" : \"radiogroup\"}\n data-test-id=\"optiongroup\"\n aria-label={searchBoxProps && searchBoxProps.placeholder}\n >\n {advancedOptions && advancedOptionsProps && (\n <div className={_class}>\n <div onClick={advancedOptionsProps.selectVisible}>\n Select Visible\n </div>\n <div onClick={advancedOptionsProps.clearVisible}>\n Clear Visible\n </div>\n </div>\n )}\n {_children}\n </div>\n )}\n </React.Fragment>\n );\n }\n}\n\nexport default OptionGroup;\n","import * as mixins from \"../../theme/mixins\";\nimport { css } from \"emotion\";\nimport {\n optionWrapperMaxHeight,\n searchBoxHeight,\n initialPadding,\n onScrollPadding\n} from \"./OptionGroup.styles\";\nimport { smallButtonHeight } from \"./Button.styles\";\nimport { colors } from \"pebble-shared\";\nexport const optionGroupCheckBoxButtonWrapPadding = 20;\nexport const optionGroupCheckBoxButtonWrapPaddingTop = 10;\n\nexport const optionGroupCheckBoxWrap = css({\n maxHeight:\n optionWrapperMaxHeight +\n searchBoxHeight +\n 2 * (initialPadding - onScrollPadding) +\n optionGroupCheckBoxButtonWrapPadding +\n optionGroupCheckBoxButtonWrapPaddingTop +\n smallButtonHeight,\n position: \"relative\"\n});\n\nexport const optionGroupCheckBoxButtonWrap = css({\n ...mixins.flexSpaceBetween,\n gap: 60,\n padding: optionGroupCheckBoxButtonWrapPadding,\n paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,\n backgroundColor: colors.white.base\n});\n","import { cx } from \"emotion\";\nimport * as React from \"react\";\nimport { getSelectedCheckboxes } from \"./utils/getSelectedCheckboxes\";\nimport Button from \"./Button\";\nimport OptionGroup from \"./shared/OptionGroup\";\nimport { OptionGroupCheckBoxProps } from \"./typings/OptionGroupCheckBox\";\nimport * as styles from \"../components/styles/OptionGroupCheckBox.styles\";\nimport { OptionProps } from \"./typings/Option\";\n\nexport default class OptionGroupCheckBox<\n OptionType\n> extends React.PureComponent<OptionGroupCheckBoxProps<OptionType>> {\n isSelected = (value: OptionType) => {\n const { selected } = this.props;\n return !!selected && selected.includes(value);\n };\n handleChange: OptionGroup<OptionType>[\"props\"][\"handleChange\"] = (\n { value },\n event\n ) => {\n this.props.onChange(\n getSelectedCheckboxes<OptionType>(value, this.props.selected),\n {\n props: this.props,\n event\n }\n );\n };\n selectVisible = () => {\n const { children } = this.props;\n const _values = (\n React.Children.map(\n children,\n child => child as React.ReactElement<OptionProps<OptionType>>\n ) || []\n )\n .filter(_child => _child && _child.props && _child.props.value)\n .map(_child => _child && _child.props && _child.props.value);\n this.props.onChange(_values, { props: this.props });\n };\n clearVisible = () => {\n this.props.onChange([], { props: this.props, event });\n };\n onApply = () => {\n const { onApply, selected } = this.props;\n if (onApply) onApply(selected || [], this.props);\n };\n render() {\n const {\n wrapClassName,\n onApply,\n onClear,\n isSelected,\n onChange,\n ...rest\n } = this.props;\n const advancedOptionsProps = {\n selectVisible: this.selectVisible,\n clearVisible: this.clearVisible,\n ...this.props.advancedOptionsProps\n };\n return (\n <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>\n <OptionGroup<OptionType>\n {...rest}\n advancedOptionsProps={advancedOptionsProps}\n isSelected={isSelected || this.isSelected}\n handleChange={this.handleChange}\n multiSelect\n />\n\n {(onApply || onClear) && (\n <div className={styles.optionGroupCheckBoxButtonWrap}>\n {onClear && (\n <Button type=\"secondary\" onClick={onClear}>\n Clear\n </Button>\n )}\n {onApply && <Button onClick={this.onApply}>Apply</Button>}\n </div>\n )}\n </div>\n );\n }\n}\n","import * as React from \"react\";\nimport OptionGroup from \"./shared/OptionGroup\";\nimport { OptionGroupRadio as OptionGroupRadioProps } from \"./typings/OptionGroupRadio\";\n\nexport default class OptionGroupRadio<OptionType> extends React.PureComponent<\n OptionGroupRadioProps<OptionType>\n> {\n isSelected = (value: OptionType) => {\n return this.props.selected === value;\n };\n handleChange: OptionGroup<OptionType>[\"props\"][\"handleChange\"] = (\n { value, checked },\n event\n ) => {\n const { onChange } = this.props;\n onChange(checked ? value : undefined, {\n props: this.props,\n event\n });\n };\n render() {\n const { selected, onChange, isSelected, ...rest } = this.props;\n return (\n <OptionGroup<OptionType>\n {...rest}\n isSelected={isSelected || this.isSelected}\n handleChange={this.handleChange}\n />\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { inputMarginBottom } from \"./Input.styles\";\n\nexport const selectWrapper = css({\n marginBottom: 20\n});\n\nexport const relativePosition = css({\n position: \"relative\"\n});\n\nexport const selectInputWrapper = css({\n pointerEvents: \"none\",\n marginBottom: 0\n});\n\nexport const selectInput = css({\n color: colors.gray.darker,\n paddingRight: 15\n});\n\nexport const dropDownClass = css({\n marginTop: -inputMarginBottom\n});\n\nexport const fullWidth = css({\n width: \"100%\"\n});\n\nexport const inputWrapper = css({\n cursor: \"pointer\",\n position: \"relative\"\n});\n\nexport const disabledSelect = css({\n cursor: \"not-allowed\"\n});\n\nexport const chevronStyle = css({\n position: \"absolute\",\n top: 0,\n bottom: 0,\n margin: \"auto\",\n height: \"10px\",\n right: 7,\n color: colors.gray.base,\n fontSize: 10,\n \"&.__pebble__select__open\": {\n transform: \"rotate(180deg)\"\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { SelectProps } from \"./typings/Select\";\nimport {\n chevronStyle,\n dropDownClass,\n inputWrapper,\n selectInput,\n selectInputWrapper,\n selectWrapper,\n fullWidth,\n relativePosition,\n disabledSelect\n} from \"./styles/Select.styles\";\nimport DropDown from \"./DropDown\";\nimport Input from \"./Input\";\nimport OptionGroupCheckBox from \"./OptionGroupCheckBox\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\n\nfunction noop() {}\n\nfunction Select<OptionType>(props: SelectProps<OptionType>) {\n const {\n className,\n placeholder,\n required,\n errorMessage,\n value,\n dropdownClassName,\n arrowClassName,\n inputProps,\n fullWidthDropdown,\n onDropdownToggle = noop,\n disabled,\n isSelected,\n placement,\n modifiers\n } = props;\n\n return (\n <div\n className={cx(selectWrapper, className, {\n [relativePosition]: !!fullWidthDropdown\n })}\n >\n <DropDown\n dropDownClassName={cx(dropDownClass, dropdownClassName, {\n [fullWidth]: !!fullWidthDropdown\n })}\n onOutsideClick={isOpen => onDropdownToggle(isOpen)}\n labelComponent={({ toggleDropdown, isOpen }) => {\n const chevron = cx(\n chevronStyle,\n \"pi pi-arrow-drop-down\",\n {\n __pebble__select__open: isOpen\n },\n arrowClassName\n );\n return (\n <div\n className={cx(inputWrapper, disabled && disabledSelect)}\n onClick={\n disabled\n ? undefined\n : () => {\n toggleDropdown();\n onDropdownToggle(isOpen);\n }\n }\n >\n <Input\n className={selectInputWrapper}\n inputClassName={selectInput}\n placeholder={placeholder}\n value={value || \"\"}\n onChange={noop}\n required={required}\n message={isOpen ? \" \" : \"\"}\n errorMessage={errorMessage}\n readOnly\n disabled={disabled}\n {...inputProps}\n />\n <i className={chevron} />\n </div>\n );\n }}\n placement={placement}\n modifiers={modifiers}\n >\n {({ toggle, isOpen }) => {\n const { children, onClear, searchBox, searchBoxProps } = props;\n const commonProps = {\n isSelected,\n onClear:\n onClear &&\n (() => {\n onClear();\n onDropdownToggle(isOpen);\n toggle();\n }),\n searchBox,\n searchBoxProps\n };\n\n // This would have been the ideal way to write this but typescript is crying.\n // const OptionGroup = props.multiSelect\n // ? OptionGroupCheckBox\n // : OptionGroupRadio;\n // return (\n // <OptionGroup\n // selected={props.selected}\n // onChange={(_value, extras) => {\n // if (_value) {\n // props.onChange(_value, extras);\n // }\n // if (!props.multiSelect) {\n // onDropdownToggle(isOpen);\n // toggle();\n // }\n // }}\n // onApply={\n // props.multiSelect &&\n // props.onApply &&\n // (_value => {\n // if (props.onApply) {\n // props.onApply(_value, props);\n // }\n // onDropdownToggle(isOpen);\n // toggle();\n // })\n // }\n // {...commonProps}\n // >\n // {children}\n // </OptionGroup>\n // );\n\n if (props.multiSelect) {\n return (\n <OptionGroupCheckBox<OptionType>\n selected={props.selected}\n onChange={(_value, extras) => {\n props.onChange(_value, extras);\n }}\n onApply={\n props.onApply &&\n (_value => {\n if (props.onApply) props.onApply(_value, props);\n onDropdownToggle(isOpen);\n toggle();\n })\n }\n {...commonProps}\n >\n {children}\n </OptionGroupCheckBox>\n );\n } else {\n return (\n <OptionGroupRadio\n selected={props.selected}\n onChange={(_value, extras) => {\n if (_value !== undefined) props.onChange(_value, extras);\n onDropdownToggle(isOpen);\n toggle();\n }}\n {...commonProps}\n >\n {children}\n </OptionGroupRadio>\n );\n }\n }}\n </DropDown>\n </div>\n );\n}\n\nexport default Select;\n","import { css } from \"emotion\";\n\nexport const wrapper = css({\n display: \"flex\"\n});\n\nexport const selectStyle = css({\n width: \"80px\",\n marginBottom: 0\n});\n\nexport const combinedLabelStyle = css({\n zIndex: 1\n});\n","import * as React from \"react\";\nimport Select from \"./Select\";\nimport Input from \"./Input\";\nimport { cx } from \"emotion\";\nimport { PhoneNumberInputProps } from \"./typings/PhoneNumberInput\";\nimport {\n wrapper,\n selectStyle,\n combinedLabelStyle\n} from \"./styles/PhoneNumberInput.styles\";\nimport { labelStyle } from \"./styles/Input.styles\";\nimport { colors } from \"pebble-shared\";\n\nexport default class PhoneNumberInput<\n OptionType = string\n> extends React.Component<PhoneNumberInputProps<OptionType>> {\n onCountrySelect = (countryCode: OptionType) => {\n this.props.onChange({\n countryCode,\n phone: this.props.phone\n });\n };\n\n onNumberChange = (value: string) => {\n const _value = value.replace(/\\D/g, \"\");\n if (_value === this.props.phone) {\n return;\n }\n this.props.onChange({\n countryCode: this.props.countryCode,\n phone: _value\n });\n };\n\n render() {\n const {\n phone,\n countryCode,\n className,\n selectProps,\n inputProps,\n required,\n placeholder\n } = this.props;\n return (\n <div className={cx(wrapper, className)}>\n <label\n className={cx(\n labelStyle,\n \"_pebble_input_label_focused\",\n combinedLabelStyle\n )}\n >\n {placeholder || \"Phone No.\"}\n {required && <span style={{ color: colors.red.base }}>&nbsp;*</span>}\n </label>\n <Select<OptionType>\n placeholder=\"\"\n onChange={this.onCountrySelect}\n value={countryCode + \"\"}\n selected={countryCode}\n {...selectProps}\n className={cx(selectStyle, selectProps && selectProps.className)}\n >\n {this.props.children}\n </Select>\n <Input\n onChange={this.onNumberChange}\n placeholder=\"\"\n value={phone}\n {...inputProps}\n />\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\n\nexport const popperStyle = css({\n margin: 14,\n boxShadow: constants.boxShadow.xElevated,\n borderRadius: constants.borderRadius\n});\n\nexport const arrowStyle = css({\n position: \"absolute\",\n textShadow: \"1px 0 20px rgba(0,0,0,0.1)\",\n \"&[data-placement^='top']\": {\n transform: \"rotate(90deg)\",\n bottom: -11\n },\n \"&[data-placement^='bottom']\": {\n transform: \"rotate(-90deg)\",\n top: -11\n },\n \"&[data-placement^='right']\": {\n transform: \"rotate(180deg)\",\n left: -11\n },\n \"&[data-placement^='left']\": {\n right: -11\n }\n});\n","import * as React from \"react\";\nimport { PopperProps, PopperState } from \"./typings/Popper\";\nimport { Manager, Reference, Popper } from \"react-popper\";\nimport { arrowStyle, popperStyle } from \"./styles/Popper.styles\";\nimport { colors } from \"pebble-shared\";\nimport { cx } from \"emotion\";\nimport OutsideClick from \"./OutsideClick\";\nimport MountTransition from \"./shared/MountTransition\";\nimport { animated } from \"react-spring\";\n\nexport default class PebblePopper extends React.PureComponent<\n PopperProps,\n PopperState\n> {\n static defaultProps: Partial<PopperProps> = {\n placement: \"bottom\",\n closeOnOutsideClick: true\n };\n\n state: PopperState = {\n isOpen: !!this.props.isOpen\n };\n\n private toggle = () => {\n this.setState({\n isOpen: !this.state.isOpen\n });\n };\n\n render() {\n const {\n label,\n popperBackgroundColor = colors.white.base,\n children,\n controlled,\n isOpen,\n popperClassName,\n onOutsideClick,\n ...props\n } = this.props;\n\n const _isPopperOpen = controlled ? !!isOpen : this.state.isOpen;\n\n return (\n <OutsideClick\n onOutsideClick={() => {\n this.setState({\n isOpen: false\n });\n if (onOutsideClick) {\n onOutsideClick();\n }\n }}\n disabled={!_isPopperOpen}\n >\n <Manager>\n <Reference>\n {({ ref }) => (\n <div style={{ display: \"inline-block\" }} ref={ref}>\n {typeof label === \"function\"\n ? label({ toggle: this.toggle, isOpen: this.state.isOpen })\n : label}\n </div>\n )}\n </Reference>\n\n <MountTransition visible={_isPopperOpen}>\n {transitionStyles => (\n <Popper {...props} positionFixed>\n {({ ref, style, placement, arrowProps }) => {\n const wrapperStyle = {\n ...style,\n ...transitionStyles,\n backgroundColor: popperBackgroundColor,\n transform: transitionStyles.transform.to(\n t => `${style.transform || \"\"} ${t || \"\"}`\n ),\n transformOrigin: `${arrowProps.style.left || 0}px ${\n arrowProps.style.top || 0\n }px`\n };\n\n return (\n <animated.div\n className={cx(popperStyle, popperClassName)}\n ref={ref}\n style={wrapperStyle}\n data-placement={placement}\n >\n {children({\n toggle: this.toggle,\n isOpen: this.state.isOpen\n })}\n <div\n className={arrowStyle}\n ref={arrowProps.ref}\n style={{\n ...arrowProps.style,\n color: popperBackgroundColor\n }}\n data-placement={placement}\n >\n ▶\n </div>\n </animated.div>\n );\n }}\n </Popper>\n )}\n </MountTransition>\n </Manager>\n </OutsideClick>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { mixins, constants } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nconst modalPadding = 30;\n\nexport const modalContainer = css({\n background: \"white\",\n width: \"360px\",\n alignSelf: \"center\",\n borderRadius: constants.borderRadius,\n padding: modalPadding,\n position: \"relative\"\n});\n\nexport const flexCenter = css({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: \"100%\"\n});\n\nexport const buttonsContainer = css({\n ...mixins.flexSpaceBetween,\n marginTop: \"40px\"\n});\n\nexport const iconCloseClassName = css({\n cursor: \"pointer\",\n position: \"absolute\",\n right: modalPadding,\n top: modalPadding,\n fontSize: \"14px\",\n color: colors.gray.base,\n \"&:hover\": {\n color: colors.gray.darker\n }\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport Modal from \"./Modal\";\nimport Button from \"./Button\";\nimport {\n modalContainer,\n buttonsContainer,\n iconCloseClassName,\n flexCenter\n} from \"./styles/PopUp.styles\";\nimport { PopUpProps } from \"./typings/PopUp\";\n\nconst PopUp: React.FunctionComponent<PopUpProps> = props => {\n const {\n onClose,\n onApprove,\n onReject,\n visible,\n approveButtonText = \"Yes\",\n rejectButtonText = \"No\",\n children,\n approveButtonProps,\n rejectButtonProps\n } = props;\n return (\n <Modal visible={visible} modalClassName={flexCenter}>\n <div className={modalContainer}>\n {onClose && (\n <i\n className={cx(\"pi\", \"pi-close\", iconCloseClassName)}\n onClick={onClose}\n />\n )}\n {children}\n {(onReject || onApprove) && (\n <div className={buttonsContainer}>\n {onReject && (\n <Button\n size=\"large\"\n type=\"secondary\"\n onClick={onReject}\n {...rejectButtonProps}\n >\n {rejectButtonText}\n </Button>\n )}\n {onApprove && (\n <Button\n size=\"large\"\n type=\"primary\"\n onClick={onApprove}\n {...approveButtonProps}\n >\n {approveButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </Modal>\n );\n};\n\nexport default PopUp;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\n\nexport const selectedTabStyle = css({\n borderBottom: `2px solid ${colors.violet.base}`,\n color: colors.violet.base\n});\n\nexport const tabStyle = css({\n padding: \"10px 20px 20px\",\n cursor: \"pointer\",\n ...typography.s.bold\n});\n\nexport const tabsWrap = css({\n display: \"flex\",\n justifyContent: \"space-around\",\n overflow: \"auto\",\n borderBottom: `1px solid ${colors.gray.lighter}`,\n background: colors.white.base\n});\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { TabsState, TabsProps, TabSectionProps } from \"./typings/Tabs\";\nimport { tabStyle, tabsWrap, selectedTabStyle } from \"./styles/Tabs.styles\";\n\nconst TabSelectedContext = /*@__PURE__*/ React.createContext<string | null>(\n null\n);\n\nexport class Tabs extends React.PureComponent<TabsProps, TabsState> {\n state: Readonly<TabsState> = {\n selectedTab:\n this.props.initialSelectedTab ||\n (this.props.tabs.length && this.props.tabs[0]) ||\n \"\"\n };\n\n static getDerivedStateFromProps(props: TabsProps): Partial<TabsState> | null {\n if (!props.selectedTab) {\n return null;\n }\n return {\n selectedTab: props.selectedTab\n };\n }\n\n render() {\n const _className = cx(tabStyle, this.props.tabClassName);\n\n const { labels } = this.props;\n\n return (\n <TabSelectedContext.Provider value={this.state.selectedTab}>\n <div className={cx(tabsWrap, this.props.wrapClassName)}>\n {this.props.tabs.map((tab, i) => {\n const isSelected = this.state.selectedTab === tab;\n return (\n <span\n key={`${tab}-${i}`}\n data-test-id={`${tab\n .replace(/\\d/g, \"\")\n .replace(\"(\", \"\")\n .replace(\")\", \"\")\n .trim()}`}\n className={cx(\n _className,\n isSelected && selectedTabStyle,\n isSelected && this.props.selectedTabClassName\n )}\n onClick={() => {\n this.setState({\n selectedTab: tab\n });\n if (this.props.onTabChange) {\n this.props.onTabChange(tab);\n }\n }}\n >\n {labels && labels[tab] ? labels[tab] : tab}\n </span>\n );\n })}\n </div>\n {this.props.children}\n </TabSelectedContext.Provider>\n );\n }\n}\n\n// tslint:disable-next-line:max-classes-per-file\nexport class TabSection extends React.PureComponent<TabSectionProps, {}> {\n static context = TabSelectedContext;\n render() {\n const { section, children } = this.props;\n return (\n <TabSelectedContext.Consumer>\n {selectedTab => <>{section === selectedTab && children}</>}\n </TabSelectedContext.Consumer>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const tabsStyle = css({\n width: \"100%\",\n textAlign: \"center\",\n padding: \"20px\",\n color: colors.gray.dark,\n fontSize: \"16px\"\n});\n\nexport const dateBtnsWrap = css({\n display: \"flex\",\n flexWrap: \"wrap\",\n width: \"416px\",\n padding: \"20px 40px\",\n justifyContent: \"space-between\"\n});\n\nexport const unSelectedDateButton = css({\n marginBottom: \"20px\",\n border: `1px solid ${colors.gray.light}`,\n background: colors.white.base,\n color: colors.gray.darker,\n width: \"158px\",\n \"&:not([disabled]):hover\": {\n border: \"none\",\n background: colors.gray.light,\n color: colors.gray.darker\n }\n});\n\nexport const selectedDateButton = css({\n border: \"none\",\n background: colors.violet.lightest,\n color: colors.violet.dark,\n \"&:not([disabled]):hover\": {\n border: \"none\",\n background: colors.violet.lightest,\n color: colors.violet.dark\n }\n});\n","import * as React from \"react\";\nimport Calendar from \"./Calendar\";\nimport { cx } from \"emotion\";\nimport {\n PresetCalendarProps,\n PresetCalendarState\n} from \"./typings/PresetCalendar\";\nimport { Tabs, TabSection } from \"./Tabs\";\nimport Button from \"./Button\";\nimport {\n tabsStyle,\n selectedDateButton,\n unSelectedDateButton,\n dateBtnsWrap\n} from \"./styles/PresetCalendar.styles\";\n\nconst DATE_TABS = [\"Presets\", \"Custom\"];\n\nclass PresetCalendar extends React.PureComponent<\n PresetCalendarProps,\n PresetCalendarState\n> {\n state = {\n startTime: this.props.defaultValue && this.props.defaultValue[0],\n endTime: this.props.defaultValue && this.props.defaultValue[1]\n };\n\n render() {\n const { startTime, endTime } = this.state;\n const { defaultValue } = this.props;\n\n return (\n <Tabs\n tabs={DATE_TABS}\n initialSelectedTab=\"Presets\"\n tabClassName={tabsStyle}\n >\n <TabSection section={DATE_TABS[0]}>\n <div className={dateBtnsWrap}>\n {this.props.presetDateOptions.map((btn, index) => (\n <Button\n onClick={() => {\n this.setState({\n startTime: btn.dateRange[0],\n endTime: btn.dateRange[1]\n });\n if (this.props.onApply) {\n this.props.onApply(btn.dateRange as [Date, Date]);\n }\n }}\n type=\"primary\"\n size=\"large\"\n className={cx({\n [unSelectedDateButton]: true,\n [selectedDateButton]:\n btn.dateRange[0] === this.state.startTime &&\n btn.dateRange[1] === this.state.endTime\n })}\n key={`${btn.label}-${index}`}\n >\n {btn.label}\n </Button>\n ))}\n </div>\n </TabSection>\n <TabSection section={DATE_TABS[1]}>\n <Calendar\n hideShadow\n range\n onChange={(value: Date[] | Date | undefined) => {\n if (value && Array.isArray(value)) {\n this.setState({\n startTime: value[0],\n endTime: value[1]\n });\n this.props.onChange(value as [Date, Date]);\n }\n }}\n selected={\n (startTime && endTime && [startTime, endTime]) || undefined\n }\n onApply={(value: Date[] | Date | undefined) => {\n if (value && Array.isArray(value)) {\n this.setState({\n startTime: value[0],\n endTime: value[1]\n });\n this.props.onApply(value as [Date, Date]);\n }\n }}\n onClear={() => {\n this.setState({\n startTime: defaultValue && defaultValue[0],\n endTime: defaultValue && defaultValue[1]\n });\n if (this.props.onClear) {\n this.props.onClear();\n }\n }}\n />\n </TabSection>\n </Tabs>\n );\n }\n}\n\nexport default PresetCalendar;\n","import * as React from \"react\";\nimport { RadioProps } from \"./typings/Radio\";\nimport { RadioGroupProps } from \"./typings/RadioGroup\";\n\nexport default class RadioGroup<OptionType> extends React.PureComponent<\n RadioGroupProps<OptionType>\n> {\n private handleChange = (\n { value, checked }: { value: OptionType; checked: boolean },\n event: React.MouseEvent\n ) => {\n const { toggle, selected, onChange } = this.props;\n if (!toggle && value === selected) return;\n onChange(checked ? value : undefined, event);\n };\n\n render() {\n const { children, selected, className, name, disabled } = this.props;\n\n const _children = React.Children.map(children, _radio => {\n // `_radio as React.ReactElement<RadioProps>` is a hack\n // Because React does not allow us to specify what sort of elements\n // you can allow as children and leaves it on you to figure out\n // all various types of children provided.\n const radio = _radio as React.ReactElement<RadioProps<OptionType>>;\n return React.cloneElement(radio, {\n onChange: this.handleChange,\n checked: selected === radio.props.value,\n disabled\n });\n });\n\n return (\n <div role=\"radiogroup\" aria-label={name} className={className}>\n {_children}\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { mixins } from \"../../theme\";\n\nexport const wrapStyle = css({\n ...mixins.flexRow,\n cursor: \"pointer\"\n});\n\nexport const disabledStyle = css({\n cursor: \"not-allowed\"\n});\n\nexport const unSelectedStar = css({\n marginLeft: \"2px\",\n color: colors.gray.border,\n fontSize: \"20px\"\n});\n\nexport const selectedStar = css({\n color: colors.yellow.base\n});\n","import { cx } from \"emotion\";\nimport * as React from \"react\";\nimport {\n disabledStyle,\n selectedStar,\n unSelectedStar,\n wrapStyle\n} from \"./styles/Rating.styles\";\nimport { RatingProps, RatingState } from \"./typings/Rating\";\n\nfunction generateStars(maxRating: number, selectedValue: number) {\n return Array.from({ length: maxRating }, (_, i) => {\n return { active: i + 1 <= selectedValue };\n });\n}\n\nclass Rating extends React.PureComponent<RatingProps, RatingState> {\n constructor(props: RatingProps) {\n super(props);\n this.state = {\n stars: generateStars(props.maxRating, props.value)\n };\n }\n\n componentDidUpdate(prevProps: RatingProps) {\n const { maxRating, value } = this.props;\n if (prevProps.maxRating !== maxRating) {\n this.setState({\n stars: generateStars(maxRating, value)\n });\n }\n }\n\n setRating = (rating: number) => {\n const { maxRating, disabled } = this.props;\n if (disabled) {\n return;\n }\n this.setState({\n stars: generateStars(maxRating, rating)\n });\n };\n\n render() {\n const { name, value, onChange, disabled, className } = this.props;\n const { stars } = this.state;\n\n const _className = cx(wrapStyle, className, disabled && disabledStyle);\n\n return (\n <div className={_className}>\n {stars.map((star, starIndex) => {\n const rating = starIndex + 1;\n return (\n <span\n key={`${name}-${rating}`}\n onMouseEnter={() => this.setRating(rating)}\n onMouseLeave={() => this.setRating(value)}\n onClick={() => {\n if (disabled) {\n return;\n }\n this.setRating(rating);\n onChange(rating);\n }}\n >\n <i\n className={cx(\n \"pi pi-grade\",\n unSelectedStar,\n star.active && selectedStar\n )}\n />\n </span>\n );\n })}\n </div>\n );\n }\n}\n\nexport default Rating;\n","import { mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const inputReadOnlyStyle = css({\n color: colors.gray.dark\n});\n\nexport const inputDisabledStyle = css({\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: colors.gray.base\n});\n\nexport const messageStyle = css({\n ...typography.s.regular,\n marginTop: 10,\n lineHeight: \"10px\",\n textAlign: \"left\"\n});\n\nexport const infoTextStyle = css({\n ...typography.s.light,\n marginRight: \"15px\",\n lineHeight: \"12px\"\n});\n\nexport const placeholderStyle = css({\n position: \"absolute\",\n left: \"15px\",\n color: colors.gray.base,\n cursor: \"text\",\n transition: \"transform 100ms ease\",\n transform: \"translate(0, 0px)\",\n pointerEvents: \"none\",\n \"&._pebble_secondary_input_label_focused\": {\n fontSize: \"12px\",\n transform: \"translate(0, -10px)\"\n }\n});\n\nexport const inputStyle = css({\n border: 0,\n outline: 0,\n borderRadius: \"3px\",\n padding: \"15px 15px 0px\",\n width: \"100%\",\n fontSize: \"14px\",\n lineHeight: \"12px\",\n ...mixins.textEllipsis,\n height: \"48px\"\n});\n\nexport const inputWrapperStyle = css({\n position: \"relative\",\n borderRadius: \"3px\",\n fontSize: \"14px\",\n lineHeight: \"12px\",\n background: colors.white.base,\n boxSizing: \"border-box\",\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\"\n});\n\nexport const wrapperStyle = css({ width: \"100%\", height: \"70px\" });\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport Loader from \"./Loader\";\nimport {\n inputDisabledStyle,\n inputReadOnlyStyle,\n infoTextStyle,\n inputStyle,\n inputWrapperStyle,\n wrapperStyle,\n messageStyle,\n placeholderStyle\n} from \"./styles/SecondaryInput.styles\";\nimport {\n SecondaryInputProps,\n SecondaryInputState\n} from \"./typings/SecondaryInput\";\n\nfunction getColor(\n error: string | undefined,\n success: string | undefined,\n isFocused?: boolean,\n isBorder?: boolean\n) {\n let color = isBorder ? colors.gray.light : colors.gray.dark;\n if (error) {\n color = colors.red.base;\n } else if (success) {\n color = colors.emerald.base;\n } else if (isFocused) {\n color = colors.violet.base;\n }\n\n return color;\n}\n\nexport default class SecondaryInput extends React.PureComponent<\n SecondaryInputProps,\n SecondaryInputState\n> {\n state: Readonly<SecondaryInputState> = {\n isFocused: false\n };\n\n private addFocus = () => {\n this.setState({\n isFocused: true\n });\n };\n\n private removeFocus = () => {\n this.setState({\n isFocused: false\n });\n };\n\n private handleChange = (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.ChangeEvent<HTMLTextAreaElement>\n ) => {\n this.props.onChange(e.target.value || \"\");\n };\n\n render() {\n const {\n placeholder,\n inputClassName,\n required,\n infoText,\n value,\n disabled,\n errorMessage,\n successMessage,\n message,\n readOnly,\n loading,\n className\n } = this.props;\n const { isFocused } = this.state;\n\n const _message = errorMessage || successMessage || message;\n\n const _inputProps = {\n \"aria-label\": placeholder ? placeholder : undefined,\n disabled,\n readOnly,\n value: value || \"\",\n className: inputStyle,\n onChange: this.handleChange\n };\n\n const inputWrapperClassName = cx(\n inputWrapperStyle,\n {\n [inputDisabledStyle]: !!disabled,\n [inputReadOnlyStyle]: !!readOnly\n },\n inputClassName\n );\n\n const placeholderClassName = cx(placeholderStyle, {\n _pebble_secondary_input_label_focused: isFocused || !!value\n });\n\n return (\n <div className={cx(wrapperStyle, className)}>\n <div\n className={inputWrapperClassName}\n style={{\n border: `1px solid ${getColor(\n errorMessage,\n successMessage,\n isFocused,\n true\n )}`\n }}\n onFocus={this.addFocus}\n onBlur={this.removeFocus}\n >\n <input {..._inputProps} {...this.props.inputProps} />\n <label className={placeholderClassName}>\n {placeholder}\n {required && (\n <span style={{ color: colors.red.base }}>&nbsp;*</span>\n )}\n </label>\n {infoText && !loading && (value || isFocused) && (\n <label className={infoTextStyle}>{infoText}</label>\n )}\n {loading && <Loader color={colors.violet.base} scale={0.4} />}\n </div>\n {_message && (\n <div\n className={messageStyle}\n style={{ color: getColor(errorMessage, successMessage) }}\n >\n {_message}\n </div>\n )}\n </div>\n );\n }\n}\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const sidebarWrapperStyle = css({\n backgroundColor: \"rgba(16,23,33,0.3)\",\n position: \"fixed\",\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 99\n});\n\nexport const closeStyle = css({\n backgroundColor: colors.white.base,\n borderRadius: constants.borderRadius,\n height: 40,\n width: 40,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n marginLeft: -60,\n marginTop: 20,\n position: \"absolute\",\n i: {\n fontSize: 14,\n color: colors.gray.darker\n },\n \"@media (max-width: 800px)\": {\n left: 80,\n marginTop: -45,\n borderRadius: 0,\n display: \"flex\",\n justifyContent: \"flex-end\",\n padding: \"0 20px\",\n i: {\n float: \"right\",\n color: colors.gray.dark,\n fontSize: 14\n }\n }\n});\n\nexport const sidebarStyle = css({\n backgroundColor: colors.white.base,\n position: \"fixed\",\n top: 0,\n bottom: 0,\n right: 0,\n willChange: \"transform\",\n zIndex: 99,\n \"@media (max-width: 800px)\": {\n width: \"100%\",\n paddingTop: 50\n },\n webkitOverflowScrolling: \"touch\"\n});\n","import * as React from \"react\";\nimport {\n closeStyle,\n sidebarStyle,\n sidebarWrapperStyle\n} from \"./styles/Sidebar.styles\";\nimport { SidebarProps } from \"./typings/Sidebar\";\nimport { animated } from \"react-spring\";\nimport Ink from \"react-ink\";\nimport { css, cx } from \"emotion\";\nimport { disableScrollY } from \"../theme/styles\";\nimport MountTransition from \"./shared/MountTransition\";\n\nconst transitionProps = {\n from: { opacity: 0, transform: \"translateX(100%)\" },\n enter: { opacity: 1, transform: \"translateX(0)\" },\n leave: { opacity: 0, transform: \"translateX(100%)\", pointerEvents: \"none\" }\n};\n\nclass SideBar extends React.PureComponent<SidebarProps> {\n static defaultProps: Partial<SidebarProps> = {\n closeOnOutsideClick: true\n };\n\n componentDidMount() {\n if (this.props.isOpen) document.body.classList.add(disableScrollY);\n }\n\n componentDidUpdate() {\n if (this.props.isOpen) {\n document.body.classList.add(disableScrollY);\n } else {\n document.body.classList.remove(disableScrollY);\n }\n }\n\n componentWillUnmount() {\n if (this.props.isOpen) {\n document.body.classList.remove(disableScrollY);\n }\n }\n\n onOutsideClick = () => {\n const { onOutsideClick, closeOnOutsideClick, onClose } = this.props;\n if (closeOnOutsideClick) {\n onClose();\n }\n if (onOutsideClick) onOutsideClick();\n };\n\n render() {\n const {\n width,\n isOpen,\n children,\n onClose,\n onOutsideClick,\n closeOnOutsideClick\n } = this.props;\n const _sidebarStyle = cx(sidebarStyle, css({ width }));\n\n return (\n <MountTransition visible={isOpen} {...transitionProps}>\n {styles => (\n <>\n <animated.div\n style={{ opacity: styles.opacity }}\n className={sidebarWrapperStyle}\n onClick={\n onOutsideClick || closeOnOutsideClick\n ? this.onOutsideClick\n : undefined\n }\n data-testid=\"shadowArea\"\n />\n\n <animated.div className={_sidebarStyle} style={styles}>\n <div className={closeStyle} onClick={onClose}>\n <i className=\"pi pi-close\" />\n <Ink />\n </div>\n\n <div style={{ overflowY: \"auto\", height: \"100%\" }}>\n {children}\n </div>\n </animated.div>\n </>\n )}\n </MountTransition>\n );\n }\n}\n\nexport default SideBar;\n","import * as React from \"react\";\nimport Rheostat from \"rheostat\";\nimport { cx, injectGlobal } from \"emotion\";\nimport { typography } from \"../theme\";\nimport { SliderProps } from \"./typings/Slider\";\nimport { sliderHeader, rheostatOverrides } from \"./styles/Slider.styles\";\nimport { colors } from \"pebble-shared\";\n\nlet rheostatStylesOverriden = false;\nfunction overrideRheostatStyles() {\n if (rheostatStylesOverriden) return;\n injectGlobal(rheostatOverrides);\n rheostatStylesOverriden = true;\n}\n\nconst Slider: React.FunctionComponent<SliderProps> = ({\n className,\n large,\n title,\n disabled,\n required,\n valueLabelExtractor,\n values,\n onValuesUpdated,\n ...rest\n}) => {\n overrideRheostatStyles();\n const mainClass = cx(className, {\n __pebble__slider__disabled: !!disabled,\n __pebble__slider__large: !!large\n });\n\n const _values = Array.isArray(values) ? values.slice(0) : values || [];\n\n if (Array.isArray(values)) {\n if (!values[0] && rest.min !== undefined) {\n _values[0] = rest.min;\n }\n if (!values[1] && rest.max) {\n _values[1] = rest.max;\n }\n }\n\n return (\n <div className={mainClass}>\n <div className={sliderHeader}>\n <div style={large ? typography.normal.light : typography.normal.light}>\n {title}\n {required && <span style={{ color: colors.red.base }}>&nbsp;*</span>}\n </div>\n <div style={large ? typography.l.regular : typography.normal.regular}>\n {valueLabelExtractor\n ? valueLabelExtractor()\n : `${_values[0]} - ${_values[1]}`}\n </div>\n </div>\n <Rheostat\n aria-valuemax={rest.max}\n aria-valuemin={rest.min}\n disabled={disabled}\n onValuesUpdated={onValuesUpdated && (args => onValuesUpdated(args))}\n values={_values}\n {...rest}\n />\n </div>\n );\n};\n\nexport default Slider;\n","import { typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const headStyle = css({\n display: \"flex\",\n flexDirection: \"row\",\n position: \"relative\"\n});\n\nexport const headSection = css({\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n cursor: \"pointer\",\n \"> div\": {\n fontSize: 14\n }\n});\n\nexport const headingStyle = css({ ...typography.normal.regular });\n\nexport const dotStyle = css({\n height: 20,\n width: 20,\n backgroundColor: colors.gray.base,\n borderRadius: \"50%\",\n border: \"5px solid white\",\n marginTop: 18,\n position: \"relative\",\n zIndex: 9\n});\n\nexport const activeDotStyle = css({\n backgroundColor: colors.violet.base\n});\n\nexport const contentWrapper = css({\n marginTop: -10\n});\n\nexport const footerStyle = css({\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n marginTop: 50\n});\n\nexport const stepperLineStyle = css({\n height: 2,\n bottom: 9,\n position: \"absolute\",\n transition: \"width 100ms ease-out\",\n backgroundColor: colors.violet.base\n});\n","import * as React from \"react\";\nimport { css, cx } from \"emotion\";\nimport { StepperProps, StepperState } from \"./typings/Stepper\";\nimport Button from \"./Button\";\nimport {\n activeDotStyle,\n contentWrapper,\n dotStyle,\n footerStyle,\n headingStyle,\n headSection,\n headStyle,\n stepperLineStyle\n} from \"./styles/Stepper.styles\";\nimport { colors } from \"pebble-shared\";\n\nfunction noop() {}\n\nclass Stepper extends React.PureComponent<StepperProps, StepperState> {\n static defaultProps: Partial<StepperProps> = {\n allowSkip: true,\n cancelLabel: \"Cancel\",\n nextLabel: \"Next\",\n prevLabel: \"Prev\",\n doneLabel: \"Done\",\n onBeforeNext: () => true,\n onBeforePrev: () => true,\n onChange: () => {},\n onCancel: () => {},\n onDone: () => {},\n renderFooterElement: ({ leftButtonData, rightButtonData }, props) => {\n return (\n <footer className={footerStyle}>\n <Button\n size=\"large\"\n width={100}\n type={\"secondary\"}\n onClick={leftButtonData.action}\n >\n {leftButtonData.label}\n </Button>\n <Button\n size=\"large\"\n width={100}\n loading={props.isRightButtonLoading}\n onClick={rightButtonData.action}\n >\n {rightButtonData.label}\n </Button>\n </footer>\n );\n }\n };\n\n state: StepperState = {\n active: this.props.initialSelectedIndex || 0\n };\n\n private goToNextPage = async () => {\n const { onBeforeNext, data } = this.props;\n const allow = await onBeforeNext(this.state.active);\n if (allow) this.goToPage(Math.min(data.length - 1, this.state.active + 1));\n };\n\n private goToPrevPage = async () => {\n const allow = await this.props.onBeforePrev(this.state.active);\n if (allow) this.goToPage(Math.max(0, this.state.active - 1));\n };\n\n private goToPage = (index: number): void => {\n const prev = this.state.active;\n this.setState(\n {\n active: index\n },\n () =>\n this.props.onChange({\n prev,\n current: this.state.active\n })\n );\n };\n\n private getHeadings = (): string[] => {\n const { headingExtractor, data } = this.props;\n return data.map(datum => headingExtractor({ item: datum }));\n };\n\n private getLeftButtonData = () => {\n const { cancelLabel, prevLabel, onCancel } = this.props;\n return this.state.active === 0\n ? {\n label: cancelLabel,\n action: onCancel\n }\n : {\n label: prevLabel,\n action: this.goToPrevPage\n };\n };\n\n private getRightButtonData = () => {\n const { nextLabel, onDone, data, doneLabel } = this.props;\n return this.state.active === data.length - 1\n ? {\n label: doneLabel,\n action: onDone\n }\n : {\n label: nextLabel,\n action: this.goToNextPage\n };\n };\n\n render() {\n const {\n data,\n renderContentElement,\n keyExtractor,\n renderFooterElement,\n className,\n allowSkip\n } = this.props;\n\n const { active } = this.state;\n\n const args = {\n goToNext: this.goToNextPage,\n goToPage: this.goToPage,\n goToPrev: this.goToPrevPage,\n leftButtonData: this.getLeftButtonData(),\n rightButtonData: this.getRightButtonData()\n };\n\n return (\n <div className={className}>\n <div className={headStyle}>\n {this.getHeadings().map((heading, i) => {\n const dotClass = cx(dotStyle, {\n [activeDotStyle]: i <= active\n });\n\n const headingColor =\n i === active\n ? colors.violet.base\n : allowSkip\n ? colors.gray.base\n : undefined;\n\n return (\n <div\n key={keyExtractor(data[i])}\n className={cx(headSection, {\n [css({ cursor: \"inherit\" })]: !allowSkip\n })}\n onClick={allowSkip ? () => this.goToPage(i) : noop}\n >\n <div className={headingStyle} style={{ color: headingColor }}>\n {heading}\n </div>\n <div className={dotClass} />\n </div>\n );\n })}\n <div\n className={stepperLineStyle}\n style={{\n width: `${(100 / (2 * data.length)) * 2 * active}%`,\n marginLeft: `${100 / (2 * data.length)}%`\n }}\n />\n </div>\n\n <div className={contentWrapper}>\n {data.map((datum, i) => (\n <div\n key={keyExtractor(datum)}\n className={cx({\n [css({ display: \"none\" })]: i !== this.state.active\n })}\n >\n {renderContentElement({\n item: datum,\n isSelected: i === this.state.active,\n ...args\n })}\n </div>\n ))}\n\n {renderFooterElement(\n {\n activeIndex: this.state.active,\n ...args\n },\n this.props\n )}\n </div>\n </div>\n );\n }\n}\n\nexport default Stepper;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { typography } from \"../../theme\";\n\nexport const labelTextStyle = css({\n ...typography.s.bold,\n color: colors.gray.dark,\n marginRight: \"10px\"\n});\n\nexport const disabledStyle = css({ cursor: \"not-allowed\" });\n\nexport const labelStyle = css({\n width: \"28px\",\n height: \"14px\",\n backgroundColor: colors.gray.base,\n position: \"relative\",\n display: \"inline-block\",\n borderRadius: \"14px\",\n cursor: \"pointer\"\n});\n// for accessible and touch areas for ios android\nexport const fixedLabelStyle = css({\n padding: \"15px 0px\",\n display: \"flex\",\n cursor: \"pointer\",\n userSelect: \"none\"\n});\n\nexport const inputStyle = css({\n width: 0,\n height: 0,\n opacity: 0\n});\n\nexport const switchStyle = css({\n position: \"absolute\",\n height: \"10px\",\n width: \"10px\",\n left: \"2px\",\n bottom: \"2px\",\n borderRadius: \"50%\",\n backgroundColor: colors.white.base,\n transition: \".4s\"\n});\n\nexport const selectedLabel = css({ backgroundColor: colors.violet.base });\n\nexport const selectedSwitch = css({ transform: \"translateX(14px)\" });\n","import * as React from \"react\";\nimport { cx } from \"emotion\";\nimport {\n labelTextStyle,\n labelStyle,\n selectedLabel,\n inputStyle,\n selectedSwitch,\n switchStyle,\n fixedLabelStyle,\n disabledStyle\n} from \"./styles/Switch.styles\";\nimport { SwitchProps, SwitchState } from \"./typings/Switch\";\n\nexport default class Switch extends React.PureComponent<\n SwitchProps,\n SwitchState\n> {\n state = {\n value: this.props.initialValue || false\n };\n\n render() {\n const { onChange, className, label, disabled } = this.props;\n const { value } = this.state;\n\n return (\n <label\n className={cx(className, fixedLabelStyle, {\n [disabledStyle]: !!disabled\n })}\n >\n <span className={labelTextStyle}>{label}</span>\n <div\n className={cx(labelStyle, {\n [selectedLabel]: value,\n [disabledStyle]: !!disabled\n })}\n >\n <input\n type=\"checkbox\"\n checked={value}\n className={inputStyle}\n onChange={() => {\n this.setState({\n value: !value\n });\n if (onChange) {\n onChange(!value);\n }\n }}\n disabled={disabled}\n />\n <span\n className={cx({\n [switchStyle]: true,\n [selectedSwitch]: value\n })}\n />\n </div>\n </label>\n );\n }\n}\n","import { constants, mixins, typography } from \"../../theme\";\nimport { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const tagStyle = css({\n ...typography.s.bold,\n ...mixins.flexSpaceBetween,\n borderRadius: constants.borderRadius,\n padding: \"0 10px\",\n height: 28,\n alignItems: \"center\",\n justifyContent: \"center\",\n display: \"inline-flex\",\n lineHeight: \"10px\",\n \"&.__pebble__tag__with__close\": {\n paddingRight: 0\n }\n});\n\nexport const iconClass = css({\n fontSize: 7,\n marginLeft: 5,\n height: \"inherit\",\n padding: \"10px 10px\",\n cursor: \"pointer\",\n position: \"relative\",\n \":hover\": {\n backgroundColor: colors.violet.lighter,\n borderTopRightRadius: constants.borderRadius,\n borderBottomRightRadius: constants.borderRadius\n }\n});\n","import * as React from \"react\";\nimport { colors } from \"pebble-shared\";\nimport { tagStyle, iconClass } from \"./styles/Tag.styles\";\nimport { TagProps } from \"./typings/Tag\";\nimport { cx } from \"emotion\";\nimport Ink from \"react-ink\";\n\nconst Tag: React.FunctionComponent<TagProps> = ({\n label,\n color,\n onClose,\n className\n}) => {\n const wrapperClassName = cx(tagStyle, {\n __pebble__tag__with__close: !!onClose\n });\n const _className = cx(wrapperClassName, className);\n return (\n <div\n className={_className}\n style={{\n color: colors[color].base,\n // @ts-ignore\n backgroundColor: colors[color].lightest || colors[color].light\n }}\n >\n {label}{\" \"}\n {onClose && (\n <i onClick={onClose} className={cx(\"pi\", \"pi-close\", iconClass)}>\n <Ink />\n </i>\n )}\n </div>\n );\n};\n\nexport default Tag;\n","import React from \"react\";\nimport { css, cx } from \"emotion\";\nimport { colors } from \"pebble-shared\";\nimport { TextProps } from \"./typings/Text\";\n\nconst Text: React.FunctionComponent<TextProps> = ({\n typography,\n color = colors.gray.darker,\n children,\n className\n}) => {\n const _className = css({\n ...typography,\n color\n });\n\n return <span className={cx(_className, className)}>{children}</span>;\n};\n\nexport default Text;\n","import { css } from \"emotion\";\nimport { colors } from \"pebble-shared\";\n\nexport const timePickerWrap = css({\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${colors.gray.light}`,\n borderRadius: \"3px\",\n cursor: \"pointer\",\n \"&:not([disabled]):hover\": {\n background: colors.gray.light\n }\n});\n\nexport const timePickerSelected = css({\n backgroundColor: colors.gray.lighter\n});\n\nexport const hourPicker = css({\n borderRadius: \"3px 0px 0px 3px\",\n borderRight: \"none\"\n});\n\nexport const seperator = css({\n color: colors.gray.dark,\n lineHeight: \"40px\"\n});\n\nexport const minutePicker = css({\n borderLeft: \"none\",\n borderRadius: \"0px 3px 3px 0px\"\n});\n\nexport const optionStyle = css({\n width: \"100px\"\n});\n","import * as React from \"react\";\nimport DropDown from \"./DropDown\";\nimport Option from \"./Option\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\nimport { cx, css } from \"emotion\";\nimport {\n timePickerWrap,\n timePickerSelected,\n hourPicker,\n minutePicker,\n optionStyle,\n seperator\n} from \"./styles/TimePicker.styles\";\nimport { TimePickerProps } from \"./typings/TimePicker\";\nimport { colors } from \"pebble-shared\";\n\nconst HOURS = /*#__PURE__*/ [...Array(12)].map((_, i) =>\n (\"00\" + (i + 1).toString(10)).slice(-2)\n);\nconst TWENTY_FOUR_HOURS = /*#__PURE__*/ [...Array(24)].map((_, i) =>\n (\"00\" + i.toString(10)).slice(-2)\n);\nconst MINUTES = /*#__PURE__*/ [...Array(4)].map((_, i) =>\n (\"00\" + (i * 15).toString(10)).slice(-2)\n);\n\nexport const iconStyle = css({\n marginLeft: 15,\n fontWeight: \"bold\",\n fontSize: 8,\n transition: \"transform ease-out .2s\",\n willTransform: \"transform\",\n marginTop: 2,\n color: colors.gray.dark,\n display: \"inline-block\"\n});\n\nexport const buttonStyle = css({\n padding: \"15px 20px\",\n fontSize: \"12px\",\n color: colors.gray.darker,\n lineHeight: \"9px\",\n width: \"105px\"\n});\n\nconst modifiers = {\n preventOverflow: {\n enabled: false\n },\n flip: {\n enabled: false\n }\n};\n\nconst TimePicker: React.FunctionComponent<TimePickerProps> = props => {\n const {\n selectedHour,\n selectedMinute,\n onHourChange,\n onMinuteChange,\n twentyFourHourFormat\n } = props;\n const selected = !!selectedHour || selectedMinute !== undefined;\n\n return (\n <div\n className={cx({\n [timePickerWrap]: true,\n [timePickerSelected]: selected\n })}\n >\n <DropDown\n labelClassName={hourPicker}\n isSelected={selected}\n labelComponent={({ isOpen, toggleDropdown }) => (\n <div\n onClick={() => {\n toggleDropdown();\n }}\n className={buttonStyle}\n data-test-id=\"hour-label\"\n >\n <span className={css({ marginRight: \"15px\" })}>\n {selectedHour !== undefined\n ? (\"00\" + selectedHour).slice(-2)\n : \"Hrs\"}\n </span>\n <span>\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{ transform: isOpen ? \"rotate(180deg)\" : \"none\" }}\n />\n </span>\n </div>\n )}\n placement=\"bottom-start\"\n modifiers={modifiers}\n >\n {({ toggle }) => (\n <OptionGroupRadio\n onChange={value => {\n if (value !== undefined) {\n onHourChange(value);\n }\n toggle();\n }}\n selected={selectedHour}\n className={optionStyle}\n >\n {(twentyFourHourFormat ? TWENTY_FOUR_HOURS : HOURS).map(hour => (\n <Option\n key={hour}\n value={parseInt(hour, 10)}\n label={hour}\n className={optionStyle}\n />\n ))}\n </OptionGroupRadio>\n )}\n </DropDown>\n <span className={seperator}>:</span>\n <DropDown\n labelClassName={minutePicker}\n isSelected={selected}\n labelComponent={({ isOpen, toggleDropdown }) => (\n <div\n onClick={() => {\n toggleDropdown();\n }}\n className={buttonStyle}\n data-test-id=\"minute-label\"\n >\n <span className={css({ marginRight: \"15px\" })}>\n {selectedMinute !== undefined\n ? (\"00\" + selectedMinute).slice(-2)\n : \"mins\"}\n </span>\n <i\n className={cx(\"pi pi-arrow-drop-down\", iconStyle)}\n style={{ transform: isOpen ? \"rotate(180deg)\" : \"none\" }}\n />\n </div>\n )}\n placement=\"bottom-start\"\n modifiers={modifiers}\n >\n {({ toggle }) => (\n <OptionGroupRadio\n onChange={value => {\n if (value !== undefined) {\n onMinuteChange(value);\n }\n toggle();\n }}\n selected={selectedMinute}\n className={optionStyle}\n >\n {MINUTES.map(min => (\n <Option\n key={min}\n value={parseInt(min, 10)}\n label={min}\n className={optionStyle}\n />\n ))}\n </OptionGroupRadio>\n )}\n </DropDown>\n </div>\n );\n};\n\nexport default TimePicker;\n","import { css } from \"emotion\";\nimport { typography } from \"../../theme\";\nimport { colors } from \"pebble-shared\";\n\nexport const textStyle = css({\n ...typography.s.regular,\n color: colors.white.base,\n display: \"block\",\n padding: \"10px 16px\"\n});\n\nexport const popperStyle = css({\n margin: 4,\n boxShadow: \"none\",\n maxWidth: 320\n});\n","import * as React from \"react\";\nimport Popper from \"./Popper\";\nimport { TooltipProps, TooltipState } from \"./typings/Tooltip\";\nimport { colors } from \"pebble-shared\";\nimport { popperStyle, textStyle } from \"./styles/Tooltip.styles\";\nimport { cx } from \"emotion\";\n\nclass Tooltip extends React.PureComponent<TooltipProps, TooltipState> {\n state = {\n isOpen: !!this.props.isOpen\n };\n\n private defaultTooltip = () => (\n <span className={textStyle}>{this.props.text}</span>\n );\n\n private showTooltip = () => {\n if (this.props.disabled) return;\n this.setState({\n isOpen: true\n });\n };\n\n private hideTooltip = () => {\n this.setState({\n isOpen: false\n });\n };\n\n render() {\n const {\n placement,\n label,\n modifiers,\n isError,\n popperClassName\n } = this.props;\n\n return (\n <Popper\n label={() =>\n label({\n onMouseEnter: this.showTooltip,\n onMouseLeave: this.hideTooltip\n })\n }\n placement={placement}\n controlled\n popperBackgroundColor={isError ? colors.red.base : colors.gray.darker}\n modifiers={modifiers}\n isOpen={this.props.isOpen || this.state.isOpen}\n popperClassName={cx(popperStyle, popperClassName)}\n closeOnOutsideClick={false}\n >\n {this.props.renderElement || this.defaultTooltip}\n </Popper>\n );\n }\n}\n\nexport default Tooltip;\n","import { css } from \"emotion\";\nimport { constants } from \"../../theme\";\n\nexport const wrapper = css({\n position: \"relative\"\n});\n\nexport const optionsWrapper = css({\n width: \"100%\",\n position: \"absolute\",\n marginTop: -40,\n zIndex: 999,\n boxShadow: constants.boxShadow.elevated,\n transformOrigin: \"0 0\"\n});\n","import * as React from \"react\";\nimport debounce from \"just-debounce-it\";\nimport {\n TypeaheadProps,\n TypeaheadState,\n SearchBoxArgs\n} from \"./typings/Typeahead\";\nimport { cx } from \"emotion\";\nimport Input from \"./Input\";\nimport { optionsWrapper, wrapper } from \"./styles/TypeAhead.styles\";\nimport OutsideClick from \"./OutsideClick\";\nimport OptionGroupRadio from \"./OptionGroupRadio\";\nimport { animated } from \"react-spring\";\nimport MountTransition from \"./shared/MountTransition\";\n\nfunction defaultSearchBox<OptionType>(\n { registerChange, onFocus, value }: SearchBoxArgs,\n props: TypeaheadProps<OptionType> & Required<typeof TypeAhead.defaultProps>\n) {\n const _inputProps = props.inputProps\n ? {\n ...props.inputProps.inputProps\n }\n : {};\n return (\n <Input\n {...props.inputProps}\n onChange={registerChange}\n placeholder={props.placeholder}\n inputProps={{\n ..._inputProps,\n onFocus,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n if (e.keyCode === 8 && props.selected) {\n // keyCode for delete\n registerChange(\"\");\n props.onClear();\n }\n }\n }}\n value={value}\n errorMessage={props.errorMessage}\n loading={props.loading}\n required={props.required}\n disabled={props.disabled}\n />\n );\n}\n\nexport default class TypeAhead<OptionType> extends React.PureComponent<\n TypeaheadProps<OptionType> & Required<typeof TypeAhead.defaultProps>,\n TypeaheadState\n> {\n static defaultProps = {\n debounceTime: 500,\n onClear: () => {}\n };\n\n state: TypeaheadState = {\n value: this.props.initialValue || \"\",\n showSuggestions: false\n };\n\n private onChange = () => {\n this.props.onChange(this.state.value, this.props);\n };\n\n private debouncedChange = debounce(this.onChange, this.props.debounceTime);\n\n private registerChange = (value: string) => {\n this.setState(\n {\n value\n },\n this.debouncedChange\n );\n };\n\n private onFocus = () => {\n this.setState({\n showSuggestions: true\n });\n };\n\n private onSelect = (_value?: OptionType) => {\n this.props.onSelect(_value, this.props);\n\n this.setState({\n showSuggestions: false,\n value: (_value && this.props.valueExtractor(_value)) || \"\"\n });\n };\n\n render() {\n const {\n className,\n searchBox = defaultSearchBox,\n dropdownClassName,\n children\n } = this.props;\n\n const { showSuggestions, value } = this.state;\n\n return (\n <OutsideClick\n onOutsideClick={() =>\n this.setState({\n showSuggestions: false\n })\n }\n disabled={!showSuggestions}\n className={cx(wrapper, className)}\n >\n {searchBox(\n {\n registerChange: this.registerChange,\n onFocus: this.onFocus,\n value\n },\n this.props\n )}\n\n <MountTransition visible={showSuggestions}>\n {transitionStyles => (\n <animated.div\n style={transitionStyles}\n className={cx(optionsWrapper, dropdownClassName)}\n >\n <OptionGroupRadio onChange={this.onSelect}>\n {children}\n </OptionGroupRadio>\n </animated.div>\n )}\n </MountTransition>\n </OutsideClick>\n );\n }\n}\n","export function capitalize(str: string): string {\n return str\n ? str\n .split(\" \")\n .map(s => s.charAt(0).toUpperCase() + s.slice(1))\n .join(\" \")\n : str;\n}\n","export function getShortenedNumber(\n num?: number | null,\n toFixed: number = 1\n): string | undefined {\n let formattedNum: string;\n if (!num && num !== 0) {\n return;\n }\n\n if (num >= 10000000) {\n formattedNum = (num / 10000000).toFixed(toFixed) + \" Cr\";\n } else if (num >= 100000) {\n formattedNum = (num / 100000).toFixed(toFixed) + \" L\";\n } else if (num >= 1000) {\n formattedNum = (num / 1000).toFixed(toFixed) + \" K\";\n } else if (num !== Math.floor(num)) {\n // has decimal part\n formattedNum = `${num.toFixed(toFixed)}`;\n } else {\n formattedNum = `${num}`;\n }\n return formattedNum;\n}\n","import isBrowser from \"is-in-browser\";\n\ndeclare global {\n interface Window {\n GoogleAnalyticsObject: string;\n ga: UniversalAnalytics.ga;\n }\n}\n\nexport function initGoogleAnalytics(gaId: string) {\n if (isBrowser) {\n ((s, o, g) => {\n window.GoogleAnalyticsObject = \"ga\";\n window.ga =\n window.ga ||\n (() => {\n (window.ga.q = window.ga.q || []).push(arguments);\n });\n window.ga.l = Date.now();\n const a = s.createElement(o) as HTMLScriptElement;\n const m = s.getElementsByTagName(o)[0];\n a.async = true;\n a.src = g;\n if (m.parentNode) m.parentNode.insertBefore(a, m);\n })(document, \"script\", \"https://www.google-analytics.com/analytics.js\");\n\n window.ga(\"create\", gaId, \"auto\");\n window.ga(\"send\", \"pageview\");\n }\n}\n"],"names":["colors","_css","React.createElement","inputStyle","_cx","React.createRef","React.Children","React.Component","disabledStyle","popperStyle"],"mappings":"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"}