.createAndManage {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.createAndManage1 {
    width: 591px;
    position: relative;
    text-decoration: underline;
    line-height: 16px;
    display: inline-block;
}
.createAndManageYoGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #007e45;
}
.createAndManageYoParent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}
.frameParent {
    width: 100%;
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #cecece;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 30px;
    text-align: left;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './Frame.module.css';

const Frame:FunctionComponent = () => {
  	return (

Available Pensions

NEST Corporation

NOW: Pensions

The People’s Pension - 2-Weekly

The People’s Pension - 4-Weekly

+Add your own pension

);
};

export default Frame;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React from 'react';
import PropTypes from 'prop-types';
import Pod from "carbon-react/lib/components/pod";
import Link from "carbon-react/lib/components/link";
import Box from "carbon-react/lib/components/box";
import translations from './i18n';

const App = ({ pensionOptions = [], locale = 'en' }) => {
  const t = translations[locale] || translations.en;
  const standardPensions = pensionOptions.filter(option =>
    option !== "+Add your own pension");

  const handlePensionClick = (pensionName) => {
    alert(`You clicked on: ${pensionName}`);
  };

  const handleAddPensionClick = () => {
    alert(`You clicked: ${t.addYourOwn}`);
  };

  return (
    <Box p="20px">
      <Pod
        title={ t.availablePensions }
        aria-label={ t.availablePensions }
        p="30px"
        borderRadius="8px"
        width="200px"
      >
        <Box display="flex" flexDirection="column" alignItems="flex-start" gap={5}>
          <Box display="flex" flexDirection="column" alignItems="flex-start" gap={2}>
            {
              standardPensions.map((pension, index) => (
              <Link
                href="#"
                key={ index }
                data-role="pension-option"
                color="#007e45"
                onClick={(e) => {
                  e.preventDefault();
                  handlePensionClick(pension);
                }}
              >
                { pension }
              </Link>
            ))}

            <Link
              href="#"
              data-role="add-pension-option"
              color="#007e45"
              icon="add"
              onClick={(e) => {
                e.preventDefault();
                handleAddPensionClick();
              }}
            >
              { t.addYourOwn }
            </Link>
          </Box>
        </Box>
      </Pod>
    </Box>
  );
};

App.propTypes = {
  pensionOptions: PropTypes.arrayOf(PropTypes.string),
  locale: PropTypes.string
};

export default App;

const translations = {
  en: {
    availablePensions: "Available Pensions",
    addYourOwn: "Add your own pension"
  }
};

export default translations;

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const pensionOptions = [
  'NEST Corporation',
  'NOW: Pensions',
  'The People\'s Pension',
  '+Add your own pension'
];

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App pensionOptions={ pensionOptions } locale="en" />
  </CarbonProvider>
);


@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

