@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/theme.js

@@ -1,92 +0,0 @@
-const colors = {
-  // Core Primary
-  lollipop: "#FF69B5",
-  // 120
-  marshmallowPink: "#FF88C8",
-  // 100
-  bubblegum: "#FFB3DA",
-  // 60
-  fairyFloss: "#FFCCE7",
-  // 40
-  // Core Secondary
-  boba: "#0E0E0C",
-  // 120
-  liquorice: "#292924",
-  // 100
-  sesame: "#636768",
-  // 60
-  chia: "#D2D2D2",
-  // 40
-  // Core Tertiary
-  custard: "#F1E9DC",
-  // 120
-  mascarpone: "#F8F2EA",
-  // 100
-  coconut: "#FBF8F5",
-  // 60
-  cream: "#FFFFFF",
-  // 0
-  // Brand Secondary
-  spearmint: "#294636",
-  // 1 100
-  feijoa: "#3B5848",
-  // 1 60
-  blueberry: "#89A2B6",
-  // 2 100
-  macaroon: "#BBCFDF",
-  // 2 60
-  pistachio: "#838E49",
-  // 3 100
-  matcha: "#DBE1B0",
-  // 3 60
-  caramel: "#C26B2A",
-  // 4 100
-  peanut: "#F8C699",
-  // 4 60
-  marzipan: "#A1957C",
-  // 5 100
-  oatmeal: "#DAD2C4",
-  // 5 60
-  // Traffic light
-  strawberry: "#DF2929",
-  // Error 100
-  watermelon: "#F5CFCC",
-  // Error 20
-  apple: "#008933",
-  // Success 100
-  mint: "#C9E2CE",
-  // Success 20
-  lemon: "#FFD23A",
-  // Warning 100
-  sherbert: "#FCF0D0",
-  // Warning 20
-  tangerine: "#FF9F2C",
-  // Agent Warning 100
-  // Third-party brand colours
-  compareTheMarket: "#004A8E",
-  confused: "#000A8C",
-  onfido: "#3640F5",
-  twitter: "#55ACEE",
-  premfina: "#F08422",
-  checkout: "#56AC88",
-  facebook: "#3B5998",
-  stripe: "#6772E5",
-  intercom: "#286EFA",
-  ravelin: "#2A4AFC",
-  rac: "#EA7D24",
-  hometree: "#17171C"
-};
-const font = {
-  weight: {
-    normal: 400,
-    medium: 500,
-    bold: 700
-  },
-  system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-};
-const theme = {
-  colors,
-  font
-};
-
-export { theme };

package/dist/utils/date.js

@@ -1,10 +0,0 @@
-const ukTimeFormat = new Intl.DateTimeFormat("en-GB", {
-  timeZone: "Europe/London"
-});
-const convertToUkDate = (date) => {
-  const dateString = ukTimeFormat.format(date);
-  const [day, month, year] = dateString.split("/");
-  return new Date(Number(year), Number(month) - 1, Number(day));
-};
-
-export { convertToUkDate };

package/dist/utils/debounce.js

@@ -1,14 +0,0 @@
-const debounce = (fn, delay) => {
-  let timeout;
-  return (...args) => {
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(() => {
-      fn(...args);
-      timeout = void 0;
-    }, delay);
-  };
-};
-
-export { debounce };

package/dist/utils/flex.js

