npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.21.0 - Mend

@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.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 (5652) hide show

package/lib/components/Email/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default as EmailDisplay } from './EmailDisplay';
-export { EmailDisplayProps } from './EmailDisplay';
+export type { EmailDisplayProps } from './EmailDisplay';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Email/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,~~OAAO~~,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Email/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as EmailDisplay } from './EmailDisplay';\nexport { EmailDisplayProps } from './EmailDisplay';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as EmailDisplay } from './EmailDisplay';\nexport type { EmailDisplayProps } from './EmailDisplay';\n"]}

package/lib/components/EmojiPicker/EmojiPicker.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { FunctionComponent, Ref } from 'react';
 import { CategoryName, Data as EmojiData, BackgroundImageFn, PickerProps } from 'emoji-mart';
 import { BaseProps, NoChildrenProp } from '../../types';
-declare type EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';
+type EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';
 export interface EmojiPickerProps extends BaseProps, NoChildrenProp {
     /** Individual emojis size in pixels. */
     emojiSize?: number;

package/lib/components/EmojiPicker/EmojiPicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,GAAG,EAEJ,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,YAAY,EACZ,IAAI,IAAI,SAAS,EACjB,iBAAiB,EACjB,WAAW,EACZ,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIxD,~~aAAK~~,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAI5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;kHAC8G;IAC9G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAC;AACjE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,GAAG,EAEJ,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,YAAY,EACZ,IAAI,IAAI,SAAS,EACjB,iBAAiB,EACjB,WAAW,EACZ,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIxD,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAI5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;kHAC8G;IAC9G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAC;AACjE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;~~SA2hBzD~~,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;SAshBzD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/lib/components/EmojiPicker/EmojiPicker.styles.js CHANGED Viewed

@@ -7,13 +7,10 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
     const secondaryTextColor = transparentize(1 - transparency['transparent-2'], palette['foreground-color']);
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
-      border-radius: inherit;
       /* stylelint-disable no-descending-specificity */
       /* stylelint-disable no-duplicate-selectors */
       /* stylelint-disable selector-max-class */
+      border-radius: inherit;
       .emoji-mart,
       .emoji-mart * {
@@ -192,7 +189,6 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
         position: relative;
         position: -webkit-sticky;
         position: sticky;
         /* stylelint-enable declaration-block-no-duplicate-properties */
       }
@@ -230,8 +226,7 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
       .emoji-mart-emoji-native {
         /* stylelint-disable font-family-no-missing-generic-family-keyword */
         font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',
-          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cSpell:disable-line */
+          'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cspell:disable-line */
         /* stylelint-enable font-family-no-missing-generic-family-keyword */
       }

package/lib/components/EmojiPicker/EmojiPicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n ({\n showFooter,\n theme: {\n base: {\n animation: { speed, timing },\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n 'font-weight': fontWeight,\n palette,\n shadow: { focus: focusShadow },\n spacing,\n 'border-radius': borderRadius,\n transparency\n },\n components: {\n 'search-input': { 'border-radius': searchInputRadius }\n }\n }\n }) => {\n const hoverColor = getHoverColors(palette['primary-background']).background;\n const secondaryTextColor = transparentize(\n 1 - transparency['transparent-2'],\n palette['foreground-color']\n );\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border-radius: inherit;\n\n /* stylelint-disable no-descending-specificity /\n\n / stylelint-disable no-duplicate-selectors /\n\n / stylelint-disable selector-max-class /\n\n .emoji-mart,\n .emoji-mart {\n box-sizing: border-box;\n line-height: 1.15;\n }\n\n .emoji-mart {\n font-family: ${fontFamily};\n font-size: ${fontSizes.l};\n display: inline-block;\n color: ${palette['foreground-color']};\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: inherit;\n background: ${palette['primary-background']};\n }\n\n .emoji-mart .emoji-mart-emoji {\n padding: calc(0.75 * ${spacing});\n }\n\n .emoji-mart-bar {\n border: 0 solid ${palette['border-line']};\n }\n .emoji-mart-bar:first-child {\n border-bottom-width: 0.0625rem;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n .emoji-mart-bar:last-child {\n border-top-width: 0.0625rem;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n ${!showFooter &&\n css`\n display: none;\n `}\n }\n\n .emoji-mart-anchors {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 calc(0.75 * ${spacing});\n line-height: 0;\n }\n\n .emoji-mart-anchor {\n position: relative;\n display: block;\n flex: 1 1 auto;\n color: ${secondaryTextColor};\n text-align: center;\n padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n overflow: hidden;\n transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n }\n .emoji-mart-anchor:focus {\n outline: 0;\n }\n .emoji-mart-anchor:hover,\n .emoji-mart-anchor:focus,\n .emoji-mart-anchor-selected {\n color: ${palette.interactive};\n }\n\n .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n bottom: 0;\n }\n\n .emoji-mart-anchor-bar {\n position: absolute;\n bottom: calc(-0.375 * ${spacing});\n left: 0;\n width: 100%;\n height: calc(0.375 * ${spacing});\n background-color: ${palette.interactive};\n }\n\n .emoji-mart-anchors i {\n display: inline-block;\n width: 100%;\n max-width: calc(2.75 * ${spacing});\n }\n\n .emoji-mart-anchors svg,\n .emoji-mart-anchors img {\n fill: currentColor;\n height: calc(2.25 * ${spacing});\n width: calc(2.25 * ${spacing});\n }\n\n .emoji-mart-scroll {\n overflow-y: scroll;\n overflow-x: hidden;\n height: 16.875rem;\n padding: 0 calc(0.75 * ${spacing});\n will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome /\n }\n\n .emoji-mart-search {\n padding: ${spacing};\n position: relative;\n }\n\n .emoji-mart-search input {\n font-size: ${fontSizes.l};\n color: ${palette['foreground-color']};\n display: block;\n width: 100%;\n padding: calc(0.625 ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n calc(1.25 * ${spacing});\n border-radius: calc(${borderRadius} * ${searchInputRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n outline: 0;\n }\n\n .emoji-mart-search input:hover {\n border-color: ${palette['foreground-color']};\n }\n\n .emoji-mart-search input,\n .emoji-mart-search input::-webkit-search-decoration,\n .emoji-mart-search input::-webkit-search-cancel-button,\n .emoji-mart-search input::-webkit-search-results-button,\n .emoji-mart-search input::-webkit-search-results-decoration {\n /\n remove webkit/blink styles for <input type=\"search\">\n via https://stackoverflow.com/a/9422689\n /\n -webkit-appearance: none;\n }\n\n .emoji-mart-search-icon {\n position: absolute;\n top: calc(1.875 * ${spacing});\n right: calc(2.25 * ${spacing});\n z-index: 2;\n border: none;\n background: none;\n }\n\n .emoji-mart-search-icon svg {\n fill: ${secondaryTextColor};\n }\n\n .emoji-mart-category .emoji-mart-emoji span {\n z-index: 1;\n position: relative;\n text-align: center;\n cursor: default;\n }\n\n .emoji-mart-category .emoji-mart-emoji:hover::before {\n z-index: 0;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${hoverColor};\n border-radius: 100%;\n }\n\n .emoji-mart-category-label {\n z-index: 2;\n top: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n position: relative;\n position: -webkit-sticky;\n position: sticky;\n\n / stylelint-enable declaration-block-no-duplicate-properties /\n }\n\n .emoji-mart-category-label span {\n display: block;\n width: 100%;\n font-weight: ${fontWeight['semi-bold']};\n padding: ${spacing} calc(0.25 ${spacing});\n background-color: ${transparentize(0.05, palette['primary-background'])};\n }\n\n .emoji-mart-category-list {\n margin: 0;\n padding: calc(0.375 * ${spacing}) 0;\n }\n\n .emoji-mart-category-list li {\n list-style: none;\n margin: 0;\n padding: 0;\n display: inline-block;\n }\n\n .emoji-mart-emoji {\n position: relative;\n display: inline-block;\n font-size: 0;\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n box-shadow: none;\n }\n\n .emoji-mart-emoji-native {\n /* stylelint-disable font-family-no-missing-generic-family-keyword /\n font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; / cSpell:disable-line /\n\n / stylelint-enable font-family-no-missing-generic-family-keyword /\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus,\n .emoji-mart-skin:focus,\n .emoji-mart-search input:focus {\n outline: 0;\n border-color: transparent;\n box-shadow: ${focusShadow};\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus {\n border-radius: 100%;\n }\n\n .emoji-mart-no-results {\n font-size: ${fontSizes.s};\n text-align: center;\n padding-top: 4.375rem;\n color: ${secondaryTextColor};\n }\n .emoji-mart-no-results-img {\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 50%;\n }\n .emoji-mart-no-results .emoji-mart-category-label {\n display: none;\n }\n .emoji-mart-no-results .emoji-mart-no-results-label {\n margin-top: 0.2em;\n }\n .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n content: none;\n }\n\n .emoji-mart-preview {\n position: relative;\n min-height: 2.5rem;\n height: fit-content;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .emoji-mart-preview-emoji {\n left: calc(1.5 ${spacing});\n }\n\n .emoji-mart-preview-data {\n left: calc(8.5 * ${spacing});\n right: calc(1.5 * ${spacing});\n word-break: break-all;\n flex: 1;\n }\n\n .emoji-mart-preview-skins {\n position: absolute;\n right: calc(3.75 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-skins.custom {\n right: calc(1.25 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-name {\n font-size: ${fontSizes.s};\n }\n\n .emoji-mart-preview-shortname {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n margin-left: 0.5em;\n }\n\n .emoji-mart-preview-emoticon {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n\n .emoji-mart-title span {\n display: inline-block;\n vertical-align: middle;\n }\n\n .emoji-mart-title .emoji-mart-emoji {\n padding: 0;\n }\n\n .emoji-mart-title-label {\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxl};\n font-weight: ${fontWeight.normal};\n }\n\n .emoji-mart-skin-swatches {\n font-size: 0;\n padding: calc(0.25 * ${spacing}) 0;\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(1.5 * ${spacing});\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.custom {\n font-size: 0;\n border: none;\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-swatch {\n display: inline-block;\n width: 0;\n vertical-align: middle;\n transition-property: width, padding;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch:nth-child(1) {\n transition-delay: 0s;\n }\n .emoji-mart-skin-swatch:nth-child(2) {\n transition-delay: 0.03s;\n }\n .emoji-mart-skin-swatch:nth-child(3) {\n transition-delay: 0.06s;\n }\n .emoji-mart-skin-swatch:nth-child(4) {\n transition-delay: 0.09s;\n }\n .emoji-mart-skin-swatch:nth-child(5) {\n transition-delay: 0.12s;\n }\n .emoji-mart-skin-swatch:nth-child(6) {\n transition-delay: 0.15s;\n }\n\n .emoji-mart-skin-swatch.selected {\n position: relative;\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatch.selected::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(0.5 * ${spacing});\n height: calc(0.5 * ${spacing});\n margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n background-color: ${palette['primary-background']};\n border-radius: 100%;\n pointer-events: none;\n opacity: 0;\n transition: opacity ${speed} ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch.custom {\n display: inline-block;\n width: 0;\n height: 2.375rem;\n overflow: hidden;\n vertical-align: middle;\n transition-property: width, height;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n cursor: default;\n }\n\n .emoji-mart-skin-swatch.custom.selected {\n position: relative;\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatch.custom.selected::after {\n content: '';\n width: 0;\n height: 0;\n }\n\n .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n background-color: ${palette['primary-background']};\n border-radius: 10%;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-text.opened {\n display: inline-block;\n vertical-align: middle;\n text-align: left;\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxs};\n padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n width: 6rem;\n height: 2.5rem;\n border-radius: 10%;\n background-color: ${palette['primary-background']};\n }\n\n .emoji-mart-skin {\n display: inline-block;\n width: 100%;\n padding-top: 100%;\n max-width: calc(1.5 * ${spacing});\n border-radius: 100%;\n }\n\n .emoji-mart-skin-tone-1 {\n background-color: #ffc93a;\n }\n .emoji-mart-skin-tone-2 {\n background-color: #fadcbc;\n }\n .emoji-mart-skin-tone-3 {\n background-color: #e0bb95;\n }\n .emoji-mart-skin-tone-4 {\n background-color: #bf8f68;\n }\n .emoji-mart-skin-tone-5 {\n background-color: #9b643d;\n }\n .emoji-mart-skin-tone-6 {\n background-color: #594539;\n }\n\n /* For screen readers only /\n .emoji-mart-sr-only {\n ${hideVisually}\n }\n\n /\n https://github.com/missive/emoji-mart/issues/319\n https://github.com/missive/emoji-mart/pull/442\n */\n .emoji-mart-emoji-native {\n height: var(--emoji-size);\n width: var(--emoji-size);\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n vertical-align: bottom;\n }\n\n .emoji-mart-emoji-native > span {\n position: absolute !important;\n top: 50%;\n left: 50%;\n height: initial !important;\n width: initial !important;\n transform: translate(-50%, -50%);\n }\n `;\n }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}
1	+ {"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n ({\n showFooter,\n theme: {\n base: {\n animation: { speed, timing },\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n 'font-weight': fontWeight,\n palette,\n shadow: { focus: focusShadow },\n spacing,\n 'border-radius': borderRadius,\n transparency\n },\n components: {\n 'search-input': { 'border-radius': searchInputRadius }\n }\n }\n }) => {\n const hoverColor = getHoverColors(palette['primary-background']).background;\n const secondaryTextColor = transparentize(\n 1 - transparency['transparent-2'],\n palette['foreground-color']\n );\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n /* stylelint-disable no-descending-specificity /\n / stylelint-disable no-duplicate-selectors /\n / stylelint-disable selector-max-class /\n border-radius: inherit;\n\n .emoji-mart,\n .emoji-mart {\n box-sizing: border-box;\n line-height: 1.15;\n }\n\n .emoji-mart {\n font-family: ${fontFamily};\n font-size: ${fontSizes.l};\n display: inline-block;\n color: ${palette['foreground-color']};\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: inherit;\n background: ${palette['primary-background']};\n }\n\n .emoji-mart .emoji-mart-emoji {\n padding: calc(0.75 * ${spacing});\n }\n\n .emoji-mart-bar {\n border: 0 solid ${palette['border-line']};\n }\n .emoji-mart-bar:first-child {\n border-bottom-width: 0.0625rem;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n .emoji-mart-bar:last-child {\n border-top-width: 0.0625rem;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n ${!showFooter &&\n css`\n display: none;\n `}\n }\n\n .emoji-mart-anchors {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 calc(0.75 * ${spacing});\n line-height: 0;\n }\n\n .emoji-mart-anchor {\n position: relative;\n display: block;\n flex: 1 1 auto;\n color: ${secondaryTextColor};\n text-align: center;\n padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n overflow: hidden;\n transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n }\n .emoji-mart-anchor:focus {\n outline: 0;\n }\n .emoji-mart-anchor:hover,\n .emoji-mart-anchor:focus,\n .emoji-mart-anchor-selected {\n color: ${palette.interactive};\n }\n\n .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n bottom: 0;\n }\n\n .emoji-mart-anchor-bar {\n position: absolute;\n bottom: calc(-0.375 * ${spacing});\n left: 0;\n width: 100%;\n height: calc(0.375 * ${spacing});\n background-color: ${palette.interactive};\n }\n\n .emoji-mart-anchors i {\n display: inline-block;\n width: 100%;\n max-width: calc(2.75 * ${spacing});\n }\n\n .emoji-mart-anchors svg,\n .emoji-mart-anchors img {\n fill: currentColor;\n height: calc(2.25 * ${spacing});\n width: calc(2.25 * ${spacing});\n }\n\n .emoji-mart-scroll {\n overflow-y: scroll;\n overflow-x: hidden;\n height: 16.875rem;\n padding: 0 calc(0.75 * ${spacing});\n will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome /\n }\n\n .emoji-mart-search {\n padding: ${spacing};\n position: relative;\n }\n\n .emoji-mart-search input {\n font-size: ${fontSizes.l};\n color: ${palette['foreground-color']};\n display: block;\n width: 100%;\n padding: calc(0.625 ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n calc(1.25 * ${spacing});\n border-radius: calc(${borderRadius} * ${searchInputRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n outline: 0;\n }\n\n .emoji-mart-search input:hover {\n border-color: ${palette['foreground-color']};\n }\n\n .emoji-mart-search input,\n .emoji-mart-search input::-webkit-search-decoration,\n .emoji-mart-search input::-webkit-search-cancel-button,\n .emoji-mart-search input::-webkit-search-results-button,\n .emoji-mart-search input::-webkit-search-results-decoration {\n /\n remove webkit/blink styles for <input type=\"search\">\n via https://stackoverflow.com/a/9422689\n /\n -webkit-appearance: none;\n }\n\n .emoji-mart-search-icon {\n position: absolute;\n top: calc(1.875 * ${spacing});\n right: calc(2.25 * ${spacing});\n z-index: 2;\n border: none;\n background: none;\n }\n\n .emoji-mart-search-icon svg {\n fill: ${secondaryTextColor};\n }\n\n .emoji-mart-category .emoji-mart-emoji span {\n z-index: 1;\n position: relative;\n text-align: center;\n cursor: default;\n }\n\n .emoji-mart-category .emoji-mart-emoji:hover::before {\n z-index: 0;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${hoverColor};\n border-radius: 100%;\n }\n\n .emoji-mart-category-label {\n z-index: 2;\n top: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n position: relative;\n position: -webkit-sticky;\n position: sticky;\n / stylelint-enable declaration-block-no-duplicate-properties /\n }\n\n .emoji-mart-category-label span {\n display: block;\n width: 100%;\n font-weight: ${fontWeight['semi-bold']};\n padding: ${spacing} calc(0.25 ${spacing});\n background-color: ${transparentize(0.05, palette['primary-background'])};\n }\n\n .emoji-mart-category-list {\n margin: 0;\n padding: calc(0.375 * ${spacing}) 0;\n }\n\n .emoji-mart-category-list li {\n list-style: none;\n margin: 0;\n padding: 0;\n display: inline-block;\n }\n\n .emoji-mart-emoji {\n position: relative;\n display: inline-block;\n font-size: 0;\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n box-shadow: none;\n }\n\n .emoji-mart-emoji-native {\n /* stylelint-disable font-family-no-missing-generic-family-keyword /\n font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; / cspell:disable-line /\n / stylelint-enable font-family-no-missing-generic-family-keyword /\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus,\n .emoji-mart-skin:focus,\n .emoji-mart-search input:focus {\n outline: 0;\n border-color: transparent;\n box-shadow: ${focusShadow};\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus {\n border-radius: 100%;\n }\n\n .emoji-mart-no-results {\n font-size: ${fontSizes.s};\n text-align: center;\n padding-top: 4.375rem;\n color: ${secondaryTextColor};\n }\n .emoji-mart-no-results-img {\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 50%;\n }\n .emoji-mart-no-results .emoji-mart-category-label {\n display: none;\n }\n .emoji-mart-no-results .emoji-mart-no-results-label {\n margin-top: 0.2em;\n }\n .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n content: none;\n }\n\n .emoji-mart-preview {\n position: relative;\n min-height: 2.5rem;\n height: fit-content;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .emoji-mart-preview-emoji {\n left: calc(1.5 ${spacing});\n }\n\n .emoji-mart-preview-data {\n left: calc(8.5 * ${spacing});\n right: calc(1.5 * ${spacing});\n word-break: break-all;\n flex: 1;\n }\n\n .emoji-mart-preview-skins {\n position: absolute;\n right: calc(3.75 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-skins.custom {\n right: calc(1.25 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-name {\n font-size: ${fontSizes.s};\n }\n\n .emoji-mart-preview-shortname {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n margin-left: 0.5em;\n }\n\n .emoji-mart-preview-emoticon {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n\n .emoji-mart-title span {\n display: inline-block;\n vertical-align: middle;\n }\n\n .emoji-mart-title .emoji-mart-emoji {\n padding: 0;\n }\n\n .emoji-mart-title-label {\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxl};\n font-weight: ${fontWeight.normal};\n }\n\n .emoji-mart-skin-swatches {\n font-size: 0;\n padding: calc(0.25 * ${spacing}) 0;\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(1.5 * ${spacing});\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.custom {\n font-size: 0;\n border: none;\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-swatch {\n display: inline-block;\n width: 0;\n vertical-align: middle;\n transition-property: width, padding;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch:nth-child(1) {\n transition-delay: 0s;\n }\n .emoji-mart-skin-swatch:nth-child(2) {\n transition-delay: 0.03s;\n }\n .emoji-mart-skin-swatch:nth-child(3) {\n transition-delay: 0.06s;\n }\n .emoji-mart-skin-swatch:nth-child(4) {\n transition-delay: 0.09s;\n }\n .emoji-mart-skin-swatch:nth-child(5) {\n transition-delay: 0.12s;\n }\n .emoji-mart-skin-swatch:nth-child(6) {\n transition-delay: 0.15s;\n }\n\n .emoji-mart-skin-swatch.selected {\n position: relative;\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatch.selected::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(0.5 * ${spacing});\n height: calc(0.5 * ${spacing});\n margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n background-color: ${palette['primary-background']};\n border-radius: 100%;\n pointer-events: none;\n opacity: 0;\n transition: opacity ${speed} ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch.custom {\n display: inline-block;\n width: 0;\n height: 2.375rem;\n overflow: hidden;\n vertical-align: middle;\n transition-property: width, height;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n cursor: default;\n }\n\n .emoji-mart-skin-swatch.custom.selected {\n position: relative;\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatch.custom.selected::after {\n content: '';\n width: 0;\n height: 0;\n }\n\n .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n background-color: ${palette['primary-background']};\n border-radius: 10%;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-text.opened {\n display: inline-block;\n vertical-align: middle;\n text-align: left;\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxs};\n padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n width: 6rem;\n height: 2.5rem;\n border-radius: 10%;\n background-color: ${palette['primary-background']};\n }\n\n .emoji-mart-skin {\n display: inline-block;\n width: 100%;\n padding-top: 100%;\n max-width: calc(1.5 * ${spacing});\n border-radius: 100%;\n }\n\n .emoji-mart-skin-tone-1 {\n background-color: #ffc93a;\n }\n .emoji-mart-skin-tone-2 {\n background-color: #fadcbc;\n }\n .emoji-mart-skin-tone-3 {\n background-color: #e0bb95;\n }\n .emoji-mart-skin-tone-4 {\n background-color: #bf8f68;\n }\n .emoji-mart-skin-tone-5 {\n background-color: #9b643d;\n }\n .emoji-mart-skin-tone-6 {\n background-color: #594539;\n }\n\n /* For screen readers only /\n .emoji-mart-sr-only {\n ${hideVisually}\n }\n\n /\n https://github.com/missive/emoji-mart/issues/319\n https://github.com/missive/emoji-mart/pull/442\n */\n .emoji-mart-emoji-native {\n height: var(--emoji-size);\n width: var(--emoji-size);\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n vertical-align: bottom;\n }\n\n .emoji-mart-emoji-native > span {\n position: absolute !important;\n top: 50%;\n left: 50%;\n height: initial !important;\n width: initial !important;\n transform: translate(-50%, -50%);\n }\n `;\n }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}

