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

package/dist/SearchInput/components/EmptyResults.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    onNotFound?: (searchTerm: string) => void;
+    searchTerm: string;
+    notFoundComponent?: ReactNode;
+}
+export declare const EmptyResults: FC<Props>;
+export {};

package/dist/SearchInput/components/EmptyResults.js

@@ -0,0 +1,11 @@
+import React, { useEffect } from 'react';
+export const EmptyResults = ({ onNotFound, searchTerm, notFoundComponent, }) => {
+    useEffect(() => {
+        onNotFound?.(searchTerm);
+    }, []);
+    if (notFoundComponent) {
+        return React.createElement("li", null, notFoundComponent);
+    }
+    return React.createElement("li", null, "No results");
+};
+//# sourceMappingURL=EmptyResults.js.map

package/dist/SearchInput/components/EmptyResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyResults.js","sourceRoot":"","sources":["../../../src/SearchInput/components/EmptyResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAQvD,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,UAAU,EACV,UAAU,EACV,iBAAiB,GAClB,EAAE,EAAE;IACH,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,EAAE,CAAC,UAAU,CAAC,CAAA;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IAAI,iBAAiB,EAAE,CAAC;QACtB,OAAO,gCAAK,iBAAiB,CAAM,CAAA;IACrC,CAAC;IAED,OAAO,6CAAmB,CAAA;AAC5B,CAAC,CAAA","sourcesContent":["import React, { FC, ReactNode, useEffect } from 'react'\n\ninterface Props {\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const EmptyResults: FC<Props> = ({\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  useEffect(() => {\n    onNotFound?.(searchTerm)\n  }, [])\n\n  if (notFoundComponent) {\n    return <li>{notFoundComponent}</li>\n  }\n\n  return <li>No results</li>\n}\n"]}

package/dist/SearchInput/components/SearchOptions.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+type Option = {
+    label: string;
+    value: string;
+};
+type SearchOptionsProps = {
+    displayedList: Array<Option>;
+    selectedValue: string | null;
+    highlightedIndex: number;
+    setHighlightedIndex: (arg: number) => void;
+    onSelect: (option: Option) => void;
+    onKeyDown: (e: {
+        key: string;
+        preventDefault: () => void;
+    }) => void;
+    positionRelative: boolean;
+    resultsBorder: boolean;
+    onNotFound?: (searchTerm: string) => void;
+    searchTerm: string;
+    notFoundComponent?: ReactNode;
+};
+export declare const SearchOptions: FC<SearchOptionsProps>;
+export {};

package/dist/SearchInput/components/SearchOptions.js

@@ -0,0 +1,96 @@
+import React, { createRef, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../../Box';
+import { Icon } from '../../Icon';
+import { theme } from '../../theme';
+import { EmptyResults } from './EmptyResults';
+export const SearchOptions = ({ displayedList, selectedValue, highlightedIndex, setHighlightedIndex, onSelect, onKeyDown, positionRelative, resultsBorder, onNotFound, searchTerm, notFoundComponent, }) => {
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        itemRefs.current = displayedList.map((_, i) => itemRefs.current[i] ?? createRef());
+    }, [displayedList.length]);
+    useEffect(() => {
+        const focusedListItem = itemRefs?.current[highlightedIndex]?.current;
+        if (highlightedIndex >= 0 && focusedListItem) {
+            focusedListItem.scrollIntoView({
+                block: 'nearest',
+                inline: 'start',
+            });
+        }
+    }, [highlightedIndex]);
+    return (React.createElement(BoxWithPositionRelative, null,
+        React.createElement(StyledResultsContainer, { "$positionRelative": positionRelative },
+            React.createElement(ResultsList, { "$resultsBorder": resultsBorder, onKeyDown: onKeyDown }, displayedList.length ? (displayedList.map((el, i) => {
+                const isSelected = selectedValue === el.label || selectedValue === el.value;
+                return (React.createElement(ListButton, { key: el.label + '_list_item', "aria-label": el.label + '_list_item', ref: itemRefs.current[i], onClick: () => onSelect(el), "$isSelected": isSelected, "$showBg": highlightedIndex === i, onMouseEnter: () => {
+                        setHighlightedIndex(i);
+                    }, onFocus: () => {
+                        setHighlightedIndex(i);
+                    } },
+                    el.label,
+                    isSelected && (React.createElement(Icon, { render: "tick", size: 16, color: "marshmallowPink" }))));
+            })) : (React.createElement(EmptyResults, { onNotFound: onNotFound, searchTerm: searchTerm, notFoundComponent: notFoundComponent }))))));
+};
+const StyledResultsContainer = styled.div `
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: -16px;
+  padding: 16px;
+  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}
+  width:  calc(100% + 32px);
+  left: 0px;
+  top: -8px;
+
+  ul {
+    max-height: 192px;
+  }
+`;
+const ResultsList = styled.ul `
+  position: relative;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
+  background-color: ${theme.colors.cream};
+  border-radius: 12px;
+  margin-top: 14px;
+  z-index: 1000;
+  border: 1px solid ${theme.colors.oatmeal};
+  box-shadow:
+    0px 10px 18px rgba(18, 18, 23, 0.03),
+    0px 5px 8px rgba(18, 18, 23, 0.04),
+    0px 2px 4px rgba(18, 18, 23, 0.04);
+
+  li {
+    padding: 16px 14px;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: ${theme.colors.liquorice};
+    cursor: pointer;
+  }
+`;
+const ListButton = styled.li `
+  display: flex;
+  justify-content: space-between;
+
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({ $showBg }) => $showBg &&
+    css `
+      background-color: ${theme.colors.mascarpone};
+    `}
+
+  ${({ $isSelected }) => $isSelected &&
+    css `
+      background-color: ${theme.colors.custard};
+    `}
+`;
+const BoxWithPositionRelative = styled(Box) `
+  position: relative;
+`;
+//# sourceMappingURL=SearchOptions.js.map

package/dist/SearchInput/components/SearchOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, createRef, useEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { theme } from '../../theme'\nimport { EmptyResults } from './EmptyResults'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  selectedValue: string | null\n  highlightedIndex: number\n  setHighlightedIndex: (arg: number) => void\n  onSelect: (option: Option) => void\n  onKeyDown: (e: { key: string; preventDefault: () => void }) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  selectedValue,\n  highlightedIndex,\n  setHighlightedIndex,\n  onSelect,\n  onKeyDown,\n  positionRelative,\n  resultsBorder,\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  const itemRefs = useRef<React.RefObject<HTMLLIElement | null>[]>([])\n\n  useEffect(() => {\n    itemRefs.current = displayedList.map(\n      (_, i) => itemRefs.current[i] ?? createRef<HTMLLIElement>(),\n    )\n  }, [displayedList.length])\n\n  useEffect(() => {\n    const focusedListItem = itemRefs?.current[highlightedIndex]?.current\n    if (highlightedIndex >= 0 && focusedListItem) {\n      focusedListItem.scrollIntoView({\n        block: 'nearest',\n        inline: 'start',\n      })\n    }\n  }, [highlightedIndex])\n\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer $positionRelative={positionRelative}>\n        <ResultsList $resultsBorder={resultsBorder} onKeyDown={onKeyDown}>\n          {displayedList.length ? (\n            displayedList.map((el, i) => {\n              const isSelected =\n                selectedValue === el.label || selectedValue === el.value\n\n              return (\n                <ListButton\n                  key={el.label + '_list_item'}\n                  aria-label={el.label + '_list_item'}\n                  ref={itemRefs.current[i]}\n                  onClick={() => onSelect(el)}\n                  $isSelected={isSelected}\n                  $showBg={highlightedIndex === i}\n                  onMouseEnter={() => {\n                    setHighlightedIndex(i)\n                  }}\n                  onFocus={() => {\n                    setHighlightedIndex(i)\n                  }}\n                >\n                  {el.label}\n                  {isSelected && (\n                    <Icon render=\"tick\" size={16} color=\"marshmallowPink\" />\n                  )}\n                </ListButton>\n              )\n            })\n          ) : (\n            <EmptyResults\n              onNotFound={onNotFound}\n              searchTerm={searchTerm}\n              notFoundComponent={notFoundComponent}\n            />\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  TransientProps<Pick<SearchOptionsProps, 'positionRelative'>>\n>`\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: -16px;\n  padding: 16px;\n  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}\n  width:  calc(100% + 32px);\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<\n  TransientProps<Pick<SearchOptionsProps, 'resultsBorder'>>\n>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${theme.colors.cream};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  border: 1px solid ${theme.colors.oatmeal};\n  box-shadow:\n    0px 10px 18px rgba(18, 18, 23, 0.03),\n    0px 5px 8px rgba(18, 18, 23, 0.04),\n    0px 2px 4px rgba(18, 18, 23, 0.04);\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${theme.colors.liquorice};\n    cursor: pointer;\n  }\n`\n\nconst ListButton = styled.li<{ $isSelected: boolean; $showBg: boolean }>`\n  display: flex;\n  justify-content: space-between;\n\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${({ $showBg }) =>\n    $showBg &&\n    css`\n      background-color: ${theme.colors.mascarpone};\n    `}\n\n  ${({ $isSelected }) =>\n    $isSelected &&\n    css`\n      background-color: ${theme.colors.custard};\n    `}\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"]}

package/dist/SearchInput/index.d.ts

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

package/dist/SearchInput/index.js

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

package/dist/SearchInput/index.js.map

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

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+import { Color } from '../theme';
+import React from 'react';
+export type SegmentedControlOption<T = string | number> = {
+    label: string;
+    /** value needs to be number or string */
+    value: T;
+    /** optional tag able to show in the toggle if showTag prop is passed */
+    tag?: string;
+    isDisabled?: boolean;
+};
+type StylingOptions = {
+    toggle?: Color;
+    background?: Color;
+    text?: Color;
+    selectedText?: Color;
+    tagBg?: Color;
+    tagBorder?: Color;
+    tagText?: Color;
+};
+export type SegmentedControlProps<T> = {
+    /** you can pass more than 2 options */
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /**  pass this prop if you want to show the tag in the toggle */
+    showTag?: boolean;
+    /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */
+    styles?: StylingOptions;
+};
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, }, }: SegmentedControlProps<T>) => React.JSX.Element;
+export {};

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { Tag } from '../Tag';
+import { Text } from '../Text';
+import React from 'react';
+import { ToggleButton } from './ToggleButton';
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export const SegmentedControl = ({ options, value, onChange, showTag, styles: { tagBorder = 'marshmallowPink', tagText = 'cream', tagBg = 'marshmallowPink', selectedText = 'cream', text = 'liquorice', background, toggle, } = {}, }) => {
+    return (React.createElement(ToggleWrapper, { backgroundColor: background },
+        React.createElement(IndicatorWrapper, { backgroundColor: background },
+            options.map((option) => {
+                return (React.createElement(ToggleButton, { key: option.label, name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: option.value === value, isDisabled: option.isDisabled },
+                    React.createElement(StyledWrapper, null,
+                        showTag && option.tag && (React.createElement(StyledTag, { bgColor: tagBg, borderColor: tagBorder, color: tagText, label: option.tag })),
+                        React.createElement(StyledText, { isSelected: option.value === value, selectedTextColor: selectedText, color: text }, option.label))));
+            }),
+            React.createElement(ToggleIndicator, { selectedIndex: options.findIndex((option) => option.value === value), sections: options.length, toggleColor: toggle }))));
+};
+const BORDER_RADIUS = 25;
+const StyledWrapper = styled(Box) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+const StyledTag = styled(Tag) `
+  border-radius: 100px;
+`;
+const StyledText = styled(Text) `
+  font-weight: ${theme.font.weight.medium};
+  ${({ isSelected, selectedTextColor }) => isSelected && `color: ${theme.colors[selectedTextColor]};`}
+  padding: 2px 0px;
+`;
+const ToggleWrapper = styled(Box) `
+  padding: 4px;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const IndicatorWrapper = styled(Box) `
+  position: relative;
+  display: flex;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const ToggleIndicator = styled(Box) `
+  background-color: ${(p) => theme.colors[p.toggleColor ?? 'liquorice']};
+  border-radius: ${BORDER_RADIUS}px;
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: ${(p) => `calc(100% / ${p.sections})`};
+  transition: transform 0.4s;
+  transform: ${(p) => `translateX(${p.selectedIndex * 100}%)`};
+`;
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components'\n\nimport { Color, theme } from '../theme'\nimport { Box } from '../Box'\nimport { Tag } from '../Tag'\nimport { Text } from '../Text'\nimport React from 'react'\nimport { ToggleButton } from './ToggleButton'\n\nexport type SegmentedControlOption<T = string | number> = {\n  label: string\n  /** value needs to be number or string */\n  value: T\n  /** optional tag able to show in the toggle if showTag prop is passed */\n  tag?: string\n  isDisabled?: boolean\n}\n\ntype StylingOptions = {\n  toggle?: Color\n  background?: Color\n  text?: Color\n  selectedText?: Color\n  tagBg?: Color\n  tagBorder?: Color\n  tagText?: Color\n}\n\nexport type SegmentedControlProps<T> = {\n  /** you can pass more than 2 options */\n  options: SegmentedControlOption<T>[]\n  value: T\n  onChange: (value: T) => void\n  /**  pass this prop if you want to show the tag in the toggle */\n  showTag?: boolean\n  /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */\n  styles?: StylingOptions\n}\n\n/**\n * ### How do I pass state to the `SegmentedControl` component?\n * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component\n */\nexport const SegmentedControl = <T,>({\n  options,\n  value,\n  onChange,\n  showTag,\n  styles: {\n    tagBorder = 'marshmallowPink',\n    tagText = 'cream',\n    tagBg = 'marshmallowPink',\n    selectedText = 'cream',\n    text = 'liquorice',\n    background,\n    toggle,\n  } = {},\n}: SegmentedControlProps<T>) => {\n  return (\n    <ToggleWrapper backgroundColor={background}>\n      <IndicatorWrapper backgroundColor={background}>\n        {options.map((option) => {\n          return (\n            <ToggleButton\n              key={option.label}\n              name=\"toggle-version-button\"\n              value={option.value}\n              onChange={onChange}\n              isSelected={option.value === value}\n              isDisabled={option.isDisabled}\n            >\n              <StyledWrapper>\n                {showTag && option.tag && (\n                  <StyledTag\n                    bgColor={tagBg}\n                    borderColor={tagBorder}\n                    color={tagText}\n                    label={option.tag}\n                  />\n                )}\n                <StyledText\n                  isSelected={option.value === value}\n                  selectedTextColor={selectedText}\n                  color={text}\n                >\n                  {option.label}\n                </StyledText>\n              </StyledWrapper>\n            </ToggleButton>\n          )\n        })}\n\n        <ToggleIndicator\n          selectedIndex={options.findIndex((option) => option.value === value)}\n          sections={options.length}\n          toggleColor={toggle}\n        />\n      </IndicatorWrapper>\n    </ToggleWrapper>\n  )\n}\n\nconst BORDER_RADIUS = 25\n\nconst StyledWrapper = styled(Box)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n`\n\nconst StyledTag = styled(Tag)`\n  border-radius: 100px;\n`\n\nconst StyledText = styled(Text)<{\n  isSelected: boolean\n  selectedTextColor: Color\n}>`\n  font-weight: ${theme.font.weight.medium};\n  ${({ isSelected, selectedTextColor }) =>\n    isSelected && `color: ${theme.colors[selectedTextColor]};`}\n  padding: 2px 0px;\n`\n\nconst ToggleWrapper = styled(Box)<{ backgroundColor?: Color }>`\n  padding: 4px;\n  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};\n  border-radius: ${BORDER_RADIUS}px;\n`\n\nconst IndicatorWrapper = styled(Box)<{ backgroundColor?: Color }>`\n  position: relative;\n  display: flex;\n  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};\n  border-radius: ${BORDER_RADIUS}px;\n`\n\nconst ToggleIndicator = styled(Box)<{\n  selectedIndex: number\n  sections: number\n  toggleColor?: Color\n}>`\n  background-color: ${(p) => theme.colors[p.toggleColor ?? 'liquorice']};\n  border-radius: ${BORDER_RADIUS}px;\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n  width: ${(p) => `calc(100% / ${p.sections})`};\n  transition: transform 0.4s;\n  transform: ${(p) => `translateX(${p.selectedIndex * 100}%)`};\n`\n"]}

package/dist/SegmentedControl/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+type ToggleButtonProps<Value> = {
+    name: string;
+    value: Value;
+    onChange: (value: Value) => void;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    children: ReactNode;
+};
+export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => React.JSX.Element;
+export {};

package/dist/SegmentedControl/ToggleButton.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
+    return (React.createElement(Wrapper, { as: "label", "data-testId": `value-toggle-${String(value)}`, isDisabled: isDisabled },
+        React.createElement(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }),
+        children));
+};
+const Wrapper = styled(Box) `
+  cursor: pointer;
+  ${({ isDisabled }) => isDisabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+  padding: 10px 14px;
+  transition: color 0.1s linear;
+  height: fit-content;
+  width: 100%;
+  align-content: center;
+  z-index: 3;
+`;
+const VisuallyHiddenInput = styled.input `
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+//# sourceMappingURL=ToggleButton.js.map

package/dist/SegmentedControl/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,EAC5C,UAAU,EAAE,UAAU;QAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n  name: string\n  value: Value\n  onChange: (value: Value) => void\n  isSelected: boolean\n  isDisabled?: boolean\n  children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n  name,\n  value,\n  onChange,\n  isSelected,\n  isDisabled = false,\n  children,\n}: ToggleButtonProps<Value>) => {\n  return (\n    <Wrapper\n      as=\"label\"\n      data-testId={`value-toggle-${String(value)}`}\n      isDisabled={isDisabled}\n    >\n      <VisuallyHiddenInput\n        type=\"radio\"\n        name={name}\n        checked={isSelected}\n        onClick={() => onChange(value)}\n        onChange={() => onChange(value)}\n      />\n      {children}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<{ isDisabled: boolean }>`\n  cursor: pointer;\n  ${({ isDisabled }) =>\n    isDisabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.5;\n    `}\n  padding: 10px 14px;\n  transition: color 0.1s linear;\n  height: fit-content;\n  width: 100%;\n  align-content: center;\n  z-index: 3;\n`\n\nconst VisuallyHiddenInput = styled.input`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n"]}

package/dist/SegmentedControl/index.d.ts

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

package/dist/SegmentedControl/index.js

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

package/dist/SegmentedControl/index.js.map

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

package/dist/SliderInput/SliderInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MarginProps } from '../utils/space';
+export declare const SliderInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & MarginProps & {
+    onChange: (value: number) => void;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/SliderInput/SliderInput.js

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { margin } from '../utils/space';
+export const SliderInput = forwardRef(function SliderInput({ value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest }, ref) {
+    return (React.createElement(StyledSlider, { ref: ref, type: "range", min: min, max: max, step: step, value: value, onChange: (event) => {
+            onChange(event.target.valueAsNumber);
+        }, "$m": m, "$mx": mx, "$my": my, "$ml": ml, "$mr": mr, "$mt": mt, "$mb": mb, ...rest }));
+});
+const StyledSlider = styled.input `
+  outline: 0;
+  border: 0;
+  padding: 0;
+  border-radius: 500px;
+  width: 100%;
+  //guard rail as we have a hard coded limit on progress bar length
+  max-width: 2000px;
+  transition: box-shadow 0.2s ease-in-out;
+  background: ${theme.colors.coconut};
+  ${margin};
+
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
+    overflow: hidden;
+    height: 44px;
+    -webkit-appearance: none;
+
+    &::-webkit-slider-runnable-track {
+      height: 44px;
+      -webkit-appearance: none;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+    &::-webkit-slider-thumb {
+      width: 44px;
+      -webkit-appearance: none;
+      height: 44px;
+      cursor: ew-resize;
+      background: ${theme.colors.coconut};
+      box-shadow:
+      //handles the progress bar
+        -1000px 0 0 980px ${theme.colors.marshmallowPink},
+        //added for the focus anim
+        inset 0 0 0 44px ${theme.colors.lollipop};
+      border-radius: 50%;
+      transition: box-shadow 0.2s ease-in-out;
+      position: relative;
+    }
+    &:active::-webkit-slider-thumb,
+    &:focus::-webkit-slider-thumb {
+      background: ${theme.colors.coconut};
+      box-shadow:
+        -1000px 0 0 980px ${theme.colors.marshmallowPink},
+        inset 0 0 0 4px ${theme.colors.lollipop};
+    }
+  }
+`;
+//# sourceMappingURL=SliderInput.js.map

package/dist/SliderInput/SliderInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,MAAM,EAAqC,MAAM,gBAAgB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACvE,GAAG;IAEH,OAAO,CACL,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC,QACG,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,KACH,IAAI,GACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;gBASvC,KAAK,CAAC,MAAM,CAAC,OAAO;IAChC,MAAM;;;;;;;;;;;;;;;;;oBAiBU,KAAK,CAAC,MAAM,CAAC,OAAO;;;4BAGZ,KAAK,CAAC,MAAM,CAAC,eAAe;;2BAE7B,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;oBAO5B,KAAK,CAAC,MAAM,CAAC,OAAO;;4BAEZ,KAAK,CAAC,MAAM,CAAC,eAAe;0BAC9B,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAG9C,CAAA","sourcesContent":["import React, { forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { theme } from '../theme'\nimport { margin, MarginProps, TransientMarginProps } from '../utils/space'\n\ntype SliderProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'onChange'\n> &\n  MarginProps & {\n    onChange: (value: number) => void\n    value: number\n    min?: number\n    max?: number\n    step?: number\n  }\n\nexport const SliderInput = forwardRef<HTMLInputElement, SliderProps>(\n  function SliderInput(\n    { value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest },\n    ref,\n  ) {\n    return (\n      <StyledSlider\n        ref={ref}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(event) => {\n          onChange(event.target.valueAsNumber)\n        }}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        {...rest}\n      />\n    )\n  },\n)\n\nconst StyledSlider = styled.input<TransientMarginProps>`\n  outline: 0;\n  border: 0;\n  padding: 0;\n  border-radius: 500px;\n  width: 100%;\n  //guard rail as we have a hard coded limit on progress bar length\n  max-width: 2000px;\n  transition: box-shadow 0.2s ease-in-out;\n  background: ${theme.colors.coconut};\n  ${margin};\n\n  @media screen and (-webkit-min-device-pixel-ratio: 0) {\n    overflow: hidden;\n    height: 44px;\n    -webkit-appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      height: 44px;\n      -webkit-appearance: none;\n      transition: box-shadow 0.2s ease-in-out;\n    }\n    &::-webkit-slider-thumb {\n      width: 44px;\n      -webkit-appearance: none;\n      height: 44px;\n      cursor: ew-resize;\n      background: ${theme.colors.coconut};\n      box-shadow:\n      //handles the progress bar\n        -1000px 0 0 980px ${theme.colors.marshmallowPink},\n        //added for the focus anim\n        inset 0 0 0 44px ${theme.colors.lollipop};\n      border-radius: 50%;\n      transition: box-shadow 0.2s ease-in-out;\n      position: relative;\n    }\n    &:active::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      background: ${theme.colors.coconut};\n      box-shadow:\n        -1000px 0 0 980px ${theme.colors.marshmallowPink},\n        inset 0 0 0 4px ${theme.colors.lollipop};\n    }\n  }\n`\n"]}

package/dist/SliderInput/index.d.ts

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

package/dist/SliderInput/index.js

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

package/dist/SliderInput/index.js.map

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

package/dist/Snackbar/SnackbarContainer.d.ts

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

package/dist/Snackbar/SnackbarContainer.js

@@ -0,0 +1,45 @@
+import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
+import styled from 'styled-components';
+import { SnackbarItem } from './SnackbarItem';
+export const SnackbarContext = createContext({
+    addSnackbar: () => {
+        throw new Error('Please add the SnackbarContainer to your application');
+    },
+});
+export const useSnackbarContext = () => useContext(SnackbarContext);
+export const SnackbarContainer = ({ children, }) => {
+    const snackbarIdRef = useRef(0);
+    const [snackbars, setSnackbars] = useState([]);
+    // create snackbar unique ID
+    const newSnackId = useCallback(() => {
+        const newId = `MM_SNACKBAR_${snackbarIdRef.current}`;
+        snackbarIdRef.current = +1;
+        return newId;
+    }, []);
+    const addSnackbar = useCallback((snackbar) => {
+        const newSnack = {
+            ...snackbar,
+            id: newSnackId(),
+        };
+        setSnackbars([...snackbars, newSnack]);
+    }, []);
+    const deleteSnackbar = (id) => {
+        setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
+    };
+    return (React.createElement(SnackbarContext.Provider, { value: {
+            addSnackbar,
+        } },
+        children,
+        React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar }))))));
+};
+const SnackbarWrapper = styled.div `
+  position: fixed;
+  bottom: 35px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 90%;
+  max-width: 875px;
+  z-index: 1000;
+`;
+//# sourceMappingURL=SnackbarContainer.js.map