.hmrcRealTime {
    align-self: stretch;
    position: relative;
    font-size: 18px;
    line-height: 150%;
    font-weight: 500;
}
.exclamationCircleIcon {
    width: 24px;
    position: relative;
    height: 24px;
    object-fit: cover;
}
.iconArea {
    align-self: stretch;
    width: 48px;
    border-radius: 10px 0px 0px 10px;
    background-color: #c7384f;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 12px;
    box-sizing: border-box;
}
.fpsSubmissionFailed {
    align-self: stretch;
    position: relative;
    line-height: 24px;
}
.fpsSubmissionFailedParent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.textHere {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.button {
    border-radius: 20px;
    border: 2px solid #007e45;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px 24px;
}
.buttonWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.caretLargeDown {
    width: 16px;
    position: relative;
    height: 16px;
}
.button1 {
    border-radius: 20px;
    border: 2px solid #007e45;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 16px;
    gap: 10px;
}
.buttonContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.frameParent {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    text-align: center;
    font-size: 14px;
    color: #007e45;
    font-family: 'Sage UI';
}
.messageContent {
    align-self: stretch;
    flex: 1;
    border-radius: 10px 0px 10px 10px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
}
.messages {
    align-self: stretch;
    border-radius: 10px;
    background-color: #fff;
    border: 2px solid #c7384f;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    font-family: Lato;
}
.hmrcChild {
    align-self: stretch;
    position: relative;
    border-top: 1px solid #ced6da;
    box-sizing: border-box;
    height: 1px;
}
.document {
    width: 16px;
    position: relative;
    height: 16px;
    display: none;
}
.month5August {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.infoCircleIcon {
    width: 16px;
    position: relative;
    height: 16px;
    object-fit: cover;
}
.messageTag {
    align-self: stretch;
    background-color: #0073c1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
}
.epsPaymentDue {
    align-self: stretch;
    position: relative;
    line-height: 20px;
}
.messageText1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: right;
}
.contentBox {
    align-self: stretch;
    flex: 1;
    background-color: #fff;
    border: 2px solid #0073c1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 24px;
    gap: 16px;
}
.standard {
    align-self: stretch;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.message {
    align-self: stretch;
    background-color: #f2f5f6;
    height: 73px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
    font-family: Lato;
}
.p32EmployerPayment {
    width: 778px;
    position: relative;
    line-height: 150%;
    font-weight: 500;
    color: #007e45;
    display: none;
}
.hmrc {
    width: 100%;
    position: relative;
    background-color: #fff;
    border: 1px solid #ced6da;
    box-sizing: border-box;
    height: 397px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px 31px 48px;
    gap: 17px;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './HMRC.module.css';

const HMRC:FunctionComponent = () => {
  	return (

HMRC Real Time Information (RTI) Scheme

            						FPS submission failed

Failure to submit on time may lead to penalties

Resolve

Actions

Month 5 (August 2023)

              							EPS payment due in 32 days

Pay runs not completed

P32 Employer Payment Record

);
};

export default HMRC;

import React from 'react';
import Typography from 'carbon-react/lib/components/typography';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import MultiActionButton from 'carbon-react/lib/components/multi-action-button';
import Pod from 'carbon-react/lib/components/pod';
import Message from 'carbon-react/lib/components/message';
import PropTypes from 'prop-types';
import { GridContainer, GridItem } from "carbon-react/lib/components/grid";
import { translate } from './i18n';

const App = ({
  locale='en',
  monthNumber=5,
  monthName='August',
  year=2023,
  daysRemaining=32
}) => {
  const t = (key, options = {}) => translate(key, options, locale);

  const handleResolve = () => {
    alert('Resolve button clicked');
  };

  const handleAction = (action) => {
    alert(`Action clicked: ${action}`);
  };

  return (
    <Pod title={ t('title') } width="500px">
      <Message
        variant="error"
        border={ 2 }
        aria-label={ t('fps.aria.warning') }
        mb={ 2 }
      >
        <Box
          display="flex"
          width="100%"
          justifyContent="space-between"
          alignItems="flex-start"
        >
          <Box display="flex" flexDirection="column">
            <Typography variant="strong">
              { t('fps.title') }
            </Typography>
            <Typography variant="p">
              { t('fps.description') }
            </Typography>
          </Box>

          <Box
            display="flex"
            flexDirection="column"
            gap={ 1 } width="315px"
            alignItems="flex-end"
          >
            <Button
              buttonType="secondary"
              onClick={ handleResolve }
              aria-label={ t('fps.aria.resolve') }
              size="small"
            >
              { t('fps.resolve') }
            </Button>

            <MultiActionButton
              text={ t('fps.actions') }
              buttonType="secondary"
              aria-label={ t('fps.aria.actions') }
              size="small"
            >
              <Button onClick={ () => handleAction(t('fps.actionButtons.viewDetails')) }>
                { t('fps.actionButtons.viewDetails') }
              </Button>
              <Button onClick={ () => handleAction(t('fps.actionButtons.downloadReport')) }>
                { t('fps.actionButtons.downloadReport') }
              </Button>
              <Button onClick={() => handleAction(t('fps.actionButtons.contactHmrc'))}>
                { t('fps.actionButtons.contactHmrc') }
              </Button>
            </MultiActionButton>
          </Box>
        </Box>
      </Message>

      <div
        style={{
          borderTop: "1px solid #CED6DA",
          height: "1px",
          width: "100%",
          margin: "8px auto"
        }}
    />
      <Typography
        variant="h4"
        fontWeight="500"
        mb={ 2 }
        mt={ 2 }
      >
        { t('month', { monthNumber, monthName, year }) }
      </Typography>

      <Message
        variant="info"
        aria-label={ t('eps.aria.info') }
        pr="0px"
      >
        <GridContainer p="0px">
          <GridItem gridColumn="1 / 5" alignSelf="center">
            <Typography variant="strong">
              { t('eps.title', { daysRemaining }) }
            </Typography>
          </GridItem>
          <GridItem
            gridColumn="5 / 13"
            justifySelf="end"
            alignSelf="center"
            pt="15px"
          >
            <Typography variant="p" mr="-8px">
              { t('eps.description') }
            </Typography>
          </GridItem>
        </GridContainer>
      </Message>
    </Pod>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  monthNumber: PropTypes.number,
  monthName: PropTypes.string,
  year: PropTypes.number,
  daysRemaining: PropTypes.number
};

export default App;

import I18n from 'i18n-js';

// Set up translations with interpolation placeholders
const translations = {
  en: {
    title: 'HMRC Real Time Information (RTI) Scheme',
    fps: {
      title: 'FPS submission failed',
      description: 'Failure to submit on time may lead to penalties',
      resolve: 'Resolve',
      actions: 'Actions',
      aria: {
        warning: 'Warning message about failed submission',
        resolve: 'Resolve FPS submission failure',
        actions: 'Additional actions for FPS submission'
      },
      actionButtons: {
        viewDetails: 'View details',
        downloadReport: 'Download report',
        contactHmrc: 'Contact HMRC'
      }
    },
    month: 'Month %{monthNumber} (%{monthName} %{year})',
    eps: {
      title: 'EPS payment due in %{daysRemaining} days',
      description: 'Pay runs not completed',
      aria: {
        info: 'Information about EPS payment'
      }
    },
    p32: 'P32 Employer Payment Record'
  }
};

I18n.translations = translations;
I18n.defaultLocale = 'en';

const translate = (key, options = {}, locale = 'en') => {
  return I18n.t(key, { locale, ...options });
};

export { translations, translate };

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import Box from 'carbon-react/lib/components/box';

import App from "./app";

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <Box width='700px' m={ 2 }>
      <App
        locale="en"
        monthNumber={ 5 }
        monthName="August"
        year="2023"
        daysRemaining={ 32 }
      />
    </Box>
  </CarbonProvider>
);


@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

.autoEnrolment {
    align-self: stretch;
    position: relative;
    font-size: 16px;
}
.tickCircleIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.messageHeadingOptional {
    position: relative;
    line-height: 150%;
}
.contentWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.messageContextual {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.mainButton {
    border-radius: 32px 0px 0px 32px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 16px 6px;
    min-height: 32px;
}
.menuTriggerButton {
    position: absolute;
    height: 100%;
    top: 32px;
    bottom: -32px;
    left: 0px;
    border-radius: 0px 32px 32px 0px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    width: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.menuTrigger {
    width: 32px;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    height: 32px;
    margin-left: -2px;
}
.triggerBase {
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.splitButtonMajor {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    color: #007e45;
}
.messageContextualParent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    color: #00821f;
}
.rtiChild {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 1.1px;
    flex-shrink: 0;
}
.week40 {
    align-self: stretch;
    position: relative;
    font-size: 13px;
    line-height: 21px;
    display: inline-block;
    height: 22.5px;
    flex-shrink: 0;
}
.messageWithNo {
    position: relative;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.9);
}
.rti {
    width: 100%;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 26px 30px;
    gap: 18px;
    text-align: left;
    font-size: 14px;
    color: #3c424f;
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './RTI.module.css';

const RTI:FunctionComponent = () => {
  	return (

      			HMRC Real Time Information (RTI) Scheme

            						FPS submission successfully sent

Actions

      			Month 12 (December 2023)

            						FPS adjustment submission successfully sent

P32 reporting period closed: 01 February 2023 at 01:32 PM

Actions

);
};

export default RTI;

import React from 'react';
import PropTypes from 'prop-types';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import sageTheme from "carbon-react/lib/style/themes/sage";
import Box from 'carbon-react/lib/components/box';
import Typography from 'carbon-react/lib/components/typography';
import Pod from "carbon-react/lib/components/pod";
import SplitButton from "carbon-react/lib/components/split-button";
import Button from "carbon-react/lib/components/button";
import Icon from "carbon-react/lib/components/icon";
import './i18n';
import I18n from 'i18n-js';

const App = ({ locale = 'en', fieldValues }) => {
  I18n.locale = locale;

  const handleActionButtonClick = () => {
    alert('Action button clicked');
  };

  const handleChildButtonClick = () => {
    alert('Child button clicked');
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Box
        p="30px"
        width={ 800 }
        ml={ 500 }
      >
        <Pod title={ I18n.t('rtiTitle') }>
          <Box>
            <Box
              display="flex"
              flexDirection="row"
              alignItems="center"
              justifyContent="space-between"
            >
              <Box
                display="flex"
                flexDirection="row"
                gap="8px"
              >
                <Icon type="tick_circle" color="#007e45"/>
                <Typography
                  variant="b"
                  color="#007e45"
                >
                  { I18n.t('fpsSubmissionSuccess') }
                </Typography>
              </Box>
              <SplitButton
                text={ I18n.t('actions') }
                size="medium"
                buttonType="secondary"
                iconPosition="right"
                aria-label="Actions Button"
                onClick={ handleActionButtonClick }
              >
                <Button onClick={ handleChildButtonClick }>{ I18n.t('dummyChild') }</Button>
              </SplitButton>
            </Box>
            <Box mb={ 2 }/>
            <div
              style={{
                border: '1px solid #e0e0e0',
                borderRadius: "8px"
              }}
            />
            <Box mt={ 2 }/>
            <Typography variant="b">
              { I18n.t('month12', { monthNumber: fieldValues.monthNumber, monthYear: fieldValues.monthYear }) }
            </Typography>
            <Box
              display="flex"
              flexDirection="row"
              alignItems="center"
              justifyContent="space-between"
            >
              <Box
                display="flex"
                flexDirection="row"
                alignItems="flex-start"
                gap="8px"
                mt={ 2 }
              >
                <Icon type="tick_circle" color="#007e45"/>
                <Box
                  display="flex"
                  flexDirection="column"
                  alignItems="flex-start"
                >
                  <Typography
                    variant="b"
                    color="#007e45"
                  >
                    { I18n.t('fpsAdjustmentSuccess') }
                  </Typography>
                  <Typography>
                    { I18n.t('p32ReportingPeriodClosed', { periodCloseDate: fieldValues.periodCloseDate, periodCloseTime: fieldValues.periodCloseTime }) }
                  </Typography>
                </Box>
              </Box>
              <Box
                display="flex"
                flexDirection="column"
              >
                <SplitButton
                  text={ I18n.t('actions') }
                  size="medium"
                  buttonType="secondary"
                  iconPosition="right"
                  aria-label="Actions Button"
                  onClick={ handleActionButtonClick }
                >
                  <Button onClick={ handleChildButtonClick }>{ I18n.t('dummyChild') }</Button>
                </SplitButton>
              </Box>
            </Box>
          </Box>
        </Pod>
      </Box>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  fieldValues: PropTypes.shape({
    monthNumber: PropTypes.string.isRequired,
    monthYear: PropTypes.string.isRequired,
    periodCloseDate: PropTypes.string.isRequired,
    periodCloseTime: PropTypes.string.isRequired,
  }).isRequired,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    rtiTitle: "HMRC Real Time Information (RTI) Scheme",
    fpsSubmissionSuccess: "FPS submission successfully sent",
    actions: "Actions",
    month12: "Month %{monthNumber} (%{monthYear})",
    fpsAdjustmentSuccess: "FPS adjustment submission successfully sent",
    p32ReportingPeriodClosed: "P32 reporting period closed: %{periodCloseDate} at %{periodCloseTime}",
    dummyChild: "Dummy Actions Child"
  }
};

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const fieldValues = {
  monthNumber: "12",
  monthYear: "December 2023",
  periodCloseDate: "01 February 2023",
  periodCloseTime: "01:32 PM"
};

ReactDOM.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App fieldValues={ fieldValues }/>
  </CarbonProvider>,
  document.getElementById("app")
);


@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
body {
  	margin: 0; line-height: normal;
}

.title {
	flex: 1;
	position: relative;
	line-height: 125%;
}
.header {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 0px 8px 0px 0px;
	z-index: 0;
}
.closeIcon {
	width: 20px;
	position: relative;
	height: 20px;
}
.icon {
	width: 32px;
	border-radius: 4px;
	height: 32px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.dividerOnLight {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	right: 0px;
	bottom: 0px;
	left: 0px;
	max-width: 100%;
	overflow: hidden;
	height: 1px;
	z-index: 2;
}
.headerdialogOnly {
	align-self: stretch;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 24px 24px 20px;
	position: relative;
	gap: 16px;
	font-size: 24px;
}
.iconAlertnegative {
	align-self: stretch;
	width: 32px;
	background-color: #cb374a;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 8px;
	box-sizing: border-box;
}
.messageHeadingOptional {
	align-self: stretch;
	position: relative;
	line-height: 150%;
}
.link1 {
	position: relative;
	text-decoration: underline;
	line-height: 150%;
	z-index: 0;
}
.link {
	border-radius: 4px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.messageWithLink {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	color: #cb374a;
}
.contentWrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.contentArea {
	flex: 1;
	border-radius: 0px 8px 8px 0px;
	background-color: #fff;
	border: 1px solid #cb374a;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 16px 16px 16px 24px;
}
.messageContextual {
	align-self: stretch;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0);
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.mandatoryLabel {
	align-self: stretch;
	position: relative;
	line-height: 21px;
}
.labelSet {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-family: Lato;
}
.mandatoryLabel1 {
	align-self: stretch;
	position: relative;
	line-height: 150%;
	font-weight: 500;
}
.validationBar {
	position: absolute;
	height: 100%;
	top: 0px;
	bottom: 0px;
	left: calc(50% - 1px);
	background-color: #cb374a;
	width: 2px;
}
.validationBarerror {
	width: 2px;
	position: absolute;
	margin: 0 !important;
	height: 100%;
	top: 0px;
	bottom: 0px;
	left: -12px;
	z-index: 0;
}
.errorText {
	flex: 1;
	position: relative;
	line-height: 150%;
	font-weight: 500;
}
.validationText {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0px 0px 8px;
	z-index: 1;
}
.inputtext {
	flex: 1;
	position: relative;
	line-height: 150%;
	display: inline-block;
	height: 21px;
}
.inputTextContainer {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0px 12px;
	gap: 12px;
}
.inputContainer {
	align-self: stretch;
	border-radius: 4px;
	background-color: #fff;
	border: 2px solid #cb374a;
	box-sizing: border-box;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	z-index: 2;
	color: rgba(0, 0, 0, 0.9);
}
.validationWrapper {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
}
.wrapper2 {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	color: #cb374a;
}
.dropdownSelectStandard {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}
.fields {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.swappableContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}
.assetsschevronLeftOnLight {
	width: 32px;
	border-radius: 4px;
	height: 32px;
	display: none;
}
.wrapper1 {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 24px;
	gap: 16px;
}
.scroll {
	width: 6px;
	flex: 1;
	border-radius: 50px;
	background-color: #b3c2c9;
}
.scroll1 {
	width: 6px;
	flex: 1;
	border-radius: 50px;
}
.unionIcon {
	width: 4.7px;
	position: relative;
	height: 4.7px;
}
.handle {
	width: 6px;
	border-radius: 50px;
	height: 6px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.fill {
	align-self: stretch;
	flex: 1;
	background-color: #f2f5f6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 1px 0px;
}
.scrollbarOnLight {
	align-self: stretch;
	width: 12px;
	background-color: rgba(0, 0, 0, 0);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	padding: 2px;
	box-sizing: border-box;
}
.swappableContentdefault {
	align-self: stretch;
	background-color: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
}
.div {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
	background-color: #fff;
}
.shadow {
	width: 100%;
	position: absolute;
	margin: 0 !important;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: #fff;
	height: 72px;
	z-index: 0;
}
.label {
	position: relative;
	line-height: 150%;
	font-weight: 500;
}
.majorButton {
	border-radius: 32px;
	border: 2px solid rgba(0, 0, 0, 0);
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0px 24px;
	min-height: 40px;
	z-index: 1;
}
.majorButton1 {
	border-radius: 32px;
	background-color: #007e45;
	border: 2px solid rgba(0, 0, 0, 0);
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0px 24px;
	min-height: 40px;
	z-index: 2;
	color: #fff;
}
.footerHorizontaldefault {
	align-self: stretch;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 16px 24px;
	position: relative;
	gap: 16px;
	color: #007e45;
}
.updateAccountNameMismatch {
	width: 100%;
	position: relative;
	box-shadow: 0px 10px 30px rgba(0, 20, 30, 0.1), 0px 30px 60px rgba(0, 20, 30, 0.1);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 288px;
	max-width: 750px;
	text-align: left;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './UpdateAccountNameMismatch.module.css';

const UpdateAccountNameMismatch:FunctionComponent = () => {
  	return (

            						Change payment method

                  									There is a problem

Select a payment method

Change the payment method for 8 employees.

Payment method

Select a payment method

Select a payment method

Cancel

{`Save `}

);
};

export default UpdateAccountNameMismatch;

import React, { useCallback, useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import Dialog from "carbon-react/lib/components/dialog";
import Form from "carbon-react/lib/components/form";
import Box from "carbon-react/lib/components/box";
import Typography from "carbon-react/lib/components/typography";
import Button from "carbon-react/lib/components/button";
import Message from "carbon-react/lib/components/message";
import { Select, Option } from "carbon-react/lib/components/select";
import Link from "carbon-react/lib/components/link";
import sageTheme from "carbon-react/lib/style/themes/sage";
import "./i18n";
import I18n from "i18n-js";

const App = ({ locale = "en", paymentMethods, employeeCount = 8 }) => {
  const [ isOpen, setIsOpen ] = useState(true);
  const [ selectedPayment, setSelectedPayment ] = useState("");
  const [ validationError, setValidationError ] = useState(false);
  const selectRef = useRef(null);

  const handlePaymentMethodErrorLinkClick = () => {
    if (selectRef.current) {
      selectRef.current.focus();
    }
  };

  useEffect(() => {
    I18n.locale = locale;
  }, [ locale ]);

  const handleSaveButtonClick = useCallback((event) => {
    event.preventDefault();
    if (!selectedPayment) {
      setValidationError(true);
      handlePaymentMethodErrorLinkClick();
    } else {
      alert("Save button clicked with payment method: " + selectedPayment);
    }
  }, [ selectedPayment ]);

  const handleCancelButtonClick = useCallback(() => {
    setIsOpen(false);
  }, []);

  const handlePaymentChange = (event) => {
    setSelectedPayment(event.target.value);
    if (event.target.value) {
      setValidationError(false);
    }
  };

  return (
    <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
      <Dialog
        open={ isOpen }
        onCancel={ handleCancelButtonClick }
        size="medium-small"
        title={ I18n.t("changePaymentMethod") }
      >
        <Form
          stickyFooter
          rightSideButtons={
            <Box display="flex">
              <Button onClick={ handleCancelButtonClick } buttonType="tertiary" mr="10px">
                { I18n.t("cancel") }
              </Button>
              <Button onClick={ handleSaveButtonClick } buttonType="primary" type="submit">
                { I18n.t("save") }
              </Button>
            </Box>
          }
        >
          <Box
            display="flex"
            flexDirection="column"
            gap="7px"
            scrollVariant="light"
          >
            { validationError && (
              <Message
                variant="error"
                title={ I18n.t("problemTitle") }
              >
                <Typography as="p" mt={ 1 }>
                  <Link href="#" onClick={ handlePaymentMethodErrorLinkClick }>
                    { I18n.t("selectPaymentMethodError") }
                  </Link>
                </Typography>
              </Message>
            )}
            <Typography>
              { I18n.t(
                employeeCount === 1 ? "changePaymentMethodForEmployee" : "changePaymentMethodForEmployees",
                { employeeCount }
              ) }
            </Typography>
            <Select
              ref={ selectRef }
              name="paymentMethod"
              id="paymentMethod"
              label={ I18n.t("paymentMethod") }
              placeholder={ I18n.t("selectPaymentMethod") }
              onChange={ handlePaymentChange }
              error={ validationError ? I18n.t("selectPaymentMethodError") : "" }
            >
              { paymentMethods.map(method => (
                <Option key={ method.id } text={ method.text } value={ method.value } />
              )) }
            </Select>
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  paymentMethods: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  })).isRequired,
  employeeCount: PropTypes.number,
};

export default App;

import I18n from 'i18n-js';

I18n.translations = {
  en: {
    changePaymentMethod: "Change payment method",
    problemTitle: "There is a problem",
    changePaymentMethodForEmployees: "Change the payment method for %{employeeCount} employees.",
    changePaymentMethodForEmployee: "Change the payment method for 1 employee.",
    selectPaymentMethod: "Select a payment method",
    selectPaymentMethodError: "Select a payment method",
    paymentMethod: "Payment method",
    cancel: "Cancel",
    save: "Save",
  },
};

I18n.locale = 'en';
I18n.fallbacks = true;

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import App from "./app";

const paymentMethods = [
  { id: '1', value: 'credit_card', text: 'Credit Card' },
  { id: '2', value: 'debit_card', text: 'Debit Card' },
  { id: '3', value: 'paypal', text: 'PayPal' }
];

const employeeCount = 8;

ReactDOM.render(
  <CarbonProvider validationRedesignOptIn theme={ sageTheme }>
    <GlobalStyle />
    <App
      paymentMethods={ paymentMethods }
      employeeCount={ employeeCount }
    />
  </CarbonProvider>,
  document.getElementById('app')
);


.documents {
    position: absolute;
    top: 0%;
    left: 0%;
    line-height: 125%;
}
.h1 {
    width: 132px;
    position: relative;
    height: 30px;
}
.plusIcon {
    width: var(--button-size-icon-M);
    position: relative;
    height: var(--button-size-icon-M);
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.buttonTypical {
    border-radius: var(--button-radius-primary-M);
    background-color: var(--button-color-typical-primary-bg-enabled);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-primary-y-M) var(--button-space-primary-x-M);
    box-sizing: border-box;
    gap: var(--button-space-primary-xg-M);
    min-height: var(--button-size-M);
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.buttonAi {
    border-radius: var(--button-radius-secondary-M);
    border: var(--button-borderwidth-secondary) solid #13a038;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-secondary-x-M);
    gap: var(--button-space-secondary-xg-M);
    min-height: var(--button-size-M);
    cursor: pointer;
    color: var(--button-color-ai-label-enabled);
}
.buttonTypical1 {
    border-radius: var(--button-radius-secondary-M);
    border: var(--button-borderwidth-secondary) solid var(--button-color-typical-secondary-border-enabled);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-secondary-x-M);
    gap: var(--button-space-secondary-xg-M);
    min-height: var(--button-size-M);
    color: var(--button-color-typical-secondary-label-enabled);
}
.buttonTypicalParent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--button-color-typical-primary-label-enabled);
}
.rowenaRavenclaw {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.rowenaRavenclawWrapper {
    position: absolute;
    height: 100%;
    width: 54.14%;
    top: 0%;
    right: 45.68%;
    bottom: 0%;
    left: 0.19%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.h2 {
    width: 266px;
    position: relative;
    height: 28px;
}
.multiActionButton {
    width: 128px;
    height: 40px;
    display: none;
}
.grid {
    position: relative;
    line-height: var(--font-size-xl);
    font-weight: 500;
    font-family: var(--font-sage-ui);
}
.two {
    border-radius: var(--br-9xs) 0px 0px var(--br-9xs);
    border: 2px solid var(--action-major-500);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-base);
    gap: var(--gap-5xs);
}
.two1 {
    border-radius: 0px var(--br-9xs) var(--br-9xs) 0px;
    background-color: var(--action-major-500);
    border: 2px solid var(--action-major-500);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-base);
    gap: var(--gap-5xs);
    color: var(--button-color-typical-primary-label-enabled);
}
.toggleView {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.searchsorttoggle {
    width: 160px;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--action-major-500);
    font-family: var(--font-font-awesome-5-pro);
}
.h2AndSearchsorttoggle {
    width: 1439px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1006px;
    font-size: 22px;
}
.addCategory {
    width: 143px;
    height: 40px;
    display: none;
}
.div {
    position: relative;
    line-height: var(--font-size-xl);
}
.expenses {
    position: relative;
    line-height: var(--font-size-xl);
    font-weight: 500;
}
.files {
    position: relative;
    font-size: var(--font-size-sm);
    line-height: var(--font-size-xl);
}
.expensesParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
    font-size: var(--font-size-lg);
    color: var(--color-black);
    font-family: var(--font-sage-ui);
}
.parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xl);
}
.div1 {
    position: relative;
    line-height: var(--font-size-xl);
    color: var(--action-minor-yin-030);
}
.row {
    width: 1440px;
    border-radius: var(--br-9xs) var(--br-9xs) 0px 0px;
    background-color: var(--button-color-typical-primary-label-enabled);
    border-top: 1px solid var(--utility-major-100);
    border-right: 1px solid var(--utility-major-100);
    border-left: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.row1 {
    width: 1440px;
    background-color: var(--button-color-typical-primary-label-enabled);
    border-top: 1px solid var(--utility-major-100);
    border-right: 1px solid var(--utility-major-100);
    border-left: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.row7 {
    width: 1440px;
    border-radius: 0px 0px var(--br-9xs) var(--br-9xs);
    background-color: var(--button-color-typical-primary-label-enabled);
    border: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
    font-size: var(--font-size-xl);
    color: var(--action-minor-400);
    font-family: var(--font-font-awesome-5-pro);
}
.content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xl);
    text-align: left;
    font-size: 24px;
    color: var(--Black-Black-90-Default-Text);
    font-family: var(--font-sage-ui);
}

import { FunctionComponent, useCallback } from 'react';
import styles from './Content.module.css';

const Content:FunctionComponent = () => {

  	const onButtonAIContainerClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

        				Documents

Upload documents

Draft document

Create signable documents

All categories



Grid



List



Expenses

1,293 files





General

13 files





Onboarding

8 files





Right to Work

42 files





Signable documents

259 files





Time off requests

259 files





Trackable documents

259 files





Training

56 files



);
};

export default Content;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Font+Awesome+5+Pro:wght@400&display=swap');
body {
  	margin: 0; line-height: normal;
}
:root {

  	/* Fonts */
  	--font-sage-ui: 'Sage UI';
  	--font-font-awesome-5-pro: 'Font Awesome 5 Pro';

  	/* font sizes */
  	--font-size-sm: 14px;
  	--font-size-lg: 18px;
  	--font-size-xl: 20px;

  	/* Colors */
  	--color-black: #000;

  	/* Gaps */
  	--gap-0: 0px;
  	--gap-5xs: 8px;
  	--gap-5xl: 24px;

  	/* Paddings */
  	--padding-3xs: 10px;
  	--padding-base: 16px;
  	--padding-5xl: 24px;

  	/* Border radiuses */
  	--br-9xs: 4px;

  	/* Figma Variables */

  	/* Color Variables */
  	--Black-Black-90-Default-Text: rgba(0, 0, 0, 0.9);
  	--action-major-500: #007e45;
  	--action-minor-400: #668494;
  	--action-minor-yin-030: rgba(0, 0, 0, 0.3);
  	--button-color-ai-label-enabled: rgba(0, 0, 0, 0.9);
  	--button-color-typical-primary-bg-enabled: #00811f;
  	--button-color-typical-primary-label-enabled: #fff;
  	--button-color-typical-secondary-border-enabled: rgba(0, 0, 0, 0.9);
  	--button-color-typical-secondary-label-enabled: rgba(0, 0, 0, 0.9);
  	--utility-major-100: #ccd6db;

  	/* Number Variables */
  	--button-borderwidth-secondary: 2px;
  	--button-space-primary-xg-M: 8px;
  	--button-space-primary-y-M: 8px;
  	--button-space-secondary-xg-M: 8px;
  	--button-space-secondary-y-M: 8px;
  	--button-space-primary-x-M: 16px;
  	--global-fontSize-adaptive-step0: 16px;
  	--button-space-secondary-x-M: 16px;
  	--button-radius-primary-M: 20px;
  	--button-size-icon-M: 20px;
  	--button-radius-secondary-M: 20px;
  	--button-size-M: 40px;

}

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import IconButton from 'carbon-react/lib/components/button';
import Typography from 'carbon-react/lib/components/typography';
import Image from 'carbon-react/lib/components/image';
import Icon from 'carbon-react/lib/components/icon';
import { TileSelect, TileSelectGroup } from 'carbon-react/lib/components/tile-select';
import translations from './i18n';

const App = ({ categories = [], locale = 'en' }) => {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const i18n = translations[locale] || translations.en;

  const onButtonAIContainerClick = useCallback(() => {
    alert(i18n.buttonClicked.replace('{action}', i18n.draftDocument));
  }, [i18n]);

  const handleButtonClick = useCallback((action) => {
    alert(i18n.buttonClicked.replace('{action}', action));
  }, [i18n]);

  const handleCategorySelect = useCallback((category) => {
    setSelectedCategory(category);
    alert(i18n.categorySelected.replace('{name}', category));
  }, [i18n]);

  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="stretch"
      gap={ 2 }
      p={ 1 }
    >
      <Typography variant="h1" fontWeight="bold">
        { i18n.documents }
      </Typography>

      <Box
        display="flex"
        flexDirection="row"
        gap={ 2 }
        alignItems="center"
        width="100%"
      >
        <Button
          buttonType="primary"
          iconType="plus"
          onClick={ () => handleButtonClick(i18n.uploadDocuments) }
        >
          { i18n.uploadDocuments }
        </Button>

        <Button
          buttonType="gradient-grey"
          onClick={ onButtonAIContainerClick }
          data-role="ai-button"
        >
          <Image
            alt=""
            decorative
            src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
            width="20px"
            height="20px"
            marginRight="8px"
          />
          { i18n.draftDocument }
        </Button>

        <Button
          buttonType="secondary"
          iconType="plus"
          onClick={ () => handleButtonClick(i18n.createSignableDocuments) }
        >
          { i18n.createSignableDocuments }
        </Button>
      </Box>

      <TileSelectGroup
        name="document-categories"
        legend= {i18n.allCategories }
        legendHidden
        value={ selectedCategory }
        onChange={ (e) => handleCategorySelect(e.target.value) }
        aria-label="Document categories"
      >
        {
          categories.map((category, index) => (
          <TileSelect
            key={ index }
            value={ category.name }
            id={ `category-${index}` }
            aria-label={ `${category.name} - ${category.fileCount} ${i18n.files}` }
            title={ category.name }
            description={ `${category.fileCount} ${i18n.files}` }
            prefixAdornment={ <Icon color="#668494" type="folder" fontSize="large" /> }
            customActionButton={() => (
              <IconButton
                buttonType="tertiary"
                iconType="chevron_right"
                aria-label={ i18n.openCategory.replace('{name}', category.name) }
                onClick={ () => handleCategorySelect(category.name) }
              />
            )}
            data-role="document-category"
          />
        ))}
      </TileSelectGroup>
    </Box>
  );
};

