@servicetitan/design-system 14.0.0 → 14.0.1

package/dist/components/Takeover/Takeover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Takeover.js","sourceRoot":"","sources":["../../../src/components/Takeover/Takeover.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { Overlay } from '../../internal/Overlay';\nimport { wrapWithComponent } from '../../utilities/wrapWithComponent';\nimport { useFocusTrap, UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { TakeoverHeader, TakeoverHeaderProps } from './TakeoverHeader';\nimport { TakeoverSection, TakeoverSectionProps } from './TakeoverSection';\nimport { TakeoverFooter, TakeoverFooterProps } from './TakeoverFooter';\n\nexport interface TakeoverPropsStrict {\n\t/** Content for Action area next to close button */\n\tactions?: TakeoverHeaderProps['actions'];\n\n\t/**\n\t * Use animation for show/hide transitions\n\t * Defaults to false because Takeovers are used as full page layouts\n\t */\n\tanimate?: boolean;\n\n\t/** Label for Back button. Turns Back button into `Back to {backLabel}` button */\n\tbackLabel?: TakeoverHeaderProps['backLabel'];\n\n\t/** Add <ProgressTracker.Step> components to be rendered in the <ProgressTracker> */\n\tchildren: TakeoverSectionProps['children'];\n\n\t/** Adds one or more classnames to an element */\n\tclassName?: string;\n\n\t/** Adds one or more classnames to TakeoverContent */\n\tcontentWrapperClass?: string;\n\n\t/** Footer Elements */\n\tfooter?: TakeoverFooterProps['children'];\n\n\t/** Align TakeoverFooter content using flexbox justify-content properties */\n\tfooterAlign?: TakeoverFooterProps['align'];\n\n\t/** False will automatically wrap children with <Takeover.Section /> */\n\tsectioned?: boolean;\n\n\t/** If passed an onBack function, <Takeover.Header> gets a Back button in the top right */\n\tonBack?: TakeoverHeaderProps['onBack'];\n\n\t/** If passed an onClose function, <Takeover.Header> gets a Close button in the top right */\n\tonClose?: TakeoverHeaderProps['onClose'];\n\n\t/** Set visibility of the Takeover */\n\topen?: boolean;\n\n\t/** Theme of Takeover */\n\ttheme?: TakeoverHeaderProps['theme'];\n\n\t/** Name of Takeover */\n\ttitle: TakeoverHeaderProps['title'];\n\n\t/** Render in a React Portal */\n\tportal?: boolean;\n\n\t/** Options passed into useFocusTrap */\n\tfocusTrapOptions?: UseFocusTrapProps;\n}\n\nexport interface TakeoverProps extends TakeoverPropsStrict {\n\t[propName: string]: any;\n}\n\nexport interface Takeover extends FC<TakeoverProps> {\n\tHeader: typeof TakeoverHeader;\n\tSection: typeof TakeoverSection;\n\tFooter: typeof TakeoverFooter;\n}\n\nexport const Takeover: Takeover = ({\n\tactions,\n\tanimate = false,\n\tbackLabel,\n\tchildren,\n\tclassName,\n\tcontentWrapperClass,\n\tfocusTrapOptions,\n\tfooter,\n\tfooterAlign = TakeoverFooter.defaultProps.align,\n\tonBack,\n\tonClose,\n\topen = true,\n\tportal = true,\n\tsectioned,\n\ttheme = TakeoverHeader.defaultProps.theme,\n\ttitle,\n\t...props\n}) => {\n\tReact.useEffect(() => {\n\t\tif (open) {\n\t\t\tdocument.body.classList.add('Takeover--is-open');\n\t\t} else {\n\t\t\tconst otherOpenTakeovers =\n\t\t\t\tdocument.getElementsByClassName('Takeover').length > 0;\n\t\t\tif (otherOpenTakeovers) {\n\t\t\t\tdocument.body.classList.add('Takeover--is-open');\n\t\t\t}\n\t\t}\n\n\t\treturn () => document.body.classList.remove('Takeover--is-open');\n\t}, [open]);\n\n\t// Focus trapping\n\tconst takeoverRef = useFocusTrap({\n\t\tautoFocusContainer: true,\n\t\tdisabled: !open,\n\t\t...focusTrapOptions,\n\t});\n\n\tconst headerProps = {\n\t\tactions,\n\t\tbackLabel,\n\t\tonBack,\n\t\tonClose,\n\t\ttheme,\n\t\ttitle,\n\t};\n\n\tconst footerProps = {\n\t\talign: footerAlign,\n\t\tchildren: footer,\n\t};\n\n\tconst TakeoverClasses = classnames(\n\t\t'Takeover',\n\t\tclassName,\n\t\t`Takeover--${theme}`\n\t);\n\n\tconst contentWrapperClasses = classnames(\n\t\t'TakeoverContent',\n\t\tcontentWrapperClass\n\t);\n\n\tconst content = wrapWithComponent(children, TakeoverSection);\n\n\tconst duration: number = parseInt(tokens.durationStandard, 10) / 1000; // '200ms' -> 0.2\n\tconst framerAnimation = {\n\t\tinitial: { opacity: 0, y: 50 },\n\t\tanimate: { opacity: 1, y: 0 },\n\t\texit: { opacity: 0, y: 50 },\n\t\ttransition: { type: 'easeInOut', duration },\n\t};\n\n\tconst Animate = animate ? AnimatePresence : React.Fragment;\n\tconst TakeoverEl = animate ? motion.div : 'div';\n\tconst TakeoverProps = {\n\t\tclassName: TakeoverClasses,\n\t\tref: takeoverRef,\n\t\t...(animate && framerAnimation),\n\t\t...props,\n\t};\n\n\treturn (\n\t\t<Overlay portal={portal} animate={animate} open={open}>\n\t\t\t<Animate>\n\t\t\t\t{open && (\n\t\t\t\t\t<TakeoverEl\n\t\t\t\t\t\tdata-anvil-component=\"Takeover\"\n\t\t\t\t\t\t{...TakeoverProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TakeoverHeader {...headerProps} />\n\t\t\t\t\t\t<div className={contentWrapperClasses}>{content}</div>\n\t\t\t\t\t\t<TakeoverFooter {...footerProps} />\n\t\t\t\t\t</TakeoverEl>\n\t\t\t\t)}\n\t\t\t</Animate>\n\t\t</Overlay>\n\t);\n};\n\nTakeover.Header = TakeoverHeader;\nTakeover.Section = TakeoverSection;\nTakeover.Footer = TakeoverFooter;\n"]}
+{"version":3,"file":"Takeover.js","sourceRoot":"","sources":["../../../src/components/Takeover/Takeover.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { Overlay } from '../../internal/Overlay';\nimport { wrapWithComponent } from '../../utilities/wrapWithComponent';\nimport { useFocusTrap, UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { TakeoverHeader, TakeoverHeaderProps } from './TakeoverHeader';\nimport { TakeoverSection, TakeoverSectionProps } from './TakeoverSection';\nimport { TakeoverFooter, TakeoverFooterProps } from './TakeoverFooter';\n\nexport interface TakeoverPropsStrict {\n\t/** Content for Action area next to close button */\n\tactions?: TakeoverHeaderProps['actions'];\n\n\t/**\n\t * Use animation for show/hide transitions\n\t * Defaults to false because Takeovers are used as full page layouts\n\t */\n\tanimate?: boolean;\n\n\t/** Label for Back button. Turns Back button into `Back to {backLabel}` button */\n\tbackLabel?: TakeoverHeaderProps['backLabel'];\n\n\t/** Add <ProgressTracker.Step> components to be rendered in the <ProgressTracker> */\n\tchildren: TakeoverSectionProps['children'];\n\n\t/** Adds one or more classnames to an element */\n\tclassName?: string;\n\n\t/** Adds one or more classnames to TakeoverContent */\n\tcontentWrapperClass?: string;\n\n\t/** Footer Elements */\n\tfooter?: TakeoverFooterProps['children'];\n\n\t/** Align TakeoverFooter content using flexbox justify-content properties */\n\tfooterAlign?: TakeoverFooterProps['align'];\n\n\t/** False will automatically wrap children with <Takeover.Section /> */\n\tsectioned?: boolean;\n\n\t/** If passed an onBack function, <Takeover.Header> gets a Back button in the top right */\n\tonBack?: TakeoverHeaderProps['onBack'];\n\n\t/** If passed an onClose function, <Takeover.Header> gets a Close button in the top right */\n\tonClose?: TakeoverHeaderProps['onClose'];\n\n\t/** Set visibility of the Takeover */\n\topen?: boolean;\n\n\t/** Theme of Takeover */\n\ttheme?: TakeoverHeaderProps['theme'];\n\n\t/** Name of Takeover */\n\ttitle: TakeoverHeaderProps['title'];\n\n\t/** Render in a React Portal */\n\tportal?: boolean;\n\n\t/** Options passed into useFocusTrap */\n\tfocusTrapOptions?: UseFocusTrapProps;\n}\n\nexport interface TakeoverProps extends TakeoverPropsStrict {\n\t[propName: string]: any;\n}\n\nexport interface Takeover extends FC<TakeoverProps> {\n\tHeader: typeof TakeoverHeader;\n\tSection: typeof TakeoverSection;\n\tFooter: typeof TakeoverFooter;\n}\n\nexport const Takeover: Takeover = ({\n\tactions,\n\tanimate = false,\n\tbackLabel,\n\tchildren,\n\tclassName,\n\tcontentWrapperClass,\n\tfocusTrapOptions,\n\tfooter,\n\tfooterAlign = TakeoverFooter.defaultProps.align,\n\tonBack,\n\tonClose,\n\topen = true,\n\tportal = true,\n\tsectioned,\n\ttheme = TakeoverHeader.defaultProps.theme,\n\ttitle,\n\t...props\n}) => {\n\tReact.useEffect(() => {\n\t\tif (open) {\n\t\t\tdocument.body.classList.add('Takeover--is-open');\n\t\t} else {\n\t\t\tconst otherOpenTakeovers =\n\t\t\t\tdocument.getElementsByClassName('Takeover').length > 0;\n\t\t\tif (otherOpenTakeovers) {\n\t\t\t\tdocument.body.classList.add('Takeover--is-open');\n\t\t\t}\n\t\t}\n\n\t\treturn () => document.body.classList.remove('Takeover--is-open');\n\t}, [open]);\n\n\t// Focus trapping\n\tconst takeoverRef = useFocusTrap({\n\t\tautoFocusContainer: true,\n\t\tdisabled: !open,\n\t\t...focusTrapOptions,\n\t});\n\n\tconst headerProps = {\n\t\tactions,\n\t\tbackLabel,\n\t\tonBack,\n\t\tonClose,\n\t\ttheme,\n\t\ttitle,\n\t};\n\n\tconst footerProps = {\n\t\talign: footerAlign,\n\t\tchildren: footer,\n\t};\n\n\tconst TakeoverClasses = classnames(\n\t\t'Takeover',\n\t\tclassName,\n\t\t`Takeover--${theme}`\n\t);\n\n\tconst contentWrapperClasses = classnames(\n\t\t'TakeoverContent',\n\t\tcontentWrapperClass\n\t);\n\n\tconst content = !sectioned\n\t\t? wrapWithComponent(children, TakeoverSection)\n\t\t: children;\n\n\tconst duration: number = parseInt(tokens.durationStandard, 10) / 1000; // '200ms' -> 0.2\n\tconst framerAnimation = {\n\t\tinitial: { opacity: 0, y: 50 },\n\t\tanimate: { opacity: 1, y: 0 },\n\t\texit: { opacity: 0, y: 50 },\n\t\ttransition: { type: 'easeInOut', duration },\n\t};\n\n\tconst Animate = animate ? AnimatePresence : React.Fragment;\n\tconst TakeoverEl = animate ? motion.div : 'div';\n\tconst TakeoverProps = {\n\t\tclassName: TakeoverClasses,\n\t\tref: takeoverRef,\n\t\t...(animate && framerAnimation),\n\t\t...props,\n\t};\n\n\treturn (\n\t\t<Overlay portal={portal} animate={animate} open={open}>\n\t\t\t<Animate>\n\t\t\t\t{open && (\n\t\t\t\t\t<TakeoverEl\n\t\t\t\t\t\tdata-anvil-component=\"Takeover\"\n\t\t\t\t\t\t{...TakeoverProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TakeoverHeader {...headerProps} />\n\t\t\t\t\t\t<div className={contentWrapperClasses}>{content}</div>\n\t\t\t\t\t\t<TakeoverFooter {...footerProps} />\n\t\t\t\t\t</TakeoverEl>\n\t\t\t\t)}\n\t\t\t</Animate>\n\t\t</Overlay>\n\t);\n};\n\nTakeover.Header = TakeoverHeader;\nTakeover.Section = TakeoverSection;\nTakeover.Footer = TakeoverFooter;\n"]}

package/dist/components/Thumbnail/Thumbnail.css

@@ -5,7 +5,7 @@
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid var(--colorsBorderDefault, #444445);
+  border: 1px solid var(--colorsBorderDefault, #949596);
   display: inline-block;
   position: relative;
   overflow: hidden;

package/dist/components/Thumbnail/index.css

@@ -5,7 +5,7 @@
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid var(--colorsBorderDefault, #444445);
+  border: 1px solid var(--colorsBorderDefault, #949596);
   display: inline-block;
   position: relative;
   overflow: hidden;

package/dist/components/TimePicker/utils/timezoneUtils.js

@@ -54,7 +54,7 @@ export const dateToTime = (d, tz = localTimezone, format = 'hh:mm xm') => {
     return dateTime.toLocaleString({
         hour: '2-digit',
         minute: '2-digit',
-        hourCycle: format !== 'hh:mm xm' ? 'h23' : undefined,
+        hourCycle: format !== 'hh:mm xm' ? 'h23' : 'h12',
     });
 };
 // Returns {min, max} as 24-hour strings within timezone provided

package/dist/components/TimePicker/utils/timezoneUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"timezoneUtils.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/timezoneUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { DateTime } from 'luxon';\nimport moment from 'moment';\nimport { isValidDate } from './utils';\n\nexport const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\nconst isValidTimeZone = (tz: string) => {\n\tif (!Intl || !Intl.DateTimeFormat().resolvedOptions().timeZone) {\n\t\tthrow new Error('Time zones are not available in this environment');\n\t}\n\n\ttry {\n\t\tIntl.DateTimeFormat(undefined, { timeZone: tz });\n\t\treturn true;\n\t} catch (ex) {\n\t\treturn false;\n\t}\n};\n\nconst parseTimeString = (str: string): Date => {\n\tif (typeof str === 'string') {\n\t\tconst date = moment(str, ['h:m a', 'H:m']).toDate();\n\t\tif (isValidDate(date)) return new Date(date);\n\t}\n\tconsole.warn(\n\t\t`@servicetitan/design-system: parseTimeString(val) invalid val:`,\n\t\tstr\n\t);\n\treturn null;\n};\n\nexport const timeToDate = (\n\ttime: string,\n\ttz = localTimezone,\n\tbaseDate?: Date\n): Date => {\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(`@servicetitan/design-system: Invalid timezone \"${tz}\"`);\n\t\treturn undefined;\n\t}\n\n\t// Date to return time within, now or based on `date` provided\n\tconst d = !baseDate\n\t\t? DateTime.now().setZone(tz)\n\t\t: DateTime.fromJSDate(baseDate).setZone(tz);\n\n\tconst t = parseTimeString(time); // '11:22 AM' → Date\n\tif (!t) return undefined;\n\n\tconst [h, m] = [t.getHours(), t.getMinutes()];\n\tconst result = d.set({ hour: h, minute: m, second: 0, millisecond: 0 }); // Rounding\n\n\treturn result.toJSDate();\n};\n\nexport const dateToTime = (\n\td: Date,\n\ttz = localTimezone,\n\tformat = 'hh:mm xm'\n): string => {\n\tif (!d || !isValidDate(d)) return undefined;\n\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() has invalid timezone: ${tz}`\n\t\t);\n\t\treturn undefined;\n\t}\n\n\tif (format !== 'hh:mm xm' && format !== 'hh:mm')\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() invalid format \"${format}\", usind \"hh:mm\"`\n\t\t);\n\n\tlet dateTime;\n\n\tif (tz && isValidTimeZone(tz))\n\t\tdateTime = DateTime.fromJSDate(d).setZone(tz);\n\n\treturn dateTime.toLocaleString({\n\t\thour: '2-digit',\n\t\tminute: '2-digit',\n\t\thourCycle: format !== 'hh:mm xm' ? 'h23' : undefined,\n\t});\n};\n\n// Returns {min, max} as 24-hour strings within timezone provided\nexport const consumeMinMax = (\n\tmin: Date | string,\n\tmax: Date | string,\n\ttz = localTimezone\n): { min: string; max: string } => {\n\tlet minStr, maxStr;\n\n\t// both min & max are instances of Date\n\tif (isValidDate(min as Date) && isValidDate(max as Date)) {\n\t\tif (sameDay(min, max, tz)) {\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t} else {\n\t\t\t// min and max are valid and not same day → use min\n\t\t\tconsole.warn(\n\t\t\t\t`@servicetitan/design-system: TimePicker's min (${min}) & max (${max}) are not in the same day, using max=23:59`\n\t\t\t);\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = '23:59';\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is Date, max is string\n\tif (isValidDate(min as Date) && !(max instanceof Date)) {\n\t\tconst realMax = parseTimeString(max) ? max : '23:59';\n\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\tmaxStr = realMax;\n\n\t\tif (min > timeToDate(realMax, tz, min as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = realMax;\n\t\t\tmaxStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is string, max is Date\n\tif (!(min instanceof Date) && isValidDate(max as Date)) {\n\t\tconst realMin = parseTimeString(min) ? min : '00:00';\n\t\tminStr = realMin;\n\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\n\t\tif (max < timeToDate(realMin, tz, max as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t\tmaxStr = realMin;\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// both min & max are strings\n\tconst minDate = parseTimeString(min as string) || parseTimeString('00:00');\n\tconst maxDate = parseTimeString(max as string) || parseTimeString('23:59');\n\tconst dates = [minDate, maxDate]\n\t\t.sort()\n\t\t.map((d) => dateToTime(d, localTimezone, 'hh:mm'));\n\n\treturn { min: dates[0], max: dates[1] };\n};\n\nconst sameDay = (d1: any, d2: any, tz: string): boolean => {\n\tconst date1 = DateTime.fromJSDate(d1)?.setZone(tz);\n\tconst date2 = DateTime.fromJSDate(d2)?.setZone(tz);\n\n\treturn date1 && date2 && date1.hasSame(date2, 'day');\n};\n\n/**\n * Prioity:\n * 1. min, if min is Date, if not...\n * 2. max, if max is Date, if not...\n * 3. value, if defined, if not...\n * 4. today @ timezone\n */\nexport const getReturnDate = (\n\tmin: Date | string,\n\tmax: Date | string,\n\tvalue?: Date,\n\ttz = localTimezone\n): Date => {\n\tlet returnDate;\n\n\tif (isValidDate(min as Date)) {\n\t\treturnDate = min;\n\t\tif (isValidDate(max as Date)) {\n\t\t\tif (min > max) returnDate = max;\n\t\t}\n\t} else if (isValidDate(max as Date)) {\n\t\treturnDate = max;\n\t} else if (isValidDate(value)) {\n\t\treturnDate = value;\n\t} else {\n\t\treturnDate = new Date();\n\t}\n\n\tconst res = timeToDate('00:00', tz, returnDate as Date);\n\n\treturn res;\n};\n"]}
+{"version":3,"file":"timezoneUtils.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/timezoneUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { DateTime } from 'luxon';\nimport moment from 'moment';\nimport { isValidDate } from './utils';\n\nexport const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\nconst isValidTimeZone = (tz: string) => {\n\tif (!Intl || !Intl.DateTimeFormat().resolvedOptions().timeZone) {\n\t\tthrow new Error('Time zones are not available in this environment');\n\t}\n\n\ttry {\n\t\tIntl.DateTimeFormat(undefined, { timeZone: tz });\n\t\treturn true;\n\t} catch (ex) {\n\t\treturn false;\n\t}\n};\n\nconst parseTimeString = (str: string): Date => {\n\tif (typeof str === 'string') {\n\t\tconst date = moment(str, ['h:m a', 'H:m']).toDate();\n\t\tif (isValidDate(date)) return new Date(date);\n\t}\n\tconsole.warn(\n\t\t`@servicetitan/design-system: parseTimeString(val) invalid val:`,\n\t\tstr\n\t);\n\treturn null;\n};\n\nexport const timeToDate = (\n\ttime: string,\n\ttz = localTimezone,\n\tbaseDate?: Date\n): Date => {\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(`@servicetitan/design-system: Invalid timezone \"${tz}\"`);\n\t\treturn undefined;\n\t}\n\n\t// Date to return time within, now or based on `date` provided\n\tconst d = !baseDate\n\t\t? DateTime.now().setZone(tz)\n\t\t: DateTime.fromJSDate(baseDate).setZone(tz);\n\n\tconst t = parseTimeString(time); // '11:22 AM' → Date\n\tif (!t) return undefined;\n\n\tconst [h, m] = [t.getHours(), t.getMinutes()];\n\tconst result = d.set({ hour: h, minute: m, second: 0, millisecond: 0 }); // Rounding\n\n\treturn result.toJSDate();\n};\n\nexport const dateToTime = (\n\td: Date,\n\ttz = localTimezone,\n\tformat = 'hh:mm xm'\n): string => {\n\tif (!d || !isValidDate(d)) return undefined;\n\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() has invalid timezone: ${tz}`\n\t\t);\n\t\treturn undefined;\n\t}\n\n\tif (format !== 'hh:mm xm' && format !== 'hh:mm')\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() invalid format \"${format}\", usind \"hh:mm\"`\n\t\t);\n\n\tlet dateTime;\n\n\tif (tz && isValidTimeZone(tz))\n\t\tdateTime = DateTime.fromJSDate(d).setZone(tz);\n\n\treturn dateTime.toLocaleString({\n\t\thour: '2-digit',\n\t\tminute: '2-digit',\n\t\thourCycle: format !== 'hh:mm xm' ? 'h23' : 'h12',\n\t});\n};\n\n// Returns {min, max} as 24-hour strings within timezone provided\nexport const consumeMinMax = (\n\tmin: Date | string,\n\tmax: Date | string,\n\ttz = localTimezone\n): { min: string; max: string } => {\n\tlet minStr, maxStr;\n\n\t// both min & max are instances of Date\n\tif (isValidDate(min as Date) && isValidDate(max as Date)) {\n\t\tif (sameDay(min, max, tz)) {\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t} else {\n\t\t\t// min and max are valid and not same day → use min\n\t\t\tconsole.warn(\n\t\t\t\t`@servicetitan/design-system: TimePicker's min (${min}) & max (${max}) are not in the same day, using max=23:59`\n\t\t\t);\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = '23:59';\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is Date, max is string\n\tif (isValidDate(min as Date) && !(max instanceof Date)) {\n\t\tconst realMax = parseTimeString(max) ? max : '23:59';\n\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\tmaxStr = realMax;\n\n\t\tif (min > timeToDate(realMax, tz, min as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = realMax;\n\t\t\tmaxStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is string, max is Date\n\tif (!(min instanceof Date) && isValidDate(max as Date)) {\n\t\tconst realMin = parseTimeString(min) ? min : '00:00';\n\t\tminStr = realMin;\n\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\n\t\tif (max < timeToDate(realMin, tz, max as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t\tmaxStr = realMin;\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// both min & max are strings\n\tconst minDate = parseTimeString(min as string) || parseTimeString('00:00');\n\tconst maxDate = parseTimeString(max as string) || parseTimeString('23:59');\n\tconst dates = [minDate, maxDate]\n\t\t.sort()\n\t\t.map((d) => dateToTime(d, localTimezone, 'hh:mm'));\n\n\treturn { min: dates[0], max: dates[1] };\n};\n\nconst sameDay = (d1: any, d2: any, tz: string): boolean => {\n\tconst date1 = DateTime.fromJSDate(d1)?.setZone(tz);\n\tconst date2 = DateTime.fromJSDate(d2)?.setZone(tz);\n\n\treturn date1 && date2 && date1.hasSame(date2, 'day');\n};\n\n/**\n * Prioity:\n * 1. min, if min is Date, if not...\n * 2. max, if max is Date, if not...\n * 3. value, if defined, if not...\n * 4. today @ timezone\n */\nexport const getReturnDate = (\n\tmin: Date | string,\n\tmax: Date | string,\n\tvalue?: Date,\n\ttz = localTimezone\n): Date => {\n\tlet returnDate;\n\n\tif (isValidDate(min as Date)) {\n\t\treturnDate = min;\n\t\tif (isValidDate(max as Date)) {\n\t\t\tif (min > max) returnDate = max;\n\t\t}\n\t} else if (isValidDate(max as Date)) {\n\t\treturnDate = max;\n\t} else if (isValidDate(value)) {\n\t\treturnDate = value;\n\t} else {\n\t\treturnDate = new Date();\n\t}\n\n\tconst res = timeToDate('00:00', tz, returnDate as Date);\n\n\treturn res;\n};\n"]}

package/dist/components/Toast/Toast.d.ts

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { ToastGroupContext } from './ToastGroupContext';
 export interface ToastPropsStrict {
     /** Adds one or more classnames for an element */
     className?: string;
@@ -30,6 +31,10 @@ interface ToastState {
 }
 export declare class Toast extends Component<ToastProps, ToastState> {
     static Group: React.ForwardRefExoticComponent<Omit<import("./ToastGroup").ToastGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    static contextType: React.Context<{
+        isInToastGroup: boolean;
+    }>;
+    context: React.ContextType<typeof ToastGroupContext>;
     static defaultProps: {
         status: string;
         duration: number;

package/dist/components/Toast/Toast.js

@@ -17,6 +17,7 @@ import { ToastGroup } from './ToastGroup';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Portal } from '../../internal/Portal';
 import { tokens } from '@servicetitan/tokens/core';
+import { ToastGroupContext } from './ToastGroupContext';
 export class Toast extends Component {
     constructor(props) {
         super(props);
@@ -67,7 +68,13 @@ export class Toast extends Component {
         return 'info';
     }
     render() {
-        const _a = this.props, { primaryActionName, secondaryActionName, children, className, onPrimaryActionClick, onSecondaryActionClick, onClose, portal, status, title } = _a, props = __rest(_a, ["primaryActionName", "secondaryActionName", "children", "className", "onPrimaryActionClick", "onSecondaryActionClick", "onClose", "portal", "status", "title"]);
+        const _a = this.props, { primaryActionName, secondaryActionName, children, className, onPrimaryActionClick, onSecondaryActionClick, onClose, status, title } = _a, props = __rest(_a, ["primaryActionName", "secondaryActionName", "children", "className", "onPrimaryActionClick", "onSecondaryActionClick", "onClose", "status", "title"]);
+        let portal = this.props.portal;
+        const { isInToastGroup } = this.context;
+        if (isInToastGroup) {
+            // Ignore portal in a toast group.
+            portal = undefined;
+        }
         const ToastClasses = classnames('Toast', className, {
             'Toast--critical': status === 'critical',
             'Toast--info': status === 'info',
@@ -101,6 +108,7 @@ export class Toast extends Component {
     }
 }
 Toast.Group = ToastGroup;
+Toast.contextType = ToastGroupContext;
 Toast.defaultProps = {
     status: 'info',
     duration: 8000,

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { ToastGroup } from './ToastGroup';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Portal } from '../../internal/Portal';\nimport { tokens } from '@servicetitan/tokens/core';\n\nexport interface ToastPropsStrict {\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\tchildren?: React.ReactNode;\n\n\t/** How long the Toast stays on screen, default value is 8000 (milliseconds) */\n\tduration?: number;\n\n\t/** Text for the primary button */\n\tprimaryActionName?: boolean | string;\n\n\t/** Function that fires when the user clicks on the primary button/action */\n\tonPrimaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks the close icon */\n\tonClose?: (e?: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks on the secondary button/action */\n\tonSecondaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n\n\t/** Text for the secondary button */\n\tsecondaryActionName?: boolean | string;\n\n\t/** Determines the visual appearance and icon of the toast */\n\tstatus?: 'info' | 'critical' | 'success' | 'warning';\n\n\t/** The message displayed to the user */\n\ttitle: string;\n}\n\nexport interface ToastProps extends ToastPropsStrict {\n\t[propName: string]: any;\n}\n\ninterface ToastState {\n\tvisible: boolean;\n}\n\nexport class Toast extends Component<ToastProps, ToastState> {\n\tstatic Group = ToastGroup;\n\n\tstatic defaultProps = {\n\t\tstatus: 'info',\n\t\tduration: 8000,\n\t\tportal: true,\n\t};\n\n\tprivate timeout: number | null = null;\n\n\tconstructor(props: ToastProps) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tvisible: true,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.duration < 1) return;\n\n\t\tthis.timeout = window.setTimeout(() => {\n\t\t\tthis.handleClose();\n\t\t}, this.props.duration);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.clearSubscription();\n\t}\n\n\thandleClose = (e?: React.SyntheticEvent<HTMLElement>) => {\n\t\tconst { onClose } = this.props;\n\n\t\tthis.clearSubscription();\n\t\tthis.setState({ visible: false });\n\n\t\tif (onClose) {\n\t\t\tonClose(e);\n\t\t}\n\t};\n\n\thasPrimaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.primaryActionName && this.props.onPrimaryActionClick\n\t\t);\n\t}\n\n\thasSecondaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.secondaryActionName && this.props.onSecondaryActionClick\n\t\t);\n\t}\n\n\tprivate clearSubscription() {\n\t\tif (this.timeout !== null) {\n\t\t\twindow.clearTimeout(this.timeout);\n\t\t}\n\t}\n\n\tprivate getIconNameByStatus() {\n\t\tswitch (this.props.status) {\n\t\t\tcase 'critical':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'warning':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'success':\n\t\t\t\treturn 'check_circle';\n\t\t}\n\n\t\t// if status == 'info' || undefined\n\t\treturn 'info';\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tprimaryActionName,\n\t\t\tsecondaryActionName,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonPrimaryActionClick,\n\t\t\tonSecondaryActionClick,\n\t\t\tonClose,\n\t\t\tportal,\n\t\t\tstatus,\n\t\t\ttitle,\n\t\t\t...props\n\t\t} = this.props;\n\n\t\tconst ToastClasses = classnames('Toast', className, {\n\t\t\t'Toast--critical': status === 'critical',\n\t\t\t'Toast--info': status === 'info',\n\t\t\t'Toast--success': status === 'success',\n\t\t\t'Toast--warning': status === 'warning',\n\t\t\t'Toast--floating': portal,\n\t\t});\n\n\t\tconst durationSlow: number = parseInt(tokens.durationSlow, 10) / 1000; // '300ms' -> 0.3\n\t\tconst toastAnimation = {\n\t\t\tinitial: { opacity: 0, y: 10, scale: 0.3 },\n\t\t\tanimate: { opacity: 1, y: 0, scale: 1 },\n\t\t\texit: { opacity: 0, y: 20, scale: 0.5 },\n\t\t\ttransition: { type: 'easeInOut', duration: durationSlow },\n\t\t};\n\n\t\tconst toast = (\n\t\t\t<AnimatePresence>\n\t\t\t\t<motion.div layout {...toastAnimation}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ToastClasses}\n\t\t\t\t\t\tdata-anvil-component=\"Toast\"\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"Toast__icon\"\n\t\t\t\t\t\t\tname={this.getIconNameByStatus()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"Toast__text\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tonClose &&\n\t\t\t\t\t\t\t\t\t\tparseInt(tokens.spacing3, 10) * 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"Toast__title\">{title}</div>\n\t\t\t\t\t\t\t\t{onClose && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-label=\"close toast\"\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"Toast__close\"\n\t\t\t\t\t\t\t\t\t\ticonName=\"clear\"\n\t\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleClose}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this.props.children !== undefined && (\n\t\t\t\t\t\t\t\t<div className=\"Toast__description\">\n\t\t\t\t\t\t\t\t\t{this.props.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{(primaryActionName || secondaryActionName) && (\n\t\t\t\t\t\t\t<div className=\"Toast__action\">\n\t\t\t\t\t\t\t\t{this.hasSecondaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onSecondaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{secondaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{this.hasPrimaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onPrimaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{primaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t);\n\n\t\treturn (\n\t\t\t<Portal\n\t\t\t\tconditional={!!portal}\n\t\t\t\ttarget={typeof portal !== 'boolean' ? portal : undefined}\n\t\t\t>\n\t\t\t\t{toast}\n\t\t\t</Portal>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { ToastGroup } from './ToastGroup';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Portal } from '../../internal/Portal';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { ToastGroupContext } from './ToastGroupContext';\n\nexport interface ToastPropsStrict {\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\tchildren?: React.ReactNode;\n\n\t/** How long the Toast stays on screen, default value is 8000 (milliseconds) */\n\tduration?: number;\n\n\t/** Text for the primary button */\n\tprimaryActionName?: boolean | string;\n\n\t/** Function that fires when the user clicks on the primary button/action */\n\tonPrimaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks the close icon */\n\tonClose?: (e?: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks on the secondary button/action */\n\tonSecondaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n\n\t/** Text for the secondary button */\n\tsecondaryActionName?: boolean | string;\n\n\t/** Determines the visual appearance and icon of the toast */\n\tstatus?: 'info' | 'critical' | 'success' | 'warning';\n\n\t/** The message displayed to the user */\n\ttitle: string;\n}\n\nexport interface ToastProps extends ToastPropsStrict {\n\t[propName: string]: any;\n}\n\ninterface ToastState {\n\tvisible: boolean;\n}\n\nexport class Toast extends Component<ToastProps, ToastState> {\n\tstatic Group = ToastGroup;\n\tstatic contextType = ToastGroupContext;\n\tdeclare context: React.ContextType<typeof ToastGroupContext>;\n\n\tstatic defaultProps = {\n\t\tstatus: 'info',\n\t\tduration: 8000,\n\t\tportal: true,\n\t};\n\n\tprivate timeout: number | null = null;\n\n\tconstructor(props: ToastProps) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tvisible: true,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.duration < 1) return;\n\n\t\tthis.timeout = window.setTimeout(() => {\n\t\t\tthis.handleClose();\n\t\t}, this.props.duration);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.clearSubscription();\n\t}\n\n\thandleClose = (e?: React.SyntheticEvent<HTMLElement>) => {\n\t\tconst { onClose } = this.props;\n\n\t\tthis.clearSubscription();\n\t\tthis.setState({ visible: false });\n\n\t\tif (onClose) {\n\t\t\tonClose(e);\n\t\t}\n\t};\n\n\thasPrimaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.primaryActionName && this.props.onPrimaryActionClick\n\t\t);\n\t}\n\n\thasSecondaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.secondaryActionName && this.props.onSecondaryActionClick\n\t\t);\n\t}\n\n\tprivate clearSubscription() {\n\t\tif (this.timeout !== null) {\n\t\t\twindow.clearTimeout(this.timeout);\n\t\t}\n\t}\n\n\tprivate getIconNameByStatus() {\n\t\tswitch (this.props.status) {\n\t\t\tcase 'critical':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'warning':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'success':\n\t\t\t\treturn 'check_circle';\n\t\t}\n\n\t\t// if status == 'info' || undefined\n\t\treturn 'info';\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tprimaryActionName,\n\t\t\tsecondaryActionName,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonPrimaryActionClick,\n\t\t\tonSecondaryActionClick,\n\t\t\tonClose,\n\t\t\tstatus,\n\t\t\ttitle,\n\t\t\t...props\n\t\t} = this.props;\n\n\t\tlet portal = this.props.portal;\n\t\tconst { isInToastGroup } = this.context;\n\n\t\tif (isInToastGroup) {\n\t\t\t// Ignore portal in a toast group.\n\t\t\tportal = undefined;\n\t\t}\n\n\t\tconst ToastClasses = classnames('Toast', className, {\n\t\t\t'Toast--critical': status === 'critical',\n\t\t\t'Toast--info': status === 'info',\n\t\t\t'Toast--success': status === 'success',\n\t\t\t'Toast--warning': status === 'warning',\n\t\t\t'Toast--floating': portal,\n\t\t});\n\n\t\tconst durationSlow: number = parseInt(tokens.durationSlow, 10) / 1000; // '300ms' -> 0.3\n\t\tconst toastAnimation = {\n\t\t\tinitial: { opacity: 0, y: 10, scale: 0.3 },\n\t\t\tanimate: { opacity: 1, y: 0, scale: 1 },\n\t\t\texit: { opacity: 0, y: 20, scale: 0.5 },\n\t\t\ttransition: { type: 'easeInOut', duration: durationSlow },\n\t\t};\n\n\t\tconst toast = (\n\t\t\t<AnimatePresence>\n\t\t\t\t<motion.div layout {...toastAnimation}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ToastClasses}\n\t\t\t\t\t\tdata-anvil-component=\"Toast\"\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"Toast__icon\"\n\t\t\t\t\t\t\tname={this.getIconNameByStatus()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"Toast__text\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tonClose &&\n\t\t\t\t\t\t\t\t\t\tparseInt(tokens.spacing3, 10) * 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"Toast__title\">{title}</div>\n\t\t\t\t\t\t\t\t{onClose && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-label=\"close toast\"\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"Toast__close\"\n\t\t\t\t\t\t\t\t\t\ticonName=\"clear\"\n\t\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleClose}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this.props.children !== undefined && (\n\t\t\t\t\t\t\t\t<div className=\"Toast__description\">\n\t\t\t\t\t\t\t\t\t{this.props.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{(primaryActionName || secondaryActionName) && (\n\t\t\t\t\t\t\t<div className=\"Toast__action\">\n\t\t\t\t\t\t\t\t{this.hasSecondaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onSecondaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{secondaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{this.hasPrimaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onPrimaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{primaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t);\n\n\t\treturn (\n\t\t\t<Portal\n\t\t\t\tconditional={!!portal}\n\t\t\t\ttarget={typeof portal !== 'boolean' ? portal : undefined}\n\t\t\t>\n\t\t\t\t{toast}\n\t\t\t</Portal>\n\t\t);\n\t}\n}\n"]}

package/dist/components/Toast/ToastGroup.js

@@ -12,12 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import { Portal } from '../../internal/Portal';
+import { ToastGroupContext } from './ToastGroupContext';
 export const ToastGroup = React.forwardRef((_a, ref) => {
     var { children, className, portal = true } = _a, props = __rest(_a, ["children", "className", "portal"]);
     const ToastGroupClasses = classnames('ToastGroup', className, {
         'ToastGroup--floating': portal,
     });
-    const toastGroup = (React.createElement("div", Object.assign({ ref: ref, className: ToastGroupClasses }, props), children));
+    const toastGroup = (React.createElement(ToastGroupContext.Provider, { value: { isInToastGroup: true } },
+        React.createElement("div", Object.assign({ ref: ref, className: ToastGroupClasses }, props), children)));
     return portal ? (React.createElement(Portal, { target: typeof portal !== 'boolean' ? portal : undefined }, toastGroup)) : (toastGroup);
 });
 //# sourceMappingURL=ToastGroup.js.map

package/dist/components/Toast/ToastGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastGroup.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAuB/C,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,OAAY,EAAP,KAAK,cAA9C,mCAAgD,CAAF;IAC9C,MAAM,iBAAiB,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QAC7D,sBAAsB,EAAE,MAAM;KAC9B,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAClB,2CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,IAAM,KAAK,GACpD,QAAQ,CACJ,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,MAAM,EAAE,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAC9D,UAAU,CACH,CACT,CAAC,CAAC,CAAC,CACH,UAAU,CACV,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { ToastProps } from './Toast';\nimport { Portal } from '../../internal/Portal';\n\ntype ToastGroupChildType =\n\t| React.ReactElement<ToastProps>\n\t| boolean\n\t| null\n\t| undefined;\n\nexport interface ToastGroupPropsStrict {\n\t/** Toast Elements */\n\tchildren: ToastGroupChildType | ToastGroupChildType[];\n\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n}\n\nexport interface ToastGroupProps extends ToastGroupPropsStrict {\n\t[propName: string]: any;\n}\n\nexport const ToastGroup = React.forwardRef<HTMLDivElement, ToastGroupProps>(\n\t({ children, className, portal = true, ...props }, ref) => {\n\t\tconst ToastGroupClasses = classnames('ToastGroup', className, {\n\t\t\t'ToastGroup--floating': portal,\n\t\t});\n\n\t\tconst toastGroup = (\n\t\t\t<div ref={ref} className={ToastGroupClasses} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\n\t\treturn portal ? (\n\t\t\t<Portal target={typeof portal !== 'boolean' ? portal : undefined}>\n\t\t\t\t{toastGroup}\n\t\t\t</Portal>\n\t\t) : (\n\t\t\ttoastGroup\n\t\t);\n\t}\n);\n"]}
+{"version":3,"file":"ToastGroup.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuBxD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,OAAY,EAAP,KAAK,cAA9C,mCAAgD,CAAF;IAC9C,MAAM,iBAAiB,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QAC7D,sBAAsB,EAAE,MAAM;KAC9B,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAClB,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;QAC1D,2CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,IAAM,KAAK,GACpD,QAAQ,CACJ,CACsB,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,MAAM,EAAE,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAC9D,UAAU,CACH,CACT,CAAC,CAAC,CAAC,CACH,UAAU,CACV,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { ToastProps } from './Toast';\nimport { Portal } from '../../internal/Portal';\nimport { ToastGroupContext } from './ToastGroupContext';\n\ntype ToastGroupChildType =\n\t| React.ReactElement<ToastProps>\n\t| boolean\n\t| null\n\t| undefined;\n\nexport interface ToastGroupPropsStrict {\n\t/** Toast Elements */\n\tchildren: ToastGroupChildType | ToastGroupChildType[];\n\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n}\n\nexport interface ToastGroupProps extends ToastGroupPropsStrict {\n\t[propName: string]: any;\n}\n\nexport const ToastGroup = React.forwardRef<HTMLDivElement, ToastGroupProps>(\n\t({ children, className, portal = true, ...props }, ref) => {\n\t\tconst ToastGroupClasses = classnames('ToastGroup', className, {\n\t\t\t'ToastGroup--floating': portal,\n\t\t});\n\n\t\tconst toastGroup = (\n\t\t\t<ToastGroupContext.Provider value={{ isInToastGroup: true }}>\n\t\t\t\t<div ref={ref} className={ToastGroupClasses} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</ToastGroupContext.Provider>\n\t\t);\n\n\t\treturn portal ? (\n\t\t\t<Portal target={typeof portal !== 'boolean' ? portal : undefined}>\n\t\t\t\t{toastGroup}\n\t\t\t</Portal>\n\t\t) : (\n\t\t\ttoastGroup\n\t\t);\n\t}\n);\n"]}

package/dist/components/Toast/ToastGroupContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ToastGroupContext: React.Context<{
+    isInToastGroup: boolean;
+}>;

package/dist/components/Toast/ToastGroupContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ToastGroupContext = React.createContext({ isInToastGroup: false });
+//# sourceMappingURL=ToastGroupContext.js.map

package/dist/components/Toast/ToastGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastGroupContext.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nexport const ToastGroupContext = React.createContext({ isInToastGroup: false });\n"]}

package/dist/components/index.css

@@ -507,6 +507,7 @@ span.Popover {
   border-radius: 100%;
   margin-top: 1px;
   padding: 1px 4px;
+  background: transparent;
 }
 .Trigger .Trigger__clear.Button::before {
   border-radius: 100%;
@@ -1006,7 +1007,7 @@ span.Popover {
   align-items: center;
   background-color: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
-  border-radius: 3px;
+  border-radius: 6px;
   box-sizing: border-box;
   color: var(--colorsTextOnGrey, #444445);
   cursor: pointer;
@@ -1016,14 +1017,15 @@ span.Popover {
   justify-content: center;
   line-height: 1;
   margin: 0;
-  outline: none;
   padding: 12px 16px;
   text-align: center;
   text-decoration: none;
   text-shadow: none;
-  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline-offset cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   user-select: none;
   position: relative;
+  outline-offset: 0;
+  outline: solid 0 transparent;
 }
 .Button::before {
   content: "";
@@ -1043,13 +1045,13 @@ span.Popover {
 .Button:active::before, .Button.Button--selected::before {
   background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
-.Button.Button--focus-visible:focus {
-  outline: 0;
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+.Button:focus-visible {
+  outline-offset: 2px;
+  outline: solid 2px var(--colorsBorderPrimary, #0265dc);
 }
 .Button.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
 }
 .Button.Button--outline:hover::before {
   background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
@@ -1057,9 +1059,6 @@ span.Popover {
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
-.Button.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
-}
 .Button.Button--subtle {
   background-color: transparent;
 }
@@ -1111,34 +1110,31 @@ button.Button {
   color: var(--colorsTextOnPrimary, white);
 }
 .Button--blue:hover::before {
-  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--outline:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
-}
-.Button--blue.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .Button--blue.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--subtle:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 
 .Button--red {
@@ -1148,15 +1144,15 @@ button.Button {
 .Button--red:hover::before {
   background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
+.Button--red:focus-visible {
+  outline: solid 2px var(--colorsBorderCritical, #e13212);
+}
 .Button--red:active::before, .Button--red.Button--selected::before {
   background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
 }
-.Button--red.Button--focus-visible:focus {
-  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
-}
 .Button--red.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
@@ -1165,9 +1161,6 @@ button.Button {
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
-.Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
-}
 .Button--red.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextCritical, #bf2a00);
@@ -1180,19 +1173,14 @@ button.Button {
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
-  background: var(--colorsSurfaceGrey, #eeeeee);
-  color: var(--colorsTextOnGrey, #444445);
+  background: #bcbcbd;
+  color: #606162;
+  box-shadow: none;
   opacity: 0.4;
 }
 .Button--disabled svg, .Button--disabled.Button--outline svg, .Button--disabled.Button--subtle svg {
   opacity: 0.6;
 }
-.Button--disabled.Button--outline, .Button--disabled.Button--subtle {
-  background: transparent;
-}
-.Button--disabled.Button--outline {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
-}
 
 .Button--inactive {
   pointer-events: none;
@@ -1870,7 +1858,7 @@ button.Button--full {
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderDefault, #444445);
+  border-color: var(--colorsBorderDefault, #949596);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);
@@ -7897,7 +7885,7 @@ button.a-Icon {
 }
 button.a-Icon:focus {
   border-radius: 3px;
-  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #78bbfa);
+  box-shadow: 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
   outline: 0;
 }
 
@@ -9709,7 +9697,7 @@ button.a-Icon svg {
   box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e13212) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #949596) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
   box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #0265dc) inset;
@@ -11850,7 +11838,7 @@ button.a-Icon svg {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  border: 1px solid var(--colorsBorderDefault, #444445);
+  border: 1px solid var(--colorsBorderDefault, #949596);
   display: inline-block;
   position: relative;
   overflow: hidden;