package/dist/Snackbar/SnackbarContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,EAC9D,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ;QAEA,QAAQ;QACT,oBAAC,eAAe,QACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,QAAQ,CAAC,EAAE,KACZ,QAAQ,EACZ,WAAW,EAAE,cAAc,GAC3B,CACH,CAAC,CACc,CACO,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import React, {\n  createContext,\n  FC,\n  ReactNode,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport { CreateSnack, Snackbar, SnackbarContextType } from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n  addSnackbar: () => {\n    throw new Error('Please add the SnackbarContainer to your application')\n  },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<{ children?: ReactNode }> = ({\n  children,\n}) => {\n  const snackbarIdRef = useRef(0)\n  const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n  // create snackbar unique ID\n  const newSnackId = useCallback(() => {\n    const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n    snackbarIdRef.current = +1\n    return newId\n  }, [])\n\n  const addSnackbar = useCallback((snackbar: CreateSnack) => {\n    const newSnack = {\n      ...snackbar,\n      id: newSnackId(),\n    }\n    setSnackbars([...snackbars, newSnack])\n  }, [])\n\n  const deleteSnackbar = (id: string) => {\n    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n  }\n\n  return (\n    <SnackbarContext.Provider\n      value={{\n        addSnackbar,\n      }}\n    >\n      {children}\n      <SnackbarWrapper>\n        {snackbars.map((snackbar) => (\n          <SnackbarItem\n            key={snackbar.id}\n            {...snackbar}\n            deleteSnack={deleteSnackbar}\n          />\n        ))}\n      </SnackbarWrapper>\n    </SnackbarContext.Provider>\n  )\n}\n\nconst SnackbarWrapper = styled.div`\n  position: fixed;\n  bottom: 35px;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 90%;\n  max-width: 875px;\n  z-index: 1000;\n`\n"]}

package/dist/Snackbar/SnackbarItem.d.ts

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

package/dist/Snackbar/SnackbarItem.js

@@ -0,0 +1,26 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { useTimeout } from '../hooks';
+export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
+    useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
+    return (React.createElement(SnackItem, { p: "16px", key: id, mt: "16px", flex: true, justifyContent: "space-between" },
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "mascarpone" })),
+            React.createElement(Text, { typo: "desc-small", color: "mascarpone" }, message)),
+        canManuallyClose && (React.createElement(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: "mascarpone" })) : (React.createElement(UnderlinedText, { tag: "span", typo: "desc-medium", color: "mascarpone" }, "Dismiss"))))));
+};
+const SnackItem = styled(Box) `
+  border-radius: 16px;
+  background-color: ${theme.colors.liquorice};
+`;
+const CloseButton = styled.button `
+  cursor: pointer;
+`;
+const UnderlinedText = styled(Text) `
+  text-decoration: underline;
+`;
+//# sourceMappingURL=SnackbarItem.js.map