App.propTypes = {
  categories: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      fileCount: PropTypes.number.isRequired
    })
  ),
  locale: PropTypes.string
};

export default App;

export default {
  en: {
    documents: 'Documents',
    uploadDocuments: 'Upload documents',
    draftDocument: 'Draft document',
    createSignableDocuments: 'Create signable documents',
    allCategories: 'All categories',
    files: 'files',
    grid: 'Grid',
    list: 'List',
    buttonClicked: '{action} button clicked',
    categorySelected: 'Category: {name} selected',
    openCategory: 'Open {name} category'
  }
};

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import Box from 'carbon-react/lib/components/box';

import App from "./app";

const container = document.getElementById("app");
const root = createRoot(container);

const documentCategories = [
  { name: 'Expenses', fileCount: 1293 },
  { name: 'General', fileCount: 13 },
  { name: 'Onboarding', fileCount: 8 },
  { name: 'Right to Work', fileCount: 42 },
  { name: 'Signable documents', fileCount: 259 },
  { name: 'Time off requests', fileCount: 259 },
  { name: 'Trackable documents', fileCount: 259 },
  { name: 'Training', fileCount: 56 }
];

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <Box overflow="auto" p={1}>
      <App categories={ documentCategories } locale="en" />
    </Box>
  </CarbonProvider>
);