package/lib/components/EmojiPicker/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-export { default } from './EmojiPicker';
-export { EmojiPickerProps } from './EmojiPicker';
-export { EmojiContext } from './EmojiPicker';
+export { default, EmojiContext } from './EmojiPicker';
+export type { EmojiPickerProps } from './EmojiPicker';
 export { default as EmojiDisplay } from './EmojiDisplay';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/EmojiPicker/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM~~,~~eAAe,CAAC;AACxC,OAAO,~~EAAE,~~gBAAgB,EAAE,~~MAAM,eAAe,CAAC;~~AACjD~~,~~OAAO~~,EAAE,~~YAAY~~,EAAE,MAAM,eAAe,CAAC;~~AAC7C~~,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/EmojiPicker/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-export { default } from './EmojiPicker';
-export { EmojiContext } from './EmojiPicker';
+export { default, EmojiContext } from './EmojiPicker';
 export { default as EmojiDisplay } from './EmojiDisplay';
 //# sourceMappingURL=index.js.map

package/lib/components/EmojiPicker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,~~YAAY,EAAE,MAAM,eAAe,CAAC;~~AAC7C~~,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './EmojiPicker';\nexport { EmojiPickerProps } from './EmojiPicker';\nexport { ~~EmojiContext } from './EmojiPicker';\nexport {~~ default as EmojiDisplay } from './EmojiDisplay';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default, EmojiContext } from './EmojiPicker';\nexport type { EmojiPickerProps } from './EmojiPicker';\nexport { default as EmojiDisplay } from './EmojiDisplay';\n"]}

