@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.1 → 10.7.0

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { MarginProps } from '../utils/space';
+export type AccordionProps = {
+    title: string;
+    subTitle?: string;
+    filledBackground?: boolean;
+    borderTop?: boolean;
+    borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut';
+    fullBorder?: boolean;
+    backgroundColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut';
+    onToggle?: (isOpen: boolean) => void;
+    children: ReactNode;
+    defaultIsOpen?: boolean;
+} & MarginProps;
+export declare const Accordion: FC<AccordionProps>;

package/dist/Accordion/Accordion.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+export const Accordion = ({ title, children, onToggle, filledBackground, defaultIsOpen = false, borderTop = false, borderColor = 'oatmeal', backgroundColor = 'custard', subTitle, fullBorder = false, ...marginProps }) => {
+    const [isOpen, setIsOpen] = useState(defaultIsOpen);
+    const px = fullBorder ? '16px' : '0';
+    const handleToggle = () => {
+        const nextOpenState = !isOpen;
+        onToggle?.(nextOpenState);
+        setIsOpen(nextOpenState);
+    };
+    return (React.createElement(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": borderColor, "$backgroundColor": backgroundColor, ...marginProps },
+        React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px },
+            React.createElement(TitleContainer, null,
+                React.createElement(Text, { tag: "h2", typo: "headline-regular", color: "liquorice" }, title),
+                subTitle && (React.createElement(Text, { tag: "label", color: "liquorice", typo: "label", mt: { custom: 4 } }, subTitle))),
+            React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", "$isOpen": isOpen, "$borderTop": borderTop })),
+        isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
+};
+const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor = 'oatmeal', $backgroundColor = 'custard', }) => css `
+    border-bottom: 1px solid ${theme.colors[$borderColor]};
+    ${$borderTop && `border-top: 1px solid ${theme.colors[$borderColor]};`}
+
+    ${$fullBorder &&
+    css `
+      border: 1px solid ${theme.colors[$borderColor]};
+      border-radius: 16px;
+    `}
+
+    ${$filledBackground &&
+    css `
+      background-color: ${theme.colors[$backgroundColor]};
+    `}
+  `);
+const TitleContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const TopContainer = styled(Box) `
+  cursor: pointer;
+`;
+const CaretIcon = styled(Icon)(({ $isOpen }) => css `
+    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    transition: transform 0.6s ease;
+  `);
+//# sourceMappingURL=Accordion.js.map

package/dist/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type AccordionProps = {\n  title: string\n  subTitle?: string\n  filledBackground?: boolean\n  borderTop?: boolean\n  borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut'\n  fullBorder?: boolean\n  backgroundColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut'\n  onToggle?: (isOpen: boolean) => void\n  children: ReactNode\n  defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  children,\n  onToggle,\n  filledBackground,\n  defaultIsOpen = false,\n  borderTop = false,\n  borderColor = 'oatmeal',\n  backgroundColor = 'custard',\n  subTitle,\n  fullBorder = false,\n  ...marginProps\n}) => {\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const px = fullBorder ? '16px' : '0'\n\n  const handleToggle = () => {\n    const nextOpenState = !isOpen\n    onToggle?.(nextOpenState)\n    setIsOpen(nextOpenState)\n  }\n\n  return (\n    <Wrapper\n      $borderTop={borderTop}\n      $fullBorder={fullBorder}\n      $filledBackground={filledBackground}\n      $borderColor={borderColor}\n      $backgroundColor={backgroundColor}\n      {...marginProps}\n    >\n      <TopContainer\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        onClick={handleToggle}\n        py=\"16px\"\n        pr=\"16px\"\n        pl={px}\n      >\n        <TitleContainer>\n          <Text tag=\"h2\" typo=\"headline-regular\" color=\"liquorice\">\n            {title}\n          </Text>\n          {subTitle && (\n            <Text tag=\"label\" color=\"liquorice\" typo=\"label\" mt={{ custom: 4 }}>\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon\n          render=\"caret\"\n          size={24}\n          color=\"marzipan\"\n          $isOpen={isOpen}\n          $borderTop={borderTop}\n        />\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"12px\" pb=\"16px\" px={px}>\n          {children}\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<\n  TransientProps<\n    Pick<\n      AccordionProps,\n      | 'borderTop'\n      | 'fullBorder'\n      | 'filledBackground'\n      | 'borderColor'\n      | 'backgroundColor'\n    >\n  >\n>(\n  ({\n    $borderTop,\n    $fullBorder,\n    $filledBackground,\n    $borderColor = 'oatmeal',\n    $backgroundColor = 'custard',\n  }) => css`\n    border-bottom: 1px solid ${theme.colors[$borderColor]};\n    ${$borderTop && `border-top: 1px solid ${theme.colors[$borderColor]};`}\n\n    ${$fullBorder &&\n    css`\n      border: 1px solid ${theme.colors[$borderColor]};\n      border-radius: 16px;\n    `}\n\n    ${$filledBackground &&\n    css`\n      background-color: ${theme.colors[$backgroundColor]};\n    `}\n  `,\n)\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n  cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n  TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n  ({ $isOpen }) => css`\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.6s ease;\n  `,\n)\n"]}

