@a-little-world/little-world-design-system 2.10.0

package/dist/esm/components/Button/styles.js

@@ -0,0 +1,277 @@
+import styled, { css } from 'styled-components';
+import { ButtonAppearance, ButtonSizes, ButtonVariations, } from '@a-little-world/little-world-design-system-core';
+import { LINK_HOVER_CSS } from '../Link/styles';
+export const OPTION_BUTTON_CSS = css `
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background: ${({ $backgroundColor, theme }) => $backgroundColor || theme.color.surface.secondary};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  border-radius: 15px;
+  font-weight: 700;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: ${({ theme }) => theme.spacing.xsmall};
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  max-width: 144px;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  flex-shrink: 0;
+  min-height: 69px;
+
+  &:not(:disabled):hover {
+    filter: brightness(95%);
+    cursor: pointer;
+    box-shadow:
+      0 0 10px 1px rgb(0 0 0 / 11%),
+      0 0 8px 3px rgb(255 255 255 / 15%);
+  }
+
+  ${({ $appearance, $backgroundColor, $color, theme }) => $appearance === ButtonAppearance.Secondary &&
+    css `
+      color: ${$color || theme.color.text.button};
+      background: ${$backgroundColor || theme.color.gradient.blue10};
+    `}
+`;
+const StandardButtonCss = css `
+  font-weight: 700;
+  border-radius: 90px;
+  padding: ${({ theme }) => `${theme.spacing.xsmall} ${theme.spacing.small}`};
+  height: 49px;
+  max-width: 480px;
+  gap: ${({ theme }) => theme.spacing.xxxxsmall};
+
+  ${({ $size }) => {
+    if ($size === ButtonSizes.Small || !$size) {
+        return `min-width: 110px;`;
+    }
+    if ($size === ButtonSizes.Medium) {
+        return `min-width: 160px;`;
+    }
+    if ($size === ButtonSizes.Large) {
+        return `min-width: 240px;`;
+    }
+    if ($size === ButtonSizes.Stretch) {
+        return `width: 100%;`;
+    }
+}}
+`;
+export const PrimaryButtonCss = css `
+  ${StandardButtonCss}
+
+  color: ${({ theme }) => theme.color.text.button};
+  border: none;
+  background: ${({ theme, $backgroundColor }) => $backgroundColor || theme.color.gradient.orange10};
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    filter: brightness(80%);
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+`;
+export const SecondaryButtonCss = css `
+  ${StandardButtonCss}
+
+  ${({ $color, $backgroundColor, theme }) => `
+    border: 2px solid ${$color || theme.color.border.bold};
+    background-color: ${$backgroundColor || 'transparent'};
+    color: ${$color || theme.color.text.heading};
+    transition: background-color 0.5s ease, filter 0.5s ease,
+    border-color 0.5s ease, color 0.5s ease, 0.4s;
+
+    &:not(:disabled):hover {
+      background: ${$color || theme.color.text.heading};
+      color: ${theme.color.text.control};
+      border-color: ${$color || theme.color.border.bold};
+      transition: background-color 0.5s ease, filter 0.5s ease,
+      border-color 0.5s ease, color 0.5s ease, 0.4s;
+    }
+  `}
+`;
+export const StyledButton = styled.button `
+  cursor: pointer;
+  position: relative;
+  color: ${({ $color }) => $color || 'currentColor'};
+  font-family: 'Signika Negative';
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+
+  & > * {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    background: ${({ theme }) => theme.color.surface.disabled};
+    border-color: ${({ theme }) => theme.color.border.disabled};
+    color: ${({ theme }) => theme.color.text.disabled};
+    cursor: not-allowed;
+
+    & > * {
+      cursor: not-allowed;
+    }
+  }
+
+  ${({ $appearance, $backgroundColor, $borderColor, $size, $variation, theme, }) => {
+    if ($variation === ButtonVariations.Basic) {
+        if ($appearance === ButtonAppearance.Primary)
+            return PrimaryButtonCss;
+        if ($appearance === ButtonAppearance.Secondary)
+            return SecondaryButtonCss;
+    }
+    if ($variation === ButtonVariations.Option)
+        return OPTION_BUTTON_CSS;
+    let CIRCLE_DIMENSIONS;
+    switch ($size) {
+        case ButtonSizes.Small:
+            CIRCLE_DIMENSIONS = css `
+          width: 28px;
+          height: 28px;
+        `;
+            break;
+        case ButtonSizes.Medium:
+            CIRCLE_DIMENSIONS = css `
+          width: 36px;
+          height: 36px;
+        `;
+            break;
+        default:
+        case ButtonSizes.Large:
+            CIRCLE_DIMENSIONS = css `
+          width: 44px;
+          height: 44px;
+        `;
+            break;
+    }
+    if ($variation === ButtonVariations.Circle)
+        return css `
+        border: 1px solid ${$borderColor || $backgroundColor || 'currentColor'};
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: 50%;
+        padding: 0;
+        transition: opacity 0.5s ease;
+        ${CIRCLE_DIMENSIONS}
+
+        &:not(:disabled):hover {
+          transition: opacity 0.3s ease;
+          opacity: 0.6;
+        }
+
+        ${CIRCLE_DIMENSIONS}
+      `;
+    let ICON_DIMENSIONS;
+    switch ($size) {
+        case ButtonSizes.Small:
+            ICON_DIMENSIONS = css `
+          width: 16px;
+          height: 16px;
+        `;
+            break;
+        case ButtonSizes.Medium:
+            ICON_DIMENSIONS = css `
+          width: 24px;
+          height: 24px;
+        `;
+            break;
+        case ButtonSizes.Large:
+            ICON_DIMENSIONS = css `
+          width: 32px;
+          height: 32px;
+        `;
+            break;
+        default:
+            break;
+    }
+    if ($variation === ButtonVariations.Icon) {
+        return css `
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: ${theme.radius.xxxsmall};
+        width: auto;
+        min-width: 0;
+        height: fit-content;
+        transition: background 0.5s ease;
+
+        &:has(> svg:first-child) {
+          width: fit-content;
+          padding: ${!$size || $size === ButtonSizes.Small
+            ? theme.spacing.xxxsmall
+            : theme.spacing.xxsmall};
+        }
+
+        &:not(:disabled):has(> svg:first-child):hover {
+          transition: background 0.3s ease;
+          background: ${theme.color.surface.secondary};
+        }
+
+        &:not(:disabled):hover {
+          svg {
+            opacity: 0.5;
+            transition: opacity 0.5s ease;
+          }
+        }
+
+        svg {
+          transition: opacity 0.5s ease;
+          ${ICON_DIMENSIONS}
+        }
+      `;
+    }
+    if ($variation === ButtonVariations.Inline)
+        return css `
+        display: inline-flex;
+        border: none;
+        border-radius: 0px;
+        height: auto;
+        width: auto;
+        gap: ${({ theme }) => theme.spacing.xxxsmall};
+        padding: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+        transition: all 0.3s ease-in-out;
+        background: transparent;
+
+        &:disabled {
+          background: transparent;
+        }
+
+        ${LINK_HOVER_CSS}
+
+        &:not(:disabled):hover {
+          background-position: 0;
+
+          &::before {
+            width: 100%;
+          }
+        }
+      `;
+}}
+`;

