@veeqo/ui 9.6.4 → 9.7.0

package/dist/components/CardHeader/CardHeader.cjs

@@ -18,7 +18,7 @@ const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', actio
         action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: isCollapsed ? React__default.default.createElement(DownArrowIcon.DownArrowIcon, null) : React__default.default.createElement(UpArrowIcon.UpArrowIcon, null), onClick: onClickCollapse })),
-        onClickClose && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.CrossIcon, null), onClick: onClickClose, "aria-label": "Close" }))),
+        onClickClose && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.CrossIcon, null), onClick: onClickClose, "aria-label": "Close", type: "button" }))),
     subtitle && React__default.default.createElement(Text.Text, { variant: "subheadingSmall" }, subtitle)));
 
 exports.CardHeader = CardHeader;

package/dist/components/CardHeader/CardHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button variant=\"flat\" iconSlot={<CrossIcon />} onClick={onClickClose} aria-label=\"Close\" />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;QACTF,sBAAC,CAAA,aAAA,CAAAG,SAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,2BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,uBAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAC,CAAA,aAAA,CAAAI,aAAM,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAEJ,qCAACO,mBAAS,EAAA,IAAA,CAAG,EAAE,OAAO,EAAE,YAAY,EAAa,YAAA,EAAA,OAAO,EAAG,CAAA,CAC7F,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;QACTF,sBAAC,CAAA,aAAA,CAAAG,SAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,2BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,uBAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,mBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/CardHeader/CardHeader.js

@@ -12,7 +12,7 @@ const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', actio
         action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.createElement(Button, { variant: "flat", iconSlot: isCollapsed ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(UpArrowIcon, null), onClick: onClickCollapse })),
-        onClickClose && (React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close" }))),
+        onClickClose && (React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", type: "button" }))),
     subtitle && React__default.createElement(Text, { variant: "subheadingSmall" }, subtitle)));
 
 export { CardHeader };

package/dist/components/CardHeader/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button variant=\"flat\" iconSlot={<CrossIcon />} onClick={onClickClose} aria-label=\"Close\" />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;QACTA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAEA,6BAAC,SAAS,EAAA,IAAA,CAAG,EAAE,OAAO,EAAE,YAAY,EAAa,YAAA,EAAA,OAAO,EAAG,CAAA,CAC7F,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { UpArrowIcon } from '../../tempIcons/UpArrowIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;QACTA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -34,6 +34,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             children: (React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
             size: compact ? 'sm' : 'base',
             variant: hasError ? 'destructive' : 'default',
+            type: 'button',
         } },
         onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
             React__default.default.createElement(styled.StyledSearch, { value: searchValue, onChange: onSearchChange }),

package/dist/components/SelectDropdown/SelectDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getValuesFromKeys","useCallback","React","StyledDropdown","buildClassnames","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n        type: 'button',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getValuesFromKeys","useCallback","React","StyledDropdown","buildClassnames","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -28,6 +28,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
             children: (React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
             size: compact ? 'sm' : 'base',
             variant: hasError ? 'destructive' : 'default',
+            type: 'button',
         } },
         onSearchChange && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(StyledSearch, { value: searchValue, onChange: onSearchChange }),

package/dist/components/SelectDropdown/SelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n        type: 'button',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ThemeInjector/ThemeInjector.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../theme/index.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ThemeInjector = React__default.default.memo(({ theme = index.theme }) => {
+    const themeStyle = utils.buildThemeVariables(theme);
+    return (React__default.default.createElement("style", null, `:root {${Object.entries(themeStyle)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('')}}`));
+});
+
+exports.ThemeInjector = ThemeInjector;
+//# sourceMappingURL=ThemeInjector.cjs.map

package/dist/components/ThemeInjector/ThemeInjector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInjector.cjs","sources":["../../../src/components/ThemeInjector/ThemeInjector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme as VeeqoTheme } from 'Theme';\nimport { buildThemeVariables } from './utils';\n\n/**\n * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary\n *\n * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.\n *\n * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.\n */\ntype ThemeInjectorProps = {\n  theme?: typeof VeeqoTheme;\n};\n\nexport const ThemeInjector = React.memo(({ theme = VeeqoTheme }: ThemeInjectorProps) => {\n  const themeStyle = buildThemeVariables(theme);\n\n  return (\n    <style>\n      {`:root {${Object.entries(themeStyle)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('')}}`}\n    </style>\n  );\n});\n"],"names":["React","VeeqoTheme","buildThemeVariables"],"mappings":";;;;;;;;;;AAgBO,MAAM,aAAa,GAAGA,sBAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,GAAGC,WAAU,EAAsB,KAAI;AACrF,IAAA,MAAM,UAAU,GAAGC,yBAAmB,CAAC,KAAK,CAAC;IAE7C,QACEF,oDACG,CAAU,OAAA,EAAA,MAAM,CAAC,OAAO,CAAC,UAAU;AACjC,SAAA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,GAAG,CAAK,EAAA,EAAA,KAAK,GAAG;AACzC,SAAA,IAAI,CAAC,EAAE,CAAC,CAAG,CAAA,CAAA,CACR;AAEZ,CAAC;;;;"}