.documents {
    position: absolute;
    top: 0%;
    left: 0%;
    line-height: 125%;
}
.h1 {
    width: 132px;
    position: relative;
    height: 30px;
}
.plusIcon {
    width: var(--button-size-icon-M);
    position: relative;
    height: var(--button-size-icon-M);
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.buttonTypical {
    border-radius: var(--button-radius-primary-M);
    background-color: var(--button-color-typical-primary-bg-enabled);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-primary-y-M) var(--button-space-primary-x-M);
    box-sizing: border-box;
    gap: var(--button-space-primary-xg-M);
    min-height: var(--button-size-M);
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.buttonAi {
    border-radius: var(--button-radius-secondary-M);
    border: var(--button-borderwidth-secondary) solid #13a038;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-secondary-x-M);
    gap: var(--button-space-secondary-xg-M);
    min-height: var(--button-size-M);
    color: var(--button-color-ai-label-enabled);
}
.buttonTypical1 {
    border-radius: var(--button-radius-secondary-M);
    border: var(--button-borderwidth-secondary) solid var(--button-color-typical-secondary-border-enabled);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-secondary-x-M);
    gap: var(--button-space-secondary-xg-M);
    min-height: var(--button-size-M);
    color: var(--button-color-typical-secondary-label-enabled);
}
.buttonTypicalParent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--button-color-typical-primary-label-enabled);
}
.rowenaRavenclaw {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.rowenaRavenclawWrapper {
    position: absolute;
    height: 100%;
    width: 54.14%;
    top: 0%;
    right: 45.68%;
    bottom: 0%;
    left: 0.19%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.h2 {
    width: 266px;
    position: relative;
    height: 28px;
}
.multiActionButton {
    width: 128px;
    height: 40px;
    display: none;
}
.grid {
    position: relative;
    line-height: var(--font-size-xl);
    font-weight: 500;
    font-family: var(--font-sage-ui);
}
.two {
    border-radius: var(--br-9xs) 0px 0px var(--br-9xs);
    border: 2px solid var(--action-major-500);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-base);
    gap: var(--gap-5xs);
}
.two1 {
    border-radius: 0px var(--br-9xs) var(--br-9xs) 0px;
    background-color: var(--action-major-500);
    border: 2px solid var(--action-major-500);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-base);
    gap: var(--gap-5xs);
    color: var(--button-color-typical-primary-label-enabled);
}
.toggleView {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.searchsorttoggle {
    width: 160px;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--action-major-500);
    font-family: var(--font-font-awesome-5-pro);
}
.h2AndSearchsorttoggle {
    width: 1439px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1006px;
    font-size: 22px;
}
.addCategory {
    width: 143px;
    height: 40px;
    display: none;
}
.div {
    position: relative;
    line-height: var(--font-size-xl);
}
.expenses {
    position: relative;
    line-height: var(--font-size-xl);
    font-weight: 500;
}
.expensesWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: var(--font-size-lg);
    color: var(--color-black);
    font-family: var(--font-sage-ui);
}
.parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xl);
}
.div1 {
    position: relative;
    line-height: var(--font-size-xl);
    color: var(--action-minor-yin-030);
}
.row {
    width: 1440px;
    border-radius: var(--br-9xs) var(--br-9xs) 0px 0px;
    background-color: var(--button-color-typical-primary-label-enabled);
    border-top: 1px solid var(--utility-major-100);
    border-right: 1px solid var(--utility-major-100);
    border-left: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.row1 {
    width: 1440px;
    background-color: var(--button-color-typical-primary-label-enabled);
    border-top: 1px solid var(--utility-major-100);
    border-right: 1px solid var(--utility-major-100);
    border-left: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.row7 {
    width: 1440px;
    border-radius: 0px 0px var(--br-9xs) var(--br-9xs);
    background-color: var(--button-color-typical-primary-label-enabled);
    border: 1px solid var(--utility-major-100);
    box-sizing: border-box;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-0);
}
.list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
    font-size: var(--font-size-xl);
    color: var(--action-minor-400);
    font-family: var(--font-font-awesome-5-pro);
}
.content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xl);
    text-align: left;
    font-size: 24px;
    color: var(--Black-Black-90-Default-Text);
    font-family: var(--font-sage-ui);
}
.toastText {
    flex: 1;
    position: relative;
    line-height: 150%;
    }