package/dist/Snackbar/SnackbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAMrC,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe;QACxE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,OAAO,CACH,CACH;QACL,gBAAgB,IAAI,CACnB,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,IAEtC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,cAE/C,CAClB,CACW,CACf,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,KAAK,CAAC,MAAM,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { Box } from '../Box'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '../Icon'\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\nimport { useTimeout } from '../hooks'\n\ninterface Props extends Snackbar {\n  deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n  autoCloseTime = 4,\n  id,\n  message,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteSnack,\n}) => {\n  useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n  return (\n    <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color=\"mascarpone\" />\n        )}\n        <Text typo=\"desc-small\" color=\"mascarpone\">\n          {message}\n        </Text>\n      </Box>\n      {canManuallyClose && (\n        <CloseButton\n          onClick={() => deleteSnack(id)}\n          aria-label={`close snackbar ${message}`}\n        >\n          {showCloseIcon ? (\n            <Icon render=\"cross\" size={16} color=\"mascarpone\" />\n          ) : (\n            <UnderlinedText tag=\"span\" typo=\"desc-medium\" color=\"mascarpone\">\n              Dismiss\n            </UnderlinedText>\n          )}\n        </CloseButton>\n      )}\n    </SnackItem>\n  )\n}\n\nconst SnackItem = styled(Box)`\n  border-radius: 16px;\n  background-color: ${theme.colors.liquorice};\n`\n\nconst CloseButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}

package/dist/Snackbar/hooks.d.ts

@@ -0,0 +1,3 @@
+export declare const useSnackbar: () => {
+    addSnackbar: (snackbar: import("./types").CreateSnack) => void;
+};

package/dist/Snackbar/hooks.js

@@ -0,0 +1,6 @@
+import { useSnackbarContext } from './SnackbarContainer';
+export const useSnackbar = () => {
+    const { addSnackbar } = useSnackbarContext();
+    return { addSnackbar };
+};
+//# sourceMappingURL=hooks.js.map

package/dist/Snackbar/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/Snackbar/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,EAAE,WAAW,EAAE,CAAA;AACxB,CAAC,CAAA","sourcesContent":["import { useSnackbarContext } from './SnackbarContainer'\n\nexport const useSnackbar = () => {\n  const { addSnackbar } = useSnackbarContext()\n\n  return { addSnackbar }\n}\n"]}

package/dist/Snackbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SnackbarContainer';
+export * from './hooks';

package/dist/Snackbar/index.js

@@ -0,0 +1,3 @@
+export * from './SnackbarContainer';
+export * from './hooks';
+//# sourceMappingURL=index.js.map

package/dist/Snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Snackbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA","sourcesContent":["export * from './SnackbarContainer'\nexport * from './hooks'\n"]}

package/dist/Snackbar/types.d.ts

@@ -0,0 +1,13 @@
+import { Icons } from '../Icon/iconsList';
+export interface Snackbar {
+    id: string;
+    message: string;
+    autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10;
+    leadingIcon?: Icons;
+    canManuallyClose?: boolean;
+    showCloseIcon?: boolean;
+}
+export type CreateSnack = Omit<Snackbar, 'id'>;
+export interface SnackbarContextType {
+    addSnackbar: (snackbar: CreateSnack) => void;
+}

package/dist/Snackbar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Snackbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\n\nexport interface Snackbar {\n  id: string\n  message: string\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n  addSnackbar: (snackbar: CreateSnack) => void\n}\n"]}

package/dist/SupportMessage/SupportMessage.d.ts

@@ -0,0 +1,16 @@
+import { FC, MouseEventHandler, ReactElement } from 'react';
+import { MarginProps } from '../utils/space';
+type SupportMessageType = 'info' | 'fallbackStyle' | 'alert' | 'warning' | 'success';
+export type SupportMessageProps = {
+    className?: string;
+    description: string | ReactElement<any>;
+    onClick?: MouseEventHandler;
+    /**
+     * Right side content, usually an icon or a button
+     */
+    rightSideComponent?: ReactElement<any>;
+    type: SupportMessageType;
+    title?: string;
+} & MarginProps;
+export declare const SupportMessage: FC<SupportMessageProps>;
+export {};