package/dist/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.js.map

package/dist/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA","sourcesContent":["export * from './Accordion'\n"]}

package/dist/ActionDropdown/ActionDropdown.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ActionListItem } from './List';
+import { MarginProps } from '../utils/space';
+export type ActionDropdownProps = {
+    id?: string;
+    className?: string;
+    /** label displayed above the dropdown  */
+    label?: string;
+    /** value */
+    value: ActionListItem;
+    /** list of items for the dropdown list */
+    list: ActionListItem[];
+    /** onSelect handler */
+    onSelect: (action: ActionListItem) => void;
+} & MarginProps;
+export declare const ActionDropdown: FC<ActionDropdownProps>;

package/dist/ActionDropdown/ActionDropdown.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { List } from './List';
+import { theme } from '../theme';
+export const ActionDropdown = ({ id, className = '', label, value, list, onSelect, ...marginProps }) => {
+    const [open, setOpen] = useState(false);
+    return (React.createElement(Container, { id: id, className: className, onClick: () => setOpen((currentOpen) => !currentOpen), ...marginProps },
+        label && (React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label)),
+        React.createElement(Label, { "$text": value.textColor ?? 'liquorice', "$bg": value.bgColor ?? 'sesame' },
+            React.createElement(SelectedOption, null, value.label),
+            React.createElement(Icon, { render: "caret", color: value.textColor ?? 'sesame', size: 24, rotate: open ? 180 : 0 })),
+        React.createElement(OuterContainer, { open: open },
+            React.createElement(List, { options: list, selectOption: onSelect }))));
+};
+const Label = styled.div(({ $text, $bg }) => css `
+    color: ${theme.colors[$text]};
+    background-color: ${theme.colors[$bg]};
+    position: relative;
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    border-radius: 100px;
+    padding: 16px 16px 14px;
+    box-sizing: border-box;
+    user-select: none;
+  `);
+const SelectedOption = styled.span `
+  font-size: 14px;
+  font-weight: bold;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const Container = styled(Box) `
+  position: relative;
+  display: block;
+  width: 210px;
+  height: 48px;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: 8px;
+`;
+const OuterContainer = styled.div(({ open }) => css `
+    position: absolute;
+    width: 100%;
+    border-radius: 12px;
+    margin-top: 8px;
+    display: ${open ? 'block' : 'none'};
+    max-height: ${open ? '235px' : '48px'};
+    background-color: ${theme.colors.custard};
+    overflow-y: ${open ? 'auto' : 'hidden'};
+    z-index: 4;
+    transition: all 0.2s ease-in-out;
+  `);
+//# sourceMappingURL=ActionDropdown.js.map

package/dist/ActionDropdown/ActionDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAgBvC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW;QAEd,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD,CACR;QAED,oBAAC,KAAK,aACG,KAAK,CAAC,SAAS,IAAI,WAAW,SAChC,KAAK,CAAC,OAAO,IAAI,QAAQ;YAE9B,oBAAC,cAAc,QAAE,KAAK,CAAC,KAAK,CAAkB;YAC9C,oBAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,EAClC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,CACI;QACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI;YACxB,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,CAChC,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;wBACR,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;;;;;;;;;;;;GAYtC,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,KAAK,CAAC,MAAM,CAAC,OAAO;kBAC1B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA","sourcesContent":["import React, { FC, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type ActionDropdownProps = {\n  id?: string\n  className?: string\n  /** label displayed above the dropdown  */\n  label?: string\n  /** value */\n  value: ActionListItem\n  /** list of items for the dropdown list */\n  list: ActionListItem[]\n  /** onSelect handler */\n  onSelect: (action: ActionListItem) => void\n} & MarginProps\n\nexport const ActionDropdown: FC<ActionDropdownProps> = ({\n  id,\n  className = '',\n  label,\n  value,\n  list,\n  onSelect,\n  ...marginProps\n}) => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <Container\n      id={id}\n      className={className}\n      onClick={() => setOpen((currentOpen) => !currentOpen)}\n      {...marginProps}\n    >\n      {label && (\n        <Text tag=\"label\" color=\"sesame\" typo=\"label\">\n          {label}\n        </Text>\n      )}\n\n      <Label\n        $text={value.textColor ?? 'liquorice'}\n        $bg={value.bgColor ?? 'sesame'}\n      >\n        <SelectedOption>{value.label}</SelectedOption>\n        <Icon\n          render=\"caret\"\n          color={value.textColor ?? 'sesame'}\n          size={24}\n          rotate={open ? 180 : 0}\n        />\n      </Label>\n      <OuterContainer open={open}>\n        <List options={list} selectOption={onSelect} />\n      </OuterContainer>\n    </Container>\n  )\n}\n\ninterface ISelected {\n  $text: Color\n  $bg: Color\n}\n\nconst Label = styled.div<ISelected>(\n  ({ $text, $bg }) => css`\n    color: ${theme.colors[$text]};\n    background-color: ${theme.colors[$bg]};\n    position: relative;\n    width: 100%;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: center;\n    border-radius: 100px;\n    padding: 16px 16px 14px;\n    box-sizing: border-box;\n    user-select: none;\n  `,\n)\n\nconst SelectedOption = styled.span`\n  font-size: 14px;\n  font-weight: bold;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nconst Container = styled(Box)`\n  position: relative;\n  display: block;\n  width: 210px;\n  height: 48px;\n  text-align: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: 8px;\n`\n\ninterface IOpen {\n  open: boolean\n}\n\nconst OuterContainer = styled.div<IOpen>(\n  ({ open }) => css`\n    position: absolute;\n    width: 100%;\n    border-radius: 12px;\n    margin-top: 8px;\n    display: ${open ? 'block' : 'none'};\n    max-height: ${open ? '235px' : '48px'};\n    background-color: ${theme.colors.custard};\n    overflow-y: ${open ? 'auto' : 'hidden'};\n    z-index: 4;\n    transition: all 0.2s ease-in-out;\n  `,\n)\n"]}