package/dist/components/ThemeInjector/ThemeInjector.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { theme as VeeqoTheme } from 'Theme';
+/**
+ * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary
+ *
+ * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.
+ *
+ * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.
+ */
+type ThemeInjectorProps = {
+    theme?: typeof VeeqoTheme;
+};
+export declare const ThemeInjector: React.MemoExoticComponent<({ theme }: ThemeInjectorProps) => React.JSX.Element>;
+export {};

package/dist/components/ThemeInjector/ThemeInjector.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { theme } from '../../theme/index.js';
+import { buildThemeVariables } from './utils.js';
+
+const ThemeInjector = React__default.memo(({ theme: theme$1 = theme }) => {
+    const themeStyle = buildThemeVariables(theme$1);
+    return (React__default.createElement("style", null, `:root {${Object.entries(themeStyle)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('')}}`));
+});
+
+export { ThemeInjector };
+//# sourceMappingURL=ThemeInjector.js.map

package/dist/components/ThemeInjector/ThemeInjector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInjector.js","sources":["../../../src/components/ThemeInjector/ThemeInjector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme as VeeqoTheme } from 'Theme';\nimport { buildThemeVariables } from './utils';\n\n/**\n * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary\n *\n * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.\n *\n * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.\n */\ntype ThemeInjectorProps = {\n  theme?: typeof VeeqoTheme;\n};\n\nexport const ThemeInjector = React.memo(({ theme = VeeqoTheme }: ThemeInjectorProps) => {\n  const themeStyle = buildThemeVariables(theme);\n\n  return (\n    <style>\n      {`:root {${Object.entries(themeStyle)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('')}}`}\n    </style>\n  );\n});\n"],"names":["React","theme","VeeqoTheme"],"mappings":";;;;AAgBO,MAAM,aAAa,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC,SAAEC,OAAK,GAAGC,KAAU,EAAsB,KAAI;AACrF,IAAA,MAAM,UAAU,GAAG,mBAAmB,CAACD,OAAK,CAAC;IAE7C,QACED,4CACG,CAAU,OAAA,EAAA,MAAM,CAAC,OAAO,CAAC,UAAU;AACjC,SAAA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,GAAG,CAAK,EAAA,EAAA,KAAK,GAAG;AACzC,SAAA,IAAI,CAAC,EAAE,CAAC,CAAG,CAAA,CAAA,CACR;AAEZ,CAAC;;;;"}

package/dist/components/ThemeInjector/index.d.ts

@@ -0,0 +1 @@
+export { ThemeInjector } from './ThemeInjector';

package/dist/components/ThemeInjector/utils.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+const camelToKebab = (str) => {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+};
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+const buildThemeVariables = (themeObj, prefix = '') => {
+    return Object.entries(themeObj).reduce((acc, [key, value]) => {
+        const kebabKey = camelToKebab(key);
+        const varPrefix = prefix === '' ? '' : `${prefix}-`;
+        if (typeof value === 'object') {
+            return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };
+        }
+        return {
+            ...acc,
+            [`--${varPrefix}${kebabKey}`]: value,
+        };
+    }, {});
+};
+
+exports.buildThemeVariables = buildThemeVariables;
+exports.camelToKebab = camelToKebab;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/ThemeInjector/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/ThemeInjector/utils.ts"],"sourcesContent":["/**\n * Converts a camelCase string into kebab-case.\n */\nexport const camelToKebab = (str: string) => {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n};\n\n/**\n * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.\n * @param themeObj The theme object to convert to CSS variables.\n * @param prefix The current prefix.\n * @returns A record, mapping from variable name to value.\n */\nexport const buildThemeVariables = (themeObj: Object, prefix: string = '') => {\n  return Object.entries(themeObj).reduce((acc, [key, value]): any => {\n    const kebabKey = camelToKebab(key);\n    const varPrefix = prefix === '' ? '' : `${prefix}-`;\n\n    if (typeof value === 'object') {\n      return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };\n    }\n\n    return {\n      ...acc,\n      [`--${varPrefix}${kebabKey}`]: value,\n    };\n  }, {});\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AACU,MAAA,YAAY,GAAG,CAAC,GAAW,KAAI;IAC1C,OAAO,GAAG,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;AACjE;AAEA;;;;;AAKG;AACU,MAAA,mBAAmB,GAAG,CAAC,QAAgB,EAAE,MAAA,GAAiB,EAAE,KAAI;AAC3E,IAAA,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,KAAS;AAChE,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,GAAG,EAAE,GAAG,CAAG,EAAA,MAAM,GAAG;AAEnD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,EAAE,GAAG,GAAG,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,CAAA,EAAG,SAAS,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC5E;QAED,OAAO;AACL,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,KAAK,SAAS,CAAA,EAAG,QAAQ,CAAE,CAAA,GAAG,KAAK;SACrC;KACF,EAAE,EAAE,CAAC;AACR;;;;;"}

