@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/timetable/timetable.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.style.js","sources":["../../src/timetable/timetable.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { PopoverTrigger } from \"../popover-v2\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow, V3_Spacing } from \"../v3_theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\ninterface ColumnHeaderRowProps {\n    $numOfColumns: number;\n    $isScrolled: boolean;\n}\n\ninterface RowHeaderColumnProps {\n    $numOfRows: number;\n    $isScrolled: boolean;\n}\n\ninterface TimeTableContainerProps {\n    $loading: boolean | undefined;\n    $allRecordsLoaded: boolean;\n}\n\ninterface RowColumnHeaderProps {\n    $isScrolledY: boolean;\n    $isScrolledX: boolean;\n}\n\ninterface RowHeaderProps {\n    $isScrolled: boolean;\n}\n\ninterface ClickableRowHeaderTitleProps {\n    $isClickable: boolean;\n}\n\ninterface RowHeaderSubtitleProps {\n    $show: boolean;\n}\n\ninterface LoadingCellWrapperProps {\n    $width: number;\n}\n\ninterface ContentContainerPopoverProps {\n    $numOfRows: number;\n}\n\ninterface LoaderProps {\n    $isEmptyContent: boolean;\n}\n\nexport const Container = styled.div``;\n\nexport const EmptyTableContainer = styled.div`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const TimeTableContainer = styled.div<TimeTableContainerProps>`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px fit-content(100%);\n    padding-bottom: ${(props) => (props.$allRecordsLoaded ? \"0\" : \"128px\")};\n    ${(props) => {\n        if (props.$loading) {\n            return css`\n                &:hover {\n                    cursor: not-allowed;\n                    padding-bottom: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const RowColumnHeader = styled.div<RowColumnHeaderProps>`\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${V3_Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    z-index: 2;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    ${(props) => {\n        if (props.$isScrolledX || props.$isScrolledY) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n                clip-path: inset(\n                    0 ${props.$isScrolledX ? \"-0.12px\" : \"0\"}\n                        ${props.$isScrolledY ? \"-0.12px\" : \"0\"} 0\n                );\n                transition: box-shadow 0.5s ease-in-out,\n                    clip-path 0.5s ease-in-out;\n            `;\n        } else {\n            return css`\n                box-shadow: none;\n                clip-path: inset(0);\n                transition: box-shadow 0.5s ease-in-out,\n                    clip-path 0.5s ease-in-out;\n            `;\n        }\n    }};\n`;\n\nexport const RowHeaderColumn = styled.div<RowHeaderColumnProps>`\n    display: grid;\n    position: sticky;\n    grid-column: 1 / 2;\n    left: 0;\n    z-index: 1;\n    background-color: ${V3_Colour[\"bg\"]};\n    grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px);\n`;\n\nexport const ColumnHeaderRow = styled.div<ColumnHeaderRowProps>`\n    display: grid;\n    position: sticky;\n    grid-column: 2 / 3;\n    grid-row: 1 / 2;\n    top: 0;\n    z-index: 1;\n    background-color: ${V3_Colour[\"bg\"]};\n    grid-template-columns: repeat(${(props) => props.$numOfColumns}, 1fr);\n    width: 100%;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n    ${(props) => {\n        if (props.$isScrolled) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n            `;\n        }\n    }};\n`;\n\nexport const ColumnHeader = styled.div`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    align-content: end;\n    margin-bottom: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ColumnHeaderTitle = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ContentContainer = styled.div<ContentContainerPopoverProps>`\n    display: grid;\n    grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px);\n`;\n\nexport const RowHeader = styled.div<RowHeaderProps>`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${V3_Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} 0 ${V3_Spacing[\"spacing-32\"]};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-primary\"]};\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n    ${(props) => {\n        if (props.$isScrolled) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n                clip-path: inset(0 -6px 0 0);\n            `;\n        } else {\n            return css`\n                box-shadow: none;\n            `;\n        }\n    }};\n`;\n\nexport const ClickableRowHeaderTitle = styled(\n    Typography.BodyMD\n)<ClickableRowHeaderTitleProps>`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${V3_Colour[\"text-primary\"]};\n    &:hover {\n        cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"default\")};\n    }\n`;\n\nexport const RowHeaderSubtitle = styled(\n    Typography.BodyXS\n)<RowHeaderSubtitleProps>`\n    display: inline-flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${V3_Colour[\"text-subtler\"]};\n    ${(props) => {\n        if (!props.$show) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n\nexport const Loader = styled(LoadingDotsSpinner)<LoaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-column: ${(props) => (props.$isEmptyContent ? \"1 / -1\" : \"2 / -1\")};\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const NoResultsFound = styled(ErrorDisplay)`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${V3_Spacing[\"spacing-72\"]} 0;\n`;\n\nexport const LoadingWrapper = styled.div`\n    display: flex;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const LoadingCell = styled.div<LoadingCellWrapperProps>`\n    border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-primary\"]};\n    width: ${(props) => `${props.$width}px`};\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-12\"]};\n`;\n\nconst gradientAnimation = keyframes`\n  0% {\n        background-position: -468px 0;\n    }\n    100% {\n        background-position: 468px 0;\n    }\n`;\n\nexport const LoadingBar = styled.div`\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${V3_Colour.Primitive[\"neutral-95\"]} 8%,\n        ${V3_Colour.Primitive[\"neutral-100\"]} 18%,\n        ${V3_Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: ${gradientAnimation} 1.5s forwards infinite;\n`;\n\nexport const StyledPopoverTrigger = styled(PopoverTrigger)`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["Container","styled","div","EmptyTableContainer","ROW_HEADER_WIDTH","TimeTableContainer","props","$allRecordsLoaded","$loading","css","RowColumnHeader","V3_Colour","V3_Border","$isScrolledX","$isScrolledY","V3_Shadow","RowHeaderColumn","$numOfRows","ROW_HEIGHT","ColumnHeaderRow","$numOfColumns","$isScrolled","ColumnHeader","MIN_HOURLY_INTERVAL_WIDTH","V3_Spacing","ColumnHeaderTitle","Typography","BodySM","ContentContainer","RowHeader","ClickableRowHeaderTitle","BodyMD","$isClickable","RowHeaderSubtitle","BodyXS","$show","Loader","LoadingDotsSpinner","$isEmptyContent","NoResultsFound","ErrorDisplay","LoadingWrapper","LoadingCell","$width","gradientAnimation","keyframes","LoadingBar","Primitive","StyledPopoverTrigger","PopoverTrigger"],"mappings":"w0BAyDaA,EAAYC,EAAOC,GAAG,GAEtBC,EAAsBF,EAAOC,GAAG;;;;6BAIhBE;EAGhBC,EAAqBJ,EAAOC,GAA4B;;;;6BAIxCE;sBACNE,GAAWA,EAAMC,kBAAoB,IAAM;MAC3DD,IACC,GAAIA,EAAME,SACN,OAAOC,CAAG;;;;;aAMd;EAIKC,EAAkBT,EAAOC,GAAyB;;;;wBAIvCS,EAAc;aACzBP;;qBAEQQ,EAAU,gBAAgBA,EAAiB;UACtDD,EAAkB;MACrBL,GACKA,EAAMO,cAAgBP,EAAMQ,aACrBL,CAAG;8BACQM,EAAU;;wBAEhBT,EAAMO,aAAe,UAAY;0BAC/BP,EAAMQ,aAAe,UAAY;;;;cAMxCL,CAAG;;;;;;EAUTO,EAAkBf,EAAOC,GAAyB;;;;;;wBAMvCS,EAAc;iCACJL,GAAUA,EAAMW,eAAeC;EAGpDC,EAAkBlB,EAAOC,GAAyB;;;;;;;wBAOvCS,EAAc;oCACDL,GAAUA,EAAMc;;qBAEhCR,EAAU,gBAAgBA,EAAiB;UACtDD,EAAkB;;MAErBL,IACC,GAAIA,EAAMe,YACN,OAAOZ,CAAG;8BACQM,EAAU;aAEhC;EAIKO,EAAerB,EAAOC,GAAG;iBACrBqB;;qBAEIC,EAAW;EAGnBC,EAAoBxB,EAAOyB,EAAWC,OAAO;aAC7ChB,EAAU;EAGViB,EAAmB3B,EAAOC,GAAiC;;iCAEtCI,GAAUA,EAAMW,eAAeC;EAGpDW,EAAY5B,EAAOC,GAAmB;;;;;;;wBAO3BS,EAAc;aACzBP;cACCc;;iBAEGM,EAAW,mBAAmBA,EAAW;qBACrCZ,EAAU,gBAAgBA,EAAiB;UACtDD,EAAkB;oBACRC,EAAU,gBAAgBA,EAAiB;UACrDD,EAAU;mBACDC,EAAU,gBAAgBA,EAAiB;UACpDD,EAAkB;;MAErBL,GACKA,EAAMe,YACCZ,CAAG;8BACQM,EAAU;;cAIrBN,CAAG;;;EAOTqB,EAA0B7B,EACnCyB,EAAWK,OACgB;;;;;;aAMlBpB,EAAU;;kBAEJL,GAAWA,EAAM0B,aAAe,UAAY;;EAIlDC,EAAoBhC,EAC7ByB,EAAWQ,OACU;;WAEdV,EAAW;;aAETb,EAAU;MAChBL,IACC,IAAKA,EAAM6B,MACP,OAAO1B,CAAG;;aAGd;EAIK2B,EAASnC,EAAOoC,EAAgC;;;;mBAIzC/B,GAAWA,EAAMgC,gBAAkB,SAAW;;;;EAMrDC,EAAiBtC,EAAOuC,EAAa;;;eAGnChB,EAAW;EAGbiB,EAAiBxC,EAAOC,GAAG;;qBAEnBU,EAAU,gBAAgBA,EAAiB;UACtDD,EAAkB;EAGf+B,EAAczC,EAAOC,GAA4B;oBAC1CU,EAAU,gBAAgBA,EAAiB;UACrDD,EAAU;aACNL,GAAU,GAAGA,EAAMqC;;eAElBnB,EAAW,iBAAiBA,EAAW;EAGhDoB,EAAoBC,CAAS;;;;;;;EAStBC,EAAa7C,EAAOC,GAAG;;;;;UAK1BS,EAAUoC,UAAU;UACpBpC,EAAUoC,UAAU;UACpBpC,EAAUoC,UAAU;;;iBAGbH;EAGJI,EAAuB/C,EAAOgD,EAAe;;;;;"}
+{"version":3,"file":"timetable.style.js","sources":["../../src/timetable/timetable.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { PopoverTrigger } from \"../popover-v2\";\nimport { Border, Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow, V3_Spacing } from \"../v3_theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\ninterface ColumnHeaderRowProps {\n    $numOfColumns: number;\n    $intervalWidth: number;\n    $isScrolled: boolean;\n}\n\ninterface TimeTableContainerProps {\n    $loading: boolean | undefined;\n    $allRecordsLoaded: boolean;\n}\n\ninterface RowColumnHeaderProps {\n    $isScrolledY: boolean;\n    $isScrolledX: boolean;\n}\n\ninterface RowHeaderProps {\n    $isScrolled: boolean;\n}\n\ninterface ClickableRowHeaderTitleProps {\n    $isClickable: boolean;\n}\n\ninterface RowHeaderSubtitleProps {\n    $show: boolean;\n}\n\ninterface LoadingCellWrapperProps {\n    $width: number;\n}\n\ninterface LoaderProps {\n    $isEmptyContent: boolean;\n}\n\nexport const Container = styled.div``;\n\nexport const EmptyTableContainer = styled.div`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const TimeTableContainer = styled.div<TimeTableContainerProps>`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    padding-bottom: ${(props) => (props.$allRecordsLoaded ? \"0\" : \"128px\")};\n    isolation: isolate;\n    ${(props) => {\n        if (props.$loading) {\n            return css`\n                &:hover {\n                    cursor: not-allowed;\n                    padding-bottom: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const RowColumnHeader = styled.div<RowColumnHeaderProps>`\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${V3_Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    ${(props) => {\n        if (props.$isScrolledX || props.$isScrolledY) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n                clip-path: inset(\n                    0 ${props.$isScrolledX ? \"-0.12px\" : \"0\"}\n                        ${props.$isScrolledY ? \"-0.12px\" : \"0\"} 0\n                );\n                transition: box-shadow 0.5s ease-in-out,\n                    clip-path 0.5s ease-in-out;\n            `;\n        } else {\n            return css`\n                box-shadow: none;\n                clip-path: inset(0);\n                transition: box-shadow 0.5s ease-in-out,\n                    clip-path 0.5s ease-in-out;\n            `;\n        }\n    }};\n`;\n\nexport const TimeTableHeaderRow = styled.div`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const ColumnHeaderRow = styled.div<ColumnHeaderRowProps>`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-template-columns: repeat(\n        ${(props) => props.$numOfColumns},\n        ${(props) =>\n            Math.max(props.$intervalWidth * 4, MIN_HOURLY_INTERVAL_WIDTH)}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n    ${(props) => {\n        if (props.$isScrolled) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n            `;\n        }\n    }};\n`;\n\nexport const ColumnHeader = styled.div`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ColumnHeaderTitle = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const TimeTableBody = styled.div`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const TimeTableRow = styled.div`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const RowHeader = styled.div<RowHeaderProps>`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} 0 ${V3_Spacing[\"spacing-32\"]};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-primary\"]};\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n    ${(props) => {\n        if (props.$isScrolled) {\n            return css`\n                box-shadow: ${V3_Shadow[\"md-subtle\"]};\n                clip-path: inset(0 -6px 0 0);\n            `;\n        } else {\n            return css`\n                box-shadow: none;\n            `;\n        }\n    }};\n`;\n\nexport const ClickableRowHeaderTitle = styled(\n    Typography.BodyMD\n)<ClickableRowHeaderTitleProps>`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${V3_Colour[\"text-primary\"]};\n    &:hover {\n        cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"default\")};\n    }\n`;\n\nexport const RowHeaderSubtitle = styled(\n    Typography.BodyXS\n)<RowHeaderSubtitleProps>`\n    display: inline-flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${V3_Colour[\"text-subtler\"]};\n    ${(props) => {\n        if (!props.$show) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n\nexport const Loader = styled(LoadingDotsSpinner)<LoaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-column: ${(props) => (props.$isEmptyContent ? \"1 / -1\" : \"2 / -1\")};\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const NoResultsFound = styled(ErrorDisplay)`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${V3_Spacing[\"spacing-72\"]} 0;\n`;\n\nexport const LoadingWrapper = styled.div`\n    display: flex;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const LoadingCell = styled.div<LoadingCellWrapperProps>`\n    border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-primary\"]};\n    width: ${(props) => `${props.$width}px`};\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-12\"]};\n`;\n\nconst gradientAnimation = keyframes`\n  0% {\n        background-position: -468px 0;\n    }\n    100% {\n        background-position: 468px 0;\n    }\n`;\n\nexport const LoadingBar = styled.div`\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${V3_Colour.Primitive[\"neutral-95\"]} 8%,\n        ${V3_Colour.Primitive[\"neutral-100\"]} 18%,\n        ${V3_Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: ${gradientAnimation} 1.5s forwards infinite;\n`;\n\nexport const StyledPopoverTrigger = styled(PopoverTrigger)`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["Container","styled","div","EmptyTableContainer","ROW_HEADER_WIDTH","TimeTableContainer","props","$allRecordsLoaded","$loading","css","RowColumnHeader","V3_Colour","ROW_HEIGHT","V3_Border","$isScrolledX","$isScrolledY","V3_Shadow","TimeTableHeaderRow","Colour","ColumnHeaderRow","$numOfColumns","Math","max","$intervalWidth","MIN_HOURLY_INTERVAL_WIDTH","Border","$isScrolled","ColumnHeader","Spacing","ColumnHeaderTitle","Typography","BodySM","TimeTableBody","TimeTableRow","RowHeader","V3_Spacing","ClickableRowHeaderTitle","BodyMD","$isClickable","RowHeaderSubtitle","BodyXS","$show","Loader","LoadingDotsSpinner","$isEmptyContent","NoResultsFound","ErrorDisplay","LoadingWrapper","LoadingCell","$width","gradientAnimation","keyframes","LoadingBar","Primitive","StyledPopoverTrigger","PopoverTrigger"],"mappings":"87CAkDaA,EAAYC,EAAOC,GAAG,GAEtBC,EAAsBF,EAAOC,GAAG;;;;6BAIhBE;EAGhBC,EAAqBJ,EAAOC,GAA4B;;;;;sBAK9CI,GAAWA,EAAMC,kBAAoB,IAAM;;MAE3DD,IACC,GAAIA,EAAME,SACN,OAAOC,CAAG;;;;;aAMd;EAIKC,EAAkBT,EAAOC,GAAyB;;;;wBAIvCS,EAAc;aACzBP;cACCQ;;qBAEOC,EAAU,gBAAgBA,EAAiB;UACtDF,EAAkB;MACrBL,GACKA,EAAMQ,cAAgBR,EAAMS,aACrBN,CAAG;8BACQO,EAAU;;wBAEhBV,EAAMQ,aAAe,UAAY;0BAC/BR,EAAMS,aAAe,UAAY;;;;cAMxCN,CAAG;;;;;;EAUTQ,EAAqBhB,EAAOC,GAAG;;;;;wBAKpBgB,EAAW;6BACNd;;;cAGfQ;EAGDO,EAAkBlB,EAAOC,GAAyB;;wBAEvCgB,EAAW;cACrBN;;UAEHN,GAAUA,EAAMc;UAChBd,GACCe,KAAKC,IAA2B,EAAvBhB,EAAMiB,eAAoBC;;qBAE1BC,EAAO,gBAAgBA,EAAc,SAAKP,EAAe;;MAEvEZ,IACC,GAAIA,EAAMoB,YACN,OAAOjB,CAAG;8BACQO,EAAU;aAEhC;EAIKW,EAAe1B,EAAOC,GAAG;iBACrBsB;;;sBAGKI,EAAQ;EAGjBC,EAAoB5B,EAAO6B,EAAWC,OAAO;aAC7CpB,EAAU;EAGVqB,EAAgB/B,EAAOC,GAAG;;;EAK1B+B,EAAehC,EAAOC,GAAG;;6BAETE;;;cAGfQ;EAGDsB,EAAYjC,EAAOC,GAAmB;;;;;;;wBAO3BgB,EAAW;;aAEtBd;cACCQ;;iBAEGuB,EAAW,mBAAmBA,EAAW;qBACrCtB,EAAU,gBAAgBA,EAAiB;UACtDF,EAAkB;oBACRE,EAAU,gBAAgBA,EAAiB;UACrDF,EAAU;mBACDE,EAAU,gBAAgBA,EAAiB;UACpDF,EAAkB;;MAErBL,GACKA,EAAMoB,YACCjB,CAAG;8BACQO,EAAU;;cAIrBP,CAAG;;;EAOT2B,EAA0BnC,EACnC6B,EAAWO,OACgB;;;;;;aAMlB1B,EAAU;;kBAEJL,GAAWA,EAAMgC,aAAe,UAAY;;EAIlDC,EAAoBtC,EAC7B6B,EAAWU,OACU;;WAEdL,EAAW;;aAETxB,EAAU;MAChBL,IACC,IAAKA,EAAMmC,MACP,OAAOhC,CAAG;;aAGd;EAIKiC,EAASzC,EAAO0C,EAAgC;;;;mBAIzCrC,GAAWA,EAAMsC,gBAAkB,SAAW;;;;EAMrDC,EAAiB5C,EAAO6C,EAAa;;;eAGnCX,EAAW;EAGbY,EAAiB9C,EAAOC,GAAG;;qBAEnBW,EAAU,gBAAgBA,EAAiB;UACtDF,EAAkB;EAGfqC,EAAc/C,EAAOC,GAA4B;oBAC1CW,EAAU,gBAAgBA,EAAiB;UACrDF,EAAU;aACNL,GAAU,GAAGA,EAAM2C;;eAElBd,EAAW,iBAAiBA,EAAW;EAGhDe,EAAoBC,CAAS;;;;;;;EAStBC,EAAanD,EAAOC,GAAG;;;;;UAK1BS,EAAU0C,UAAU;UACpB1C,EAAU0C,UAAU;UACpB1C,EAAU0C,UAAU;;;iBAGbH;EAGJI,EAAuBrD,EAAOsD,EAAe;;;;;"}

package/toast/toast.styles.d.ts

@@ -3,17 +3,49 @@ interface StyleProps {
     $type: ToastType;
     $fixed?: boolean | undefined;
 }
-export declare const Wrapper: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string>;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyleProps>> & string;
-export declare const DescriptionMD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, StyleProps>> & string;
-export declare const DescriptionBL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, StyleProps>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, StyleProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Wrapper: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string>;
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TextIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
+export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never>>> & string;
+export declare const DescriptionMD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const DescriptionBL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export {};

package/toggle/toggle-icon.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{CircleIcon as e}from"@lifesg/react-icons/circle";import{CircleDotIcon as i}from"@lifesg/react-icons/circle-dot";import{CrossIcon as c}from"@lifesg/react-icons/cross";import{SquareIcon as o}from"@lifesg/react-icons/square";import{SquareTickFillIcon as s}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as t}from"@lifesg/react-icons/tick";import a from"clsx";import{wrapperBase as l,wrapperActiveDisabled as m,wrapperDisabled as f,wrapperActive as n}from"./toggle-icon.styles.js";const p=({type:p,active:d=!1,disabled:g,className:k})=>{let b;switch(p){case"checkbox":b=r(d?s:o,{});break;case"radio":b=r(d?i:e,{});break;case"tick":b=r(t,{});break;case"cross":b=r(c,{});break;default:b=null}return r("div",{className:a(l,d&&g?m:g?f:d?n:void 0,k),"aria-hidden":!0,children:b})};export{p as ToggleIcon};
+//# sourceMappingURL=toggle-icon.js.map

package/toggle/toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.js","sources":["../../src/toggle/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n    type: ToggleIconType;\n    active?: boolean | undefined;\n    disabled?: boolean | undefined;\n    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    const getWrapperStateClass = () => {\n        if (active && disabled) {\n            return styles.wrapperActiveDisabled;\n        }\n\n        if (disabled) {\n            return styles.wrapperDisabled;\n        }\n\n        if (active) {\n            return styles.wrapperActive;\n        }\n\n        return undefined;\n    };\n\n    switch (type) {\n        case \"checkbox\":\n            component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n            break;\n        case \"radio\":\n            component = active ? <CircleDotIcon /> : <CircleIcon />;\n            break;\n        case \"tick\":\n            component = <TickIcon />;\n            break;\n        case \"cross\":\n            component = <CrossIcon />;\n            break;\n        default:\n            component = null;\n            break;\n    }\n\n    return (\n        <div\n            className={clsx(\n                styles.wrapperBase,\n                getWrapperStateClass(),\n                className\n            )}\n            aria-hidden\n        >\n            {component}\n        </div>\n    );\n};\n"],"names":["ToggleIcon","type","active","disabled","className","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperDisabled","styles.wrapperActive"],"mappings":"whBAmBO,MAAMA,EAAa,EACtBC,OACAC,UAAS,EACTC,WACAC,gBAEA,IAAIC,EAkBJ,OAAQJ,GACJ,IAAK,WACDI,EAAqBC,EAATJ,EAAUK,EAAyBC,EAAP,CAAA,GACxC,MACJ,IAAK,QACDH,EAAqBC,EAATJ,EAAUO,EAAoBC,EAAP,CAAA,GACnC,MACJ,IAAK,OACDL,EAAYC,EAACK,EAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAACM,EAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAA,MAAA,CACIF,UAAWS,EACPC,EApCJZ,GAAUC,EACHY,EAGPZ,EACOa,EAGPd,EACOe,OADX,EA8BQb,6BAIHC,GACC"}