package/dist/esm/components/Card/Card.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CardBaseProps, CardContentProps, CardDimensions, CardFooterProps, CardHeaderProps, CardSizes } from '@a-little-world/little-world-design-system-core';
+export { CardSizes, CardDimensions };
+export declare const CardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CardContentProps>> & string;
+type CardProps = CardBaseProps & {
+    className?: string;
+};
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/esm/components/Card/Card.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { CardDimensions, CardSizes, } from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+export { CardSizes, CardDimensions };
+const StyledCard = styled.div `
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border: 1px solid
+    ${({ theme, $borderColor }) => $borderColor || theme.color.border.subtle};
+  box-shadow: 0px 1px 25px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing.small};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    border-radius: ${({ theme }) => theme.radius.xxlarge};
+    padding: ${({ $width, theme }) => $width === pixelate(CardDimensions[CardSizes.Small])
+    ? theme.spacing.medium
+    : theme.spacing.large};
+
+    ${({ $width }) => $width &&
+    css `
+        width: ${pixelate(CardDimensions[$width])};
+      `}
+  }
+
+  ${({ $height }) => $height &&
+    css `
+      height: ${$height};
+    `}
+`;
+const StyledCardHeader = styled(Text) `
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+`;
+export const CardContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ align }) => align || 'center'};
+  gap: ${({ gap, theme }) => gap || theme.spacing.small};
+  text-align: ${({ textAlign }) => textAlign || 'left'};
+  margin-bottom: ${({ marginBottom, theme }) => marginBottom || theme.spacing.small};
+  overflow: scroll;
+`;
+const Footer = styled.div `
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.small};
+
+  ${({ $align }) => $align &&
+    css `
+      justify-content: ${$align};
+    `};
+`;
+export const CardHeader = ({ children, textColor, textType, }) => (React.createElement(StyledCardHeader, { type: textType || TextTypes.Heading4, center: true, color: textColor }, children));
+export const CardFooter = ({ children, align }) => (React.createElement(Footer, { "$align": align }, children));
+const Card = ({ borderColor, children, className, height, width, }) => (React.createElement(StyledCard, { className: className, "$borderColor": borderColor, "$height": height, "$width": width }, children));
+export default Card;

package/dist/esm/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
+import React from 'react';
+type CheckboxProps = {
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & RadixCheckboxProps;
+export declare const CheckboxButton: React.FC<CheckboxProps>;
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CheckIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import { CheckboxButtonContainer, CheckboxContainer, CheckboxIndicator, CheckboxRoot, CheckboxWrapper, NonInteractiveCheckbox, StyledLabel, } from './styles';
+export const CheckboxButton = ({ checked, className, color, error, id, inputRef, label, onCheckedChange, value, ...rest }) => (React.createElement(CheckboxButtonContainer, { className: className, ref: inputRef, id: id, checked: checked, onCheckedChange: onCheckedChange, value: value, "$hasError": Boolean(error), ...rest },
+    React.createElement(NonInteractiveCheckbox, { "$color": color, checked: checked }, checked && React.createElement(CheckIcon, { label: "check icon", width: 10 })),
+    label && (React.createElement(StyledLabel, { htmlFor: id, inline: true }, label))));
+const Checkbox = ({ checked, className, color, error, required = true, id, inputRef, label, onCheckedChange, readOnly, value, ...rest }) => {
+    return (React.createElement(CheckboxWrapper, { className: className },
+        React.createElement(CheckboxContainer, null,
+            readOnly ? (React.createElement(NonInteractiveCheckbox, { "$color": color, checked: checked }, checked && React.createElement(CheckIcon, { label: "check icon", width: 10 }))) : (React.createElement(CheckboxRoot, { ref: inputRef, id: id, checked: checked, onCheckedChange: onCheckedChange, value: value, "$hasError": Boolean(error), "$color": color, ...rest },
+                React.createElement(CheckboxIndicator, null,
+                    React.createElement(CheckIcon, { label: "check icon", width: 10 })))),
+            label && (React.createElement(StyledLabel, { htmlFor: id, inline: true }, label))),
+        required && (React.createElement(InputError, { visible: Boolean(error), textAlign: "left" }, error))));
+};
+export default Checkbox;

package/dist/esm/components/Checkbox/styles.d.ts

@@ -0,0 +1,27 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const CheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+    $color?: string;
+    checked: Checkbox.CheckboxProps["checked"];
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NonInteractiveCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color?: string;
+    checked: Checkbox.CheckboxProps["checked"];
+}>> & string;
+export declare const CheckboxIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Checkbox.CheckboxIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-label").LabelProps & {
+    bold?: boolean;
+    inline?: boolean;
+    marginBottom?: string | number;
+    tooltipText?: string;
+}, never>> & string & Omit<import("react").FC<import("@radix-ui/react-label").LabelProps & {
+    bold?: boolean;
+    inline?: boolean;
+    marginBottom?: string | number;
+    tooltipText?: string;
+}>, keyof import("react").Component<any, {}, any>>;

package/dist/esm/components/Checkbox/styles.js

@@ -0,0 +1,69 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+import styled, { css } from 'styled-components';
+import Label from '../Label/Label';
+const ITEM_WIDTH = '16px';
+export const CheckboxWrapper = styled.div ``;
+export const CheckboxButtonContainer = styled(Checkbox.Root) `
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  display: flex;
+  align-items: center;
+  border: 1px solid
+    ${({ theme, checked, $hasError }) => checked
+    ? $hasError
+        ? theme.color.border.error
+        : theme.color.border.selected
+    : theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background: ${({ checked, $hasError, theme }) => checked
+    ? $hasError
+        ? theme.color.surface.error
+        : theme.color.surface.accent
+    : theme.color.surface.secondary};
+
+  label {
+    cursor: pointer;
+  }
+`;
+export const CheckboxContainer = styled.div `
+  display: flex;
+  align-items: center;
+  margin: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+  cursor: pointer;
+`;
+const CHECKBOX_STYLES = css `
+  all: unset;
+  cursor: pointer;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.border.contrast};
+  color: ${({ theme }) => theme.color.text.primary};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.border.contrast};
+
+  ${({ $color, checked, theme }) => $color &&
+    checked &&
+    css `
+      background: ${$color};
+      border-color: ${$color};
+      color: ${theme.color.text.reversed};
+    `}
+`;
+export const CheckboxRoot = styled(Checkbox.Root) `
+  ${CHECKBOX_STYLES}
+`;
+export const NonInteractiveCheckbox = styled.div `
+  ${CHECKBOX_STYLES}
+`;
+export const CheckboxIndicator = styled(Checkbox.Indicator) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StyledLabel = styled(Label) `
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+`;

package/dist/esm/components/CheckboxGrid/CheckboxGrid.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type SelectedType = {
+    [x: string]: string[];
+};
+type CheckboxGridProps = {
+    columnHeadings: string[];
+    rowHeadings: string[];
+    highlightCells: SelectedType;
+    checkboxesByColumn: {
+        name: string;
+        value: string;
+        key: string;
+    }[][];
+    onSelection: (selected: SelectedType) => void;
+    preSelected?: SelectedType;
+    legendText?: string;
+    error?: string;
+    name: string;
+    readOnly?: boolean;
+};
+declare const CheckboxGrid: React.FC<CheckboxGridProps>;
+export default CheckboxGrid;

package/dist/esm/components/CheckboxGrid/CheckboxGrid.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { useTheme } from 'styled-components';
+import InputError from '../InputError/InputError';
+import Text from '../Text/Text';
+import { BelowGrid, CheckboxGridWrapper, ColumnHeading, Grid, Legend, RowHeading, ScrollableWrapper, Square, StyledCheckbox, } from './styles';
+const CheckboxGrid = ({ columnHeadings, error, highlightCells, legendText, rowHeadings, checkboxesByColumn, preSelected, onSelection, name, readOnly, }) => {
+    const theme = useTheme();
+    const [selected, setSelected] = useState(preSelected || {});
+    const onSelect = ({ key, state, value, }) => {
+        const oldValues = selected[key] || [];
+        const newValues = state
+            ? [...oldValues, value]
+            : oldValues.filter(el => el !== value);
+        const newTotalSelection = { ...selected, [key]: newValues };
+        setSelected(newTotalSelection);
+        onSelection(newTotalSelection);
+    };
+    return (React.createElement(CheckboxGridWrapper, null,
+        React.createElement(Grid, { "$columns": columnHeadings.length, "$rows": rowHeadings.length, "$hasError": !!error },
+            React.createElement(React.Fragment, null,
+                React.createElement(ColumnHeading, { tag: "span", bold: true, index: 0 }, columnHeadings[0]),
+                rowHeadings.map((row, index) => (React.createElement(RowHeading, { tag: "span", key: row, index: index }, row))),
+                React.createElement(ScrollableWrapper, null,
+                    columnHeadings.slice(1).map((column, index) => (React.createElement(ColumnHeading, { key: column, tag: "span", bold: true, index: index + 1 }, column))),
+                    checkboxesByColumn.map((column, columnIndex) => column.map(({ value, key }, rowIndex) => {
+                        return (React.createElement(StyledCheckbox, { key: key + value + rowIndex, checked: selected[key]?.includes(value), name: name, onCheckedChange: state => onSelect({ value, key, state }), value: value, color: theme.color.surface.selected, "$row": rowIndex + 2, "$column": columnIndex + 2, "$highlight": !!highlightCells?.[key]?.includes(value), readOnly: readOnly }));
+                    }))))),
+        React.createElement(BelowGrid, null,
+            legendText && highlightCells && (React.createElement(Legend, null,
+                React.createElement(Square, null),
+                React.createElement(Text, { tag: "span" }, "="),
+                React.createElement(Text, { tag: "span" }, legendText))),
+            React.createElement(InputError, { visible: Boolean(error) }, error))));
+};
+export default CheckboxGrid;

package/dist/esm/components/CheckboxGrid/styles.d.ts

@@ -0,0 +1,64 @@
+export declare const CheckboxGridWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columns: number;
+    $rows: number;
+    $hasError: boolean;
+}>> & string;
+export declare const ColumnHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, {
+    index: number;
+}>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const RowHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, {
+    index: number;
+}>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ScrollableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & import("@radix-ui/react-checkbox").CheckboxProps, {
+    checked: boolean;
+    $row: number;
+    $column: number;
+    $highlight: boolean;
+}>> & string & Omit<import("react").FC<{
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & import("@radix-ui/react-checkbox").CheckboxProps>, keyof import("react").Component<any, {}, any>>;
+export declare const BelowGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Legend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Square: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;