package/dist/ActionDropdown/List.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { Color } from '../theme';
+export type ActionListItem = {
+    label: string;
+    value: string;
+    bgColor?: Color;
+    textColor?: Color;
+};
+type Props = {
+    options: ActionListItem[];
+    selectOption: (option: ActionListItem) => void;
+};
+export declare const List: FC<Props>;
+export {};

package/dist/ActionDropdown/List.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { darken } from 'polished';
+export const List = ({ options, selectOption }) => (React.createElement(Container, null, options.map((option) => (React.createElement(ListItem, { key: option.value, onClick: () => selectOption(option) }, option.label)))));
+const Container = styled.ul `
+  padding: 0;
+  margin: 0;
+  max-height: 188px;
+`;
+const ListItem = styled.li `
+  padding: 16px 24px;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  font-size: 14px;
+  cursor: pointer;
+  color: ${theme.colors.liquorice};
+
+  &:hover {
+    background-color: ${darken(0.1, theme.colors.custard)};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+//# sourceMappingURL=List.js.map

package/dist/ActionDropdown/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/ActionDropdown/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,MAAM,CAAC,MAAM,IAAI,GAAc,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC5D,oBAAC,SAAS,QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAC7D,MAAM,CAAC,KAAK,CACJ,CACZ,CAAC,CACQ,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI1B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;WASf,KAAK,CAAC,MAAM,CAAC,SAAS;;;wBAGT,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;CAMxD,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { Color, theme } from '../theme'\nimport { darken } from 'polished'\n\nexport type ActionListItem = {\n  label: string\n  value: string\n  bgColor?: Color\n  textColor?: Color\n}\n\ntype Props = {\n  options: ActionListItem[]\n  selectOption: (option: ActionListItem) => void\n}\n\nexport const List: FC<Props> = ({ options, selectOption }) => (\n  <Container>\n    {options.map((option) => (\n      <ListItem key={option.value} onClick={() => selectOption(option)}>\n        {option.label}\n      </ListItem>\n    ))}\n  </Container>\n)\n\nconst Container = styled.ul`\n  padding: 0;\n  margin: 0;\n  max-height: 188px;\n`\n\nconst ListItem = styled.li`\n  padding: 16px 24px;\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-size: 14px;\n  cursor: pointer;\n  color: ${theme.colors.liquorice};\n\n  &:hover {\n    background-color: ${darken(0.1, theme.colors.custard)};\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n`\n"]}

package/dist/ActionDropdown/index.d.ts

@@ -0,0 +1 @@
+export { ActionDropdown } from './ActionDropdown';

package/dist/ActionDropdown/index.js

@@ -0,0 +1,2 @@
+export { ActionDropdown } from './ActionDropdown';
+//# sourceMappingURL=index.js.map

package/dist/ActionDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ActionDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export { ActionDropdown } from './ActionDropdown'\n"]}

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { type JSX } from 'react';
+import { type Color } from '../theme';
+export declare enum BadgeSize {
+    Sm = "24px",
+    Md = "32px",
+    Lg = "40px"
+}
+export type BadgeProps = {
+    src: string | JSX.Element;
+    title?: string;
+    borderColour?: Color;
+    size?: BadgeSize;
+    disabled?: boolean;
+    zIndex?: number;
+};
+export declare function Badge({ borderColour, size, src, disabled, zIndex, title, }: BadgeProps): JSX.Element;

package/dist/Badge/Badge.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../theme';
+import { BadgeFallbackImage } from './BadgeFallbackImage';
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["Sm"] = "24px";
+    BadgeSize["Md"] = "32px";
+    BadgeSize["Lg"] = "40px";
+})(BadgeSize || (BadgeSize = {}));
+export function Badge({ borderColour = 'lollipop', size = BadgeSize.Lg, src, disabled, zIndex, title, }) {
+    const [hasFailed, setHasFailed] = useState(false);
+    if (typeof src === 'string') {
+        return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex },
+            hasFailed && React.createElement(BadgeFallbackImage, { title: title }),
+            !hasFailed && (React.createElement("img", { width: '100%', height: '100%', src: src, alt: title, onError: () => setHasFailed(true) }))));
+    }
+    return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null }, src));
+}
+const Container = styled.div((props) => {
+    return css `
+    background-color: ${props.$borderColour};
+    background-image: ${props.$src ? `url(${props.$src})` : 'none'};
+    background-position: center;
+    background-size: cover;
+    height: ${props.$size};
+    width: ${props.$size};
+    border-radius: 50%;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease-in-out;
+    border: 2px solid ${props.$borderColour};
+    filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};
+    z-index: ${props.$zIndex || 0};
+
+    ${!props.$disabled &&
+        css `
+      &:hover {
+        cursor: pointer;
+        box-shadow: 0 0 0px 5px #f0f0f0;
+      }
+    `}
+  `;
+});
+//# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAA;AACjD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,YAAY,GAAG,UAAU,EACzB,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,GACM;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM;YAEd,SAAS,IAAI,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;YACjD,CAAC,SAAS,IAAI,CACb,6BACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CACS,CACb,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,IAET,GAAG,CACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,aAAa;wBACnB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { useState, type JSX } from 'react'\nimport styled, { css } from 'styled-components'\nimport { theme, type Color } from '../theme'\nimport { BadgeFallbackImage } from './BadgeFallbackImage'\n\nexport enum BadgeSize {\n  Sm = '24px',\n  Md = '32px',\n  Lg = '40px',\n}\n\nexport type BadgeProps = {\n  src: string | JSX.Element\n  title?: string\n  borderColour?: Color\n  size?: BadgeSize\n  disabled?: boolean\n  zIndex?: number\n}\n\nexport function Badge({\n  borderColour = 'lollipop',\n  size = BadgeSize.Lg,\n  src,\n  disabled,\n  zIndex,\n  title,\n}: BadgeProps) {\n  const [hasFailed, setHasFailed] = useState(false)\n\n  if (typeof src === 'string') {\n    return (\n      <Container\n        $borderColour={theme.colors[borderColour]}\n        $size={size}\n        $src={src}\n        $disabled={disabled}\n        $zIndex={zIndex}\n      >\n        {hasFailed && <BadgeFallbackImage title={title} />}\n        {!hasFailed && (\n          <img\n            width={'100%'}\n            height={'100%'}\n            src={src}\n            alt={title}\n            onError={() => setHasFailed(true)}\n          />\n        )}\n      </Container>\n    )\n  }\n\n  return (\n    <Container\n      $borderColour={theme.colors[borderColour]}\n      $size={size}\n      $disabled={disabled}\n      $zIndex={zIndex}\n      $src={null}\n    >\n      {src}\n    </Container>\n  )\n}\n\ntype ContainerProps = {\n  $borderColour: string\n  $size: BadgeSize\n  $src: string | null\n  $disabled?: boolean\n  $zIndex?: number\n}\n\nconst Container = styled.div<ContainerProps>((props) => {\n  return css`\n    background-color: ${props.$borderColour};\n    background-image: ${props.$src ? `url(${props.$src})` : 'none'};\n    background-position: center;\n    background-size: cover;\n    height: ${props.$size};\n    width: ${props.$size};\n    border-radius: 50%;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease-in-out;\n    border: 2px solid ${props.$borderColour};\n    filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};\n    z-index: ${props.$zIndex || 0};\n\n    ${!props.$disabled &&\n    css`\n      &:hover {\n        cursor: pointer;\n        box-shadow: 0 0 0px 5px #f0f0f0;\n      }\n    `}\n  `\n})\n"]}

package/dist/Badge/BadgeFallbackImage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    title?: string;
+};
+export declare function BadgeFallbackImage({ title }: Props): React.JSX.Element;
+export {};

package/dist/Badge/BadgeFallbackImage.js

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import styled from 'styled-components';
+export function BadgeFallbackImage({ title }) {
+    const bgColour = useRef(fallbackBackgroundColours[Math.floor(Math.random() * fallbackBackgroundColours.length)]);
+    return (React.createElement(StyledFallbackImage, { "$backgroundColour": bgColour.current },
+        React.createElement(Text, { typo: "caption", color: "liquorice", style: { fontWeight: 'bold' } }, title?.substring(0, 2) ?? null)));
+}
+const fallbackBackgroundColours = [
+    theme.colors.lollipop,
+    theme.colors.marshmallowPink,
+    theme.colors.bubblegum,
+    theme.colors.fairyFloss,
+];
+const StyledFallbackImage = styled.div `
+  background-color: ${(props) => props.$backgroundColour};
+  display: flex;
+  place-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+//# sourceMappingURL=BadgeFallbackImage.js.map

