@pega/cosmos-react-core 9.0.0-build.18.9 → 9.0.0-build.19.1

package/lib/components/DateTime/Picker/Calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,0LAoCrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0GAI7B,CAAC;AAIF,eAAO,MAAM,SAAS;aACX,OAAO;iBACH,OAAO;yBACC,OAAO;SAuC5B,CAAC;AAIH,eAAO,MAAM,eAAe,0GAc1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GA8B3B,CAAC;AAIH,eAAO,MAAM,cAAc,2GAoBzB,CAAC;AAIH,eAAO,MAAM,cAAc,2GA2CzB,CAAC"}
+{"version":3,"file":"Calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,0LAoCrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0GAI7B,CAAC;AAIF,eAAO,MAAM,SAAS;aACX,OAAO;iBACH,OAAO;yBACC,OAAO;SAuC5B,CAAC;AAIH,eAAO,MAAM,eAAe,0GAc1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAoC3B,CAAC;AAIH,eAAO,MAAM,cAAc,2GAoBzB,CAAC;AAIH,eAAO,MAAM,cAAc,2GA2CzB,CAAC"}

package/lib/components/DateTime/Picker/Calendar.styles.js

@@ -71,7 +71,7 @@ export const StyledWeekLabel = styled(StyledColumnLabel)(props => {
 });
 StyledWeekLabel.defaultProps = defaultThemeProp;
 export const StyledWeekNumber = styled.span(props => {
-    const { theme: { base: { breakpoints, spacing, 'disabled-opacity': disabledOpacity, palette: { dark } }, components: { card: { background: cardBackground } } } } = props;
+    const { theme: { base: { breakpoints, spacing, 'disabled-opacity': disabledOpacity, palette: { dark }, 'hit-area': { 'finger-min': hitAreaFinger } }, components: { card: { background: cardBackground } } } } = props;
     const background = tryCatch(() => transparentize(0.5, mix(0.8, cardBackground, dark)));
     return css `
     line-height: 2.625rem;
@@ -80,11 +80,16 @@ export const StyledWeekNumber = styled.span(props => {
     background-color: ${background};
     display: inline-block;
     opacity: ${disabledOpacity};
+    width: calc(2ch + 2 * ${spacing});
 
     @media (min-width: ${breakpoints.sm}) {
       padding: 0 ${spacing};
       margin-inline-end: ${spacing};
     }
+
+    @media (pointer: coarse) {
+      line-height: ${hitAreaFinger};
+    }
   `;
 });
 StyledWeekNumber.defaultProps = defaultThemeProp;