package/lib/components/EmptyState/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-export { default } from './EmptyState';
-export { EmptyStateProps } from './EmptyState';
-export { StyledEmptyState } from './EmptyState';
+export { default, StyledEmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/EmptyState/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM~~,~~cAAc,CAAC;AACvC,OAAO,~~EAAE,~~eAAe,EAAE,~~MAAM,cAAc,CAAC;~~AAC/C~~,~~OAAO~~,EAAE,~~gBAAgB~~,EAAE,MAAM,cAAc,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/EmptyState/index.js CHANGED Viewed

@@ -1,3 +1,2 @@
-export { default } from './EmptyState';
-export { StyledEmptyState } from './EmptyState';
+export { default, StyledEmptyState } from './EmptyState';
 //# sourceMappingURL=index.js.map

package/lib/components/EmptyState/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,~~gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './EmptyState';\nexport { EmptyStateProps } from './EmptyState';\~~nexport { StyledEmptyState } from './EmptyState';\~~n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default, StyledEmptyState } from './EmptyState';\nexport type { EmptyStateProps } from './EmptyState';\n"]}

package/lib/components/ErrorState/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-export { default } from './ErrorState';
-export { ErrorStateProps } from './ErrorState';
-export { StyledErrorState } from './ErrorState';
+export { default, StyledErrorState } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ErrorState/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM~~,~~cAAc,CAAC;AACvC,OAAO,~~EAAE,~~eAAe,EAAE,~~MAAM,cAAc,CAAC;~~AAC/C~~,~~OAAO~~,EAAE,~~gBAAgB~~,EAAE,MAAM,cAAc,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/ErrorState/index.js CHANGED Viewed