@@ -1,49 +0,0 @@
-import { resolveResponsiveProp } from './responsiveProp.js';
-import { resolveSpacing } from './space.js';
-
-const flex = (props) => {
-  const {
-    flex: flex2,
-    direction,
-    wrap,
-    flow,
-    justifyContent,
-    alignItems,
-    alignContent,
-    gap,
-    columnGap,
-    rowGap
-  } = props;
-  return `
-    ${flex2 ? `display: flex;` : ""}
-    ${direction ? resolveResponsiveProp(
-    direction,
-    (value) => `flex-direction: ${value};`
-  ) : ""}
-    ${wrap ? `flex-wrap: ${wrap};` : ""}
-    ${flow ? `flex-flow: ${flow};` : ""}
-    ${justifyContent ? resolveResponsiveProp(
-    justifyContent,
-    (value) => `justify-content: ${value};`
-  ) : ""}
-    ${alignItems ? resolveResponsiveProp(alignItems, (value) => `align-items: ${value};`) : ""}
-    ${alignContent ? resolveResponsiveProp(
-    alignContent,
-    (value) => `align-content: ${value};`
-  ) : ""}
-    ${gap ? resolveResponsiveProp(
-    gap,
-    (value) => `gap: ${resolveSpacing(value)};`
-  ) : ""}
-    ${columnGap ? resolveResponsiveProp(
-    columnGap,
-    (value) => `column-gap: ${resolveSpacing(value)};`
-  ) : ""}
-    ${rowGap ? resolveResponsiveProp(
-    rowGap,
-    (value) => `row-gap: ${resolveSpacing(value)};`
-  ) : ""}
-  `;
-};
-
-export { flex };

package/dist/utils/focusOutline.js

@@ -1,21 +0,0 @@
-import { css } from 'styled-components';
-import { theme } from '../theme.js';
-
-const focusOutline = ({
-  selector = "&:focus-visible"
-} = {}) => css`
-  outline: 0;
-
-  ${selector} {
-    outline: 2px solid ${theme.colors.liquorice};
-    outline-offset: 2px;
-  }
-`;
-const focusOutlineStyle = css`
-  &:focus-visible {
-    outline: 2px solid ${theme.colors.liquorice};
-    outline-offset: 2px;
-  }
-`;
-
-export { focusOutline, focusOutlineStyle };

package/dist/utils/id.js

@@ -1,15 +0,0 @@
-import { useMemo } from 'react';
-
-let idCount = 0;
-const smoresIdPrefix = "MM_SMORES";
-const createId = () => {
-  const id = `${smoresIdPrefix}_${idCount}`;
-  idCount += 1;
-  return id;
-};
-const useUniqueId = (id) => {
-  const returnedId = useMemo(() => id || createId(), [id]);
-  return returnedId;
-};
-
-export { smoresIdPrefix, useUniqueId };

package/dist/utils/isReactElement.js

@@ -1,7 +0,0 @@
-import { isValidElement } from 'react';
-
-const isReactElement = (obj) => {
-  return isValidElement(obj);
-};
-
-export { isReactElement };

package/dist/utils/measure.js

@@ -1,13 +0,0 @@
-const measure = (props) => {
-  const { width, height, maxWidth, minWidth, minHeight, maxHeight } = props;
-  return `
-    ${width ? `width: ${width};` : ""}
-    ${maxWidth ? `max-width: ${maxWidth};` : ""}
-    ${minWidth ? `min-width: ${minWidth};` : ""}
-    ${height ? `height: ${height};` : ""}
-    ${minHeight ? `min-height: ${minHeight};` : ""}
-    ${maxHeight ? `max-height: ${maxHeight};` : ""}
-  `;
-};
-
-export { measure };

package/dist/utils/responsiveProp.js

@@ -1,30 +0,0 @@
-const breakpointToMinPxMapping = {
-  small: 0,
-  medium: 768,
-  large: 1024
-};
-const breakpointList = Object.keys(breakpointToMinPxMapping);
-const isPropByBreakpoint = (value) => {
-  return typeof value === "object" && value !== null && breakpointList.includes(Object.keys(value)[0]);
-};
-const resolveResponsiveProp = (value, styleTemplate) => {
-  if (!isPropByBreakpoint(value)) {
-    return `
-      @media (min-width: ${breakpointToMinPxMapping.small}px) {
-        ${styleTemplate(value)}
-      }
-    `;
-  }
-  const breakpointUsed = Object.keys(value);
-  let style = "";
-  breakpointUsed.forEach((breakpoint) => {
-    style += `
-        @media (min-width: ${breakpointToMinPxMapping[breakpoint]}px) {
-          ${styleTemplate(value[breakpoint])}
-        }
-      `;
-  });
-  return style;
-};
-
-export { resolveResponsiveProp };