.textContainer {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 1px;
    }
.closeIcon {
    width: 20px;
}

import { FunctionComponent } from 'react';
import styles from './Content.module.css';

const Content:FunctionComponent = () => {
  	return (

Document added

        				Documents

Upload documents

Create document

Create signable documents

All categories



Grid



List



Expenses





General





Onboarding





Right to Work





Signable documents





Time off requests





Trackable documents





Training



);
};

export default Content;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Font+Awesome+5+Pro:wght@400&display=swap');
body {
  	margin: 0; line-height: normal;
}
:root {

  	/* Fonts */
  	--font-sage-ui: 'Sage UI';
  	--font-font-awesome-5-pro: 'Font Awesome 5 Pro';

  	/* font sizes */
  	--font-size-sm: 14px;
  	--font-size-lg: 18px;
  	--font-size-xl: 20px;

  	/* Colors */
  	--color-black: #000;

  	/* Gaps */
  	--gap-0: 0px;
  	--gap-5xs: 8px;
  	--gap-5xl: 24px;

  	/* Paddings */
  	--padding-3xs: 10px;
  	--padding-base: 16px;
  	--padding-5xl: 24px;

  	/* Border radiuses */
  	--br-9xs: 4px;
	--br-5xs: 8px;

  	/* Figma Variables */

  	/* Color Variables */
  	--Black-Black-90-Default-Text: rgba(0, 0, 0, 0.9);
  	--action-major-500: #007e45;
  	--action-minor-400: #668494;
  	--action-minor-yin-030: rgba(0, 0, 0, 0.3);
  	--button-color-ai-label-enabled: rgba(0, 0, 0, 0.9);
  	--button-color-typical-primary-bg-enabled: #00811f;
  	--button-color-typical-primary-label-enabled: #fff;
  	--button-color-typical-secondary-border-enabled: rgba(0, 0, 0, 0.9);
  	--button-color-typical-secondary-label-enabled: rgba(0, 0, 0, 0.9);
  	--utility-major-100: #ccd6db;

  	/* Number Variables */
  	--button-borderwidth-secondary: 2px;
  	--button-space-primary-xg-M: 8px;
  	--button-space-primary-y-M: 8px;
  	--button-space-secondary-xg-M: 8px;
  	--button-space-secondary-y-M: 8px;
  	--button-space-primary-x-M: 16px;
  	--global-fontSize-adaptive-step0: 16px;
  	--button-space-secondary-x-M: 16px;
  	--button-radius-primary-M: 20px;
  	--button-size-icon-M: 20px;
  	--button-radius-secondary-M: 20px;
  	--button-size-M: 40px;

}

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import IconButton from 'carbon-react/lib/components/button';
import Typography from 'carbon-react/lib/components/typography';
import Image from 'carbon-react/lib/components/image';
import Icon from 'carbon-react/lib/components/icon';
import Toast from 'carbon-react/lib/components/toast';
import { TileSelect, TileSelectGroup } from 'carbon-react/lib/components/tile-select';
import translations from './i18n';

