@veeqo/ui 13.1.0 → 13.2.0

package/dist/components/Tag/Tag.cjs

@@ -1,17 +1,21 @@
 'use strict';
 
-var styled = require('styled-components');
-var colors = require('../../theme/modules/colors.cjs');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Text = require('../Text/Text.cjs');
+var Tag_module = require('./Tag.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Tag = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--1rdo7hk" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
-    color: ${color !== null && color !== undefined ? color : colors.colors.neutral.ink.base};
-    background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.colors.neutral.grey.base};
-  `}`;
+const Tag = ({ className, backgroundColor, textColor, children, label, compact = false, leftIconSlot, rightIconSlot, ...otherProps }) => (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "center", gap: "xs", className: buildClassnames.buildClassnames([Tag_module.tag, compact && Tag_module.compact, className]), style: { ...assignCssVars.assignCssVars({ customTextColor: textColor }), backgroundColor }, ...otherProps },
+    leftIconSlot,
+    children || React__default.default.createElement(Text.Text, { variant: "body" }, label),
+    rightIconSlot));
 
 exports.Tag = Tag;
 //# sourceMappingURL=Tag.cjs.map

package/dist/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\nimport { BaseContainer } from '../BaseContainer';\n\nexport interface TagProps {\n  backgroundColor?: string;\n  color?: string;\n}\n\nexport const Tag = styled(BaseContainer)<TagProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 4px 8px;\n\n  ${({ backgroundColor, color }) => `\n    color: ${color ?? colors.neutral.ink.base};\n    background-color: ${backgroundColor ?? colors.neutral.grey.base};\n  `}\n`;\n"],"names":["styled","BaseContainer","colors"],"mappings":";;;;;;;;;;AAUa,MAAA,GAAG,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAQpC,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;aACvB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAIA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\ntype TagProps = Omit<FlexProps, 'color'> & {\n  backgroundColor?: string;\n  textColor?: string;\n  label?: string;\n  compact?: boolean;\n  leftIconSlot?: React.ReactNode;\n  rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n  className,\n  backgroundColor,\n  textColor,\n  children,\n  label,\n  compact = false,\n  leftIconSlot,\n  rightIconSlot,\n  ...otherProps\n}: TagProps) => (\n  <FlexRow\n    flexWrap=\"nowrap\"\n    justifyContent=\"center\"\n    gap=\"xs\"\n    className={buildClassnames([styles.tag, compact && styles.compact, className])}\n    style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n    {...otherProps}\n  >\n    {leftIconSlot}\n    {children || <Text variant=\"body\">{label}</Text>}\n    {rightIconSlot}\n  </FlexRow>\n);\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;AAkBa,MAAA,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,UAAM,CAAC,GAAG,EAAE,OAAO,IAAIA,UAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,12 @@
-export interface TagProps {
+import React from 'react';
+import { FlexProps } from '../Flex/types';
+type TagProps = Omit<FlexProps, 'color'> & {
     backgroundColor?: string;
-    color?: string;
-}
-export declare const Tag: import("styled-components").StyledComponent<"div", any, TagProps, never>;
+    textColor?: string;
+    label?: string;
+    compact?: boolean;
+    leftIconSlot?: React.ReactNode;
+    rightIconSlot?: React.ReactNode;
+};
+export declare const Tag: ({ className, backgroundColor, textColor, children, label, compact, leftIconSlot, rightIconSlot, ...otherProps }: TagProps) => React.JSX.Element;
+export {};

package/dist/components/Tag/Tag.js

@@ -1,11 +1,15 @@
-import styled from 'styled-components';
-import { colors } from '../../theme/modules/colors.js';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Text } from '../Text/Text.js';
+import styles from './Tag.module.scss.js';
 
-const Tag = styled(BaseContainer).withConfig({ displayName: "vui--Tag", componentId: "vui--1rdo7hk" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:4px 8px;${({ backgroundColor, color }) => `
-    color: ${color !== null && color !== undefined ? color : colors.neutral.ink.base};
-    background-color: ${backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : colors.neutral.grey.base};
-  `}`;
+const Tag = ({ className, backgroundColor, textColor, children, label, compact = false, leftIconSlot, rightIconSlot, ...otherProps }) => (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "center", gap: "xs", className: buildClassnames([styles.tag, compact && styles.compact, className]), style: { ...assignCssVars({ customTextColor: textColor }), backgroundColor }, ...otherProps },
+    leftIconSlot,
+    children || React__default.createElement(Text, { variant: "body" }, label),
+    rightIconSlot));
 
 export { Tag };
 //# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\nimport { BaseContainer } from '../BaseContainer';\n\nexport interface TagProps {\n  backgroundColor?: string;\n  color?: string;\n}\n\nexport const Tag = styled(BaseContainer)<TagProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 4px 8px;\n\n  ${({ backgroundColor, color }) => `\n    color: ${color ?? colors.neutral.ink.base};\n    background-color: ${backgroundColor ?? colors.neutral.grey.base};\n  `}\n`;\n"],"names":[],"mappings":";;;;AAUa,MAAA,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,CAQpC,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;aACvB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;wBACrB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAChE,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\ntype TagProps = Omit<FlexProps, 'color'> & {\n  backgroundColor?: string;\n  textColor?: string;\n  label?: string;\n  compact?: boolean;\n  leftIconSlot?: React.ReactNode;\n  rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n  className,\n  backgroundColor,\n  textColor,\n  children,\n  label,\n  compact = false,\n  leftIconSlot,\n  rightIconSlot,\n  ...otherProps\n}: TagProps) => (\n  <FlexRow\n    flexWrap=\"nowrap\"\n    justifyContent=\"center\"\n    gap=\"xs\"\n    className={buildClassnames([styles.tag, compact && styles.compact, className])}\n    style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n    {...otherProps}\n  >\n    {leftIconSlot}\n    {children || <Text variant=\"body\">{label}</Text>}\n    {rightIconSlot}\n  </FlexRow>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAkBa,MAAA,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}

