@veeqo/ui 11.0.0 → 11.2.0

package/dist/components/ViewTab/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n\n      /* Force all text elements to be white when active, used when using slot */\n      & ${Text} {\n        color: ${colors.neutral.grey.lightest} !important;\n      }\n\n      /* Force all SVG icons to be white when active, used when using slot */\n      & svg {\n        fill: ${colors.neutral.grey.lightest};\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n      & ${Text} {\n        color: ${colors.neutral.ink.base} !important;\n      }\n      & svg {\n        fill: ${colors.neutral.ink.base};\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n        & ${Text} {\n          color: ${colors.neutral.ink.base} !important;\n        }\n        & svg {\n          fill: ${colors.neutral.ink.base};\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ViewTab/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext: string;\n};\n"],"names":["ViewTabTypes"],"mappings":";;AAGYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":["ViewTabTypes"],"mappings":";;AAGYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}

package/dist/components/ViewTab/types.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { ColourPalette } from '../../theme/modules/colors';
 export declare enum ViewTabTypes {
     saved = "saved",
@@ -22,10 +22,15 @@ export type ViewTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClic
     type?: keyof typeof ViewTabTypes;
     /** Number or string value to show near viewTab label */
     count?: number | string | null;
+    /** Slot for custom count element */
+    /** If countSlot is provided, it will override the count prop */
+    countSlot?: ReactNode;
     /** Event handler for when ViewTab component is clicked (should get activated) */
     onClick: (id: string) => void;
     /**  Event handler for when ViewTab component is clicked and isActive */
     subAction?: (id: string) => void;
     /** Context used to add to aria label, (orders or products based on page) */
-    ariaContext: string;
+    ariaContext?: string;
+    /** Used to pass additonal context when using countSlot */
+    ariaDescribedBy?: string;
 };

package/dist/components/ViewTab/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext: string;\n};\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n  saved = 'saved',\n  fixed = 'fixed',\n  draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'name' | 'id' | 'type'\n> & {\n  /** Colour palette for the ViewTab */\n  colourPalette?: ColourPalette;\n\n  /** customTextColour - Custom Rest State colour */\n  customTextColour?: string;\n\n  /** Flag to toggle active state styles on the ViewTab */\n  active?: boolean;\n\n  /** ViewTab name, eg.: Jade's view */\n  name: string;\n\n  /** IconSlot for passing */\n  iconSlot?: ReactElement;\n\n  /** ViewTab's unique identifier */\n  id: string;\n\n  /** ViewTab type */\n  type?: keyof typeof ViewTabTypes;\n\n  /** Number or string value to show near viewTab label */\n  count?: number | string | null;\n\n  /** Slot for custom count element */\n  /** If countSlot is provided, it will override the count prop */\n  countSlot?: ReactNode;\n\n  /** Event handler for when ViewTab component is clicked (should get activated) */\n  onClick: (id: string) => void;\n\n  /**  Event handler for when ViewTab component is clicked and isActive */\n  subAction?: (id: string) => void;\n\n  /** Context used to add to aria label, (orders or products based on page) */\n  ariaContext?: string;\n\n  /** Used to pass additonal context when using countSlot */\n  ariaDescribedBy?: string;\n};\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}

package/dist/utils/assignCssVars.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var utils = require('../components/ThemeInjector/utils.cjs');
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${utils.camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+exports.assignCssVars = assignCssVars;
+//# sourceMappingURL=assignCssVars.cjs.map

package/dist/utils/assignCssVars.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.cjs","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":["camelToKebab"],"mappings":";;;;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAKA,kBAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/dist/utils/assignCssVars.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+type ValidCssVariableType = string | number | undefined;
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+export declare const assignCssVars: (props: Record<string, ValidCssVariableType>) => CSSProperties;
+export {};

package/dist/utils/assignCssVars.js

@@ -0,0 +1,24 @@
+import { camelToKebab } from '../components/ThemeInjector/utils.js';
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+export { assignCssVars };
+//# sourceMappingURL=assignCssVars.js.map

package/dist/utils/assignCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.js","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":[],"mappings":";;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAK,YAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/package.json

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