const App = ({ categories = [], locale = 'en' }) => {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [toastOpen, setToastOpen] = useState(false);
  const i18n = translations[locale] || translations.en;

  const onButtonAIContainerClick = useCallback(() => {
    alert(i18n.buttonClicked.replace('{action}', i18n.draftDocument));
  }, [i18n]);

  const handleButtonClick = useCallback((action) => {
    // Show toast if upload documents button clicked
    if (action === i18n.uploadDocuments) {
      setToastOpen(true);
    } else {
      alert(i18n.buttonClicked.replace('{action}', action));
    }
  }, [i18n]);

  const handleCategorySelect = useCallback((category) => {
    setSelectedCategory(category);
    alert(i18n.categorySelected.replace('{name}', category));
  }, [i18n]);

  const handleDismissToast = useCallback(() => {
    setToastOpen(false);
  }, []);

  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="stretch"
      gap={ 2 }
      p={ 1 }
    >
      <Typography variant="h1" fontWeight="bold">
        { i18n.documents }
      </Typography>

      <Box position="relative" width="100%">
        <Toast
          id="document-added-toast"
          variant="success"
          open={ toastOpen }
          onDismiss={handleDismissToast}
          align="center"
          alignY="top"
          timeout={ 5000 }
          data-role="success-toast"
          aria-label={i18n.documentAdded}
          width="675px"
          maxWidth="675px"
        >
          <Box pr={ 10 } textAlign="left" width="100%">
            {i18n.documentAdded}
          </Box>
        </Toast>
      </Box>

      <Box
        display="flex"
        flexDirection="row"
        gap={ 2 }
        alignItems="center"
        width="100%"
      >
        <Button
          buttonType="primary"
          iconType="plus"
          onClick={ () => handleButtonClick(i18n.uploadDocuments) }
        >
          { i18n.uploadDocuments }
        </Button>

        <Button
          buttonType="gradient-grey"
          onClick={ onButtonAIContainerClick }
          data-role="ai-button"
        >
          <Image
            alt=""
            decorative
            src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
            width="20px"
            height="20px"
            marginRight="8px"
          />
          { i18n.draftDocument }
        </Button>

        <Button
          buttonType="secondary"
          iconType="plus"
          onClick={ () => handleButtonClick(i18n.createSignableDocuments) }
        >
          { i18n.createSignableDocuments }
        </Button>
      </Box>

      <TileSelectGroup
        name="document-categories"
        legend= {i18n.allCategories }
        legendHidden
        value={ selectedCategory }
        onChange={ (e) => handleCategorySelect(e.target.value) }
        aria-label="Document categories"
      >
        {
          categories.map((category, index) => (
          <TileSelect
            key={ index }
            value={ category.name }
            id={ `category-${index}` }
            aria-label={ `${category.name}` }
            title={ category.name }
            prefixAdornment={ <Icon color="#668494" type="folder" fontSize="large" /> }
            customActionButton={() => (
              <IconButton
                buttonType="tertiary"
                iconType="chevron_right"
                aria-label={ i18n.openCategory.replace('{name}', category.name) }
                onClick={ () => handleCategorySelect(category.name) }
              />
            )}
            data-role="document-category"
          />
        ))}
      </TileSelectGroup>
    </Box>
  );
};