package/lib/components/DateTime/Picker/Calendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, rgba, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { tryCatch } from '../../../utils';\nimport Button from '../../Button';\nimport { readableColor } from '../../../styles';\n\nexport const StyledPick = styled(Button)(props => {\n  const {\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        palette: { interactive, dark },\n        spacing\n      },\n      components: {\n        card: { background },\n        'form-control': { 'foreground-color': foreground }\n      }\n    }\n  } = props;\n\n  const textColor = tryCatch(() => readableColor(interactive));\n  const disabledBackground = tryCatch(() => transparentize(0.5, mix(0.8, background, dark)));\n\n  return css`\n    height: 2.625rem;\n    border-radius: calc(0.5 * ${borderRadius});\n    padding: 0 ${spacing};\n    background-color: transparent;\n    border-color: transparent;\n    color: ${foreground};\n\n    &[aria-selected]:enabled {\n      background-color: ${interactive};\n      color: ${textColor};\n    }\n\n    &:disabled {\n      background-color: ${disabledBackground};\n      border-radius: 0;\n    }\n  `;\n});\n\nStyledPick.defaultProps = defaultThemeProp;\n\nexport const StyledColumnLabel = styled.span`\n  text-align: center;\n  margin: 0 auto;\n  font-size: 0.75rem;\n`;\n\nStyledColumnLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDay = styled(StyledPick)<{\n  current: boolean;\n  highlighted: boolean;\n  dayInNexOrPrevMonth: boolean;\n}>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { interactive },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        'form-control': { 'foreground-color': foreground }\n      }\n    },\n    current,\n    highlighted,\n    dayInNexOrPrevMonth\n  } = props;\n\n  const highlightedBgColor = tryCatch(() => rgba(interactive, 0.1));\n\n  return css`\n    background-color: ${highlighted ? highlightedBgColor : 'transparent'};\n    border: transparent;\n    color: ${foreground};\n\n    ${highlighted &&\n    css`\n      border-radius: 0;\n    `}\n\n    ${dayInNexOrPrevMonth &&\n    css`\n      opacity: ${disabledOpacity};\n    `}\n\n    ${current &&\n    css`\n      font-weight: bold;\n    `}\n  `;\n});\n\nStyledDay.defaultProps = defaultThemeProp;\n\nexport const StyledWeekLabel = styled(StyledColumnLabel)(props => {\n  const {\n    theme: {\n      base: { spacing, breakpoints }\n    }\n  } = props;\n\n  return css`\n    margin-inline-end: 0;\n\n    @media (min-width: ${breakpoints.sm}) {\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\n\nStyledWeekLabel.defaultProps = defaultThemeProp;\n\nexport const StyledWeekNumber = styled.span(props => {\n  const {\n    theme: {\n      base: {\n        breakpoints,\n        spacing,\n        'disabled-opacity': disabledOpacity,\n        palette: { dark }\n      },\n      components: {\n        card: { background: cardBackground }\n      }\n    }\n  } = props;\n\n  const background = tryCatch(() => transparentize(0.5, mix(0.8, cardBackground, dark)));\n\n  return css`\n    line-height: 2.625rem;\n    padding: 0;\n    margin-inline-end: 0;\n    background-color: ${background};\n    display: inline-block;\n    opacity: ${disabledOpacity};\n\n    @media (min-width: ${breakpoints.sm}) {\n      padding: 0 ${spacing};\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nexport const StyledWeekGrid = styled.table(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n  return css`\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-spacing: 0;\n\n    thead {\n      th {\n        padding-bottom: ${spacing};\n      }\n    }\n    ${StyledPick} {\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\n\nStyledWeekGrid.defaultProps = defaultThemeProp;\n\nexport const StyledCalendar = styled.table(props => {\n  const {\n    theme: {\n      base: { 'border-radius': borderRadius, spacing }\n    }\n  } = props;\n  return css`\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-spacing: 0;\n\n    th {\n      max-width: 2.625rem;\n    }\n\n    thead {\n      th {\n        padding-bottom: ${spacing};\n      }\n    }\n\n    td {\n      width: 2.625rem;\n      max-width: 2.625rem;\n\n      ${StyledDay} {\n        width: 100%;\n      }\n    }\n\n    tr {\n      &:first-child {\n        ${StyledWeekNumber} {\n          border-radius: calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n        }\n      }\n      &:last-child {\n        ${StyledWeekNumber} {\n          border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n        }\n      }\n    }\n  `;\n});\n\nStyledCalendar.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Calendar.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Calendar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, rgba, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { tryCatch } from '../../../utils';\nimport Button from '../../Button';\nimport { readableColor } from '../../../styles';\n\nexport const StyledPick = styled(Button)(props => {\n  const {\n    theme: {\n      base: {\n        'border-radius': borderRadius,\n        palette: { interactive, dark },\n        spacing\n      },\n      components: {\n        card: { background },\n        'form-control': { 'foreground-color': foreground }\n      }\n    }\n  } = props;\n\n  const textColor = tryCatch(() => readableColor(interactive));\n  const disabledBackground = tryCatch(() => transparentize(0.5, mix(0.8, background, dark)));\n\n  return css`\n    height: 2.625rem;\n    border-radius: calc(0.5 * ${borderRadius});\n    padding: 0 ${spacing};\n    background-color: transparent;\n    border-color: transparent;\n    color: ${foreground};\n\n    &[aria-selected]:enabled {\n      background-color: ${interactive};\n      color: ${textColor};\n    }\n\n    &:disabled {\n      background-color: ${disabledBackground};\n      border-radius: 0;\n    }\n  `;\n});\n\nStyledPick.defaultProps = defaultThemeProp;\n\nexport const StyledColumnLabel = styled.span`\n  text-align: center;\n  margin: 0 auto;\n  font-size: 0.75rem;\n`;\n\nStyledColumnLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDay = styled(StyledPick)<{\n  current: boolean;\n  highlighted: boolean;\n  dayInNexOrPrevMonth: boolean;\n}>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { interactive },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        'form-control': { 'foreground-color': foreground }\n      }\n    },\n    current,\n    highlighted,\n    dayInNexOrPrevMonth\n  } = props;\n\n  const highlightedBgColor = tryCatch(() => rgba(interactive, 0.1));\n\n  return css`\n    background-color: ${highlighted ? highlightedBgColor : 'transparent'};\n    border: transparent;\n    color: ${foreground};\n\n    ${highlighted &&\n    css`\n      border-radius: 0;\n    `}\n\n    ${dayInNexOrPrevMonth &&\n    css`\n      opacity: ${disabledOpacity};\n    `}\n\n    ${current &&\n    css`\n      font-weight: bold;\n    `}\n  `;\n});\n\nStyledDay.defaultProps = defaultThemeProp;\n\nexport const StyledWeekLabel = styled(StyledColumnLabel)(props => {\n  const {\n    theme: {\n      base: { spacing, breakpoints }\n    }\n  } = props;\n\n  return css`\n    margin-inline-end: 0;\n\n    @media (min-width: ${breakpoints.sm}) {\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\n\nStyledWeekLabel.defaultProps = defaultThemeProp;\n\nexport const StyledWeekNumber = styled.span(props => {\n  const {\n    theme: {\n      base: {\n        breakpoints,\n        spacing,\n        'disabled-opacity': disabledOpacity,\n        palette: { dark },\n        'hit-area': { 'finger-min': hitAreaFinger }\n      },\n      components: {\n        card: { background: cardBackground }\n      }\n    }\n  } = props;\n\n  const background = tryCatch(() => transparentize(0.5, mix(0.8, cardBackground, dark)));\n\n  return css`\n    line-height: 2.625rem;\n    padding: 0;\n    margin-inline-end: 0;\n    background-color: ${background};\n    display: inline-block;\n    opacity: ${disabledOpacity};\n    width: calc(2ch + 2 * ${spacing});\n\n    @media (min-width: ${breakpoints.sm}) {\n      padding: 0 ${spacing};\n      margin-inline-end: ${spacing};\n    }\n\n    @media (pointer: coarse) {\n      line-height: ${hitAreaFinger};\n    }\n  `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nexport const StyledWeekGrid = styled.table(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n  return css`\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-spacing: 0;\n\n    thead {\n      th {\n        padding-bottom: ${spacing};\n      }\n    }\n    ${StyledPick} {\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\n\nStyledWeekGrid.defaultProps = defaultThemeProp;\n\nexport const StyledCalendar = styled.table(props => {\n  const {\n    theme: {\n      base: { 'border-radius': borderRadius, spacing }\n    }\n  } = props;\n  return css`\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-spacing: 0;\n\n    th {\n      max-width: 2.625rem;\n    }\n\n    thead {\n      th {\n        padding-bottom: ${spacing};\n      }\n    }\n\n    td {\n      width: 2.625rem;\n      max-width: 2.625rem;\n\n      ${StyledDay} {\n        width: 100%;\n      }\n    }\n\n    tr {\n      &:first-child {\n        ${StyledWeekNumber} {\n          border-radius: calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n        }\n      }\n      &:last-child {\n        ${StyledWeekNumber} {\n          border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n        }\n      }\n    }\n  `;\n});\n\nStyledCalendar.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DateTime/Picker/DatePicker.js

@@ -85,7 +85,7 @@ const DatePicker = ({ testId, selected: initial, onChange, min, max, mode = 'dat
                             newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
                             newCurrent.setUTCDate(0);
                             return Boolean(max && max < newCurrent);
-                        })(), children: _jsx(Icon, { name: `caret-${end}` }) })] }), _jsx(Flex, { container: { wrap: 'nowrap' }, dir: 'ltr', children: _jsx(Calendar, { testId: testIds.calendar, ref: calendarRef, selected: selected && isValidDate(selected) ? selected : undefined, current: current, calendarType: calendarType, showWeekNumber: showWeekNumber, mode: mode === 'datetime' ? 'date' : mode, onFocus: setCurrent, onSelect: selectedDate => {
+                        })(), children: _jsx(Icon, { name: `caret-${end}` }) })] }), _jsx(Flex, { container: { wrap: 'nowrap', justify: 'center' }, dir: 'ltr', children: _jsx(Calendar, { testId: testIds.calendar, ref: calendarRef, selected: selected && isValidDate(selected) ? selected : undefined, current: current, calendarType: calendarType, showWeekNumber: showWeekNumber, mode: mode === 'datetime' ? 'date' : mode, onFocus: setCurrent, onSelect: selectedDate => {
                         const newDate = new Date(selectedDate);
                         if (selected) {
                             newDate.setUTCHours(selected.getUTCHours());

package/lib/components/DateTime/Picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,aAAa,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,kBAAkB,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,EACL,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,qBAAqB,CAAC;AAE7B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,MAAM,UAAU,GAAuC,CAAC,EACtD,MAAM,EACN,QAAQ,EAAE,OAAO,EACjB,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,GAAG,MAAM,EACb,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEzD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,EAAE,CACxE,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC;YACzE,WAAW,CAAC,OAAO,CAAC,CAAC;YACrB,UAAU,CAAC,OAAO,IAAI,sBAAsB,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,yEAAyE;QACzE,UAAU,CAAC,GAAG,EAAE;YACd,WAAW,CAAC,OAAO,EAAE,aAAa,CAAc,8BAA8B,CAAC,EAAE,KAAK,EAAE,CAAC;QAC3F,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO,CAAC,CAAC,gCAAgC,CAAC,CAAC;QAC7C,CAAC;QACD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACpB,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC;IACpC,CAAC,CAAC;IACF,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,MAAM,YAAY,GAChB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAEhF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,OAAO,CACL,MAAC,gBAAgB,mBACF,OAAO,CAAC,IAAI,gBACb,CAAC,CAAC,UAAU,CAAC,EACzB,IAAI,EAAC,QAAQ,KACT,SAAS,aAEb,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,aAC/E,KAAC,UAAU,IACT,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,EAAE,EAAE,0BAA0B,EAC9B,iBAAiB,EAAE,KAAK,EACxB,KAAK,EAAE,OAAO,EACd,QAAQ,QACR,IAAI,EAAC,OAAO,gBACA,CAAC,CAAC,+BAA+B,CAAC,EAC9C,QAAQ,EAAE,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;4BACjC,IAAI,UAAU,GAAG,IAAI,IAAI,CAAC,gBAAiB,CAAC,CAAC;4BAE7C,IAAI,GAAG,EAAE,CAAC;gCACR,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;gCACjC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;gCAC7E,IAAI,UAAU,GAAG,OAAO;oCAAE,UAAU,GAAG,OAAO,CAAC;4BACjD,CAAC;4BAED,IAAI,GAAG,EAAE,CAAC;gCACR,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;gCACjC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;gCAC7E,IAAI,UAAU,GAAG,OAAO;oCAAE,UAAU,GAAG,OAAO,CAAC;4BACjD,CAAC;4BAED,UAAU,CAAC,UAAU,CAAC,CAAC;wBACzB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,EACF,KAAC,kBAAkB,iBAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,QAAQ,KAAK,OAAO;4BACnB,CAAC,CAAC,uBAAuB,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;4BACnD,CAAC,CAAC,wBAAwB,CAAC,OAAO,EAAE,MAAM,CAAC,GAC1B,EACrB,KAAC,2BAA2B,mBACb,OAAO,CAAC,aAAa,EAClC,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC7B,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;4BACjD,UAAU,CAAC,UAAU,CAAC,CAAC;wBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,GAAG,EAAE;4BACd,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;4BACrC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;4BAEzB,OAAO,OAAO,CAAC,GAAG,IAAI,GAAG,GAAG,UAAU,CAAC,CAAC;wBAC1C,CAAC,CAAC,EAAE,YAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,GAAI,GACJ,EAC9B,KAAC,2BAA2B,mBACb,OAAO,CAAC,cAAc,EACnC,KAAK,EAAE,gBAAgB,EACvB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,QAAQ,GAAG,sBAAsB,EAAE,CAAC;4BAC1C,UAAU,CAAC,QAAQ,CAAC,CAAC;4BACrB,WAAW,CAAC,QAAQ,CAAC,CAAC;4BACtB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC;wBACvB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,GAAG,GACA,EAC9B,KAAC,2BAA2B,mBACb,OAAO,CAAC,SAAS,EAC9B,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC7B,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;4BAClD,UAAU,CAAC,WAAW,CAAC,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,GAAG,EAAE;4BACd,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;4BACrC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;4BACrD,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;4BACzB,OAAO,OAAO,CAAC,GAAG,IAAI,GAAG,GAAG,UAAU,CAAC,CAAC;wBAC1C,CAAC,CAAC,EAAE,YAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,GACF,IACzB,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAC,KAAK,YAC5C,KAAC,QAAQ,IACP,MAAM,EAAE,OAAO,CAAC,QAAQ,EACxB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAClE,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACzC,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,YAAY,CAAC,EAAE;wBACvB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;wBAEvC,IAAI,QAAQ,EAAE,CAAC;4BACb,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;4BAC5C,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;4BAChD,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;wBAClD,CAAC;wBAED,UAAU,CAAC,OAAO,CAAC,CAAC;wBACpB,WAAW,CAAC,OAAO,CAAC,CAAC;wBACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC;oBACtB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,GACG,EAEN,IAAI,KAAK,UAAU,IAAI,CACtB,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,CAAC,IAAI,EACpB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,EACrB,KAAK,EAAE,QAAQ,EACf,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,CAAC,EAAE;oBACvB,IAAI,YAAY,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;wBACzD,OAAO;oBACT,CAAC;oBACD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;oBAC3D,MAAM,sBAAsB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;oBACvE,OAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC,WAAW,EAAE,CAAC,CAAC;oBAC1D,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;oBAC9D,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;oBAE9D,WAAW,CAAC,OAAO,CAAC,CAAC;oBACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC;gBACtB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,CACH,IACgB,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useDirection, useI18n, useTestIds } from '../../../hooks';\nimport { getSelectedDateInfoText, getCalendarTypeFromLocale, parseToDate } from '../Input/utils';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport TimeInput from '../Input/TimeInput';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\nimport { withTestIds } from '../../../utils';\nimport { getAdjustedUTCDateTime } from '../utils';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport { shiftDateByMonth, isValidDate, toDateTimeString, getCurrentMonthYearLabel } from './utils';\nimport {\n  StyledDatePicker,\n  StyledDatePickerMonthInput,\n  StyledMonthPicker,\n  StyledMonthNavigationButton\n} from './DatePicker.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst DatePicker: FunctionComponent<DatePickerProps> = ({\n  testId,\n  selected: initial,\n  onChange,\n  min,\n  max,\n  mode = 'date',\n  showWeekNumber,\n  withSeconds,\n  pickerInterval,\n  clockFormat,\n  ...restProps\n}: DatePickerProps) => {\n  const testIds = useTestIds(testId, getDatePickerTestIds);\n\n  const { locale } = useConfiguration();\n  const t = useI18n();\n\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(\n    selected && isValidDate(selected) ? selected : getAdjustedUTCDateTime()\n  );\n\n  useEffect(() => {\n    if (toDateTimeString(initial, mode) !== toDateTimeString(selected, mode)) {\n      setSelected(initial);\n      setCurrent(initial || getAdjustedUTCDateTime());\n    }\n  }, [toDateTimeString(initial, mode)]);\n\n  const calendarRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const getTodayButtonLabel = () => {\n    if (mode === 'datetime') {\n      return t('set_current_date_and_time_a11y');\n    }\n    if (mode === 'week') {\n      return t('set_current_week_ally');\n    }\n    return t('set_current_date_a11y');\n  };\n  const todayButtonLabel = getTodayButtonLabel();\n\n  const calendarType =\n    mode === 'week' ? CALENDAR_TYPES.ISO_8601 : getCalendarTypeFromLocale(locale);\n\n  const { start, end } = useDirection();\n  return (\n    <StyledDatePicker\n      data-testid={testIds.root}\n      aria-label={t('calendar')}\n      role='region'\n      {...restProps}\n    >\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n        <MonthInput\n          testId={testIds.month}\n          as={StyledDatePickerMonthInput}\n          innerLabelsHidden={false}\n          value={current}\n          required\n          role='group'\n          aria-label={t('picker_jump_to_month_and_year')}\n          onChange={({ valueAsTimestamp }) => {\n            let newCurrent = new Date(valueAsTimestamp!);\n\n            if (max) {\n              const maxDate = parseToDate(max);\n              maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());\n              if (newCurrent > maxDate) newCurrent = maxDate;\n            }\n\n            if (min) {\n              const minDate = parseToDate(min);\n              minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());\n              if (newCurrent < minDate) newCurrent = minDate;\n            }\n\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <VisuallyHiddenText aria-live='polite' role='alert'>\n          {selected === current\n            ? getSelectedDateInfoText(current, mode, locale, t)\n            : getCurrentMonthYearLabel(current, locale)}\n        </VisuallyHiddenText>\n        <StyledMonthNavigationButton\n          data-testid={testIds.previousMonth}\n          label={t('picker_prev_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = shiftDateByMonth(current, -1);\n            setCurrent(newCurrent);\n          }}\n          disabled={(() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCDate(1);\n\n            return Boolean(min && min > newCurrent);\n          })()}\n        >\n          <Icon name={`caret-${start}`} />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.setCurrentDate}\n          label={todayButtonLabel}\n          icon\n          variant='simple'\n          onClick={() => {\n            const currDate = getAdjustedUTCDateTime();\n            setCurrent(currDate);\n            setSelected(currDate);\n            onChange?.(currDate);\n          }}\n        >\n          <Icon name='calendar-now' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.nextMonth}\n          label={t('picker_next_month')}\n          icon\n          variant='simple'\n          onClick={() => {\n            const nextCurrent = shiftDateByMonth(current, +1);\n            setCurrent(nextCurrent);\n          }}\n          disabled={(() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            newCurrent.setUTCDate(0);\n            return Boolean(max && max < newCurrent);\n          })()}\n        >\n          <Icon name={`caret-${end}`} />\n        </StyledMonthNavigationButton>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap' }} dir='ltr'>\n        <Calendar\n          testId={testIds.calendar}\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          calendarType={calendarType}\n          showWeekNumber={showWeekNumber}\n          mode={mode === 'datetime' ? 'date' : mode}\n          onFocus={setCurrent}\n          onSelect={selectedDate => {\n            const newDate = new Date(selectedDate);\n\n            if (selected) {\n              newDate.setUTCHours(selected.getUTCHours());\n              newDate.setUTCMinutes(selected.getUTCMinutes());\n              newDate.setUTCSeconds(selected.getUTCSeconds());\n            }\n\n            setCurrent(newDate);\n            setSelected(newDate);\n            onChange?.(newDate);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n\n      {mode === 'datetime' && (\n        <TimeInput\n          testId={testIds.time}\n          label={t('time_text')}\n          value={selected}\n          pickerInterval={pickerInterval}\n          withSeconds={withSeconds}\n          clockFormat={clockFormat}\n          onChange={selectedTime => {\n            if (selectedTime.state || !selectedTime.valueAsISOString) {\n              return;\n            }\n            const newDate = selected ? new Date(selected) : new Date();\n            const selectedTimeDateObject = new Date(selectedTime.valueAsISOString);\n            newDate.setUTCHours(selectedTimeDateObject.getUTCHours());\n            newDate.setUTCMinutes(selectedTimeDateObject.getUTCMinutes());\n            newDate.setUTCSeconds(selectedTimeDateObject.getUTCSeconds());\n\n            setSelected(newDate);\n            onChange?.(newDate);\n          }}\n          min={min}\n          max={max}\n        />\n      )}\n    </StyledDatePicker>\n  );\n};\n\nexport default withTestIds(DatePicker, getDatePickerTestIds);\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useDirection, useI18n, useTestIds } from '../../../hooks';\nimport { getSelectedDateInfoText, getCalendarTypeFromLocale, parseToDate } from '../Input/utils';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport TimeInput from '../Input/TimeInput';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\nimport { withTestIds } from '../../../utils';\nimport { getAdjustedUTCDateTime } from '../utils';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport { shiftDateByMonth, isValidDate, toDateTimeString, getCurrentMonthYearLabel } from './utils';\nimport {\n  StyledDatePicker,\n  StyledDatePickerMonthInput,\n  StyledMonthPicker,\n  StyledMonthNavigationButton\n} from './DatePicker.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst DatePicker: FunctionComponent<DatePickerProps> = ({\n  testId,\n  selected: initial,\n  onChange,\n  min,\n  max,\n  mode = 'date',\n  showWeekNumber,\n  withSeconds,\n  pickerInterval,\n  clockFormat,\n  ...restProps\n}: DatePickerProps) => {\n  const testIds = useTestIds(testId, getDatePickerTestIds);\n\n  const { locale } = useConfiguration();\n  const t = useI18n();\n\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(\n    selected && isValidDate(selected) ? selected : getAdjustedUTCDateTime()\n  );\n\n  useEffect(() => {\n    if (toDateTimeString(initial, mode) !== toDateTimeString(selected, mode)) {\n      setSelected(initial);\n      setCurrent(initial || getAdjustedUTCDateTime());\n    }\n  }, [toDateTimeString(initial, mode)]);\n\n  const calendarRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const getTodayButtonLabel = () => {\n    if (mode === 'datetime') {\n      return t('set_current_date_and_time_a11y');\n    }\n    if (mode === 'week') {\n      return t('set_current_week_ally');\n    }\n    return t('set_current_date_a11y');\n  };\n  const todayButtonLabel = getTodayButtonLabel();\n\n  const calendarType =\n    mode === 'week' ? CALENDAR_TYPES.ISO_8601 : getCalendarTypeFromLocale(locale);\n\n  const { start, end } = useDirection();\n  return (\n    <StyledDatePicker\n      data-testid={testIds.root}\n      aria-label={t('calendar')}\n      role='region'\n      {...restProps}\n    >\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n        <MonthInput\n          testId={testIds.month}\n          as={StyledDatePickerMonthInput}\n          innerLabelsHidden={false}\n          value={current}\n          required\n          role='group'\n          aria-label={t('picker_jump_to_month_and_year')}\n          onChange={({ valueAsTimestamp }) => {\n            let newCurrent = new Date(valueAsTimestamp!);\n\n            if (max) {\n              const maxDate = parseToDate(max);\n              maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());\n              if (newCurrent > maxDate) newCurrent = maxDate;\n            }\n\n            if (min) {\n              const minDate = parseToDate(min);\n              minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());\n              if (newCurrent < minDate) newCurrent = minDate;\n            }\n\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <VisuallyHiddenText aria-live='polite' role='alert'>\n          {selected === current\n            ? getSelectedDateInfoText(current, mode, locale, t)\n            : getCurrentMonthYearLabel(current, locale)}\n        </VisuallyHiddenText>\n        <StyledMonthNavigationButton\n          data-testid={testIds.previousMonth}\n          label={t('picker_prev_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = shiftDateByMonth(current, -1);\n            setCurrent(newCurrent);\n          }}\n          disabled={(() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCDate(1);\n\n            return Boolean(min && min > newCurrent);\n          })()}\n        >\n          <Icon name={`caret-${start}`} />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.setCurrentDate}\n          label={todayButtonLabel}\n          icon\n          variant='simple'\n          onClick={() => {\n            const currDate = getAdjustedUTCDateTime();\n            setCurrent(currDate);\n            setSelected(currDate);\n            onChange?.(currDate);\n          }}\n        >\n          <Icon name='calendar-now' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.nextMonth}\n          label={t('picker_next_month')}\n          icon\n          variant='simple'\n          onClick={() => {\n            const nextCurrent = shiftDateByMonth(current, +1);\n            setCurrent(nextCurrent);\n          }}\n          disabled={(() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            newCurrent.setUTCDate(0);\n            return Boolean(max && max < newCurrent);\n          })()}\n        >\n          <Icon name={`caret-${end}`} />\n        </StyledMonthNavigationButton>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap', justify: 'center' }} dir='ltr'>\n        <Calendar\n          testId={testIds.calendar}\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          calendarType={calendarType}\n          showWeekNumber={showWeekNumber}\n          mode={mode === 'datetime' ? 'date' : mode}\n          onFocus={setCurrent}\n          onSelect={selectedDate => {\n            const newDate = new Date(selectedDate);\n\n            if (selected) {\n              newDate.setUTCHours(selected.getUTCHours());\n              newDate.setUTCMinutes(selected.getUTCMinutes());\n              newDate.setUTCSeconds(selected.getUTCSeconds());\n            }\n\n            setCurrent(newDate);\n            setSelected(newDate);\n            onChange?.(newDate);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n\n      {mode === 'datetime' && (\n        <TimeInput\n          testId={testIds.time}\n          label={t('time_text')}\n          value={selected}\n          pickerInterval={pickerInterval}\n          withSeconds={withSeconds}\n          clockFormat={clockFormat}\n          onChange={selectedTime => {\n            if (selectedTime.state || !selectedTime.valueAsISOString) {\n              return;\n            }\n            const newDate = selected ? new Date(selected) : new Date();\n            const selectedTimeDateObject = new Date(selectedTime.valueAsISOString);\n            newDate.setUTCHours(selectedTimeDateObject.getUTCHours());\n            newDate.setUTCMinutes(selectedTimeDateObject.getUTCMinutes());\n            newDate.setUTCSeconds(selectedTimeDateObject.getUTCSeconds());\n\n            setSelected(newDate);\n            onChange?.(newDate);\n          }}\n          min={min}\n          max={max}\n        />\n      )}\n    </StyledDatePicker>\n  );\n};\n\nexport default withTestIds(DatePicker, getDatePickerTestIds);\n"]}

package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,8GA4B5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAe3B,CAAC;AAIH,eAAO,MAAM,2BAA2B,0LAIvC,CAAC;AAIF,eAAO,MAAM,0BAA0B,sHAkCtC,CAAC"}
+{"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,8GA6B5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAe3B,CAAC;AAIH,eAAO,MAAM,2BAA2B,0LAIvC,CAAC;AAIF,eAAO,MAAM,0BAA0B,sHAkCtC,CAAC"}

package/lib/components/DateTime/Picker/DatePicker.styles.js

@@ -8,7 +8,8 @@ import StyledDateTime from '../Input/DateTime.styles';
 export const StyledMonthPicker = styled.fieldset(props => {
     const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'foreground-color': color } }, components: { 'form-control': formControl } } } = props;
     return css `
-    margin: calc(2 * ${spacing}) calc(0.5 * ${spacing});
+    margin-block-end: calc(2 * ${spacing});
+    margin-inline: calc(0.5 * ${spacing});
     font-size: 0.875rem;
     border: none;
 
@@ -30,7 +31,7 @@ export const StyledDatePicker = styled.div(props => {
     const { theme: { base: { spacing } } } = props;
     return css `
     width: max-content;
-    padding: 0 ${spacing} ${spacing} ${spacing};
+    padding: ${spacing};
     overflow-y: auto;
 
     ${StyledFormField} {

package/lib/components/DateTime/Picker/DatePicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,OAAO,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACvC,EACD,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAC5C,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;uBACW,OAAO,gBAAgB,OAAO;;;;MAI/C,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;MAGxE,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;iBAG7D,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;iBAEK,OAAO,IAAI,OAAO,IAAI,OAAO;;;MAGxC,eAAe;mCACc,OAAO;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;CAIxD,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB;;;;;;IAM7E,eAAe;;;QAGX,WAAW,OAAO,cAAc,MAAM,WAAW;;;;;;;;;QASjD,YAAY;;;;qBAIC,YAAY;;;;;oBAKb,YAAY;;;;;;;CAO/B,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport Button, { StyledButton } from '../../Button';\nimport { StyledLabel } from '../../Label';\nimport { StyledFormField, StyledLabelRow } from '../../FormField/FormField';\nimport { StyledSelect } from '../../Select/Select';\nimport StyledDateTime from '../Input/DateTime.styles';\nimport type { MonthInputProps } from '../Input/MonthInput';\n\nexport const StyledMonthPicker = styled.fieldset(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'foreground-color': color }\n      },\n      components: { 'form-control': formControl }\n    }\n  } = props;\n  return css`\n    margin: calc(2 * ${spacing}) calc(0.5 * ${spacing});\n    font-size: 0.875rem;\n    border: none;\n\n    ${StyledSelect} {\n      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n    }\n\n    ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n      border: 0;\n      &:enabled {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledMonthPicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePicker = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n  return css`\n    width: max-content;\n    padding: 0 ${spacing} ${spacing} ${spacing};\n    overflow-y: auto;\n\n    ${StyledFormField} {\n      padding-inline: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledMonthNavigationButton = styled(Button)`\n  & + & {\n    margin-inline-start: 0;\n  }\n`;\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePickerMonthInput = styled(StyledDateTime)<MonthInputProps>`\n  padding: 0;\n  border: 0;\n  height: max-content;\n  background-color: transparent;\n\n  ${StyledFormField} {\n    padding-inline: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      &::after {\n        content: none;\n      }\n    }\n    > :last-child {\n      margin: 0;\n    }\n\n    > ${StyledSelect}:focus {\n      z-index: 1;\n    }\n\n    :first-child > ${StyledSelect} {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    :last-child > ${StyledSelect} {\n      width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n`;\n\nStyledDatePickerMonthInput.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,OAAO,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACvC,EACD,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAC5C,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;iCACqB,OAAO;gCACR,OAAO;;;;MAIjC,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;MAGxE,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;iBAG7D,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;eAEG,OAAO;;;MAGhB,eAAe;mCACc,OAAO;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;CAIxD,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB;;;;;;IAM7E,eAAe;;;QAGX,WAAW,OAAO,cAAc,MAAM,WAAW;;;;;;;;;QASjD,YAAY;;;;qBAIC,YAAY;;;;;oBAKb,YAAY;;;;;;;CAO/B,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport Button, { StyledButton } from '../../Button';\nimport { StyledLabel } from '../../Label';\nimport { StyledFormField, StyledLabelRow } from '../../FormField/FormField';\nimport { StyledSelect } from '../../Select/Select';\nimport StyledDateTime from '../Input/DateTime.styles';\nimport type { MonthInputProps } from '../Input/MonthInput';\n\nexport const StyledMonthPicker = styled.fieldset(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'foreground-color': color }\n      },\n      components: { 'form-control': formControl }\n    }\n  } = props;\n  return css`\n    margin-block-end: calc(2 * ${spacing});\n    margin-inline: calc(0.5 * ${spacing});\n    font-size: 0.875rem;\n    border: none;\n\n    ${StyledSelect} {\n      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n    }\n\n    ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n      border: 0;\n      &:enabled {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledMonthPicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePicker = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n  return css`\n    width: max-content;\n    padding: ${spacing};\n    overflow-y: auto;\n\n    ${StyledFormField} {\n      padding-inline: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledMonthNavigationButton = styled(Button)`\n  & + & {\n    margin-inline-start: 0;\n  }\n`;\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePickerMonthInput = styled(StyledDateTime)<MonthInputProps>`\n  padding: 0;\n  border: 0;\n  height: max-content;\n  background-color: transparent;\n\n  ${StyledFormField} {\n    padding-inline: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      &::after {\n        content: none;\n      }\n    }\n    > :last-child {\n      margin: 0;\n    }\n\n    > ${StyledSelect}:focus {\n      z-index: 1;\n    }\n\n    :first-child > ${StyledSelect} {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    :last-child > ${StyledSelect} {\n      width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n`;\n\nStyledDatePickerMonthInput.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DateTime/Picker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa/C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AAYtD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,uDAAuD;IACvD,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;CAC5E;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAsH5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa/C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AAWtD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,uDAAuD;IACvD,aAAa,CAAC,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;QAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAA;KAAE,CAAC;CAC5E;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAsH5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DateTime/Picker/DateRangePicker.js

@@ -10,7 +10,6 @@ import { getCalendarTypeFromLocale } from '../Input/utils';
 import { getAdjustedUTCDateTime } from '../utils';
 import { getDatePickerTestIds } from '../DateTime.test-ids';
 import Calendar from './Calendar';
-import Weeks from './Weeks';
 import { StyledDatePicker, StyledDatePickerMonthInput, StyledMonthNavigationButton, StyledMonthPicker } from './DatePicker.styles';
 import { isValidDate, toDateTimeString } from './utils';
 registerIcon(caretLeftIcon, caretRightIcon);
@@ -52,13 +51,13 @@ const DateRangePicker = (props) => {
                             const newCurrent = new Date(current);
                             newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
                             setCurrent(newCurrent);
-                        }, children: _jsx(Icon, { name: 'caret-right' }) })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [showWeekNumber && _jsx(Weeks, { current: current, calendarType: calendarType, disabled: true }), _jsx(Calendar, { ref: calendarRef, selected: selected && isValidDate(selected) ? selected : undefined, current: current, selectedRange: selectedRange, showHighlight: true, calendarType: calendarType, onFocus: date => {
-                            setCurrent(date);
-                        }, onSelect: date => {
-                            setCurrent(date);
-                            setSelected(date);
-                            onChange?.(date);
-                        }, min: min, max: max })] })] }));
+                        }, children: _jsx(Icon, { name: 'caret-right' }) })] }), _jsx(Flex, { container: { wrap: 'nowrap', justify: 'center' }, children: _jsx(Calendar, { ref: calendarRef, selected: selected && isValidDate(selected) ? selected : undefined, current: current, selectedRange: selectedRange, showHighlight: true, calendarType: calendarType, showWeekNumber: showWeekNumber, onFocus: date => {
+                        setCurrent(date);
+                    }, onSelect: date => {
+                        setCurrent(date);
+                        setSelected(date);
+                        onChange?.(date);
+                    }, min: min, max: max }) })] }));
 };
 export default DateRangePicker;
 //# sourceMappingURL=DateRangePicker.js.map

package/lib/components/DateTime/Picker/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useI18n, useTestIds } from '../../../hooks';\nimport { getCalendarTypeFromLocale } from '../Input/utils';\nimport { getAdjustedUTCDateTime } from '../utils';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport Weeks from './Weeks';\nimport {\n  StyledDatePicker,\n  StyledDatePickerMonthInput,\n  StyledMonthNavigationButton,\n  StyledMonthPicker\n} from './DatePicker.styles';\nimport { isValidDate, toDateTimeString } from './utils';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface DateRangePickerProps extends DatePickerProps {\n  /** Defines dates range that can be set by the user. */\n  selectedRange?: { startDate: Date | undefined; endDate: Date | undefined };\n}\n\nconst DateRangePicker: FunctionComponent<DateRangePickerProps> = (props: DateRangePickerProps) => {\n  const { locale } = useConfiguration();\n  const {\n    testId,\n    selected: initial,\n    selectedRange,\n    onChange,\n    min,\n    max,\n    mode,\n    showWeekNumber,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getDatePickerTestIds);\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(selected && isValidDate(selected) ? selected : new Date());\n\n  useEffect(() => {\n    if (toDateTimeString(initial) !== toDateTimeString(selected)) {\n      setSelected(initial);\n      setCurrent(initial || new Date());\n    }\n  }, [toDateTimeString(initial)]);\n\n  const calendarRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const calendarType = getCalendarTypeFromLocale(locale);\n  const t = useI18n();\n\n  return (\n    <StyledDatePicker aria-label={t('calendar')} role='region' {...restProps}>\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n        <MonthInput\n          data-testid={testIds.month}\n          aria-label={t('picker_jump_to_month_and_year')}\n          value={current}\n          as={StyledDatePickerMonthInput}\n          innerLabelsHidden={false}\n          required\n          role='group'\n          onChange={({ valueAsTimestamp }) => {\n            const newCurrent = new Date(valueAsTimestamp!);\n            newCurrent.setUTCDate(current.getUTCDate());\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <StyledMonthNavigationButton\n          data-testid={testIds.previousMonth}\n          label={t('picker_prev_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n            setCurrent(newCurrent);\n          }}\n        >\n          <Icon name='caret-left' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.setCurrentDate}\n          label={t('set_current_date_a11y')}\n          icon\n          variant='simple'\n          onClick={() => {\n            const currDate = getAdjustedUTCDateTime();\n            setCurrent(currDate);\n            setSelected(currDate);\n            onChange?.(currDate);\n          }}\n        >\n          <Icon name='calendar-now' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.nextMonth}\n          label={t('picker_next_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            setCurrent(newCurrent);\n          }}\n        >\n          <Icon name='caret-right' />\n        </StyledMonthNavigationButton>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap' }}>\n        {showWeekNumber && <Weeks current={current} calendarType={calendarType} disabled />}\n        <Calendar\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          selectedRange={selectedRange}\n          showHighlight\n          calendarType={calendarType}\n          onFocus={date => {\n            setCurrent(date);\n          }}\n          onSelect={date => {\n            setCurrent(date);\n            setSelected(date);\n            onChange?.(date);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n    </StyledDatePicker>\n  );\n};\n\nexport default DateRangePicker;\n"]}
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useI18n, useTestIds } from '../../../hooks';\nimport { getCalendarTypeFromLocale } from '../Input/utils';\nimport { getAdjustedUTCDateTime } from '../utils';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport {\n  StyledDatePicker,\n  StyledDatePickerMonthInput,\n  StyledMonthNavigationButton,\n  StyledMonthPicker\n} from './DatePicker.styles';\nimport { isValidDate, toDateTimeString } from './utils';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface DateRangePickerProps extends DatePickerProps {\n  /** Defines dates range that can be set by the user. */\n  selectedRange?: { startDate: Date | undefined; endDate: Date | undefined };\n}\n\nconst DateRangePicker: FunctionComponent<DateRangePickerProps> = (props: DateRangePickerProps) => {\n  const { locale } = useConfiguration();\n  const {\n    testId,\n    selected: initial,\n    selectedRange,\n    onChange,\n    min,\n    max,\n    mode,\n    showWeekNumber,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getDatePickerTestIds);\n  const [selected, setSelected] = useState(initial);\n  const [current, setCurrent] = useState(selected && isValidDate(selected) ? selected : new Date());\n\n  useEffect(() => {\n    if (toDateTimeString(initial) !== toDateTimeString(selected)) {\n      setSelected(initial);\n      setCurrent(initial || new Date());\n    }\n  }, [toDateTimeString(initial)]);\n\n  const calendarRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    // need to postpone focusing to make sure onFocusWithin has been attached\n    setTimeout(() => {\n      calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n    });\n  }, []);\n\n  const calendarType = getCalendarTypeFromLocale(locale);\n  const t = useI18n();\n\n  return (\n    <StyledDatePicker aria-label={t('calendar')} role='region' {...restProps}>\n      <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n        <MonthInput\n          data-testid={testIds.month}\n          aria-label={t('picker_jump_to_month_and_year')}\n          value={current}\n          as={StyledDatePickerMonthInput}\n          innerLabelsHidden={false}\n          required\n          role='group'\n          onChange={({ valueAsTimestamp }) => {\n            const newCurrent = new Date(valueAsTimestamp!);\n            newCurrent.setUTCDate(current.getUTCDate());\n            setCurrent(newCurrent);\n          }}\n          min={min}\n          max={max}\n        />\n        <StyledMonthNavigationButton\n          data-testid={testIds.previousMonth}\n          label={t('picker_prev_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n            setCurrent(newCurrent);\n          }}\n        >\n          <Icon name='caret-left' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.setCurrentDate}\n          label={t('set_current_date_a11y')}\n          icon\n          variant='simple'\n          onClick={() => {\n            const currDate = getAdjustedUTCDateTime();\n            setCurrent(currDate);\n            setSelected(currDate);\n            onChange?.(currDate);\n          }}\n        >\n          <Icon name='calendar-now' />\n        </StyledMonthNavigationButton>\n        <StyledMonthNavigationButton\n          data-testid={testIds.nextMonth}\n          label={t('picker_next_month')}\n          variant='simple'\n          icon\n          onClick={() => {\n            const newCurrent = new Date(current);\n            newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n            setCurrent(newCurrent);\n          }}\n        >\n          <Icon name='caret-right' />\n        </StyledMonthNavigationButton>\n      </Flex>\n      <Flex container={{ wrap: 'nowrap', justify: 'center' }}>\n        <Calendar\n          ref={calendarRef}\n          selected={selected && isValidDate(selected) ? selected : undefined}\n          current={current}\n          selectedRange={selectedRange}\n          showHighlight\n          calendarType={calendarType}\n          showWeekNumber={showWeekNumber}\n          onFocus={date => {\n            setCurrent(date);\n          }}\n          onSelect={date => {\n            setCurrent(date);\n            setSelected(date);\n            onChange?.(date);\n          }}\n          min={min}\n          max={max}\n        />\n      </Flex>\n    </StyledDatePicker>\n  );\n};\n\nexport default DateRangePicker;\n"]}

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

@@ -1,5 +1,5 @@
 import type { Ref, ReactNode } from 'react';
-import { type BannerProps } from '../Banner';
+import type { BannerProps } from '../Banner';
 import type { ActionsProps } from '../Actions';
 import type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';
 import type { AdditionalInfoProps } from '../AdditionalInfo';

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7D,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAGrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,eAAO,MAAM,iBAAiB;;uDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA2F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,eAAO,MAAM,iBAAiB;;uDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA2F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -8,7 +8,7 @@ import Flex from '../Flex';
 import Grid from '../Grid';
 import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
-import Banner, {} from '../Banner';
+import Banner from '../Banner';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { 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 Banner, { type BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = 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  /** A banner to be displayed above the controls. */\n  banner?: BannerProps;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\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        /**\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      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\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\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\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\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nexport const StyledDescription = styled(HTML)`\n  /* Prevent instruction text from contributing to modal width calculation */\n  width: 0;\n  min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    banner,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {banner && <Banner {...banner} />}\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\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\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C,YAAY,CAAC,cAAc,CAAC,CAAC;AA2D7B,SAAS;AACT,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EACzC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;MACN,UAAU;8BACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;8BAExC,UAAU;;;+BAGT,UAAU;0BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAC5D,SAAS,CAAC,WAAW,CAAC,CACvB,CACC,CAAC,EACC,SAAS,EACT,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EACvE,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;QAGN,CAAC,SAAS;QACZ,GAAG,CAAA;uCAC8B,OAAO;OACvC;qCAC8B,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;UAEnE,kBAAkB;sBACN,YAAY;;;wBAGV,aAAa;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;UAGJ,oBAAoB;qBACT,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;YAGjC,oBAAoB;qBACX,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;cAG/B,oBAAoB;qBACb,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;gBAG7B,oBAAoB;qBACf,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/B,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EACvC,OAAO,EACP,eAAe,EAAE,gBAAgB,EAClC,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAChD,EACF,GAAG,KAAK,CAAC;IACV,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,UAAU,GAAG,CAAC,SAAS,CAAC;IAE9B,OAAO,GAAG,CAAA;iBACG,OAAO;4BACI,gBAAgB;gBAC5B,WAAW;;6BAEE,KAAK;oCACE,MAAM,CAAC,IAAI;;QAEvC,UAAU;QACZ,GAAG,CAAA;wBACe,WAAW;OAC5B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,aAAa;AACb,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,EACQ,EAAE,EAAE;IAC1B,OAAO,CACL,KAAC,sBAAsB,IAAC,SAAS,EAAE,SAAS,YAC1C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,aACrE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,aACvE,QAAQ,EACR,cAAc,IAAI,CACjB,KAAC,cAAc,IACb,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,eAAe,EAAE,eAAe,IAAI,IAAI,YAEvC,cAAc,CAAC,OAAO,GACR,CAClB,IACI,EACN,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,GAAI,IACpE,GACgB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAI5C,CAAC;AAEF,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EACE,QAAQ,EACR,WAAW,EACX,MAAM,EACN,IAAI,EACJ,eAAe,EACf,cAAc,EACd,OAAO,EACP,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,OAAO,EACP,GAAG,SAAS,EACqB,EACnC,GAA2B;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,CACtB,MAAC,uBAAuB,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,aACnE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EAChC,WAAW,IAAI,CACd,KAAC,iBAAiB,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,WAAW,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,CACtF,EACD,wBAAM,QAAQ,GAAO,IACG,CAC3B,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,IAAC,MAAM,EAAE,OAAO,KAAK,YAAY,EAAE,SAAS,EAAE,SAAS,YAC1E,MAAC,gBAAgB,kBACH,eAAe,IAAI,IAAI,sBACjB,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,EAChE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KACzB,SAAS,EACb,GAAG,EAAE,GAAG,aAEP,IAAI,IAAI,CACP,KAAC,gBAAgB,IACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,YAE/B,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,EAAE,CAAC;wBACxB,CAAC,mBACc,CAAC,SAAS,gBACb,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EAAE;4BACzD,eAAe,IAAI,IAAI;yBACxB,CAAC,YAEF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC/D,WAAW,EAAC,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,IAAI,GAAwB,CACpD,IACI,GACY,CACtB,CAAC,CAAC,CAAC,CACF,4BACG,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,IAAI,GAAwB,CACpD,GACA,CACJ,GACgB,CACpB,EAEA,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,eAAe,GAAkB,CACzE,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,IACgB,GACE,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { 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 Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = 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  /** A banner to be displayed above the controls. */\n  banner?: BannerProps;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\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        /**\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      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\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\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\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\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nexport const StyledDescription = styled(HTML)`\n  /* Prevent instruction text from contributing to modal width calculation */\n  width: 0;\n  min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    banner,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {banner && <Banner {...banner} />}\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\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\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}

package/lib/components/Icon/iconNames.d.ts

@@ -1,4 +1,4 @@
-declare const iconNames: readonly ["1-1-solid", "1-1", "a11y", "ai-assist", "align-center", "align-item-center-solid", "align-item-center", "align-item-down-solid", "align-item-down", "align-item-left-solid", "align-item-left", "align-item-right-solid", "align-item-right", "align-item-up-solid", "align-item-up", "align-item-vert-center-solid", "align-item-vert-center", "align-left", "align-right", "amazon", "ambulance-solid", "ambulance", "analytics-bad-solid", "analytics-bad", "analytics-good-solid", "analytics-good", "analytics-neutral-solid", "analytics-neutral", "antenna", "app-solid", "app", "archery", "archive-solid", "archive", "arrow-above-or", "arrow-above-row-left", "arrow-above-row-right", "arrow-below-or", "arrow-below-row-left", "arrow-below-row-right", "arrow-bend-left", "arrow-bend-right", "arrow-between-column-down", "arrow-down-between-left-column", "arrow-down-between-right-column", "arrow-down-row", "arrow-down", "arrow-in", "arrow-left-column", "arrow-left-right", "arrow-left", "arrow-micro-down", "arrow-micro-left", "arrow-micro-right", "arrow-micro-up-down", "arrow-micro-up", "arrow-out", "arrow-right-between-rows", "arrow-right-column", "arrow-right", "arrow-up-down", "arrow-up-row", "arrow-up", "atom", "automation-call", "backspace-solid", "backspace", "badge-solid", "badge", "bank-solid", "bank", "bars", "battery-charge-solid", "battery-charge", "battery-solid", "battery", "bell-off-solid", "bell-off", "bell-solid", "bell", "blocks-solid", "blocks", "bluetooth", "bolt-solid", "bolt", "book-open-solid", "book-open", "book-solid", "book", "bookmark-solid", "bookmark", "bounding-box-solid", "bounding-box", "box-3-solid", "box-3", "box-4-solid", "box-4", "box-crosshair", "box-dashed-labeled-solid", "box-dashed-labeled", "box-grid", "box-lines-2-solid", "box-lines-2", "box", "branch", "browser-solid", "browser", "bug-solid", "bug", "building-2-solid", "building-2", "building-3-solid", "building-3", "building-solid", "building", "bulb-solid", "bulb", "calculator-solid", "calculator", "calendar-empty-solid", "calendar-empty", "calendar-now", "calendar-plus-solid", "calendar-plus", "calendar-range", "calendar-solid", "calendar", "camera-solid", "camera", "cancel", "car-solid", "car", "card-stack-solid", "card-stack", "caret-2-left", "caret-2-right", "caret-down", "caret-left", "caret-right", "caret-up", "carrot", "cart-close-solid", "cart-close", "cart-solid", "cart", "case-medical-solid", "case-medical", "case-solid", "case", "chain-solid", "chain-up", "chain", "chat-help-solid", "chat-help", "chat-sentiment-solid", "chat-sentiment", "chat-solid", "chat-typing-solid", "chat-typing", "chat", "chats-solid", "chats", "check", "checkbook", "chevron-solid", "chevron", "church-solid", "church", "circle-mixed-down", "circle-mixed-left", "circle-mixed-up", "circle-solid", "circle-stacked-mixed", "circle-stacked-solid", "circle-stacked", "circle", "city-solid", "city", "clipboard-check-solid", "clipboard-check", "clipboard-data-solid", "clipboard-data", "clipboard-medical-solid", "clipboard-medical", "clipboard-plus-solid", "clipboard-plus", "clipboard-solid", "clipboard", "clock-sla", "clock-solid", "clock", "cloud-down", "cloud-issue-solid", "cloud-issue", "cloud-solid", "cloud-up", "cloud", "cloudy-solid", "cloudy", "code", "column-delete", "column-insert", "column-no-left", "column-no-right", "column-top-fill", "columns-solid", "columns", "command", "compass-solid", "compass", "condition-critical", "condition-satisfactory", "controller-solid", "controller", "copy-solid", "copy", "credit-solid", "credit", "crop", "crosshairs", "cuppa-solid", "cuppa", "dataviz-area-multi", "dataviz-area-stacked", "dataviz-area", "dataviz-bar-clustered", "dataviz-bar-stacked", "dataviz-bar", "dataviz-bubble", "dataviz-column-clustered", "dataviz-column-stacked", "dataviz-column", "dataviz-combo", "dataviz-datetime-field", "dataviz-donut", "dataviz-flip-counter", "dataviz-forecast", "dataviz-funnel-solid", "dataviz-funnel", "dataviz-gauge", "dataviz-geo-choropleth", "dataviz-line-multi", "dataviz-line", "dataviz-numeric-field", "dataviz-pareto", "dataviz-pie", "dataviz-pivot-table", "dataviz-radar", "dataviz-scatter", "dataviz-spark", "dataviz-string-field", "dataviz-table-with-bars", "dataviz-table-with-cross", "dataviz-waterfall", "desktop-solid", "desktop", "diamond-minus", "diamond-solid", "diamond", "disc-stack-solid", "disc-stack", "distribute-item-center-solid", "distribute-item-center", "distribute-item-vert-center-solid", "distribute-item-vert-center", "dna", "dock", "document-check-solid", "document-check", "document-compress-solid", "document-compress", "document-data-solid", "document-doc", "document-download-solid", "document-download", "document-minus-solid", "document-minus", "document-pdf", "document-plus-solid", "document-plus", "document-solid", "document-upload-solid", "document-upload", "document-xls", "document", "documents-check-solid", "documents-check", "documents-data-solid", "documents-data", "documents-solid", "documents", "docusign", "dollar-sign-solid", "dollar-sign", "dot-9-solid", "dot-9", "download", "drag", "drink-solid", "drink", "earth-solid", "earth", "edit-shape-solid", "edit-shape", "erase-solid", "erase", "eye-off-solid", "eye-off", "eye-solid", "eye", "face-blank-solid", "face-blank", "face-happy-solid", "face-happy", "face-sad-solid", "face-sad", "facebook", "farm-solid", "farm", "fast-forward-solid", "fast-forward", "field-dot", "filetype-text", "filter-on", "filter", "fire-solid", "fire", "flag-finish", "flag-solid", "flag-wave-solid", "flag-wave", "flag", "flashlight-solid", "flashlight", "folder-close-solid", "folder-close", "folder-closed-solid", "folder-closed", "folder-dollar-solid", "folder-dollar", "folder-hierarchy-solid", "folder-hierarchy", "folder-nested-solid", "folder-nested", "folder-plus-solid", "folder-plus", "folder-solid", "folder", "folders-solid", "folders", "forward-all-solid", "forward-all", "forward-solid", "forward", "freeze-column", "function", "galaxy", "gauge-solid", "gauge", "gear-box-dotted", "gear-solid", "gear", "glasses-solid", "glasses", "globe-solid", "globe", "google", "government-solid", "government", "grad-solid", "grad", "grid-solid", "grid", "hand-solid", "hand", "handshake-solid", "handshake", "hanger", "header", "headline-solid", "headline", "headphone-solid", "headphone", "headset", "heart-mixed", "heart-pulse-solid", "heart-pulse", "heart-solid", "heart", "help-solid", "help", "history-solid", "history", "home-alt-solid", "home-alt", "home-solid", "home", "inbox-data-solid", "inbox-data", "inbox-empty", "inbox-solid", "indent", "infinity", "information-solid", "information", "ink-solid", "ink", "input-pen", "inspect", "interact", "ios-face-id", "ios-finger-id", "key", "keyboard-solid", "keyboard", "knight-solid", "knight", "knobs-alt-solid", "knobs-alt", "knobs-solid", "knobs", "laptop-solid", "laptop", "layers-solid", "layers", "layout-solid", "layout", "leaf-solid", "leaf", "legal", "letter-solid", "letter", "life-ring-solid", "life-ring", "linkedin", "list-number", "list", "live-transcript", "location-check-solid", "location-check", "location-solid", "location", "locations-solid", "locations", "lock-closed-solid", "lock-closed", "lock-open-solid", "lock-open", "magnet-solid", "magnet", "mail-check-solid", "mail-check", "mail-plus-solid", "mail-plus", "mail-solid", "mail", "mailbox-solid", "mailbox", "map-sigma-solid", "map-sigma", "map-solid", "map", "material-finger", "medal", "megaphone-solid", "megaphone", "mic-off-solid", "mic-off", "mic-solid", "mic", "minus", "mobile-phone-solid", "mobile-phone", "money-send-solid", "money-send", "money-solid", "money", "monkey-solid", "monkey", "moon-solid", "moon", "more-alt", "more", "move-left-solid", "move-right-solid", "move-up-solid", "moving", "multi-device-solid", "multi-device", "music-solid", "music", "navigation-solid", "navigation", "node-solid", "node", "nodes-down-solid", "nodes-down", "nodes-left-solid", "nodes-left", "nodes-right-solid", "nodes-right", "nodes-up-solid", "nodes-up", "notepad-empty-solid", "notepad-empty", "notepad-solid", "notepad", "notes-solid", "notes", "object-case-multi", "object-case-solid", "object-case", "object-status", "open", "opportunity-solid", "opportunity", "or-delete", "os-android", "os-apple", "os-windows", "paper-clip", "passbook-solid", "passbook", "pause-solid", "pause", "paypal", "peekpanel-arrow-left-solid", "peekpanel-arrow-left", "peekpanel-arrow-right-solid", "peekpanel-arrow-right", "pega", "pegasus", "pen-solid", "pen", "pencil-solid", "pencil", "person-solid", "person", "phone-ai-solid", "phone-ai", "phone-call-solid", "phone-call", "phone-disabled-solid", "phone-disabled", "phone-hangup-solid", "phone-hangup", "phone-in-solid", "phone-in", "phone-list-solid", "phone-list", "phone-merge-solid", "phone-merge", "phone-out-solid", "phone-out", "phone-pause-solid", "phone-pause", "phone-solid", "phone-split-solid", "phone-split", "phone", "picture-solid", "picture", "piggybank-solid", "piggybank", "pin-solid", "pin", "pipeline-solid", "pipeline", "placeholder", "plane-solid", "plane", "plant-solid", "plant", "play-solid", "play", "playbook-solid", "playbook", "plug-solid", "plug", "plus-between-left-column", "plus-between-right-column", "plus-line-above-below", "plus-line-above", "plus-line-below", "plus-line-left", "plus-line-right", "plus", "podium-solid", "podium", "polaris-solid", "polaris", "pong-solid", "pong", "potion-solid", "potion", "power", "preview", "print-solid", "print", "processor-solid", "processor", "progress-solid", "progress", "puzzle-solid", "puzzle", "qr", "quill", "rabbit", "radio-solid", "radio", "rain-solid", "rain", "receipt-solid", "receipt", "rectangle-solid", "rectangle", "reply-all-solid", "reply-all", "reply-solid", "reply", "reset", "retweet", "rewind-solid", "rewind", "robot-happy-solid", "robot-happy", "robot-sad-solid", "robot-sad", "robot-solid", "robot", "rocket-solid", "rocket", "roller-solid", "roller", "route-solid", "route", "row-delete", "row-insert", "row-left-fill", "row-right-fill", "row", "scale-down", "scale-up-solid", "scale-up", "school-solid", "school", "scissors", "script", "search-analytics-solid", "search-analytics", "search-case", "search-check", "search-close", "search-minus", "search-org", "search-plus", "search-solid", "search-table", "search", "semitruck-solid", "semitruck", "send-solid", "send", "server-cloud-solid", "server-cloud", "server-solid", "server", "sextant", "share-point-up-solid", "share-point-up", "share-solid", "share", "shield-solid", "shield", "shoe-solid", "shoe", "shuffle", "sigma", "signpost-solid", "signpost", "slideshow-solid", "slideshow", "snail", "snow", "social-solid", "social", "speaker-mute-solid", "speaker-mute", "speaker-on-solid", "speaker-on", "speaker-solid", "speaker", "spellcheck", "square-solid", "square", "star-mixed", "star-solid", "star", "steps-solid", "steps", "stethoscope-solid", "stethoscope", "stoplight-solid", "stoplight", "stopwatch-solid", "stopwatch", "store-solid", "store", "sun-solid", "sun", "swipe-left-solid", "swipe-left", "swipe-right-solid", "swipe-right", "table", "tablet-solid", "tablet", "tag-check-solid", "tag-check", "tag-close-solid", "tag-close", "tag-solid", "tag", "target-solid", "target", "temp-solid", "temp", "thumbs-down-solid", "thumbs-down", "thumbs-up-solid", "thumbs-up", "times", "todo-solid", "todo", "tow-truck-solid", "tow-truck", "tracer-solid", "tracer", "transform", "trash-solid", "trash", "triangle-mixed-left", "triangle-mixed-right", "triangle-solid", "triangle", "tribox-solid", "tribox", "trophy-solid", "trophy", "truck-solid", "truck", "tv-solid", "tv", "twitter", "umbrella-solid", "umbrella", "undo", "undock", "unindent", "unwrap", "upload", "user-check-solid", "user-check", "user-close-solid", "user-close", "user-female-solid", "user-female", "user-list-solid", "user-list", "user-plus-solid", "user-plus", "user-question-mark-solid", "user-question-mark", "user-search-solid", "user-search", "user-solid", "user-star-solid", "user-star", "user", "users-solid", "users", "video-off", "video-solid", "video", "voicemail", "vr-solid", "vr", "walkie-solid", "walkie", "wallet-solid", "wallet", "wand", "warn-solid", "warn", "watch-solid", "watch", "waypoint-solid", "waypoint", "webcam-solid", "webcam", "whatsapp", "wifi-none", "wifi-off", "wifi", "wizard-solid", "wizard", "wrap", "wrench-solid", "wrench", "youtube"];
+declare const iconNames: readonly ["1-1-solid", "1-1", "a11y", "ai-assist", "align-center", "align-item-center-solid", "align-item-center", "align-item-down-solid", "align-item-down", "align-item-left-solid", "align-item-left", "align-item-right-solid", "align-item-right", "align-item-up-solid", "align-item-up", "align-item-vert-center-solid", "align-item-vert-center", "align-left", "align-right", "amazon", "ambulance-solid", "ambulance", "analytics-bad-solid", "analytics-bad", "analytics-good-solid", "analytics-good", "analytics-neutral-solid", "analytics-neutral", "antenna", "app-solid", "app", "archery", "archive-solid", "archive", "arrow-above-or", "arrow-above-row-left", "arrow-above-row-right", "arrow-below-or", "arrow-below-row-left", "arrow-below-row-right", "arrow-bend-left", "arrow-bend-right", "arrow-between-column-down", "arrow-down-between-left-column", "arrow-down-between-right-column", "arrow-down-row", "arrow-down", "arrow-in", "arrow-left-column", "arrow-left-right", "arrow-left", "arrow-micro-down", "arrow-micro-left", "arrow-micro-right", "arrow-micro-up-down", "arrow-micro-up", "arrow-out", "arrow-right-between-rows", "arrow-right-column", "arrow-right", "arrow-up-down", "arrow-up-row", "arrow-up", "atom", "automation-call", "backspace-solid", "backspace", "badge-solid", "badge", "bank-solid", "bank", "bars", "battery-charge-solid", "battery-charge", "battery-solid", "battery", "bell-off-solid", "bell-off", "bell-solid", "bell", "blocks-solid", "blocks", "bluetooth", "bolt-solid", "bolt", "book-open-solid", "book-open", "book-solid", "book", "bookmark-solid", "bookmark", "bounding-box-solid", "bounding-box", "box-3-solid", "box-3", "box-4-solid", "box-4", "box-crosshair", "box-dashed-labeled-solid", "box-dashed-labeled", "box-grid", "box-lines-2-solid", "box-lines-2", "box", "branch", "browser-solid", "browser", "bug-solid", "bug", "building-2-solid", "building-2", "building-3-solid", "building-3", "building-solid", "building", "bulb-solid", "bulb", "calculator-solid", "calculator", "calendar-empty-solid", "calendar-empty", "calendar-now", "calendar-plus-solid", "calendar-plus", "calendar-range", "calendar-solid", "calendar", "camera-solid", "camera", "cancel", "car-solid", "car", "card-stack-solid", "card-stack", "caret-2-left", "caret-2-right", "caret-down", "caret-left", "caret-right", "caret-up", "carrot", "cart-close-solid", "cart-close", "cart-solid", "cart", "case-medical-solid", "case-medical", "case-solid", "case", "chain-solid", "chain-up", "chain", "chat-help-solid", "chat-help", "chat-sentiment-solid", "chat-sentiment", "chat-solid", "chat-typing-solid", "chat-typing", "chat", "chats-solid", "chats", "check-solid", "check", "checkbook", "chevron-solid", "chevron", "church-solid", "church", "circle-mixed-down", "circle-mixed-left", "circle-mixed-up", "circle-solid", "circle-stacked-mixed", "circle-stacked-solid", "circle-stacked", "circle", "city-solid", "city", "clipboard-check-solid", "clipboard-check", "clipboard-data-solid", "clipboard-data", "clipboard-medical-solid", "clipboard-medical", "clipboard-plus-solid", "clipboard-plus", "clipboard-solid", "clipboard", "clock-sla", "clock-solid", "clock", "cloud-down", "cloud-issue-solid", "cloud-issue", "cloud-solid", "cloud-up", "cloud", "cloudy-solid", "cloudy", "code", "column-delete", "column-insert", "column-no-left", "column-no-right", "column-top-fill", "columns-solid", "columns", "command", "compass-solid", "compass", "condition-critical", "condition-satisfactory", "controller-solid", "controller", "copy-solid", "copy", "credit-solid", "credit", "crop", "crosshairs", "cuppa-solid", "cuppa", "dataviz-area-multi", "dataviz-area-stacked", "dataviz-area", "dataviz-bar-clustered", "dataviz-bar-stacked", "dataviz-bar", "dataviz-bubble", "dataviz-column-clustered", "dataviz-column-stacked", "dataviz-column", "dataviz-combo", "dataviz-datetime-field", "dataviz-donut", "dataviz-flip-counter", "dataviz-forecast", "dataviz-funnel-solid", "dataviz-funnel", "dataviz-gauge", "dataviz-geo-choropleth", "dataviz-line-multi", "dataviz-line", "dataviz-numeric-field", "dataviz-pareto", "dataviz-pie", "dataviz-pivot-table", "dataviz-radar", "dataviz-scatter", "dataviz-spark", "dataviz-string-field", "dataviz-table-with-bars", "dataviz-table-with-cross", "dataviz-waterfall", "desktop-solid", "desktop", "diamond-minus", "diamond-solid", "diamond", "disc-stack-solid", "disc-stack", "distribute-item-center-solid", "distribute-item-center", "distribute-item-vert-center-solid", "distribute-item-vert-center", "dna", "dock", "document-check-solid", "document-check", "document-compress-solid", "document-compress", "document-data-solid", "document-doc", "document-download-solid", "document-download", "document-minus-solid", "document-minus", "document-pdf", "document-plus-solid", "document-plus", "document-solid", "document-upload-solid", "document-upload", "document-xls", "document", "documents-check-solid", "documents-check", "documents-data-solid", "documents-data", "documents-solid", "documents", "docusign", "dollar-sign-solid", "dollar-sign", "dot-9-solid", "dot-9", "download", "drag", "drink-solid", "drink", "earth-solid", "earth", "edit-shape-solid", "edit-shape", "erase-solid", "erase", "eye-off-solid", "eye-off", "eye-solid", "eye", "face-blank-solid", "face-blank", "face-happy-solid", "face-happy", "face-sad-solid", "face-sad", "facebook", "farm-solid", "farm", "fast-forward-solid", "fast-forward", "field-dot", "filetype-text", "filter-on", "filter", "fire-solid", "fire", "flag-finish", "flag-solid", "flag-wave-solid", "flag-wave", "flag", "flashlight-solid", "flashlight", "folder-close-solid", "folder-close", "folder-closed-solid", "folder-closed", "folder-dollar-solid", "folder-dollar", "folder-hierarchy-solid", "folder-hierarchy", "folder-nested-solid", "folder-nested", "folder-plus-solid", "folder-plus", "folder-solid", "folder", "folders-solid", "folders", "forward-all-solid", "forward-all", "forward-solid", "forward", "freeze-column", "function", "galaxy", "gauge-solid", "gauge", "gear-box-dotted", "gear-solid", "gear", "glasses-solid", "glasses", "globe-solid", "globe", "google", "government-solid", "government", "grad-solid", "grad", "grid-solid", "grid", "hand-solid", "hand", "handshake-solid", "handshake", "hanger", "header", "headline-solid", "headline", "headphone-solid", "headphone", "headset", "heart-mixed", "heart-pulse-solid", "heart-pulse", "heart-solid", "heart", "help-solid", "help", "history-solid", "history", "home-alt-solid", "home-alt", "home-solid", "home", "inbox-data-solid", "inbox-data", "inbox-empty", "inbox-solid", "indent", "infinity", "information-solid", "information", "ink-solid", "ink", "input-pen", "inspect", "interact", "ios-face-id", "ios-finger-id", "key", "keyboard-solid", "keyboard", "knight-solid", "knight", "knobs-alt-solid", "knobs-alt", "knobs-solid", "knobs", "laptop-solid", "laptop", "layers-solid", "layers", "layout-solid", "layout", "leaf-solid", "leaf", "legal", "letter-solid", "letter", "life-ring-solid", "life-ring", "linkedin", "list-number", "list", "live-transcript", "location-check-solid", "location-check", "location-solid", "location", "locations-solid", "locations", "lock-closed-solid", "lock-closed", "lock-open-solid", "lock-open", "magnet-solid", "magnet", "mail-check-solid", "mail-check", "mail-plus-solid", "mail-plus", "mail-solid", "mail", "mailbox-solid", "mailbox", "map-sigma-solid", "map-sigma", "map-solid", "map", "material-finger", "medal", "megaphone-solid", "megaphone", "mic-off-solid", "mic-off", "mic-solid", "mic", "minus", "mobile-phone-solid", "mobile-phone", "money-send-solid", "money-send", "money-solid", "money", "monkey-solid", "monkey", "moon-solid", "moon", "more-alt", "more", "move-left-solid", "move-right-solid", "move-up-solid", "moving", "multi-device-solid", "multi-device", "music-solid", "music", "navigation-solid", "navigation", "node-solid", "node", "nodes-down-solid", "nodes-down", "nodes-left-solid", "nodes-left", "nodes-right-solid", "nodes-right", "nodes-up-solid", "nodes-up", "notepad-empty-solid", "notepad-empty", "notepad-solid", "notepad", "notes-solid", "notes", "object-case-multi", "object-case-solid", "object-case", "object-status", "open", "opportunity-solid", "opportunity", "or-delete", "os-android", "os-apple", "os-windows", "paper-clip", "passbook-solid", "passbook", "pause-solid", "pause", "paypal", "peekpanel-arrow-left-solid", "peekpanel-arrow-left", "peekpanel-arrow-right-solid", "peekpanel-arrow-right", "pega", "pegasus", "pen-solid", "pen", "pencil-solid", "pencil", "person-solid", "person", "phone-ai-solid", "phone-ai", "phone-call-solid", "phone-call", "phone-disabled-solid", "phone-disabled", "phone-hangup-solid", "phone-hangup", "phone-in-solid", "phone-in", "phone-list-solid", "phone-list", "phone-merge-solid", "phone-merge", "phone-out-solid", "phone-out", "phone-pause-solid", "phone-pause", "phone-solid", "phone-split-solid", "phone-split", "phone", "picture-solid", "picture", "piggybank-solid", "piggybank", "pin-solid", "pin", "pipeline-solid", "pipeline", "placeholder", "plane-solid", "plane", "plant-solid", "plant", "play-solid", "play", "playbook-solid", "playbook", "plug-solid", "plug", "plus-between-left-column", "plus-between-right-column", "plus-line-above-below", "plus-line-above", "plus-line-below", "plus-line-left", "plus-line-right", "plus", "podium-solid", "podium", "polaris-solid", "polaris", "pong-solid", "pong", "potion-solid", "potion", "power", "preview", "print-solid", "print", "processor-solid", "processor", "progress-solid", "progress", "puzzle-solid", "puzzle", "qr", "quill", "rabbit", "radio-solid", "radio", "rain-solid", "rain", "receipt-solid", "receipt", "rectangle-solid", "rectangle", "reply-all-solid", "reply-all", "reply-solid", "reply", "reset", "retweet", "rewind-solid", "rewind", "robot-happy-solid", "robot-happy", "robot-sad-solid", "robot-sad", "robot-solid", "robot", "rocket-solid", "rocket", "roller-solid", "roller", "route-solid", "route", "row-delete", "row-insert", "row-left-fill", "row-right-fill", "row", "scale-down", "scale-up-solid", "scale-up", "school-solid", "school", "scissors", "script", "search-analytics-solid", "search-analytics", "search-case", "search-check", "search-close", "search-minus", "search-org", "search-plus", "search-solid", "search-table", "search", "semitruck-solid", "semitruck", "send-solid", "send", "server-cloud-solid", "server-cloud", "server-solid", "server", "sextant", "share-point-up-solid", "share-point-up", "share-solid", "share", "shield-solid", "shield", "shoe-solid", "shoe", "shuffle", "sigma", "signpost-solid", "signpost", "slideshow-solid", "slideshow", "snail", "snow", "social-solid", "social", "speaker-mute-solid", "speaker-mute", "speaker-on-solid", "speaker-on", "speaker-solid", "speaker", "spellcheck", "square-solid", "square", "star-mixed", "star-solid", "star", "steps-solid", "steps", "stethoscope-solid", "stethoscope", "stoplight-solid", "stoplight", "stopwatch-solid", "stopwatch", "store-solid", "store", "sun-solid", "sun", "swipe-left-solid", "swipe-left", "swipe-right-solid", "swipe-right", "table", "tablet-solid", "tablet", "tag-check-solid", "tag-check", "tag-close-solid", "tag-close", "tag-solid", "tag", "target-solid", "target", "temp-solid", "temp", "thumbs-down-solid", "thumbs-down", "thumbs-up-solid", "thumbs-up", "times", "todo-solid", "todo", "tow-truck-solid", "tow-truck", "tracer-solid", "tracer", "transform", "trash-solid", "trash", "triangle-mixed-left", "triangle-mixed-right", "triangle-solid", "triangle", "tribox-solid", "tribox", "trophy-solid", "trophy", "truck-solid", "truck", "tv-solid", "tv", "twitter", "umbrella-solid", "umbrella", "undo", "undock", "unindent", "unwrap", "upload", "user-check-solid", "user-check", "user-close-solid", "user-close", "user-female-solid", "user-female", "user-list-solid", "user-list", "user-plus-solid", "user-plus", "user-question-mark-solid", "user-question-mark", "user-search-solid", "user-search", "user-solid", "user-star-solid", "user-star", "user", "users-solid", "users", "video-off", "video-solid", "video", "voicemail", "vr-solid", "vr", "walkie-solid", "walkie", "wallet-solid", "wallet", "wand", "warn-solid", "warn", "watch-solid", "watch", "waypoint-solid", "waypoint", "webcam-solid", "webcam", "whatsapp", "wifi-none", "wifi-off", "wifi", "wizard-solid", "wizard", "wrap", "wrench-solid", "wrench", "youtube"];
 export default iconNames;
 export type IconName = (typeof iconNames)[number];
 //# sourceMappingURL=iconNames.d.ts.map

package/lib/components/Icon/iconNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconNames.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/iconNames.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS,ipYA2yBL,CAAC;AAEX,eAAe,SAAS,CAAC;AAEzB,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"iconNames.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/iconNames.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS,gqYA4yBL,CAAC;AAEX,eAAe,SAAS,CAAC;AAEzB,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/lib/components/Icon/iconNames.js

@@ -162,6 +162,7 @@ const iconNames = [
     'chat',
     'chats-solid',
     'chats',
+    'check-solid',
     'check',
     'checkbook',
     'chevron-solid',