@mrshmllw/smores-react 13.9.0 → 13.10.0

package/dist/Divider/Divider.d.ts

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { Color } from '../theme';
 import { MarginProps } from '../utils/space';
+import { ColorTypes } from '../ThemeProvider/utils/colourMap';
 export type DividerProps = {
     maxWidth?: string;
     height?: string;
-    color?: Color;
+    color?: ColorTypes;
 } & MarginProps;
 export declare const Divider: FC<DividerProps>;

package/dist/Divider/Divider.js

@@ -1,14 +1,16 @@
 import React, { memo } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { theme } from '../theme';
-export const Divider = memo(function Divider({ maxWidth = 'none', height = '1px', color = 'oatmeal', ...marginProps }) {
-    return (React.createElement(Line, { "$maxWidth": maxWidth, "$height": height, "$color": color, ...marginProps }));
+import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
+export const Divider = memo(function Divider({ maxWidth = 'none', height = '1px', color = 'color.illustration.neutral.300', ...marginProps }) {
+    const theme = useTheme();
+    const resolvedColor = resolveToThemeColor(color, theme);
+    return (React.createElement(Line, { "$maxWidth": maxWidth, "$height": height, "$color": resolvedColor, ...marginProps }));
 });
 const Line = styled(Box) `
   ${({ $color }) => $color &&
     css `
-      background: ${theme.colors[$color]};
+      background: ${$color};
     `}
   display: block;
   height: ${({ $height }) => $height};

package/dist/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AASvC,MAAM,CAAC,MAAM,OAAO,GAAqB,IAAI,CAAC,SAAS,OAAO,CAAC,EAC7D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,SAAS,EACjB,GAAG,WAAW,EACf;IACC,OAAO,CACL,oBAAC,IAAI,iBACQ,QAAQ,aACV,MAAM,YACP,KAAK,KACT,WAAW,GACf,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAEvB;IACG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACN,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;KACnC;;YAEO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;eACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;;CAE1C,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type DividerProps = {\n  maxWidth?: string\n  height?: string\n  color?: Color\n} & MarginProps\n\nexport const Divider: FC<DividerProps> = memo(function Divider({\n  maxWidth = 'none',\n  height = '1px',\n  color = 'oatmeal',\n  ...marginProps\n}) {\n  return (\n    <Line\n      $maxWidth={maxWidth}\n      $height={height}\n      $color={color}\n      {...marginProps}\n    />\n  )\n})\n\nconst Line = styled(Box)<\n  TransientProps<Pick<DividerProps, 'color' | 'height' | 'maxWidth'>>\n>`\n  ${({ $color }) =>\n    $color &&\n    css`\n      background: ${theme.colors[$color]};\n    `}\n  display: block;\n  height: ${({ $height }) => $height};\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  width: 100%;\n`\n"]}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAQzC,MAAM,CAAC,MAAM,OAAO,GAAqB,IAAI,CAAC,SAAS,OAAO,CAAC,EAC7D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,gCAAgC,EACxC,GAAG,WAAW,EACf;IACC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,IAAI,iBACQ,QAAQ,aACV,MAAM,YACP,aAAa,KACjB,WAAW,GACf,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAIvB;IACG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACN,GAAG,CAAA;oBACa,MAAM;KACrB;;YAEO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;eACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;;CAE1C,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type DividerProps = {\n  maxWidth?: string\n  height?: string\n  color?: ColorTypes\n} & MarginProps\n\nexport const Divider: FC<DividerProps> = memo(function Divider({\n  maxWidth = 'none',\n  height = '1px',\n  color = 'color.illustration.neutral.300',\n  ...marginProps\n}) {\n  const theme = useTheme()\n  const resolvedColor = resolveToThemeColor(color, theme)\n\n  return (\n    <Line\n      $maxWidth={maxWidth}\n      $height={height}\n      $color={resolvedColor}\n      {...marginProps}\n    />\n  )\n})\n\nconst Line = styled(Box)<\n  TransientProps<Pick<DividerProps, 'height' | 'maxWidth'>> & {\n    $color: string\n  }\n>`\n  ${({ $color }) =>\n    $color &&\n    css`\n      background: ${$color};\n    `}\n  display: block;\n  height: ${({ $height }) => $height};\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  width: 100%;\n`\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "13.9.0",
+  "version": "13.10.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",