package/dist/Badge/BadgeFallbackImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeFallbackImage.js","sourceRoot":"","sources":["../../src/Badge/BadgeFallbackImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAMtC,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAS;IACjD,MAAM,QAAQ,GAAG,MAAM,CACrB,yBAAyB,CACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAC7D,CACF,CAAA;IACD,OAAO,CACL,oBAAC,mBAAmB,yBAAoB,QAAQ,CAAC,OAAO;QACtD,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IACjE,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAC1B,CACa,CACvB,CAAA;AACH,CAAC;AAED,MAAM,yBAAyB,GAAG;IAChC,KAAK,CAAC,MAAM,CAAC,QAAQ;IACrB,KAAK,CAAC,MAAM,CAAC,eAAe;IAC5B,KAAK,CAAC,MAAM,CAAC,SAAS;IACtB,KAAK,CAAC,MAAM,CAAC,UAAU;CACxB,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA+B;sBAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB;;;;;;CAMvD,CAAA","sourcesContent":["import React, { useRef } from 'react'\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport styled from 'styled-components'\n\ntype Props = {\n  title?: string\n}\n\nexport function BadgeFallbackImage({ title }: Props) {\n  const bgColour = useRef(\n    fallbackBackgroundColours[\n      Math.floor(Math.random() * fallbackBackgroundColours.length)\n    ],\n  )\n  return (\n    <StyledFallbackImage $backgroundColour={bgColour.current}>\n      <Text typo=\"caption\" color=\"liquorice\" style={{ fontWeight: 'bold' }}>\n        {title?.substring(0, 2) ?? null}\n      </Text>\n    </StyledFallbackImage>\n  )\n}\n\nconst fallbackBackgroundColours = [\n  theme.colors.lollipop,\n  theme.colors.marshmallowPink,\n  theme.colors.bubblegum,\n  theme.colors.fairyFloss,\n]\n\nconst StyledFallbackImage = styled.div<{ $backgroundColour: string }>`\n  background-color: ${(props) => props.$backgroundColour};\n  display: flex;\n  place-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n`\n"]}