App.propTypes = {
  categories: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired
    })
  ),
  locale: PropTypes.string
};

export default App;

export default {
  en: {
    documents: 'Documents',
    uploadDocuments: 'Upload documents',
    draftDocument: 'Create document',
    createSignableDocuments: 'Create signable documents',
    allCategories: 'All categories',
    files: 'files',
    grid: 'Grid',
    list: 'List',
    buttonClicked: '{action} button clicked',
    categorySelected: 'Category: {name} selected',
    openCategory: 'Open {name} category',
    documentAdded: 'Document added'
  }
};

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import Box from 'carbon-react/lib/components/box';

import App from "./app";

const container = document.getElementById("app");
const root = createRoot(container);

const documentCategories = [
  { name: 'Expenses' },
  { name: 'General' },
  { name: 'Onboarding' },
  { name: 'Right to Work' },
  { name: 'Signable documents' },
  { name: 'Time off requests' },
  { name: 'Trackable documents' },
  { name: 'Training' }
];

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <Box overflow="auto" p={1}>
      <App categories={ documentCategories } locale="en" />
    </Box>
  </CarbonProvider>
);


@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500&display=swap');
body {
  	margin: 0; line-height: normal;
}

.aiBorder {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 0px 0px 0px 0px;
    border-top: 6px solid #13a038;
    box-sizing: border-box;
    z-index: 0;
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.aiIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.iconneutral {
    align-self: stretch;
    width: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.heading {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.headingWrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.subheading {
    align-self: stretch;
    position: relative;
    font-size: 19px;
    line-height: 150%;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
}
.headingWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    z-index: 1;
}
.closeButton {
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    min-width: 32px;
    min-height: 32px;
    z-index: 2;
}
.border {
    position: absolute;
    width: calc(100% + 1px);
    top: calc(50% - 0px);
    right: -0.5px;
    left: -0.5px;
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
    height: 1px;
}
.dividerHr {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 1px;
    z-index: 3;
}
.header {
    align-self: stretch;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    position: relative;
    gap: 16px;
    font-size: 25px;
    font-family: 'Sage Text';
}
.ghostContainer {
    width: 0px;
    position: relative;
    height: 0px;
}
.paddingTop {
    position: absolute;
    top: 0px;
    left: 794px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0px 0px;
}
.paddingBottom {
    position: absolute;
    top: 499px;
    left: 794px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 0px 24px;
}
.bennysDiner {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.headerAddTimeoffPolicy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkbox {
    width: 24px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #777;
    box-sizing: border-box;
    height: 24px;
}
.keylineWrapper {
    width: 2px;
    flex: 1;
}
.checkboxWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.iconAndLabelWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkboxSingle {
    width: 712px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.checkboxSingle1 {
    width: 712px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
}
.checkboxSingleParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    color: rgba(0, 0, 0, 0.95);
}
.headerAddTimeoffPolicyParent {
    position: absolute;
    top: 399px;
    left: calc(50% - 400px);
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
}
.headerAddTimeoffPolicyGroup {
    position: absolute;
    top: 229px;
    left: calc(50% - 400px);
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
}
.verticalPaddingLayout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    height: 1024px;
}
.bennysDiner2 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.checkbox4 {
    width: 24px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #777;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.checkboxWrapper4 {
    align-self: stretch;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.checkbox5 {
    width: 24px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #777;
    box-sizing: border-box;
    height: 24px;
}
.headerAddTimeoffPolicyContainer {
    position: absolute;
    top: 56px;
    left: calc(50% - 400px);
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 16px;
}
.modalContentWrapper {
    width: 1600px;
    position: relative;
    background-color: #f2f5f6;
    height: 1024px;
    color: rgba(0, 0, 0, 0.9);
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    box-shadow: 0px -4px 12px rgba(0, 20, 30, 0.05);
    background-color: #fff;
}
.shadow {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    height: 72px;
    z-index: 0;
}
.buttonMajorSingle {
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 24px;
    min-height: 40px;
    z-index: 1;
}
.buttonAi {
    border-radius: 20px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-height: 40px;
    z-index: 2;
    font-size: 16px;
    color: rgba(0, 126, 69, 0.9);
}
.buttonMajorSingle1 {
    border-radius: 32px;
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 24px;
    min-height: 40px;
    z-index: 3;
    color: #fff;
}
.footer {
    width: 1600px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px 24px;
    box-sizing: border-box;
    position: relative;
    gap: 16px;
    color: #007e45;
}
.shareSettings {
    width: 100%;
    position: relative;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1), 10px 10px 60px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    background-color: #fff;
    height: 1215px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 288px;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.95);
    font-family: 'Sage UI';
}

import { FunctionComponent, useCallback } from 'react';
import styles from './ShareSettings.module.css';

const ShareSettings:FunctionComponent = () => {

  	const onCheckboxSingleContainerClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

            						Draft document

Create documents with help from Copilot

Document settings

Require employee to accept document

Send email notification

Give access to:

Direct manager

Team manager

Share document with:

Everyone

Specific employees

Cancel

Back

Save

);
};