package/dist/components/ThemeInjector/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+export declare const camelToKebab: (str: string) => string;
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+export declare const buildThemeVariables: (themeObj: Object, prefix?: string) => {};

package/dist/components/ThemeInjector/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+const camelToKebab = (str) => {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+};
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+const buildThemeVariables = (themeObj, prefix = '') => {
+    return Object.entries(themeObj).reduce((acc, [key, value]) => {
+        const kebabKey = camelToKebab(key);
+        const varPrefix = prefix === '' ? '' : `${prefix}-`;
+        if (typeof value === 'object') {
+            return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };
+        }
+        return {
+            ...acc,
+            [`--${varPrefix}${kebabKey}`]: value,
+        };
+    }, {});
+};
+
+export { buildThemeVariables, camelToKebab };
+//# sourceMappingURL=utils.js.map

package/dist/components/ThemeInjector/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/ThemeInjector/utils.ts"],"sourcesContent":["/**\n * Converts a camelCase string into kebab-case.\n */\nexport const camelToKebab = (str: string) => {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n};\n\n/**\n * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.\n * @param themeObj The theme object to convert to CSS variables.\n * @param prefix The current prefix.\n * @returns A record, mapping from variable name to value.\n */\nexport const buildThemeVariables = (themeObj: Object, prefix: string = '') => {\n  return Object.entries(themeObj).reduce((acc, [key, value]): any => {\n    const kebabKey = camelToKebab(key);\n    const varPrefix = prefix === '' ? '' : `${prefix}-`;\n\n    if (typeof value === 'object') {\n      return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };\n    }\n\n    return {\n      ...acc,\n      [`--${varPrefix}${kebabKey}`]: value,\n    };\n  }, {});\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AACU,MAAA,YAAY,GAAG,CAAC,GAAW,KAAI;IAC1C,OAAO,GAAG,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;AACjE;AAEA;;;;;AAKG;AACU,MAAA,mBAAmB,GAAG,CAAC,QAAgB,EAAE,MAAA,GAAiB,EAAE,KAAI;AAC3E,IAAA,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,KAAS;AAChE,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,GAAG,EAAE,GAAG,CAAG,EAAA,MAAM,GAAG;AAEnD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,EAAE,GAAG,GAAG,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,CAAA,EAAG,SAAS,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC5E;QAED,OAAO;AACL,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,KAAK,SAAS,CAAA,EAAG,QAAQ,CAAE,CAAA,GAAG,KAAK;SACrC;KACF,EAAE,EAAE,CAAC;AACR;;;;"}

package/dist/components/index.d.ts

@@ -63,3 +63,4 @@ export { ViewsContainer } from './ViewsContainer';
 export { WeightInput } from './WeightInput';
 export { Indicator } from './Indicator';
 export { SelectDropdown } from './SelectDropdown';
+export { ThemeInjector } from './ThemeInjector';

package/dist/index.cjs

@@ -76,6 +76,7 @@ var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var index$5 = require('./components/WeightInput/index.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
 var index$6 = require('./components/SelectDropdown/index.cjs');
+var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
 var useDebounce = require('./hooks/useDebounce.cjs');
 var useDropdown = require('./hooks/useDropdown.cjs');
@@ -222,6 +223,7 @@ exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = index$5.WeightInput;
 exports.Indicator = Indicator.Indicator;
 exports.SelectDropdown = index$6.SelectDropdown;
+exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useDebounce = useDebounce.useDebounce;
 exports.useDropdown = useDropdown.useDropdown;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -74,6 +74,7 @@ export { ViewsContainer } from './components/ViewsContainer/ViewsContainer.js';
 export { WeightInput } from './components/WeightInput/index.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { SelectDropdown } from './components/SelectDropdown/index.js';
+export { ThemeInjector } from './components/ThemeInjector/ThemeInjector.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useDropdown } from './hooks/useDropdown.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.6.4",
+  "version": "9.7.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -77,6 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "auto-changelog": "^2.4.0",
+    "cssnano": "^7.0.6",
     "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -89,6 +90,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "framer-motion": "^6.5.1",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "~29.0.3",
     "jest-axe": "~6.0.0",
     "jest-cli": "~29.0.3",
@@ -96,6 +98,8 @@
     "jest-styled-components": "~7.1.1",
     "lodash.throttle": "^4.1.1",
     "playroom": "^0.39.1",
+    "postcss": "^8.5.3",
+    "postcss-modules": "^6.0.1",
     "prettier": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",