package/dist/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, BadgeProps, BadgeSize } from './Badge';

package/dist/Badge/index.js

@@ -0,0 +1,2 @@
+export { Badge, BadgeSize } from './Badge';
+//# sourceMappingURL=index.js.map

package/dist/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAc,SAAS,EAAE,MAAM,SAAS,CAAA","sourcesContent":["export { Badge, BadgeProps, BadgeSize } from './Badge'\n"]}

package/dist/BadgeList/BadgeList.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type BadgeProps } from '../Badge/Badge';
+import type { TooltipProps } from '../Tooltip/Tooltip';
+type WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {
+    position?: TooltipProps['position'];
+};
+export type BadgeListBadge = BadgeProps & {
+    tooltip?: WithTooltip;
+};
+type Props = {
+    size?: BadgeProps['size'];
+    limit?: number;
+    badges: Omit<BadgeListBadge, 'zIndex'>[];
+};
+/**
+ * ### A list of badges with optional tooltips
+ *
+ * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.
+ *
+ */
+export declare function BadgeList({ badges, limit, size }: Props): React.JSX.Element;
+type WithTooltipProps = {
+    badge: BadgeListBadge;
+};
+declare const WithTooltip: ({ badge: { tooltip, ...badge } }: WithTooltipProps) => React.JSX.Element;
+export {};