@@ -1,3 +1,2 @@
-export { default } from './ErrorState';
-export { StyledErrorState } from './ErrorState';
+export { default, StyledErrorState } from './ErrorState';
 //# sourceMappingURL=index.js.map

package/lib/components/ErrorState/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ErrorState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,~~gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './ErrorState';\nexport { ErrorStateProps } from './ErrorState';\~~nexport { StyledErrorState } from './ErrorState';\~~n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ErrorState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default, StyledErrorState } from './ErrorState';\nexport type { ErrorStateProps } from './ErrorState';\n"]}

package/lib/components/ExpandCollapse/ExpandCollapse.d.ts CHANGED Viewed

@@ -10,24 +10,24 @@ export interface ExpandCollapseProps extends AsProp, BaseProps {
     collapsed?: boolean;
     /**
      * Used to determine the transition property.
-     * @default "height"
+     * @default 'height'
      */
     dimension?: 'height' | 'width';
     /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */
     min?: string;
     /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */
     max?: string;
-    /**  Callback fired after content collapsed.  */
+    /** Callback fired after content collapsed. */
     onAfterCollapse?: () => void;
-    /**  Callback fired after content expanded.  */
+    /** Callback fired after content expanded. */
     onAfterExpand?: () => void;
-    /**  Callback fired before content collapsed.  */
+    /** Callback fired before content collapsed. */
     onBeforeCollapse?: () => void;
-    /** Callback fired before content expanded.  */
+    /** Callback fired before content expanded. */
     onBeforeExpand?: () => void;
     /**
      * Determine the speed of animation. This value comes from `theme.base.animation.speed`.
-     * @default "0.25s"
+     * @default '0.25s'
      */
     transitionSpeed?: string;
     /**

package/lib/components/ExpandCollapse/ExpandCollapse.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,~~gDAAgD~~;~~IAChD~~,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B~~,+CAA+C~~;~~IAC/C~~,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B~~,iDAAiD~~;~~IACjD~~,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B~~,+CAA+C~~;~~IAC/C~~,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0FzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0FzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ExpandCollapse/ExpandCollapse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAGV,QAAQ,EACR,eAAe,EACf,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwDxE,MAAM,aAAa,GAAG,CACpB,EAAe,EACf,SAAuD,EAC/C,EAAE;IACV,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,CAAC;IACnB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,IAAI,CAAC;AACjF,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAiB,EAAE;IACvD,MAAM,EACJ,MAAM,EACN,SAAS,EACT,eAAe,EACf,wBAAwB,EACxB,GAAG,EACH,GAAG,EACH,iBAAiB,EACjB,EAAE,EACH,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAkB,EAAE,CAAC;IAChC,IAAI,OAAO,GAAG,GAAG,CAAC;IAElB,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE;QACd,OAAO,GAAG,aAAa,CAAC,EAAE,EAAE,SAAU,CAAC,CAAC;KACzC;IAED,IAAI,MAAM,KAAK,UAAU,IAAI,MAAM,KAAK,WAAW,EAAE;QACnD,IAAI,GAAG,IAAI,GAAG,EAAE;YACd,KAAK,CAAC,SAA+B,CAAC,GAAG,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACpF,KAAK,CAAC,WAAW,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,QAAQ,CAAC;SAClE;QAED,IAAI,MAAM,KAAK,WAAW,IAAI,CAAC,iBAAiB,IAAI,CAAC,GAAG,EAAE;YACxD,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SACxB;KACF;IAED,IAAI,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,YAAY,EAAE;QACrD,KAAK,CAAC,SAA+B,CAAC,GAAG,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACrF,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC1B,KAAK,CAAC,kBAAkB,GAAG,SAAS,CAAC;QACrC,KAAK,CAAC,kBAAkB,GAAG,OAAO,eAAe,WAAW,CAAC;QAC7D,KAAK,CAAC,wBAAwB,GAAG,wBAAwB,CAAC;KAC3D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,MAAwB,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EACpC,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,KAAK,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,GAAG,cAAc,CAAC,KAAK,EACtC,GAAG,EACH,GAAG,EACH,iBAAiB,GAAG,KAAK,EACzB,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACrF,MAAM,cAAc,GAAG,QAAQ,EAAiB,CAAC;IACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAEvC,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS;YAAE,OAAO;QACrE,SAAS,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC/D,CAAC,EACD,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CACtB,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,SAAS,CAAC;QAClC,MAAM,aAAa,GAAG,CAAC,SAAS,CAAC;QACjC,MAAM,WAAW,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAE/D,IAAI,aAAa,IAAI,SAAS,EAAE;YAC9B,cAAc,EAAE,EAAE,CAAC;YACnB,SAAS,CAAC,WAAW,CAAC,CAAC;SACxB;aAAM,IAAI,eAAe,IAAI,WAAW,EAAE;YACzC,gBAAgB,EAAE,EAAE,CAAC;YACrB,SAAS,CAAC,YAAY,CAAC,CAAC;SACzB;QAED,IAAI,MAAM,KAAK,UAAU,IAAI,cAAc,KAAK,UAAU,EAAE;YAC1D,aAAa,EAAE,EAAE,CAAC;SACnB;aAAM,IAAI,MAAM,KAAK,WAAW,IAAI,cAAc,KAAK,WAAW,EAAE;YACnE,eAAe,EAAE,EAAE,CAAC;SACrB;QAED,QAAQ,CACN,QAAQ,CAAC;YACP,SAAS;YACT,GAAG;YACH,GAAG;YACH,eAAe;YACf,iBAAiB;YACjB,MAAM;YACN,EAAE,EAAE,GAAG,CAAC,OAAO;YACf,wBAAwB,EAAE,cAAc,CAAC,MAAM,CAAC,IAAI;SACrD,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAElC,IAAI,MAAM,KAAK,cAAc,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,cAAe,CAAC,EAAE;QACpF,KAAK,GAAG,QAAQ,CAAC;YACf,SAAS;YACT,GAAG;YACH,GAAG;YACH,eAAe;YACf,iBAAiB;YACjB,MAAM,EAAE,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;YAC3D,EAAE,EAAE,GAAG,CAAC,OAAO;YACf,wBAAwB,EAAE,cAAc,CAAC,MAAM,CAAC,IAAI;SACrD,CAAC,CAAC;KACJ;IAED,OAAO,MAAM,KAAK,WAAW,IAAI,iBAAiB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClE,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,eAAe,KAAM,SAAS,EAAE,KAAK,EAAE,KAAK,YACzE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}
1	+ {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default 'height'\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default '0.25s'\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}

package/lib/components/ExpandCollapse/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './ExpandCollapse';
-export { ExpandCollapseProps } from './ExpandCollapse';
+export type { ExpandCollapseProps } from './ExpandCollapse';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ExpandCollapse/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,~~OAAO~~,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/ExpandCollapse/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './ExpandCollapse';\nexport { ExpandCollapseProps } from './ExpandCollapse';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './ExpandCollapse';\nexport type { ExpandCollapseProps } from './ExpandCollapse';\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref, ReactNode } from 'react';
 import { ActionsProps } from '../Actions';
-import { BaseProps, ForwardProps } from '../../types';
+import { BaseProps, ForwardProps, HeadingTag } from '../../types';
 import { AdditionalInfoProps } from '../AdditionalInfo';
 export interface FieldGroupProps extends BaseProps {
     /** The content of the Field Group. */
@@ -8,15 +8,17 @@ export interface FieldGroupProps extends BaseProps {
     /** A description of the field group to be displayed above the controls. */
     description?: string;
     /**
-     * If true, the Field Group will be able to collapse the content of its children by clicking on the name.
+     * Controls the collapsed state of the field group.
+     * Passing undefined will render the field group as non-collapsible.
      * @default false
      */
-    collapsible?: boolean;
+    collapsed?: boolean;
     /**
-     * If true, the Field Group will be collapsed on the first render.
-     * @default false
+     * Called when user clicks the toggle button.
      */
-    defaultCollapsed?: boolean;
+    onToggleCollapsed?: () => void;
+    /** Select the heading tag for header */
+    headingTag?: HeadingTag;
     /** The name associated with the Field Group. */
     name?: string;
     /** Provides additional info relevant to the field group. */
@@ -30,9 +32,7 @@ export interface FieldGroupProps extends BaseProps {
     ref?: Ref<HTMLFieldSetElement>;
 }
 export declare const StyledFieldGroupName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFieldGroupLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {
-    open: boolean;
-}, never>;
+export declare const StyledFieldGroupLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, Pick<FieldGroupProps, "collapsed">, never>;
 export declare const StyledFieldGroup: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
 declare const FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps>;
 export default FieldGroup;

package/lib/components/FieldGroup/FieldGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAwB~~,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AASjG~~,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAGtD~~,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB~~;;;OAGG~~;IACH,~~WAAW~~,CAAC,EAAE,OAAO,CAAC;~~IACtB;;;OAGG~~;IACH,~~gBAAgB~~,CAAC,EAAE,~~OAAO~~,CAAC;~~IAC3B~~,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;~~AAgCD~~,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB~~;UAAoC~~,~~OAAO;SA~~+~~B7E~~,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,~~CAiEjE~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvF,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGlE,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AA+BD,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2EjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js CHANGED Viewed

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import Text from '../Text';
 import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
 import Flex from '../Flex';
+import Grid from '../Grid';
 import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
@@ -29,11 +31,11 @@ const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) =
 });
 StyledExpandButton.defaultProps = defaultThemeProp;
 export const StyledFieldGroupName = styled.span ``;
