@purple/phoenix-components 5.7.0 → 5.9.0

package/dist/index.d.ts

@@ -4,22 +4,22 @@ import { DefaultTheme, IntrinsicElementsKeys } from 'styled-components';
 import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, BorderProps, DisplayProps } from 'styled-system';
 import * as CSS from 'csstype';
 import { Props } from 'react-select';
-import { DayPickerProps } from 'react-day-picker';
+import { DayPickerSingleProps, DayPickerProps, DayPickerRangeProps } from 'react-day-picker';
 import { Props as Props$1 } from 'tippy.js';
 import { Accept } from 'react-dropzone';
 import { TippyProps } from '@tippyjs/react';
 export { TabPanel, Tabs } from 'react-tabs';
 
-declare type GenericComponentProps = {
+type GenericComponentProps = {
     testId?: string;
     className?: string;
 };
 
-declare type CSSValue = (string & {}) | number;
-declare type CSSColor = string & {};
+type CSSValue = (string & {}) | number;
+type CSSColor = string & {};
 
 declare const Spacing: readonly ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
-declare type Spacing = typeof Spacing[number];
+type Spacing = typeof Spacing[number];
 declare const isSpacing: (size?: Spacing | CSSValue) => size is "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 declare const getSpacingCssValue: (theme: DefaultTheme, value?: Spacing | CSSValue, defaultValue?: string) => string;
 
@@ -44,25 +44,25 @@ interface PaddingProps {
 }
 
 declare const ColorTheme: readonly ["brand", "success", "warning", "error", "info", "neutral"];
-declare type ColorTheme = typeof ColorTheme[number];
+type ColorTheme = typeof ColorTheme[number];
 declare const isColorTheme: (color?: Color) => color is "brand" | "success" | "warning" | "error" | "info" | "neutral";
 declare const TextColor: readonly ["primary", "secondary", "tertiary", "quaternary"];
-declare type TextColor = typeof TextColor[number];
+type TextColor = typeof TextColor[number];
 declare const isTextColor: (color?: Color) => color is "primary" | "secondary" | "tertiary" | "quaternary";
-declare type Color = TextColor | ColorTheme | CSSColor;
+type Color = TextColor | ColorTheme | CSSColor;
 
 declare const Sizing: readonly ["xs", "sm", "md", "lg"];
-declare type Sizing = typeof Sizing[number];
+type Sizing = typeof Sizing[number];
 declare const isSizing: (size?: Sizing | CSSValue) => size is "xs" | "sm" | "md" | "lg";
 declare const SizingSmMd: readonly ["sm", "md"];
-declare type SizingSmMd = typeof SizingSmMd[number];
+type SizingSmMd = typeof SizingSmMd[number];
 declare const SizingMdLg: readonly ["md", "lg"];
-declare type SizingMdLg = typeof SizingMdLg[number];
+type SizingMdLg = typeof SizingMdLg[number];
 declare const SizingSmMdLg: readonly ["sm", "md", "lg"];
-declare type SizingSmMdLg = typeof SizingSmMdLg[number];
+type SizingSmMdLg = typeof SizingSmMdLg[number];
 
 declare const TextAlignment: readonly ["left", "center", "right", "justify"];
-declare type TextAlignment = typeof TextAlignment[number];
+type TextAlignment = typeof TextAlignment[number];
 
 interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
     color?: Color;
@@ -86,7 +86,7 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, Layout
 declare const Box: React$1.FC<BoxProps>;
 
 declare const IconAlignment: readonly ["left", "right"];
-declare type IconAlignment = typeof IconAlignment[number];
+type IconAlignment = typeof IconAlignment[number];
 
 declare const PhoenixIconsOutlinedSrc: {
     readonly actions: string;
@@ -288,14 +288,14 @@ declare const PhoenixIconsSrc: {
     readonly withdrawal: string;
     readonly wrench: string;
 };
-declare const PhoenixIconsOutlined: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
-declare type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
+declare const PhoenixIconsOutlined: ("search" | "filter" | "revert" | "document" | "list" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
+type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
 declare const PhoenixIconsColored: ("browser-brand" | "calendar-brand" | "camera-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
-declare type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
-declare const PhoenixIcons: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "browser-brand" | "calendar-brand" | "camera-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
-declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
+type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
+declare const PhoenixIcons: ("search" | "filter" | "revert" | "document" | "list" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lightning" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "browser-brand" | "calendar-brand" | "camera-brand" | "driving-licence-brand" | "email-brand" | "exclamation-error" | "exclamation-warning" | "house-brand" | "id-card-brand" | "language-brand" | "lock-brand" | "lock-success" | "paper-brand" | "passport-brand" | "photo-user-brand" | "pin-brand" | "question-circle-brand" | "smartphone-brand" | "star-brand" | "star-warning" | "trash-error")[];
+type PhoenixIcons = keyof typeof PhoenixIconsSrc;
 
-declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
+type IconType = PhoenixIconsOutlined | React.ReactElement | string;
 
 interface CommonButtonProps extends MarginProps {
     colorTheme?: ColorTheme;
@@ -326,8 +326,8 @@ interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
 }
 declare const Card: React$1.FC<PropsWithChildren<CardProps>>;
 
-declare type FormControlWarningType = ReactElement | string;
-declare type FormControlErrorType = ReactElement | string | boolean;
+type FormControlWarningType = ReactElement | string;
+type FormControlErrorType = ReactElement | string | boolean;
 
 interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
     colorTheme?: ColorTheme;
@@ -337,8 +337,8 @@ interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputEle
     error?: FormControlErrorType;
 }
 
-declare type CheckboxProps = CheckboxRadioCommonProps;
-declare const Checkbox: React$1.VoidFunctionComponent<CheckboxProps>;
+type CheckboxProps = CheckboxRadioCommonProps;
+declare const Checkbox: React$1.FC<CheckboxProps>;
 
 interface ClosableButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
     onClose?: React$1.MouseEventHandler<HTMLButtonElement>;
@@ -441,14 +441,11 @@ interface DateInputProps extends GenericComponentProps {
 }
 declare const DateInput: React$1.FC<DateInputProps>;
 
-interface CommonDatePickerProps extends GenericComponentProps, Pick<DayPickerProps, 'className' | 'selectedDays' | 'modifiers' | 'onDayClick' | 'locale' | 'months' | 'weekdaysLong' | 'weekdaysShort'> {
-    dayPickerProps?: DayPickerProps;
-    yearMonthSelect?: boolean;
-}
-
-interface DatePickerProps extends CommonDatePickerProps, GenericComponentProps {
+interface DatePickerProps extends DayPickerSingleProps, GenericComponentProps {
     value: Date | null;
     onChange: (date: Date | null) => void;
+    dayPickerProps?: DayPickerProps;
+    yearMonthSelect?: boolean;
 }
 declare const DatePicker: React$1.FC<DatePickerProps>;
 
@@ -456,9 +453,11 @@ interface DateRangeValue {
     from: Date | null;
     to: Date | null;
 }
-interface DateRangePickerProps extends CommonDatePickerProps, GenericComponentProps {
+interface DateRangePickerProps extends DayPickerRangeProps, GenericComponentProps {
     value: DateRangeValue;
     onChange: (dates: DateRangeValue) => void;
+    dayPickerProps?: DayPickerProps;
+    yearMonthSelect?: boolean;
 }
 declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
 
@@ -509,7 +508,7 @@ declare const Flex: React$1.FC<BoxProps>;
 
 declare const Grid: React$1.FC<BoxProps>;
 
-declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
     element?: HeadingElement;
 }
@@ -536,7 +535,7 @@ interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, '
 }
 declare const Image: React$1.FC<ImageProps>;
 
-declare type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
+type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
 declare const Label: React$1.FC<LabelProps>;
 
 interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
@@ -601,7 +600,7 @@ interface MultiSelectProps<Option extends SelectOption = SelectOption> extends C
 }
 declare const MultiSelect: <Option extends SelectOption = SelectOption>({ value, testId, ...props }: MultiSelectProps<Option>) => React$1.ReactElement;
 
-declare type SubRange = number | [number] | [number, number];
+type SubRange = number | [number] | [number, number];
 interface CommonSliderProps extends GenericComponentProps {
     range: {
         min: SubRange;
@@ -612,7 +611,7 @@ interface CommonSliderProps extends GenericComponentProps {
     step?: number;
 }
 
-declare type MultiSliderValue = (number | string)[];
+type MultiSliderValue = (number | string)[];
 interface MultiSliderProps extends CommonSliderProps {
     value: MultiSliderValue;
     onChange(value: MultiSliderValue): void;
@@ -640,7 +639,7 @@ interface ParagraphProps extends CommonTextProps<HTMLParagraphElement>, PaddingP
 }
 declare const Paragraph: React$1.FC<ParagraphProps>;
 
-declare type RadioProps = CheckboxRadioCommonProps;
+type RadioProps = CheckboxRadioCommonProps;
 declare const Radio: React$1.VoidFunctionComponent<RadioProps>;
 
 interface SelectNativeProps<Option extends SelectOption = SelectOption> extends FormControlProps {
@@ -676,7 +675,7 @@ interface SelectPickerOption {
 }
 declare const SelectPicker: React$1.FC<SelectPickerProps>;
 
-declare type SliderValue = number | string;
+type SliderValue = number | string;
 interface SliderProps extends CommonSliderProps, GenericComponentProps {
     value: SliderValue;
     onChange(value: SliderValue): void;
@@ -706,12 +705,12 @@ interface TabProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>,
     tabIndex?: string;
     id?: string;
 }
-declare type TabFunctionProps = React$1.ForwardRefExoticComponent<TabProps> & {
+type TabFunctionProps = React$1.ForwardRefExoticComponent<TabProps> & {
     tabsRole?: 'Tab';
 } & React$1.RefAttributes<HTMLAnchorElement>;
 declare const Tab: TabFunctionProps;
 
-declare type TabListProps = GenericComponentProps & TabListCommonProps;
+type TabListProps = GenericComponentProps & TabListCommonProps;
 declare const TabList: React$1.FC<PropsWithChildren<TabListProps>> & {
     tabsRole: 'TabList';
 };
@@ -739,7 +738,7 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
 }
 declare const TextInput: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<TextInputProps> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
+type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
 declare const TimezonePicker: React$1.FC<TimezonePickerProps>;
 
 declare const getOptions: () => SelectOption[];
@@ -752,7 +751,7 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
 }
 declare const Toggle: React$1.FC<ToggleProps>;
 
-declare type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
+type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
 declare const Tooltip: React$1.FC<TooltipProps>;
 
 declare const prefixedTheme: {

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@purple/phoenix-components",
-	"version": "5.7.0",
+	"version": "5.9.0",
 	"description": "",
 	"main": "dist/bundle.umd.js",
 	"module": "dist/bundle.esm.js",
 	"types": "dist/index.d.ts",
 	"sideEffects": false,
 	"engines": {
-		"node": ">=12"
+		"node": ">=18"
 	},
 	"files": [
 		"dist"
@@ -36,13 +36,13 @@
 		"prepare": "husky install",
 		"prebuild": "rimraf dist",
 		"dev": "npm run storybook",
-		"storybook": "start-storybook -p 6006",
-		"storybook:build": "build-storybook -c .storybook",
+		"storybook": "storybook dev -p 6006",
+		"storybook:build": "storybook build -c .storybook",
 		"predeploy": "npm run storybook:build",
 		"release:feature": "standard-version && git push --follow-tags",
 		"release:publish": "npm run build && npm publish --access public && npm run deploy-storybook",
 		"deploy-storybook": "npm run storybook:build && cp -r .circleci storybook-static && cp -r storybook-build-v4 storybook-static/v4 && storybook-to-ghpages -e=storybook-static",
-		"snapshot": "build-storybook -c .storybook && percy storybook ./storybook-static",
+		"snapshot": "storybook build -c .storybook && percy storybook ./storybook-static",
 		"percy": "if [[ $(git rev-parse --symbolic-full-name --abbrev-ref HEAD) != \"master\" ]]; then percy storybook ./storybook-static; else echo \"ERROR: percy should not be run on master because these snapshots are auto-approved\"; fi;",
 		"test": "jest"
 	},
@@ -61,7 +61,7 @@
 		"lodash": "~4.17.21",
 		"nanoid": "~3.3.4",
 		"nouislider": "~15.6.1",
-		"react-day-picker": "~7.4.10",
+		"react-day-picker": "^8.7.1",
 		"react-dropzone": "~14.2.2",
 		"react-inlinesvg": "~3.0.1",
 		"react-pdf": "~5.7.2",
@@ -75,26 +75,32 @@
 		"styled-components": ">=5.3"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.19.1",
-		"@babel/preset-env": "^7.19.1",
+		"@babel/core": "^7.21.8",
+		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+		"@babel/preset-env": "^7.21.5",
 		"@babel/preset-react": "^7.18.6",
-		"@babel/preset-typescript": "^7.18.6",
+		"@babel/preset-typescript": "^7.21.5",
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
-		"@percy/cli": "^1.17.0",
-		"@percy/storybook": "^4.3.4",
+		"@ironkinoko/rollup-plugin-styles": "^4.0.3",
+		"@percy/cli": "^1.26.0",
+		"@percy/storybook": "^4.3.6",
 		"@pxblue/storybook-rtl-addon": "^1.0.1",
 		"@rollup/plugin-json": "^6.0.0",
-		"@rollup/plugin-node-resolve": "^13.0.4",
-		"@rollup/plugin-typescript": "^8.2.1",
-		"@rollup/plugin-url": "^6.0.0",
-		"@storybook/addon-a11y": "^6.5.12",
-		"@storybook/addon-docs": "^6.5.12",
-		"@storybook/addon-essentials": "^6.5.12",
-		"@storybook/addon-links": "^6.5.12",
-		"@storybook/addon-viewport": "^6.5.12",
-		"@storybook/react": "^6.5.12",
-		"@storybook/storybook-deployer": "^2.8.10",
+		"@rollup/plugin-node-resolve": "^15.0.2",
+		"@rollup/plugin-terser": "^0.4.3",
+		"@rollup/plugin-typescript": "^11.1.1",
+		"@rollup/plugin-url": "^8.0.1",
+		"@storybook/addon-a11y": "^7.0.21",
+		"@storybook/addon-docs": "^7.0.21",
+		"@storybook/addon-essentials": "^7.0.21",
+		"@storybook/addon-links": "^7.0.21",
+		"@storybook/addon-mdx-gfm": "^7.0.21",
+		"@storybook/addon-viewport": "^7.0.21",
+		"@storybook/blocks": "^7.0.21",
+		"@storybook/react": "^7.0.21",
+		"@storybook/react-webpack5": "^7.0.21",
+		"@storybook/storybook-deployer": "^2.8.16",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",
 		"@types/countries-and-timezones": "^3.2.3",
@@ -116,6 +122,7 @@
 		"eslint-plugin-react": "^7.23.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",
+		"eslint-plugin-storybook": "^0.6.12",
 		"husky": "^7.0.1",
 		"jest": "^27.2.4",
 		"lint-staged": "^12.0.0",
@@ -124,15 +131,15 @@
 		"react": "^18.2.0",
 		"react-docgen-typescript-loader": "^3.1.1",
 		"react-dom": "^18.2.0",
+		"react-is": "^18.2.0",
+		"remark-gfm": "^3.0.1",
 		"rimraf": "^3.0.0",
-		"rollup": "^2.63.0",
-		"rollup-plugin-dts": "^4.0.0",
+		"rollup": "^3.22.0",
+		"rollup-plugin-dts": "^5.3.0",
 		"rollup-plugin-peer-deps-external": "^2.2.0",
-		"rollup-plugin-styles": "^4.0.0",
-		"rollup-plugin-terser": "^7.0.2",
 		"standard-version": "^9.3.0",
-		"storybook-addon-designs": "^6.0.0",
-		"storybook-design-token": "^2.8.2",
+		"storybook": "^7.0.21",
+		"storybook-design-token": "^3.0.0-beta.3",
 		"style-dictionary": "^3.7.2",
 		"styled-components": "^5.3.5",
 		"ts-node": "^10.9.1",