package/dist/BadgeList/BadgeList.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Badge, BadgeSize } from '../Badge/Badge';
+import styled from 'styled-components';
+import { Tooltip } from '../Tooltip';
+import { Text } from '../Text';
+import { theme } from '../theme';
+/**
+ * ### A list of badges with optional tooltips
+ *
+ * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.
+ *
+ */
+export function BadgeList({ badges, limit, size = BadgeSize.Lg }) {
+    const badgeZIndexMax = badges.length;
+    const limitExcess = 
+    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️
+    limit && (badges.length > limit ? badges.length - limit : 0);
+    const maxBadges = limit ? limit - 1 : undefined;
+    const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess);
+    return (React.createElement(Container, { "$size": size },
+        badges
+            .slice(0, limitExcess ? maxBadges : undefined)
+            .map((badge, index) => (React.createElement(WithTooltip, { key: typeof badge.src === 'string' ? badge.src : index, badge: {
+                ...badge,
+                zIndex: badgeZIndexMax - index,
+                size,
+            } }))),
+        showExcessBadge && (React.createElement("div", { className: "limit-badge", style: { zIndex: badgeZIndexMax, marginLeft: '4px' } },
+            React.createElement(Badge, { title: `+${limitExcess}`, borderColour: "oatmeal", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess + 1 }), disabled: true })))));
+}
+function ExcessBadge({ excess }) {
+    return (React.createElement(ExcessBadgeContainer, null,
+        React.createElement(Text, { typo: "caption", style: { fontWeight: 'bold' } },
+            "+",
+            excess)));
+}
+const ExcessBadgeContainer = styled.div `
+  display: flex;
+  align-items: center;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.oatmeal};
+  pointer-events: none;
+`;
+const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
+    if (tooltip) {
+        return (React.createElement("div", { style: { zIndex: badge.zIndex } },
+            React.createElement(Tooltip, { position: tooltip.position ?? 'bottom', title: tooltip?.title, content: tooltip.content },
+                React.createElement(Badge, { ...badge }))));
+    }
+    return (React.createElement("div", { style: { zIndex: badge.zIndex } },
+        React.createElement(Badge, { ...badge })));
+};
+const marginRightMapping = {
+    [BadgeSize.Lg]: '-18px',
+    [BadgeSize.Md]: '-14px',
+    [BadgeSize.Sm]: '-11px',
+};
+const Container = styled.div `
+  display: flex;
+
+  > * {
+    transition:
+      margin 0.2s ease-in-out,
+      padding 0.2s ease-in-out;
+    margin-right: ${(props) => marginRightMapping[props.$size]};
+
+    &:hover:not(:first-child):not(.limit-badge) {
+      padding-left: 10px;
+      &:not(:last-child) {
+        padding-right: 5px;
+      }
+    }
+  }
+`;
+//# sourceMappingURL=BadgeList.js.map