package/dist/utils/space.js

@@ -1,91 +0,0 @@
-import { resolveResponsiveProp } from './responsiveProp.js';
-
-const resolveSpacing = (value) => {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value.custom === "string") {
-    return value.custom;
-  }
-  return `${value.custom}px`;
-};
-const margin = (props) => {
-  const { m, mx, my, ml, mr, mt, mb } = props;
-  return `
-    ${m ? resolveResponsiveProp(
-    m,
-    (value) => `margin: ${resolveSpacing(value)};`
-  ) : ""}
-    ${mx ? resolveResponsiveProp(
-    mx,
-    (value) => `
-        margin-left: ${resolveSpacing(value)};
-        margin-right: ${resolveSpacing(value)};
-      `
-  ) : ""}
-    ${my ? resolveResponsiveProp(
-    my,
-    (value) => `
-        margin-top: ${resolveSpacing(value)};
-        margin-bottom: ${resolveSpacing(value)};
-      `
-  ) : ""}
-    ${ml ? resolveResponsiveProp(
-    ml,
-    (value) => `margin-left: ${resolveSpacing(value)};`
-  ) : ""}
-    ${mr ? resolveResponsiveProp(
-    mr,
-    (value) => `margin-right: ${resolveSpacing(value)};`
-  ) : ""}
-    ${mt ? resolveResponsiveProp(
-    mt,
-    (value) => `margin-top: ${resolveSpacing(value)};`
-  ) : ""}
-    ${mb ? resolveResponsiveProp(
-    mb,
-    (value) => `margin-bottom: ${resolveSpacing(value)};`
-  ) : ""}
-  `;
-};
-const padding = (props) => {
-  const { p, px, py, pl, pr, pt, pb } = props;
-  return `
-    ${p ? resolveResponsiveProp(
-    p,
-    (value) => `padding: ${resolveSpacing(value)};`
-  ) : ""}
-    ${px ? resolveResponsiveProp(
-    px,
-    (value) => `
-        padding-left: ${resolveSpacing(value)};
-        padding-right: ${resolveSpacing(value)};
-      `
-  ) : ""}
-    ${py ? resolveResponsiveProp(
-    py,
-    (value) => `
-        padding-top: ${resolveSpacing(value)};
-        padding-bottom: ${resolveSpacing(value)};
-      `
-  ) : ""}
-    ${pl ? resolveResponsiveProp(
-    pl,
-    (value) => `padding-left: ${resolveSpacing(value)};`
-  ) : ""}
-    ${pr ? resolveResponsiveProp(
-    pr,
-    (value) => `padding-right: ${resolveSpacing(value)};`
-  ) : ""}
-    ${pt ? resolveResponsiveProp(
-    pt,
-    (value) => `padding-top: ${resolveSpacing(value)};`
-  ) : ""}
-    ${pb ? resolveResponsiveProp(
-    pb,
-    (value) => `padding-bottom: ${resolveSpacing(value)};`
-  ) : ""}
-  `;
-};
-
-export { margin, padding, resolveSpacing };

package/dist/utils/useControlledState.js

@@ -1,21 +0,0 @@
-import { useState, useCallback } from 'react';
-
-const useControllableState = ({
-  initialState,
-  stateProp
-}) => {
-  const [state, setState] = useState(initialState);
-  const returnedState = stateProp !== void 0 ? stateProp : state;
-  const returnedSetState = useCallback(
-    (nextState) => {
-      if (stateProp !== void 0) {
-        return;
-      }
-      setState(nextState);
-    },
-    [state, stateProp]
-  );
-  return [returnedState, returnedSetState];
-};
-
-export { useControllableState };

package/dist/utils/visuallyHidden.js

@@ -1,11 +0,0 @@
-const visuallyHidden = `
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-
-export { visuallyHidden };