-export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('open'))(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+export const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))(({ collapsed, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
     return css `
       width: 100%;
       margin-bottom: 0;
-      ${open &&
+      ${!collapsed &&
         css `
         margin-block-end: calc(1.5 * ${spacing});
       `}
@@ -76,17 +78,16 @@ export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size':
     `;
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
-const FieldGroupLegend = ({ children, open, actions, additionalInfo, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
+const FieldGroupLegend = ({ children, collapsed, actions, additionalInfo, ...restProps }) => {
+    return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
 };
-const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
-    const [open, setOpen] = useState(!defaultCollapsed);
+const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, ...restProps }, ref) => {
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
-    return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, additionalInfo: additionalInfo, children: collapsible ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
-                        setOpen(cur => !cur);
-                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), _jsx(StyledFieldGroupName, { children: name })] }) })) : (_jsx(StyledFieldGroupName, { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
+    const descAndChildren = (_jsxs(Grid, { container: { cols: 'minmax(0, 1fr)', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
+                        onToggleCollapsed?.();
+                    }, "aria-expanded": collapsed ? 'false' : 'true', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

package/lib/components/FieldGroup/FieldGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n omitProps('open')\n)(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Flex container={{ direction: 'column', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Flex>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n {collapsible ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n </Flex>\n </StyledExpandButton>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n /\n collapsed?: boolean;\n /\n Called when user clicks the toggle button.\n /\n onToggleCollapsed?: () => void;\n /* Select the heading tag for header /\n headingTag?: HeadingTag;\n /* The name associated with the Field Group. /\n name?: string;\n /* Provides additional info relevant to the field group. /\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n omitProps('collapsed')\n)(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n collapsed,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Grid>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend collapsed={collapsed} actions={actions} additionalInfo={additionalInfo}>\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={collapsed ? 'false' : 'true'}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import { FieldGroupProps } from './FieldGroup';
 export interface FieldGroupListItemProps extends FieldGroupProps {
     /** The ID of the field group list item */
     id: string;
+    /** Item level onDelete callback. */
+    onDelete?: (id: string) => void;
 }
 export interface FieldGroupListProps {
     items: FieldGroupListItemProps[];

package/lib/components/FieldGroup/FieldGroupList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;~~CACZ~~;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAW1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,~~CA6CzE~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAW1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js CHANGED Viewed

@@ -32,19 +32,18 @@ const StyledAddButton = styled(Button)(({ theme }) => css `
 StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
-                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: onDelete
+    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, onDelete: itemOnDelete, ...restItemProps }) => {
+                return (_jsx(StyledListItem, { name: name, headingTag: headingTag, ...restItemProps, actions: onDelete || itemOnDelete
                         ? [
                             {
                                 id: 'delete',
                                 text: t('delete'),
                                 icon: 'trash',
                                 iconOnly: true,
-                                onClick: onDelete
-                                    ? () => {
-                                        onDelete(id);
-                                    }
-                                    : undefined
+                                onClick: () => {
+                                    itemOnDelete?.(id);
+                                    onDelete?.(id);
+                                }
                             }
                         ]
                         : undefined, children: children }, id));