package/dist/BadgeList/BadgeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n  position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n  size?: BadgeProps['size']\n  limit?: number\n  badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n  const badgeZIndexMax = badges.length\n  const limitExcess =\n    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n    limit && (badges.length > limit ? badges.length - limit : 0)\n\n  const maxBadges = limit ? limit - 1 : undefined\n  const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n  return (\n    <Container $size={size}>\n      {badges\n        .slice(0, limitExcess ? maxBadges : undefined)\n        .map((badge, index) => (\n          <WithTooltip\n            key={typeof badge.src === 'string' ? badge.src : index}\n            badge={{\n              ...badge,\n              zIndex: badgeZIndexMax - index,\n              size,\n            }}\n          />\n        ))}\n\n      {showExcessBadge && (\n        <div\n          className=\"limit-badge\"\n          style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n        >\n          <Badge\n            title={`+${limitExcess}`}\n            borderColour=\"oatmeal\"\n            size={size}\n            src={<ExcessBadge excess={limitExcess + 1} />}\n            disabled\n          />\n        </div>\n      )}\n    </Container>\n  )\n}\n\ntype ExcessBadgeProps = {\n  excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n  return (\n    <ExcessBadgeContainer>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        +{excess}\n      </Text>\n    </ExcessBadgeContainer>\n  )\n}\n\nconst ExcessBadgeContainer = styled.div`\n  display: flex;\n  align-items: center;\n  place-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: ${theme.colors.oatmeal};\n  pointer-events: none;\n`\n\ntype WithTooltipProps = {\n  badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n  if (tooltip) {\n    return (\n      <div style={{ zIndex: badge.zIndex }}>\n        <Tooltip\n          position={tooltip.position ?? 'bottom'}\n          title={tooltip?.title}\n          content={tooltip.content}\n        >\n          <Badge {...badge} />\n        </Tooltip>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ zIndex: badge.zIndex }}>\n      <Badge {...badge} />\n    </div>\n  )\n}\n\nconst marginRightMapping = {\n  [BadgeSize.Lg]: '-18px',\n  [BadgeSize.Md]: '-14px',\n  [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n  display: flex;\n\n  > * {\n    transition:\n      margin 0.2s ease-in-out,\n      padding 0.2s ease-in-out;\n    margin-right: ${(props) => marginRightMapping[props.$size]};\n\n    &:hover:not(:first-child):not(.limit-badge) {\n      padding-left: 10px;\n      &:not(:last-child) {\n        padding-right: 5px;\n      }\n    }\n  }\n`\n"]}

package/dist/BadgeList/index.d.ts

@@ -0,0 +1 @@
+export { BadgeList, BadgeListBadge } from './BadgeList';

package/dist/BadgeList/index.js

@@ -0,0 +1,2 @@
+export { BadgeList } from './BadgeList';
+//# sourceMappingURL=index.js.map

package/dist/BadgeList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BadgeList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAA","sourcesContent":["export { BadgeList, BadgeListBadge } from './BadgeList'\n"]}

package/dist/Banner/BannerContainer.d.ts

@@ -0,0 +1,7 @@
+import React, { FC, ReactNode } from 'react';
+import { BannerContextType } from './types';
+export declare const BannerContext: React.Context<BannerContextType>;
+export declare const useBannerContext: () => BannerContextType;
+export declare const BannerContainer: FC<{
+    children?: ReactNode;
+}>;

package/dist/Banner/BannerContainer.js

@@ -0,0 +1,43 @@
+import React, { createContext, useState, useCallback, useContext, } from 'react';
+import styled from 'styled-components';
+import { BannerItem } from './BannerItem';
+export const BannerContext = createContext({
+    addBanner: () => {
+        throw new Error('Please add the BannerContainer to your application');
+    },
+});
+export const useBannerContext = () => useContext(BannerContext);
+export const BannerContainer = ({ children }) => {
+    let bannerId = 0;
+    const [banner, setBanner] = useState([]);
+    // create banner unique ID
+    const newBannerId = useCallback(() => {
+        const newId = `MM_BANNER_${bannerId}`;
+        bannerId++;
+        return newId;
+    }, [bannerId]);
+    const addBanner = (banner) => {
+        const newBanner = {
+            ...banner,
+            id: newBannerId(),
+        };
+        setBanner([newBanner]);
+    };
+    const deleteBanner = (id) => {
+        setBanner(banner.filter((banner) => banner.id !== id));
+    };
+    return (React.createElement(BannerContext.Provider, { value: {
+            addBanner,
+        } },
+        children,
+        React.createElement(BannerWrapper, null, banner.map((banner) => (React.createElement(BannerItem, { key: banner.id, ...banner, deleteBanner: deleteBanner }))))));
+};
+const BannerWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 99;
+`;
+//# sourceMappingURL=BannerContainer.js.map

package/dist/Banner/BannerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContainer.js","sourceRoot":"","sources":["../../src/Banner/BannerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,QAAQ,EACR,WAAW,EAEX,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,SAAS,EAAE,GAAG,EAAE;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,IAAI,QAAQ,GAAG,CAAC,CAAA;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAElD,0BAA0B;IAC1B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,aAAa,QAAQ,EAAE,CAAA;QACrC,QAAQ,EAAE,CAAA;QACV,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,CAAC,MAAoB,EAAE,EAAE;QACzC,MAAM,SAAS,GAAG;YAChB,GAAG,MAAM;YACT,EAAE,EAAE,WAAW,EAAE;SAClB,CAAA;QACD,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE;QAClC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACxD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,SAAS;SACV;QAEA,QAAQ;QACT,oBAAC,aAAa,QACX,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,oBAAC,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,KAAM,MAAM,EAAE,YAAY,EAAE,YAAY,GAAI,CACvE,CAAC,CACY,CACO,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAA","sourcesContent":["import React, {\n  createContext,\n  FC,\n  useState,\n  useCallback,\n  ReactNode,\n  useContext,\n} from 'react'\nimport styled from 'styled-components'\nimport { BannerItem } from './BannerItem'\nimport { CreateBanner, Banner, BannerContextType } from './types'\n\nexport const BannerContext = createContext<BannerContextType>({\n  addBanner: () => {\n    throw new Error('Please add the BannerContainer to your application')\n  },\n})\n\nexport const useBannerContext = () => useContext(BannerContext)\n\nexport const BannerContainer: FC<{ children?: ReactNode }> = ({ children }) => {\n  let bannerId = 0\n  const [banner, setBanner] = useState<Banner[]>([])\n\n  // create banner unique ID\n  const newBannerId = useCallback(() => {\n    const newId = `MM_BANNER_${bannerId}`\n    bannerId++\n    return newId\n  }, [bannerId])\n\n  const addBanner = (banner: CreateBanner) => {\n    const newBanner = {\n      ...banner,\n      id: newBannerId(),\n    }\n    setBanner([newBanner])\n  }\n\n  const deleteBanner = (id: string) => {\n    setBanner(banner.filter((banner) => banner.id !== id))\n  }\n\n  return (\n    <BannerContext.Provider\n      value={{\n        addBanner,\n      }}\n    >\n      {children}\n      <BannerWrapper>\n        {banner.map((banner) => (\n          <BannerItem key={banner.id} {...banner} deleteBanner={deleteBanner} />\n        ))}\n      </BannerWrapper>\n    </BannerContext.Provider>\n  )\n}\n\nconst BannerWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 99;\n`\n"]}

package/dist/Banner/BannerItem.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Banner } from './types';
+interface Props extends Banner {
+    deleteBanner: (id: string) => void;
+}
+export declare const BannerItem: FC<Props>;
+export {};