package/dist/components/Tag/Tag.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._tag_81al6_1 {\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  display: inline-flex;\n  min-width: var(--sizes-3);\n  min-height: var(--sizes-5);\n  color: var(--custom-text-color, var(--text-body-color));\n  font-size: var(--text-body-font-size);\n}\n._tag_81al6_1 span {\n  color: inherit;\n}\n._tag_81al6_1 svg {\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n}\n._tag_81al6_1._compact_81al6_17 {\n  font-size: var(--text-body-small-font-size);\n}\n._tag_81al6_1._compact_81al6_17 span {\n  font-size: var(--text-body-small-font-size);\n}\n._tag_81al6_1._compact_81al6_17 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}");
+var styles = {"tag":"_tag_81al6_1","compact":"_compact_81al6_17"};
+
+module.exports = styles;
+//# sourceMappingURL=Tag.module.scss.cjs.map

package/dist/components/Tag/Tag.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.module.scss.cjs","sources":["../../../src/components/Tag/Tag.module.scss"],"sourcesContent":[".tag {\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  display: inline-flex;\n  min-width: var(--sizes-3);\n  min-height: var(--sizes-5);\n\n  // applies color and font-size for direct text children\n  color: var(--custom-text-color, var(--text-body-color));\n  font-size: var(--text-body-font-size);\n\n  // ensure Text components (spans) inherit the color\n  span {\n    color: inherit;\n  }\n\n  svg {\n    width: var(--sizes-5);\n    height: var(--sizes-5);\n  }\n\n  &.compact {\n    font-size: var(--text-body-small-font-size);\n\n    span {\n      font-size: var(--text-body-small-font-size);\n    }\n\n    svg {\n      width: var(--sizes-base);\n      height: var(--sizes-base);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mqBAAA;AACA,aAAA,CAAA,KAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/dist/components/Tag/Tag.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._tag_81al6_1 {\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  display: inline-flex;\n  min-width: var(--sizes-3);\n  min-height: var(--sizes-5);\n  color: var(--custom-text-color, var(--text-body-color));\n  font-size: var(--text-body-font-size);\n}\n._tag_81al6_1 span {\n  color: inherit;\n}\n._tag_81al6_1 svg {\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n}\n._tag_81al6_1._compact_81al6_17 {\n  font-size: var(--text-body-small-font-size);\n}\n._tag_81al6_1._compact_81al6_17 span {\n  font-size: var(--text-body-small-font-size);\n}\n._tag_81al6_1._compact_81al6_17 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}");
+var styles = {"tag":"_tag_81al6_1","compact":"_compact_81al6_17"};
+
+export { styles as default };
+//# sourceMappingURL=Tag.module.scss.js.map

package/dist/components/Tag/Tag.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.module.scss.js","sources":["../../../src/components/Tag/Tag.module.scss"],"sourcesContent":[".tag {\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  display: inline-flex;\n  min-width: var(--sizes-3);\n  min-height: var(--sizes-5);\n\n  // applies color and font-size for direct text children\n  color: var(--custom-text-color, var(--text-body-color));\n  font-size: var(--text-body-font-size);\n\n  // ensure Text components (spans) inherit the color\n  span {\n    color: inherit;\n  }\n\n  svg {\n    width: var(--sizes-5);\n    height: var(--sizes-5);\n  }\n\n  &.compact {\n    font-size: var(--text-body-small-font-size);\n\n    span {\n      font-size: var(--text-body-small-font-size);\n    }\n\n    svg {\n      width: var(--sizes-base);\n      height: var(--sizes-base);\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mqBAAA;AACA,aAAA,CAAA,KAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.1.0",
+  "version": "13.2.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",