package/toggle/toggle-icon.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const wrapperActive: import("@linaria/core").LinariaClassName;
+export declare const wrapperActiveDisabled: import("@linaria/core").LinariaClassName;

package/toggle/toggle-icon.styles.js

@@ -0,0 +1,2 @@
+import"./toggle-icon.styles_ba71y.css";const o="wxufi5f",t="wo9gzbp",g="w1tlwg9n",l="w1d4lch6";export{g as wrapperActive,l as wrapperActiveDisabled,o as wrapperBase,t as wrapperDisabled};
+//# sourceMappingURL=toggle-icon.styles.js.map

package/toggle/toggle-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.styles.js","sources":["../../src/toggle/toggle-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapperBase = css`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-subtle\"]};\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const wrapperDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":["wrapperBase","wrapperDisabled","wrapperActive","wrapperActiveDisabled"],"mappings":"6DAOO,MAAMA,EAAW,UAaXC,EAAe,UAIfC,EAAa,WAIbC,EAAqB"}

package/toggle/toggle-icon.styles_ba71y.css

@@ -0,0 +1,4 @@
+.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+.wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
+.w1tlwg9n{color:var(--fds-colour-icon-selected);}
+.w1d4lch6{color:var(--fds-colour-icon-selected-disabled);}

package/toggle/toggle.d.ts

@@ -1,2 +1,2 @@
 import type { ToggleProps } from "./types";
-export declare const Toggle: ({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, onRemove, "data-testid": testId, onChange, useContentWidth, "aria-describedby": ariaDescribedBy, ...otherProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, focusableWhenDisabled, useContentWidth, onRemove, onChange, "data-testid": testId, "aria-describedby": ariaDescribedBy, ...otherProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/toggle/toggle.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as d}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as l}from"@lifesg/react-icons/chevron-up";import{useState as a,useMemo as n,useRef as o,useEffect as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Container as h,HeaderContainer as b,IndicatorLabelContainer as m,InputContainer as p,Input as u,TextContainer as $,Label as y,RemoveButton as g,StyledToggleIcon as v,SubLabel as f,Children as k,ErrorContainer as x,AlertContainer as j,ExpandButton as C,ErrorText as w,ErrorList as A}from"./toggle.styles.js";const L=L=>{var{type:T="checkbox",indicator:N,checked:R,styleType:S="default",children:W,childrenMaxLines:E,subLabel:F,disabled:I,error:M,name:P,id:_,className:q,compositeSection:B,removable:O,onRemove:z,"data-testid":D,onChange:G,useContentWidth:H,"aria-describedby":J}=L,K=e(L,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","data-testid","onChange","useContentWidth","aria-describedby"]);const{collapsible:Q=!0,errors:U,children:V,initialExpanded:X}=B||{},[Y,Z]=a(R),[ee,ie]=a(!!X),re=n((()=>{const e=Array.isArray(U)&&(null==U?void 0:U.length)>0,i=!Array.isArray(U)&&!!U;return e||i}),[U]),[te]=a(c.generate()),de=_?`${_}`:`tg-${te}`,le=o(null);s((()=>{Z(R)}),[R]),s((()=>{Y&&ie(null==X||X)}),[Y]);const ae=e=>{if(!I){if(G)return void G(e);switch(T){case"checkbox":Z((e=>!e));break;case"radio":case"yes":case"no":Y||Z(!0)}}},ne=()=>{I||ie(!ee)},oe=()=>{I||!z||z()},se=()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.click()},ce=e=>{e.stopPropagation()},he=()=>{let e;switch(T){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=T}return r(v,{type:e,active:Y,disabled:I,$selected:Y,$disabled:I})},be=()=>{if(!F)return null;let e;return e="function"==typeof F?F():F,r(f,{"data-id":"toggle-sublabel",id:`${de}-sublabel`,"aria-hidden":!0,children:e})},me=e=>i(t,{children:[r(w,{weight:"semibold",$disabled:I,children:"Error"}),r(A,{$disabled:I,children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${de}-error-list-item-${i}`,children:r(w,{weight:"semibold",$disabled:I,children:e})},i)))})]});return i(h,{$selected:Y,$disabled:I,className:q,$styleType:S,$error:M,$indicator:N,$useContentWidth:H,id:_,"data-testid":D,children:[(()=>{const e=["string"==typeof F?`${de}-sublabel`:null,J].filter(Boolean).join(" ")||void 0;return i(b,{id:`${de}-header-container`,$disabled:I,$error:M,$selected:Y,$indicator:N,$styleType:S,children:[r(m,{$addPadding:O,children:i(p,{id:`${de}-input-container`,onClick:se,children:[r(u,Object.assign({ref:le,name:P,id:`${de}-input`,type:"checkbox"===T?"checkbox":"radio","data-testid":"toggle-input",disabled:I,onChange:ae,onClick:ce,checked:Y,"aria-describedby":e},K)),N&&he(),i($,{$selected:Y,$disabled:I,children:[r(y,{htmlFor:`${de}-input`,"data-testid":"toggle-label",id:`${de}-label`,$maxLines:E,$selected:Y,children:W}),F&&be()]})]})}),O&&r(g,{type:"button",$disabled:I,onClick:oe,id:`${de}-remove-button`,children:"Remove"})]})})(),V&&i("div",{children:[(!Q||ee)&&r(k,{"data-id":"toggle-composite-children",$isFinalItem:!Q,$disabled:I,children:V}),Q&&!ee&&re&&r(x,{$disabled:I,onClick:ne,id:`${de}-error-alert`,children:r(j,{type:I?"description":"error",className:q,showIcon:!0,children:Array.isArray(U)?me(U):U})}),Q&&i(C,{$paddingTopRequired:!ee&&!re,disabled:I,onClick:ne,"data-testid":ee?"collapse-button":"expand-button",children:[ee?"Show less":"Show more",r(ee?l:d,{"aria-hidden":!0})]})]})]})};export{L as Toggle};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as l}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as o}from"@lifesg/react-icons/chevron-up";import a from"clsx";import{useState as s,useMemo as n,useRef as d,useEffect as c}from"react";import{Alert as m}from"../alert/alert.js";import{Markup as p}from"../markup/markup.js";import{TextList as h}from"../text-list/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as b}from"../theme/utils/use-apply-styles.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as y,container as f,noIndicatorContainer as g,useContentWidthContainer as k,headerContainer as j,inputContainer as x,input as N,toggleInputDisabled as $,label as C,toggleLabelSelected as w,toggleLabelDefault as L,textContainer as A,indicatorLabelContainer as D,indicatorLabelContainerAddPadding as S,removeButton as M,disabledColorCursor as W,colorBorderError as B,toggleContainerError as R,toggleContainerNoBorderDisabledSelected as T,toggleContainerNoBorderDisabled as E,toggleContainerNoBorderSelected as I,toggleContainerNoBorder as _,toggleContainerDisabledSelected as q,toggleContainerDisabled as z,toggleContainerSelected as F,toggleContainer as O,toggleContainerHoverSelected as P,toggleContainerHoverDefault as U,subLabel as G,toggleTextContainerDisabledSelected as H,colorTextDisabled as J,toggleTextContainerSelected as K,children as Q,childrenIsFinalItem as V,alertContainer as X,errorContainer as Y,expandButton as Z,expandButtonPaddingTopRequired as ee,colorTextError as ie}from"./toggle.styles.js";import{ToggleIcon as re}from"./toggle-icon.js";const te=te=>{var{type:le="checkbox",indicator:oe,checked:ae,styleType:se="default",children:ne,childrenMaxLines:de,subLabel:ce,disabled:me,error:pe,name:he,id:be,className:ue,compositeSection:ve,removable:ye,focusableWhenDisabled:fe,useContentWidth:ge,onRemove:ke,onChange:je,"data-testid":xe,"aria-describedby":Ne}=te,$e=e(te,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:Ce=!0,errors:we,children:Le,initialExpanded:Ae}=ve||{},[De,Se]=s(ae),[Me,We]=s(!!Ae),Be=n((()=>{const e=Array.isArray(we)&&(null==we?void 0:we.length)>0,i=!Array.isArray(we)&&!!we;return e||i}),[we]),Re=v(),Te=be?`${be}`:`tg-${Re}`,Ee=d(null),Ie=d(null);b(Ie,{[y.label.desktopLineClamp]:null==(null==de?void 0:de.desktop)?null:`${de.desktop}`,[y.label.tabletLineClamp]:null==(null==de?void 0:de.tablet)?null:`${de.tablet}`,[y.label.mobileLineClamp]:null==(null==de?void 0:de.mobile)?null:`${de.mobile}`});const _e=!!me&&!!fe,qe=!!me&&!fe,ze=!!me;c((()=>{Se(ae)}),[ae]),c((()=>{De&&We(null==Ae||Ae)}),[De]);const Fe=e=>{if(ze)e.preventDefault();else if(je)je(e);else switch(le){case"checkbox":Se((e=>!e));break;case"radio":case"yes":case"no":De||Se(!0)}},Oe=()=>{me||We(!Me)},Pe=()=>{me||!ke||ke()},Ue=()=>{var e;null===(e=null==Ee?void 0:Ee.current)||void 0===e||e.click()},Ge=e=>{e.stopPropagation()},He=()=>{let e;switch(le){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=le}return r(re,{type:e,active:De,disabled:me})},Je=()=>{if(!ce)return null;let e;return e="function"==typeof ce?ce():ce,r("div",{"data-id":"toggle-sublabel",id:`${Te}-sublabel`,"aria-hidden":!0,className:G,children:e})},Ke=e=>i(t,{children:[r(u.BodyMD,{weight:"semibold",className:a(ie,me&&J),children:"Error"}),r(h.Ul,{className:a(ie,me&&J),children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${Te}-error-list-item-${i}`,children:r(u.BodyMD,{weight:"semibold",className:a(ie,me&&J),children:e})},i)))})]});return i("div",{className:a(f,"no-border"===se?pe?a(B,!me&&R):me?De?T:E:De?I:_:pe?me?B:R:me?De?q:z:De?F:O,(()=>{if(!me)return!pe&&De?P:U})(),!oe&&g,ge&&k,ue),id:be,"data-testid":xe,children:[(()=>{const e=["string"==typeof ce?`${Te}-sublabel`:null,Ne].filter(Boolean).join(" ")||void 0;return i("div",{id:`${Te}-header-container`,className:j,children:[r("div",{className:a(D,ye&&S),children:i("div",{id:`${Te}-input-container`,onClick:Ue,className:x,children:[r("input",Object.assign({ref:Ee,name:he,id:`${Te}-input`,type:"checkbox"===le?"checkbox":"radio","data-testid":"toggle-input",className:a(N,me&&$),disabled:qe,"aria-disabled":_e,onChange:Fe,onClick:Ge,checked:De,tabIndex:_e?0:void 0,"aria-describedby":e},$e)),oe&&He(),i("div",{className:a(A,me?De?H:J:De?K:void 0),children:[r("label",{ref:Ie,htmlFor:`${Te}-input`,"data-testid":"toggle-label",id:`${Te}-label`,className:a(C,De?w:L),children:ne}),ce&&Je()]})]})}),ye&&r("button",{type:"button",className:a(M,me&&W),onClick:Pe,id:`${Te}-remove-button`,children:"Remove"})]})})(),Le&&i("div",{children:[(!Ce||Me)&&r("div",{"data-id":"toggle-composite-children",className:a(Q,!Ce&&V,me&&J),children:r(p,{baseTextSize:"body-md",children:Le})}),Ce&&!Me&&Be&&r("div",{className:a(Y,me&&W),onClick:Oe,id:`${Te}-error-alert`,children:r(m,{type:me?"description":"error",className:X,showIcon:!0,children:Array.isArray(we)?Ke(we):we})}),Ce&&i("button",{className:a(Z,me&&W,!Me&&!Be&&ee),disabled:me,onClick:Oe,"data-testid":Me?"collapse-button":"expand-button",children:[Me?"Show less":"Show more",r(Me?o:l,{"aria-hidden":!0})]})]})]})};export{te as Toggle};
 //# sourceMappingURL=toggle.js.map

package/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport type { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    AlertContainer,\n    Children,\n    Container,\n    ErrorContainer,\n    ErrorList,\n    ErrorText,\n    ExpandButton,\n    HeaderContainer,\n    IndicatorLabelContainer,\n    Input,\n    InputContainer,\n    Label,\n    RemoveButton,\n    StyledToggleIcon,\n    SubLabel,\n    TextContainer,\n} from \"./toggle.styles\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    onRemove,\n    \"data-testid\": testId,\n    onChange,\n    useContentWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const [uniqueId] = useState(SimpleIdGenerator.generate());\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            if (onChange) {\n                onChange(event);\n                return;\n            }\n            switch (type) {\n                case \"checkbox\":\n                    setSelected((prevSelected) => {\n                        return !prevSelected;\n                    });\n                    break;\n                case \"radio\":\n                case \"yes\":\n                case \"no\":\n                    {\n                        if (!selected) {\n                            setSelected(true);\n                        }\n                    }\n                    break;\n            }\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <StyledToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                $selected={selected}\n                $disabled={disabled}\n            />\n        );\n    };\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <SubLabel\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n            >\n                {component}\n            </SubLabel>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <Children\n                    data-id=\"toggle-composite-children\"\n                    $isFinalItem={!collapsible}\n                    $disabled={disabled}\n                >\n                    {compositeSectionChildren}\n                </Children>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n        return (\n            collapsible && (\n                <ExpandButton\n                    $paddingTopRequired={collapsedWithoutErrors}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </ExpandButton>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <HeaderContainer\n                id={`${generatedId}-header-container`}\n                $disabled={disabled}\n                $error={error}\n                $selected={selected}\n                $indicator={indicator}\n                $styleType={styleType}\n            >\n                <IndicatorLabelContainer $addPadding={removable}>\n                    <InputContainer\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                    >\n                        <Input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            disabled={disabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <TextContainer\n                            $selected={selected}\n                            $disabled={disabled}\n                        >\n                            <Label\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                $maxLines={childrenMaxLines}\n                                $selected={selected}\n                            >\n                                {children}\n                            </Label>\n                            {subLabel && renderSubLabel()}\n                        </TextContainer>\n                    </InputContainer>\n                </IndicatorLabelContainer>\n\n                {removable && (\n                    <RemoveButton\n                        type=\"button\"\n                        $disabled={disabled}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </RemoveButton>\n                )}\n            </HeaderContainer>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <ErrorText weight=\"semibold\" $disabled={disabled}>\n                    Error\n                </ErrorText>\n                <ErrorList $disabled={disabled}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <ErrorText\n                                    weight=\"semibold\"\n                                    $disabled={disabled}\n                                >\n                                    {item}\n                                </ErrorText>\n                            </li>\n                        );\n                    })}\n                </ErrorList>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <ErrorContainer\n                    $disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <AlertContainer\n                        type={disabled ? \"description\" : \"error\"}\n                        className={className}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </AlertContainer>\n                </ErrorContainer>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <Container\n            $selected={selected}\n            $disabled={disabled}\n            className={className}\n            $styleType={styleType}\n            $error={error}\n            $indicator={indicator}\n            $useContentWidth={useContentWidth}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </Container>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","testId","onChange","useContentWidth","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","SimpleIdGenerator","generate","generatedId","inputRef","useRef","useEffect","handleOnChange","event","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","renderSubLabel","component","SubLabel","renderErrorList","_jsxs","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","$error","IndicatorLabelContainer","$addPadding","InputContainer","onClick","Input","Object","assign","ref","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon","ExpandButton","$paddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.toggleInputDisabled\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerStateClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled && styles.disabledColorCursor\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderErrorList","_jsxs","_Fragment","Typography","BodyMD","weight","clsx","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","onClick","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","styles.disabledColorCursor","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon","styles.expandButton","styles.expandButtonPaddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/toggle/toggle.styles.d.ts

@@ -1,51 +1,45 @@
-import type { ToggleStyleType } from "./types";
-interface StyleProps {
-    $selected?: boolean;
-    $disabled?: boolean;
-    $indicator?: boolean;
-}
-interface ContainerStyleProps extends StyleProps {
-    $styleType?: ToggleStyleType;
-    $error?: boolean;
-    $useContentWidth?: boolean;
-}
-interface IndicatorLabelContainerStyleProps {
-    $addPadding?: boolean;
-}
-interface LabelStyleProps {
-    $maxLines?: {
-        desktop?: number;
-        mobile?: number;
-        tablet?: number;
+export declare const tokens: {
+    readonly label: {
+        readonly desktopLineClamp: "--fds-internal-toggle-label-desktopLineClamp";
+        readonly tabletLineClamp: "--fds-internal-toggle-label-tabletLineClamp";
+        readonly mobileLineClamp: "--fds-internal-toggle-label-mobileLineClamp";
     };
-}
-interface ExpandButtonStyleProps extends StyleProps {
-    $paddingTopRequired?: boolean;
-}
-interface ChildrenStyleProps extends StyleProps {
-    $isFinalItem?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelStyleProps & {
-    $selected?: boolean;
-}>> & string;
-export declare const SubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export declare const IndicatorLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorLabelContainerStyleProps>> & string;
-export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyleProps>> & string;
-export declare const ExpandButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ExpandButtonStyleProps>> & string;
-export declare const ErrorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const AlertContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const Children: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ChildrenStyleProps>> & string;
-export declare const ErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, StyleProps>> & string;
-export declare const ErrorList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").UnorderedListProps, StyleProps>> & string & Omit<{
-    ({ size, bulletType, bottomMargin, children, ...otherProps }: import("..").UnorderedListProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledToggleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/toggle-icon/toggle-icon").ToggleIconProps, StyleProps>> & string & Omit<({ type, active, disabled, className, }: import("../shared/toggle-icon/toggle-icon").ToggleIconProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+};
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const toggleTextContainerSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleTextContainerDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const noIndicatorContainer: import("@linaria/core").LinariaClassName;
+export declare const useContentWidthContainer: import("@linaria/core").LinariaClassName;
+export declare const colorBorderError: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderDisabled: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorder: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerError: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerDisabled: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerHoverSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainer: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerHoverDefault: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const toggleInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const toggleLabelDefault: import("@linaria/core").LinariaClassName;
+export declare const toggleLabelSelected: import("@linaria/core").LinariaClassName;
+export declare const subLabel: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainer: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainerAddPadding: import("@linaria/core").LinariaClassName;
+export declare const removeButton: import("@linaria/core").LinariaClassName;
+export declare const disabledColorCursor: import("@linaria/core").LinariaClassName;
+export declare const expandButton: import("@linaria/core").LinariaClassName;
+export declare const expandButtonPaddingTopRequired: import("@linaria/core").LinariaClassName;
+export declare const errorContainer: import("@linaria/core").LinariaClassName;
+export declare const children: import("@linaria/core").LinariaClassName;
+export declare const childrenIsFinalItem: import("@linaria/core").LinariaClassName;
+export declare const colorTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const colorTextError: import("@linaria/core").LinariaClassName;
+export declare const alertContainer: import("@linaria/core").LinariaClassName;