export default ShareSettings;

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Form from 'carbon-react/lib/components/form';
import Pod from 'carbon-react/lib/components/pod';
import Button from 'carbon-react/lib/components/button';
import Box from 'carbon-react/lib/components/box';
import { Checkbox, CheckboxGroup } from 'carbon-react/lib/components/checkbox';
import { RadioButton, RadioButtonGroup } from 'carbon-react/lib/components/radio-button';
import Dialog from "carbon-react/lib/components/dialog";
import Image from 'carbon-react/lib/components/image';
import Typography from 'carbon-react/lib/components/typography';
import I18n from 'i18n-js';
import translations from './i18n';

const App = ({
  locale = 'en',
  initialRequireAccept = false,
  initialSendEmail = false,
  initialDirectManager = false,
  initialTeamManager = false,
  initialShareWith = 'everyone',
  open = true,
  onClose
}) => {
  I18n.translations = translations;
  I18n.locale = locale;

  const [requireAccept, setRequireAccept] = useState(initialRequireAccept);
  const [sendEmail, setSendEmail] = useState(initialSendEmail);
  const [directManager, setDirectManager] = useState(initialDirectManager);
  const [teamManager, setTeamManager] = useState(initialTeamManager);
  const [shareWith, setShareWith] = useState(initialShareWith);
  const [isOpen, setIsOpen] = useState(open);

  const handleClose = useCallback(() => {
    setIsOpen(false);
    if (onClose) onClose();
  }, [onClose]);

  const handleBackClick = useCallback(() => {
    alert('Back button clicked');
  }, []);

  const handleSaveClick = useCallback(() => {
    alert('Save button clicked');
  }, []);

  return (
    <Dialog
      open={ isOpen }
      onCancel={ handleClose }
      showCloseIcon
      size="extra-large"
      highlightVariant="ai"
      title={
        <Box mb="8px" mt="16px">
          <Box display="flex" alignItems="top" mb="8px">
            <Image
              alt=""
              decorative
              src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
              width="20px"
              height="20px"
              mt="3px"
              mr="8px"
            />
            <Box ml="2px">
              <Typography variant="h1">{ I18n.t('header.title') }</Typography>
            </Box>
          </Box>
          <Box mb="8px">
            <Typography variant="h3" color="--colorsUtilityYin055">{ I18n.t('header.subtitle') }</Typography>
          </Box>
        </Box>
      }
      aria-label={I18n.t('header.title')}
    >
      <Form
        leftSideButtons={[
          <Button
            key="cancel"
            buttonType="tertiary"
            onClick={ handleClose }
            data-role="cancel-button"
          >
            { I18n.t('buttons.cancel') }
          </Button>,
          <Button
            key="back"
            buttonType="secondary"
            onClick={ handleBackClick }
            data-role="back-button"
            borderColor="#007e45"
            iconColor="#007e45"
          >
            { I18n.t('buttons.back') }
          </Button>
        ]}
        saveButton={
          <Button
            buttonType="primary"
            onClick={ handleSaveClick }
            data-role="save-button"
          >
            { I18n.t('buttons.save') }
          </Button>
        }
        stickyFooter
      >
        <Box p={ 3 } display="flex" flexDirection="column" alignItems="center">
          <Box width="50%">
           <Pod
             title={ <Typography variant="segment-subheader">{ I18n.t('sections.shareSettings') }</Typography> }
             mb={ 3 }
           >
              <RadioButtonGroup
                name="share-with-group"
                value={shareWith}
                onChange={ (e) => setShareWith(e.target.value) }
              >
                <RadioButton
                  id="radio-everyone"
                  value="everyone"
                  label={ I18n.t('radioLabels.everyone') }
                  aria-label={ I18n.t('radioLabels.everyone') }
                />
                <RadioButton
                  id="radio-specific"
                  value="specific"
                  label={ I18n.t('radioLabels.specificEmployees') }
                  aria-label={ I18n.t('radioLabels.specificEmployees') }
                />
              </RadioButtonGroup>
            </Pod>

            <Pod
              title={ <Typography variant="segment-subheader">{ I18n.t('sections.accessSettings') }</Typography> }
              mb={ 3 }
            >
              <CheckboxGroup legend="">
                <Checkbox
                  id="direct-manager-checkbox"
                  label={ I18n.t('checkboxLabels.directManager') }
                  name="direct-manager"
                  checked={ directManager }
                  onChange={ (e) => setDirectManager(e.target.checked) }
                />
                <Checkbox
                  id="team-manager-checkbox"
                  label={ I18n.t('checkboxLabels.teamManager') }
                  name="team-manager"
                  checked={ teamManager }
                  onChange={ (e) => setTeamManager(e.target.checked) }
                />
              </CheckboxGroup>
            </Pod>

            <Pod
              title={ <Typography variant="segment-subheader">{I18n.t('sections.documentSettings')}</Typography> }
              mb="3"
            >
              <CheckboxGroup legend="">
                <Checkbox
                  id="require-accept-checkbox"
                  label={ I18n.t('checkboxLabels.requireAccept') }
                  name="require-accept"
                  checked={ requireAccept }
                  onChange={ (e) => setRequireAccept(e.target.checked) }
                />
                <Checkbox
                  id="send-email-checkbox"
                  label={ I18n.t('checkboxLabels.sendEmail') }
                  name="send-email"
                  checked={ sendEmail }
                  onChange={ (e) => setSendEmail(e.target.checked) }
                />
              </CheckboxGroup>
            </Pod>
          </Box>
        </Box>
      </Form>
    </Dialog>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  initialRequireAccept: PropTypes.bool,
  initialSendEmail: PropTypes.bool,
  initialDirectManager: PropTypes.bool,
  initialTeamManager: PropTypes.bool,
  initialShareWith: PropTypes.string,
  open: PropTypes.bool,
  onClose: PropTypes.func
};

export default App;

const translations = {
  en: {
    header: {
      title: "Draft document",
      subtitle: "Create documents with help from Copilot"
    },
    sections: {
      documentSettings: "Document settings",
      accessSettings: "Give access to:",
      shareSettings: "Share document with:"
    },
    checkboxLabels: {
      requireAccept: "Require employee to accept document",
      sendEmail: "Send email notification",
      directManager: "Direct manager",
      teamManager: "Team manager"
    },
    radioLabels: {
      everyone: "Everyone",
      specificEmployees: "Specific employees"
    },
    buttons: {
      cancel: "Cancel",
      back: "Back",
      save: "Save"
    }
  }
};

export default translations;

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      locale="en"
      initialRequireAccept={ false }
      initialSendEmail={ false }
      initialDirectManager={ false }
      initialTeamManager={ false }
      initialShareWith="everyone"
    />
  </CarbonProvider>
);