diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js
index df84b6624..8e1f96b18 100644
--- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js
+++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js
@@ -10,22 +10,28 @@ import {
ACTIVITY_ACCORDION_PROP_TYPES,
} from './ActivityAccordion.constants';
-function AccordionLabel({ label, icon, rightSection, compact, classes }) {
+function AccordionLabel({ label, title, icon, hideIcon, rightSection, compact, classes }) {
return (
-
- {icon
- ? React.cloneElement(icon, {
- width: compact ? 16 : 22,
- height: compact ? 16 : 22,
- className: classes.labelIcon,
- })
- : null}
-
-
- {label}
-
+ {!hideIcon ? (
+
+ {icon
+ ? React.cloneElement(icon, {
+ width: compact ? 16 : 22,
+ height: compact ? 16 : 22,
+ className: classes.labelIcon,
+ })
+ : null}
+
+ ) : null}
+
+ {label ? (
+
+ {label}
+
+ ) : null}
+ {title || null}
{rightSection || null}
@@ -35,6 +41,8 @@ function AccordionLabel({ label, icon, rightSection, compact, classes }) {
AccordionLabel.propTypes = {
label: PropTypes.string,
icon: PropTypes.node,
+ title: PropTypes.node,
+ hideIcon: PropTypes.bool,
rightSection: PropTypes.any,
compact: PropTypes.bool,
classes: PropTypes.any,
diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js
index adc0e863b..b8ca5ff3a 100644
--- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js
+++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js
@@ -1,5 +1,5 @@
import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { pxToRem } from '../../theme.mixins';
const BORDER_RADIUS = 8;
@@ -21,7 +21,7 @@ export const ActivityAccordionStyles = createStyles((theme, { compact }) => {
border: 'none',
},
content: {
- background: PANEL_COLORS.default,
+ // background: PANEL_COLORS.default,
borderBottomRightRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
wordBreak: 'normal',
diff --git a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js
index 16d31d189..2f5af8dfc 100644
--- a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js
+++ b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js
@@ -1,7 +1,7 @@
import React from 'react';
import { CustomLegendStyles } from './CustomLegend.styles';
import { CUSTOM_LEGEND_DEFAULT_PROPS, CUSTOM_LEGEND_PROP_TYPES } from './CustomLegend.constants';
-import { CheckIcon, RemoveBoldIcon } from '@bubbles-ui/icons/solid';
+import { CheckBoldIcon, RemoveBoldIcon, SlashIcon } from '@bubbles-ui/icons/solid';
const CustomLegend = ({ id }) => {
const { classes, cx } = CustomLegendStyles({}, { name: 'CustomLegend' });
@@ -11,28 +11,13 @@ const CustomLegend = ({ id }) => {
const getLegendIcon = () => {
if (isOK)
- return ;
+ return ;
if (isKO)
- return ;
- return (
-
- /
-
- );
+ return ;
+ return ;
};
- const getLegendFill = () => {
- if (isOK) return '#4BA773';
- if (isKO) return '#C9516C';
- return '#8E97A3';
- };
-
- return (
-
-
- {getLegendIcon()}
-
- );
+ return {getLegendIcon()};
};
CustomLegend.defaultProps = CUSTOM_LEGEND_DEFAULT_PROPS;
diff --git a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js
index dfa9343d5..9c8921e9b 100644
--- a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js
+++ b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js
@@ -1,10 +1,10 @@
import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../../theme.mixins';
export const CustomLegendStyles = createStyles((theme, {}) => {
return {
root: {},
- legendIcon: { color: theme.colors.mainWhite },
- legendSlash: { fill: theme.colors.mainWhite, fontWeight: 600, fontSize: pxToRem(17) },
+ legendIconOK: { color: '#5CBC6A' },
+ legendIconKO: { color: '#D13B3B' },
+ legendIconSlash: { color: '#4D5358' },
};
});
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
index 4728ea291..1da08d6a2 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
@@ -12,10 +12,11 @@ const TotalLayoutFooterContainer = ({
rightZone,
children,
fullWidth,
+ showFooterBorder: _showFooterBorder,
}) => {
const [showFooterBorder, setShowFooterBorder] = React.useState(false);
const { classes } = TotalLayoutFooterContainerStyles(
- { showFooterBorder, leftOffset, fixed, fullWidth },
+ { showFooterBorder: showFooterBorder || _showFooterBorder, leftOffset, fixed, fullWidth },
{ name: 'TotalLayoutFooterContainer' },
);
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
index f2358191c..541378d45 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
@@ -3,14 +3,22 @@ import { Title } from '../../../typography';
import { Stack } from '../../Stack';
import { Box } from '../../Box';
import {
- TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES,
TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS,
+ TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES,
} from './TotalLayoutStepContainer.constants';
import { TotalLayoutStepContainerStyles } from './TotalLayoutStepContainer.styles';
-const TotalLayoutStepContainer = ({ stepName, fullWidth, noMargin, children, Footer, clean }) => {
+const TotalLayoutStepContainer = ({
+ stepName,
+ fullWidth,
+ noMargin,
+ children,
+ footerPadding,
+ Footer,
+ clean,
+}) => {
const { classes } = TotalLayoutStepContainerStyles(
- { hasFooter: !!Footer, clean, fullWidth, noMargin },
+ { hasFooter: !!Footer, clean, fullWidth, noMargin, footerPadding },
{ name: 'TotalLayoutStepContainer' },
);
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
index 3f6906338..cd29e7a00 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -1,7 +1,7 @@
import { createStyles } from '@mantine/styles';
const TotalLayoutStepContainerStyles = createStyles(
- (theme, { hasFooter, clean, fullWidth, noMargin }) => ({
+ (theme, { hasFooter, clean, fullWidth, noMargin, footerPadding }) => ({
root: {},
stepContainer: {
padding: '30px 0 0 0 ',
@@ -16,7 +16,7 @@ const TotalLayoutStepContainerStyles = createStyles(
formContainer: {
backgroundColor: !clean && 'white',
padding: !clean && 24,
- paddingBottom: hasFooter ? 70 : 24,
+ paddingBottom: footerPadding || hasFooter ? 70 : 24,
},
stepName: {
marginBottom: 12,
diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js
new file mode 100644
index 000000000..439183131
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+export const VERTICAL_CONTAINER_DEFAULT_PROPS = {
+ disableContentPadding: false,
+ navWidth: 276,
+ stickyAt: 0,
+ legible: true,
+};
+export const VERTICAL_CONTAINER_PROP_TYPES = {
+ padding: PropTypes.number,
+ disableContentPadding: PropTypes.bool,
+ navWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ stickyAt: PropTypes.number,
+ legible: PropTypes.bool,
+};
diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.js
new file mode 100644
index 000000000..f7c920175
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.js
@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import { VerticalContainerStyles } from './VerticalContainer.styles';
+import { Box } from '../Box';
+import { Stack } from '../Stack';
+import {
+ VERTICAL_CONTAINER_DEFAULT_PROPS,
+ VERTICAL_CONTAINER_PROP_TYPES,
+} from './VerticalContainer.constants';
+
+const VerticalContainer = forwardRef(({ children, scrollRef, leftZone, ...props }, ref) => {
+ const { classes } = VerticalContainerStyles({ name: 'VerticalStepperContainer' });
+
+ return (
+
+
+ {leftZone}
+ {children}
+
+
+ );
+});
+
+VerticalContainer.displayName = 'VerticalContainer';
+VerticalContainer.defaultProps = VERTICAL_CONTAINER_DEFAULT_PROPS;
+VerticalContainer.propTypes = VERTICAL_CONTAINER_PROP_TYPES;
+
+export { VerticalContainer };
diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx
new file mode 100644
index 000000000..57762f3f2
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx
@@ -0,0 +1,165 @@
+import { Preview, Props, Story } from '@storybook/addon-docs';
+import { VerticalContainer } from './VerticalContainer.js';
+import { ThemeProvider } from './../../ThemeProvider';
+import { Box, ContextContainer } from '../../layout';
+import { Paragraph } from '../../typography';
+
+# VerticalStepperContainer
+
+[Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.js)
+
+## Table of Contents
+
+
+
+
+- [Overview](#overview)
+- [VerticalStepper width](#verticalstepper-width)
+- [Content padding](#content-padding)
+- [VerticalStepper sticky at](#verticalstepper-sticky-at)
+- [Component API](#component-api)
+- [References](#references)
+- [Feedback](#feedback)
+
+## Overview
+
+VerticalStepperContainer is component to render a VerticalStepper including the steps.
+
+
+ {
+ },
+ },
+ ]}
+ >
+
+
+## VerticalStepper width
+
+You can control the width of the VerticalStepper with the ``navWidth` prop.
+
+
+ {
+ },
+ },
+ ]}
+ >
+ {
+ },
+ },
+ ]}
+ >
+
+
+## Content padding
+
+With the boolean props `disableContentPadding`, control if you want padding for the content or not
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+ est laborum
+
+
+
+
+
+
+## VerticalStepper sticky at
+
+With the `stickyAt` prop, control the position in pixels from the top at which the VerticalStepper becomes sticky.
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+ est laborum
+
+
+
+
+
+
+## Component API
+
+
+
+
+
+
+
+## References
+
+[MDN: ARIA navigation role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role)
+
+[W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute)
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack, or updating this file on
+[GitHub](https://github.com/leemonade/bubbles/edit/main/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.mdx)
diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js
new file mode 100644
index 000000000..704fe625a
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js
@@ -0,0 +1,209 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { PluginAssignmentsIcon } from '@bubbles-ui/icons/solid';
+import { VerticalContainer } from './VerticalContainer';
+import { VERTICAL_CONTAINER_DEFAULT_PROPS } from './VerticalContainer.constants';
+import mdx from './VerticalContainer.mdx';
+import { SIMPLE_DATA as STEPPER_DATA } from '../../navigation/VerticalStepper/mock/data';
+import { Box } from '../Box';
+import { Stack } from '../Stack';
+import { ContextContainer } from '../ContextContainer';
+import { Button } from '../../form/Button';
+import { Paragraph } from '../../typography/Paragraph';
+import {
+ TotalLayoutFooterContainer,
+ TotalLayoutHeader,
+ TotalLayoutStepContainer,
+} from '../TotalLayout';
+import { TotalLayoutContainer } from '../TotalLayout/TotalLayoutContainer/TotalLayoutContainer';
+
+export default {
+ title: 'Atoms/Layout/VerticalStepperContainer',
+ parameters: {
+ component: VerticalContainer,
+ docs: {
+ page: mdx,
+ },
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/c3MWm2gVHU4JfYlVfr5VvB/%F0%9F%8D%8B%F0%9F%92%A7-Bubbles-SD-v2?node-id=8215%3A104591',
+ },
+ },
+ argTypes: {},
+};
+
+const Template = ({ data = [], currentStep, ...props }) => {
+ const [activeStep, setActiveStep] = useState(currentStep || 0);
+
+ const randomContent = useMemo(
+ () => [...Array(data.length)].map(() => Math.floor(Math.random() * 10)),
+ [data],
+ );
+
+ const handleNext = () => {
+ setActiveStep(activeStep + 1);
+ window.scrollTo(0, 0, { behavior: 'smooth' });
+ };
+
+ const handlePrev = () => {
+ setActiveStep(activeStep - 1);
+ window.scrollTo(0, 0, { behavior: 'smooth' });
+ };
+
+ return (
+
+ Toma prueba}
+ currentStep={activeStep}
+ >
+ {
+ [...Array(data.length)].map((_, i) => (
+
+
+
+ {[...Array(randomContent[i])].map((__, j) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+ eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+ in culpa qui officia deserunt mollit anim id est laborum
+
+ ))}
+
+
+
+ {activeStep > 0 && (
+
+ )}
+
+
+
+
+
+ ))[activeStep]
+ }
+
+
+ );
+};
+
+Template.propTypes = {
+ data: PropTypes.array,
+ currentStep: PropTypes.number,
+};
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+ ...VERTICAL_CONTAINER_DEFAULT_PROPS,
+ data: STEPPER_DATA,
+};
+
+const TotalLayoutTemplate = ({ data = [], currentStep, ...props }) => {
+ const [activeStep, setActiveStep] = useState(currentStep || 0);
+ const scrollRef = React.useRef(null);
+
+ const randomContent = useMemo(
+ () => [...Array(data.length)].map(() => Math.floor(Math.random() * 10)),
+ [data],
+ );
+
+ // Prepare Header. It is necesary to pass the setOpenCancelModal function to the header
+ const handleOnCancel = () => {
+ console.log('Redirecting after cancel');
+ };
+
+ const handleNext = () => {
+ setActiveStep(activeStep + 1);
+ window.scrollTo(0, 0, { behavior: 'smooth' });
+ };
+
+ const handlePrev = () => {
+ setActiveStep(activeStep - 1);
+ window.scrollTo(0, 0, { behavior: 'smooth' });
+ };
+
+ const buildHeader = () => (
+ }
+ formTitlePlaceholder={'TÃtulo de la tarea'}
+ onCancel={handleOnCancel}
+ />
+ );
+
+ return (
+
+ buildHeader()}>
+
+ {
+ [...Array(data.length)].map((_, i) => (
+
+ {activeStep > 0 && (
+
+ )}
+ >
+ }
+ rightZone={}
+ />
+ }
+ >
+
+ {[...Array(randomContent[i])].map((__, j) => (
+ <>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+ >
+ ))}
+
+
+ ))[activeStep]
+ }
+
+
+
+ );
+};
+
+TotalLayoutTemplate.propTypes = {
+ data: PropTypes.array,
+ currentStep: PropTypes.number,
+};
+
+export const WithTotalLayout = TotalLayoutTemplate.bind({});
+
+WithTotalLayout.args = {
+ ...VERTICAL_CONTAINER_DEFAULT_PROPS,
+ data: STEPPER_DATA,
+};
diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js
new file mode 100644
index 000000000..3be449eb7
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js
@@ -0,0 +1,31 @@
+import { createStyles } from '@mantine/styles';
+
+const VerticalContainerStyles = createStyles((theme) => {
+ const stepperTheme = theme.other.stepper;
+
+ return {
+ root: {
+ position: 'relative',
+ display: 'flex',
+ width: '100%',
+ overflow: 'hidden',
+ flex: 1,
+ },
+ stepper: {
+ position: 'sticky',
+ top: 25,
+ height: 'fit-content',
+ minWidth: 192,
+ marginRight: 16,
+ marginTop: 25,
+ },
+ content: {
+ width: 928,
+ '@media (min-width: 1920px)': {
+ width: 1200,
+ },
+ },
+ };
+});
+
+export { VerticalContainerStyles };
diff --git a/packages/components/src/layout/VerticalContainer/index.js b/packages/components/src/layout/VerticalContainer/index.js
new file mode 100644
index 000000000..9b45e1df1
--- /dev/null
+++ b/packages/components/src/layout/VerticalContainer/index.js
@@ -0,0 +1,2 @@
+export * from './VerticalContainer';
+export * from './VerticalContainer.constants';
diff --git a/packages/components/src/layout/index.js b/packages/components/src/layout/index.js
index d52ab8695..ae7b2f263 100644
--- a/packages/components/src/layout/index.js
+++ b/packages/components/src/layout/index.js
@@ -1,6 +1,7 @@
export * from './HorizontalStepperContainer';
export * from './TotalLayout';
export * from './VerticalStepperContainer';
+export * from './VerticalContainer';
export * from './ContextContainer';
export * from './ContentLegible';
export * from './PageContainer';
diff --git a/packages/icons/solid/esm/index.d.ts b/packages/icons/solid/esm/index.d.ts
index 9929e6060..4142deedb 100644
--- a/packages/icons/solid/esm/index.d.ts
+++ b/packages/icons/solid/esm/index.d.ts
@@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon'
export { default as BookmarksIcon } from './BookmarksIcon'
export { default as CakeBirthdayIcon } from './CakeBirthdayIcon'
export { default as ChatTranslateIcon } from './ChatTranslateIcon'
+export { default as CheckBoldIcon } from './CheckBoldIcon'
export { default as CheckIcon } from './CheckIcon'
export { default as ClassIcon } from './ClassIcon'
export { default as CommentIcon } from './CommentIcon'
@@ -149,8 +150,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon'
export { default as SettingsIcon } from './SettingsIcon'
export { default as ShapePyramidIcon } from './ShapePyramidIcon'
+export { default as SlashIcon } from './SlashIcon'
export { default as StarAlternateIcon } from './StarAlternateIcon'
export { default as StarIcon } from './StarIcon'
+export { default as StatisticsIcon } from './StatisticsIcon'
export { default as StudentIcon } from './StudentIcon'
export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon'
export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon'
diff --git a/packages/icons/solid/esm/index.js b/packages/icons/solid/esm/index.js
index 215bcfdf4..8b9a69fe8 100644
--- a/packages/icons/solid/esm/index.js
+++ b/packages/icons/solid/esm/index.js
@@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon.js'
export { default as BookmarksIcon } from './BookmarksIcon.js'
export { default as CakeBirthdayIcon } from './CakeBirthdayIcon.js'
export { default as ChatTranslateIcon } from './ChatTranslateIcon.js'
+export { default as CheckBoldIcon } from './CheckBoldIcon.js'
export { default as CheckIcon } from './CheckIcon.js'
export { default as ClassIcon } from './ClassIcon.js'
export { default as CommentIcon } from './CommentIcon.js'
@@ -149,8 +150,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon.js'
export { default as SettingsIcon } from './SettingsIcon.js'
export { default as ShapePyramidIcon } from './ShapePyramidIcon.js'
+export { default as SlashIcon } from './SlashIcon.js'
export { default as StarAlternateIcon } from './StarAlternateIcon.js'
export { default as StarIcon } from './StarIcon.js'
+export { default as StatisticsIcon } from './StatisticsIcon.js'
export { default as StudentIcon } from './StudentIcon.js'
export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon.js'
export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon.js'
diff --git a/packages/icons/solid/index.d.ts b/packages/icons/solid/index.d.ts
index 9929e6060..4142deedb 100644
--- a/packages/icons/solid/index.d.ts
+++ b/packages/icons/solid/index.d.ts
@@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon'
export { default as BookmarksIcon } from './BookmarksIcon'
export { default as CakeBirthdayIcon } from './CakeBirthdayIcon'
export { default as ChatTranslateIcon } from './ChatTranslateIcon'
+export { default as CheckBoldIcon } from './CheckBoldIcon'
export { default as CheckIcon } from './CheckIcon'
export { default as ClassIcon } from './ClassIcon'
export { default as CommentIcon } from './CommentIcon'
@@ -149,8 +150,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco
export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon'
export { default as SettingsIcon } from './SettingsIcon'
export { default as ShapePyramidIcon } from './ShapePyramidIcon'
+export { default as SlashIcon } from './SlashIcon'
export { default as StarAlternateIcon } from './StarAlternateIcon'
export { default as StarIcon } from './StarIcon'
+export { default as StatisticsIcon } from './StatisticsIcon'
export { default as StudentIcon } from './StudentIcon'
export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon'
export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon'
diff --git a/packages/icons/solid/index.js b/packages/icons/solid/index.js
index 66d53cc70..10cef23f2 100644
--- a/packages/icons/solid/index.js
+++ b/packages/icons/solid/index.js
@@ -23,6 +23,7 @@ module.exports.BookmarkedIcon = require("./BookmarkedIcon.js")
module.exports.BookmarksIcon = require("./BookmarksIcon.js")
module.exports.CakeBirthdayIcon = require("./CakeBirthdayIcon.js")
module.exports.ChatTranslateIcon = require("./ChatTranslateIcon.js")
+module.exports.CheckBoldIcon = require("./CheckBoldIcon.js")
module.exports.CheckIcon = require("./CheckIcon.js")
module.exports.ClassIcon = require("./ClassIcon.js")
module.exports.CommentIcon = require("./CommentIcon.js")
@@ -149,8 +150,10 @@ module.exports.SettingMenuHorizontalIcon = require("./SettingMenuHorizontalIcon.
module.exports.SettingMenuVerticalIcon = require("./SettingMenuVerticalIcon.js")
module.exports.SettingsIcon = require("./SettingsIcon.js")
module.exports.ShapePyramidIcon = require("./ShapePyramidIcon.js")
+module.exports.SlashIcon = require("./SlashIcon.js")
module.exports.StarAlternateIcon = require("./StarAlternateIcon.js")
module.exports.StarIcon = require("./StarIcon.js")
+module.exports.StatisticsIcon = require("./StatisticsIcon.js")
module.exports.StudentIcon = require("./StudentIcon.js")
module.exports.SubtractCircleAlternateIcon = require("./SubtractCircleAlternateIcon.js")
module.exports.SubtractSquareAlternateIcon = require("./SubtractSquareAlternateIcon.js")
diff --git a/packages/icons/src/solid/check-bold.svg b/packages/icons/src/solid/check-bold.svg
new file mode 100644
index 000000000..da8680eba
--- /dev/null
+++ b/packages/icons/src/solid/check-bold.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/icons/src/solid/slash.svg b/packages/icons/src/solid/slash.svg
new file mode 100644
index 000000000..103e432b0
--- /dev/null
+++ b/packages/icons/src/solid/slash.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/icons/src/solid/statistics.svg b/packages/icons/src/solid/statistics.svg
new file mode 100644
index 000000000..90efe3fff
--- /dev/null
+++ b/packages/icons/src/solid/statistics.svg
@@ -0,0 +1,5 @@
+