@utilitywarehouse/hearth-react 0.2.1 → 0.2.3

package/styles.css

@@ -1216,17 +1216,11 @@
 }
 /* keep label CSS high, so we can more easily override the cursor styles */
 .hearth-Card {
+  position: relative;
   background-color: var(--h-card-background-color);
   border-radius: var(--h-card-border-radius);
   border: var(--h-card-border-width) solid var(--h-card-border-color);
   padding: var(--h-card-padding-mobile);
-  position: relative;
-
-  /* we're setting this as the default so that non-white cards continue to have
-   the emphasis appearance even if the subtle variant is accidentally applied */
-  --h-card-background-color: var(--h-card-emphasis-background-color);
-  --h-card-border-color: var(--h-card-emphasis-border-color);
-  --h-card-border-width: var(--h-card-emphasis-border-width);
 }
 @media (min-width: 740px) {
 .hearth-Card {
@@ -1246,71 +1240,81 @@
     outline-offset: 1px;
   }
 .hearth-Card:where(.hearth-variant-emphasis) {
-    --h-card-border-color: var(--h-card-emphasis-border-color);
-    --h-card-border-width: var(--h-card-emphasis-border-width);
-  }
-.hearth-Card:where(.hearth-variant-subtle):where([data-colorscheme='white'],[data-colorscheme='warm-white']) {
-    --h-card-border-color: var(--h-card-subtle-border-color);
-    --h-card-border-width: var(--h-card-subtle-border-width);
+    --h-card-border-color: var(--h-card-brand-emphasis-border-color);
+    --h-card-border-width: var(--h-card-brand-border-width);
+    --h-card-background-color: var(--h-card-emphasis-background-color);
   }
+.hearth-Card:where(.hearth-variant-emphasis):where([data-colorscheme='white'],[data-colorscheme='warm-white']) {
+      --h-card-border-color: var(--h-card-neutral-emphasis-border-color);
+      --h-card-border-width: var(--h-card-neutral-emphasis-border-width);
+    }
 .hearth-Card:where(.hearth-variant-subtle) {
+    --h-card-border-color: var(--h-card-brand-subtle-border-color);
+    --h-card-border-width: var(--h-card-brand-border-width);
     --h-card-background-color: var(--h-card-subtle-background-color);
   }
+.hearth-Card:where(.hearth-variant-subtle):where([data-colorscheme='white'],[data-colorscheme='warm-white']) {
+      --h-card-border-color: var(--h-card-neutral-subtle-border-color);
+      --h-card-border-width: var(--h-card-neutral-subtle-border-width);
+    }
 .hearth-Card:where([data-colorscheme='white']) {
-    background-color: var(--h-card-white-background-color);
+    background-color: var(--h-card-neutral-white-background-color);
   }
 .hearth-Card:where([data-colorscheme='warm-white']) {
-    background-color: var(--h-card-warm-white-background-color);
+    background-color: var(--h-card-neutral-warm-white-background-color);
   }
 .hearth-Card:where([data-colorscheme='purple']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-purple-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-purple-background-color);
+    --h-card-emphasis-background-color: var(--h-card-brand-emphasis-purple-background-color);
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-purple-background-color);
   }
 .hearth-Card:where([data-colorscheme='energy-blue']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-energy-blue-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-energy-blue-background-color);
+    --h-card-emphasis-background-color: var(--h-card-brand-emphasis-energy-blue-background-color);
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-energy-blue-background-color);
   }
 .hearth-Card:where([data-colorscheme='broadband-green']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-broadband-green-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-broadband-green-background-color);
+    --h-card-emphasis-background-color: var(
+      --h-card-brand-emphasis-broadband-green-background-color
+    );
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-broadband-green-background-color);
   }
 .hearth-Card:where([data-colorscheme='mobile-rose']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-mobile-rose-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-mobile-rose-background-color);
+    --h-card-emphasis-background-color: var(--h-card-brand-emphasis-mobile-rose-background-color);
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-mobile-rose-background-color);
   }
 .hearth-Card:where([data-colorscheme='insurance-orange']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-insurance-orange-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-insurance-orange-background-color);
+    --h-card-emphasis-background-color: var(
+      --h-card-brand-emphasis-insurance-orange-background-color
+    );
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-insurance-orange-background-color);
   }
 .hearth-Card:where([data-colorscheme='cashback-lilac']) {
-    --h-card-emphasis-background-color: var(--h-card-emphasis-cashback-lilac-background-color);
-    --h-card-subtle-background-color: var(--h-card-subtle-cashback-lilac-background-color);
+    --h-card-emphasis-background-color: var(
+      --h-card-brand-emphasis-cashback-lilac-background-color
+    );
+    --h-card-subtle-background-color: var(--h-card-brand-subtle-cashback-lilac-background-color);
   }
 @media (hover: hover) {
 .hearth-Card:where([data-selectable]) {
       cursor: pointer;
   }
         .hearth-Card:where([data-selectable]):where(:hover):where(.hearth-color-scheme-white) {
-          background-color: var(--h-card-white-background-color-hover);
+          background-color: var(--h-card-neutral-white-background-color-hover);
         }
 
         .hearth-Card:where([data-selectable]):where(:hover):where(.hearth-color-scheme-warm-white) {
-          background-color: var(--h-card-warm-white-background-color-hover);
+          background-color: var(--h-card-neutral-warm-white-background-color-hover);
         }
     }
 .hearth-Card:where([data-selectable]):where(:active):where(.hearth-color-scheme-white) {
-        background-color: var(--h-card-white-background-color-active);
+        background-color: var(--h-card-neutral-white-background-color-active);
       }
 .hearth-Card:where([data-selectable]):where(:active):where(.hearth-color-scheme-warm-white) {
-        background-color: var(--h-card-warm-white-background-color-active);
+        background-color: var(--h-card-neutral-warm-white-background-color-active);
       }
 .hearth-Card:where([data-selectable]):where(:has(:focus-visible)) {
       outline: 2px solid var(--h-focus-border);
       outline-offset: 1px;
     }
-.hearth-Card:has(.hearth-CardAction) {
-    position: relative;
-  }
 .hearth-CardAction:where([data-secondary]):where(a[href],button),.hearth-CardAction:where([data-secondary]) :where(a[href],button) {
       position: relative;
       z-index: 1;
@@ -1715,7 +1719,7 @@
     outline: 2px solid transparent;
   }
 .hearth-CheckboxRoot:where([data-state='unchecked']) {
-    background-color: white;
+    background-color: var(--h-checkbox-unchecked-background-color);
 
     --h-checkbox-box-shadow-color: var(--h-checkbox-unchecked-border-color);
   }
@@ -1922,6 +1926,10 @@
   position: relative;
   padding: var(--h-list-item-padding);
 }
+.hearth-ListItem:where(:not(.hearth-Card .hearth-ListItem)) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 .hearth-ListItem:where(:first-child) {
     border-top-left-radius: var(--h-card-border-radius);
     border-top-right-radius: var(--h-card-border-radius);
@@ -1932,6 +1940,7 @@
   }
 .hearth-ListItem:where(:not(:first-child)) {
     border-top: var(--h-list-item-border-width) solid;
+    border-color: var(--h-list-item-subtle-border-color);
   }
 :where(.hearth-variant-subtle) .hearth-ListItem {
     border-color: var(--h-list-item-subtle-border-color);

package/dist/chunk-5LFE33FH.js

@@ -1,2 +0,0 @@
-var e=["white","blue50","blue100","blue200","blue300","blue400","blue500","blue600","blue700","blue800","blue900","blue1000","broadbandGreen200","broadbandGreen300","broadbandGreen600","cashbackLilac300","cashbackLilac500","cashbackLilac600","energyBlue200","energyBlue300","energyBlue600","green50","green100","green200","green300","green400","green500","green600","green700","green800","green900","green1000","grey50","grey100","grey200","grey300","grey400","grey500","grey600","grey700","grey800","grey900","grey1000","insuranceOrange300","insuranceOrange400","insuranceOrange700","mobileRose200","mobileRose400","mobileRose600","orange50","orange100","orange200","orange300","orange400","orange500","orange600","orange700","orange800","orange900","orange1000","piggyPink200","piggyPink300","piggyPink500","purple300","purple700","purple800","purple900","purple1000","red50","red100","red200","red300","red400","red500","red600","red700","red800","red900","red1000","warmWhite50","warmWhite100","warmWhite200","warmWhite300","yellow50","yellow100","yellow200","yellow300","yellow400","yellow500","yellow600","yellow700","yellow800","yellow900","yellow1000"];export{e as a};
-//# sourceMappingURL=chunk-5LFE33FH.js.map

package/dist/chunk-5LFE33FH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/color.ts"],"sourcesContent":["// Do not edit directly, this file was generated by the gen:color-tokens script.\nexport const colorTokens = [\n  'white',\n  'blue50',\n  'blue100',\n  'blue200',\n  'blue300',\n  'blue400',\n  'blue500',\n  'blue600',\n  'blue700',\n  'blue800',\n  'blue900',\n  'blue1000',\n  'broadbandGreen200',\n  'broadbandGreen300',\n  'broadbandGreen600',\n  'cashbackLilac300',\n  'cashbackLilac500',\n  'cashbackLilac600',\n  'energyBlue200',\n  'energyBlue300',\n  'energyBlue600',\n  'green50',\n  'green100',\n  'green200',\n  'green300',\n  'green400',\n  'green500',\n  'green600',\n  'green700',\n  'green800',\n  'green900',\n  'green1000',\n  'grey50',\n  'grey100',\n  'grey200',\n  'grey300',\n  'grey400',\n  'grey500',\n  'grey600',\n  'grey700',\n  'grey800',\n  'grey900',\n  'grey1000',\n  'insuranceOrange300',\n  'insuranceOrange400',\n  'insuranceOrange700',\n  'mobileRose200',\n  'mobileRose400',\n  'mobileRose600',\n  'orange50',\n  'orange100',\n  'orange200',\n  'orange300',\n  'orange400',\n  'orange500',\n  'orange600',\n  'orange700',\n  'orange800',\n  'orange900',\n  'orange1000',\n  'piggyPink200',\n  'piggyPink300',\n  'piggyPink500',\n  'purple300',\n  'purple700',\n  'purple800',\n  'purple900',\n  'purple1000',\n  'red50',\n  'red100',\n  'red200',\n  'red300',\n  'red400',\n  'red500',\n  'red600',\n  'red700',\n  'red800',\n  'red900',\n  'red1000',\n  'warmWhite50',\n  'warmWhite100',\n  'warmWhite200',\n  'warmWhite300',\n  'yellow50',\n  'yellow100',\n  'yellow200',\n  'yellow300',\n  'yellow400',\n  'yellow500',\n  'yellow600',\n  'yellow700',\n  'yellow800',\n  'yellow900',\n  'yellow1000',\n] as const;\n"],"mappings":"AACO,IAAMA,EAAc,CACzB,QACA,SACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WACA,oBACA,oBACA,oBACA,mBACA,mBACA,mBACA,gBACA,gBACA,gBACA,UACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,YACA,SACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WACA,qBACA,qBACA,qBACA,gBACA,gBACA,gBACA,WACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,aACA,eACA,eACA,eACA,YACA,YACA,YACA,YACA,aACA,QACA,SACA,SACA,SACA,SACA,SACA,SACA,SACA,SACA,SACA,UACA,cACA,eACA,eACA,eACA,WACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACF","names":["colorTokens"]}

package/dist/chunk-LAITMUFB.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var e=["white","blue50","blue100","blue200","blue300","blue400","blue500","blue600","blue700","blue800","blue900","blue1000","broadbandGreen200","broadbandGreen300","broadbandGreen600","cashbackLilac300","cashbackLilac500","cashbackLilac600","energyBlue200","energyBlue300","energyBlue600","green50","green100","green200","green300","green400","green500","green600","green700","green800","green900","green1000","grey50","grey100","grey200","grey300","grey400","grey500","grey600","grey700","grey800","grey900","grey1000","insuranceOrange300","insuranceOrange400","insuranceOrange700","mobileRose200","mobileRose400","mobileRose600","orange50","orange100","orange200","orange300","orange400","orange500","orange600","orange700","orange800","orange900","orange1000","piggyPink200","piggyPink300","piggyPink500","purple300","purple700","purple800","purple900","purple1000","red50","red100","red200","red300","red400","red500","red600","red700","red800","red900","red1000","warmWhite50","warmWhite100","warmWhite200","warmWhite300","yellow50","yellow100","yellow200","yellow300","yellow400","yellow500","yellow600","yellow700","yellow800","yellow900","yellow1000"];exports.a = e;
-//# sourceMappingURL=chunk-LAITMUFB.cjs.map

package/dist/chunk-LAITMUFB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/color.ts"],"names":["colorTokens"],"mappings":"AACO,6EAAMA,CAAAA,CAAc,CACzB,OAAA,CACA,QAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,UAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,eAAA,CACA,eAAA,CACA,eAAA,CACA,SAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,SAAA,CACA,UAAA,CACA,oBAAA,CACA,oBAAA,CACA,oBAAA,CACA,eAAA,CACA,eAAA,CACA,eAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,YAAA,CACA,cAAA,CACA,cAAA,CACA,cAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,YAAA,CACA,OAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,QAAA,CACA,SAAA,CACA,aAAA,CACA,cAAA,CACA,cAAA,CACA,cAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,YACF,CAAA,CAAA,cAAA","file":"/home/runner/work/hearth/hearth/packages/react/dist/chunk-LAITMUFB.cjs","sourcesContent":["// Do not edit directly, this file was generated by the gen:color-tokens script.\nexport const colorTokens = [\n  'white',\n  'blue50',\n  'blue100',\n  'blue200',\n  'blue300',\n  'blue400',\n  'blue500',\n  'blue600',\n  'blue700',\n  'blue800',\n  'blue900',\n  'blue1000',\n  'broadbandGreen200',\n  'broadbandGreen300',\n  'broadbandGreen600',\n  'cashbackLilac300',\n  'cashbackLilac500',\n  'cashbackLilac600',\n  'energyBlue200',\n  'energyBlue300',\n  'energyBlue600',\n  'green50',\n  'green100',\n  'green200',\n  'green300',\n  'green400',\n  'green500',\n  'green600',\n  'green700',\n  'green800',\n  'green900',\n  'green1000',\n  'grey50',\n  'grey100',\n  'grey200',\n  'grey300',\n  'grey400',\n  'grey500',\n  'grey600',\n  'grey700',\n  'grey800',\n  'grey900',\n  'grey1000',\n  'insuranceOrange300',\n  'insuranceOrange400',\n  'insuranceOrange700',\n  'mobileRose200',\n  'mobileRose400',\n  'mobileRose600',\n  'orange50',\n  'orange100',\n  'orange200',\n  'orange300',\n  'orange400',\n  'orange500',\n  'orange600',\n  'orange700',\n  'orange800',\n  'orange900',\n  'orange1000',\n  'piggyPink200',\n  'piggyPink300',\n  'piggyPink500',\n  'purple300',\n  'purple700',\n  'purple800',\n  'purple900',\n  'purple1000',\n  'red50',\n  'red100',\n  'red200',\n  'red300',\n  'red400',\n  'red500',\n  'red600',\n  'red700',\n  'red800',\n  'red900',\n  'red1000',\n  'warmWhite50',\n  'warmWhite100',\n  'warmWhite200',\n  'warmWhite300',\n  'yellow50',\n  'yellow100',\n  'yellow200',\n  'yellow300',\n  'yellow400',\n  'yellow500',\n  'yellow600',\n  'yellow700',\n  'yellow800',\n  'yellow900',\n  'yellow1000',\n] as const;\n"]}

package/dist/chunk-LHYMOIID.js

@@ -1,2 +0,0 @@
-import{a as k}from"./chunk-PVGGV3NW.js";import{b as C}from"./chunk-T64W7Q7K.js";import{a as h}from"./chunk-RXSCUWUX.js";import{b as f}from"./chunk-4PEMW3UE.js";import*as o from"react";import U from"clsx";import{useControllableState as z}from"@radix-ui/react-use-controllable-state";var x="CheckboxGroup",S=f(x),j=o.forwardRef(({disabled:r,required:a,label:G,helperText:b,validationText:d,validationStatus:v,value:m,contentWidth:p="fit-content",direction:n="column",defaultValue:s,onValueChange:l,children:u,className:P,name:i,...R},N)=>{let w={...R,disabled:r,required:a,label:G,helperText:b,validationText:d,validationStatus:v},E={width:p,direction:n,name:i,required:a,disabled:r,defaultValue:s,value:m,onValueChange:l,children:u},[F=[],e]=z({prop:m,defaultProp:s,onChange:l}),I=o.useCallback(t=>e((c=[])=>[...c,t]),[e]),y=o.useCallback(t=>e((c=[])=>c.filter(g=>g!==t)),[e]),B={name:i,value:F,onItemCheck:I,onItemUncheck:y};return o.createElement(k,{ref:N,className:U(S,P),...w},o.createElement(h,{...E,className:"hearth-CheckboxGroupContent","data-orientation":n==="column"?"vertical":"horizontal","data-disabled":r?"":void 0,width:p},o.createElement(C,{value:B},u)))});j.displayName=x;export{j as a};
-//# sourceMappingURL=chunk-LHYMOIID.js.map

package/dist/chunk-LHYMOIID.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport clsx from 'clsx';\n\nimport { CheckboxGroupProps } from './CheckboxGroup.props';\nimport { withGlobalPrefix } from '../../helpers/with-global-prefix';\nimport type { ElementRef } from 'react';\nimport { Flex } from '../Flex/Flex';\nimport { FormGroupBase } from '../FormGroupBase/FormGroupBase';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { CheckboxGroupProvider } from './CheckboxGroup.context';\n\nconst componentName = 'CheckboxGroup';\nconst componentClassName = withGlobalPrefix(componentName);\n\ntype CheckboxGroupElement = ElementRef<'fieldset'>;\n\nexport const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(\n  (\n    {\n      disabled,\n      required,\n      label,\n      helperText,\n      validationText,\n      validationStatus,\n      value: valueProp,\n      contentWidth = 'fit-content',\n      direction = 'column',\n      defaultValue,\n      onValueChange,\n      children,\n      className,\n      name,\n      ...props\n    },\n    ref\n  ) => {\n    const formGroupBaseProps = {\n      ...props,\n      disabled,\n      required,\n      label,\n      helperText,\n      validationText,\n      validationStatus,\n    };\n    const checkboxGroupProps = {\n      width: contentWidth,\n      direction,\n      name,\n      required,\n      disabled,\n      defaultValue,\n      value: valueProp,\n      onValueChange,\n      children,\n    };\n    // useControllableState will handle whether controlled or uncontrolled\n    const [value = [], setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n    });\n\n    const handleItemCheck = React.useCallback(\n      (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n      [setValue]\n    );\n\n    const handleItemUncheck = React.useCallback(\n      (itemValue: string) =>\n        setValue((prevValue = []) => prevValue.filter(value => value !== itemValue)),\n      [setValue]\n    );\n\n    const providerValue = {\n      name,\n      value,\n      onItemCheck: handleItemCheck,\n      onItemUncheck: handleItemUncheck,\n    };\n    return (\n      <FormGroupBase\n        ref={ref}\n        className={clsx(componentClassName, className)}\n        {...formGroupBaseProps}\n      >\n        <Flex\n          {...checkboxGroupProps}\n          className=\"hearth-CheckboxGroupContent\"\n          data-orientation={direction === 'column' ? 'vertical' : 'horizontal'}\n          data-disabled={disabled ? '' : undefined}\n          width={contentWidth}\n        >\n          <CheckboxGroupProvider value={providerValue}>{children}</CheckboxGroupProvider>\n        </Flex>\n      </FormGroupBase>\n    );\n  }\n);\n\nCheckboxGroup.displayName = componentName;\n"],"mappings":"gKAAA,UAAYA,MAAW,QAEvB,OAAOC,MAAU,OAOjB,OAAS,wBAAAC,MAA4B,yCAGrC,IAAMC,EAAgB,gBAChBC,EAAqBC,EAAiBF,CAAa,EAI5CG,EAAsB,aACjC,CACE,CACE,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,WAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,MAAOC,EACP,aAAAC,EAAe,cACf,UAAAC,EAAY,SACZ,aAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,IAAMC,EAAqB,CACzB,GAAGF,EACH,SAAAd,EACA,SAAAC,EACA,MAAAC,EACA,WAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,EACMY,EAAqB,CACzB,MAAOV,EACP,UAAAC,EACA,KAAAK,EACA,SAAAZ,EACA,SAAAD,EACA,aAAAS,EACA,MAAOH,EACP,cAAAI,EACA,SAAAC,CACF,EAEM,CAACO,EAAQ,CAAC,EAAGC,CAAQ,EAAIC,EAAqB,CAClD,KAAMd,EACN,YAAaG,EACb,SAAUC,CACZ,CAAC,EAEKW,EAAwB,cAC3BC,GAAsBH,EAAS,CAACI,EAAY,CAAC,IAAM,CAAC,GAAGA,EAAWD,CAAS,CAAC,EAC7E,CAACH,CAAQ,CACX,EAEMK,EAA0B,cAC7BF,GACCH,EAAS,CAACI,EAAY,CAAC,IAAMA,EAAU,OAAOL,GAASA,IAAUI,CAAS,CAAC,EAC7E,CAACH,CAAQ,CACX,EAEMM,EAAgB,CACpB,KAAAZ,EACA,MAAAK,EACA,YAAaG,EACb,cAAeG,CACjB,EACA,OACE,gBAACE,EAAA,CACC,IAAKX,EACL,UAAWY,EAAK9B,EAAoBe,CAAS,EAC5C,GAAGI,GAEJ,gBAACY,EAAA,CACE,GAAGX,EACJ,UAAU,8BACV,mBAAkBT,IAAc,SAAW,WAAa,aACxD,gBAAeR,EAAW,GAAK,OAC/B,MAAOO,GAEP,gBAACsB,EAAA,CAAsB,MAAOJ,GAAgBd,CAAS,CACzD,CACF,CAEJ,CACF,EAEAZ,EAAc,YAAcH","names":["React","clsx","useControllableState","componentName","componentClassName","withGlobalPrefix","CheckboxGroup","disabled","required","label","helperText","validationText","validationStatus","valueProp","contentWidth","direction","defaultValue","onValueChange","children","className","name","props","ref","formGroupBaseProps","checkboxGroupProps","value","setValue","useControllableState","handleItemCheck","itemValue","prevValue","handleItemUncheck","providerValue","FormGroupBase","clsx","Flex","CheckboxGroupProvider"]}

package/dist/chunk-PV77XMCG.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _chunkUOHJ7WAYcjs = require('./chunk-UOHJ7WAY.cjs');var _chunkUDOWEUCMcjs = require('./chunk-UDOWEUCM.cjs');var _chunk6YH62W4Ycjs = require('./chunk-6YH62W4Y.cjs');var _chunk4H5JT5ORcjs = require('./chunk-4H5JT5OR.cjs');var _react = require('react'); var o = _interopRequireWildcard(_react);var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);var _reactusecontrollablestate = require('@radix-ui/react-use-controllable-state');var x="CheckboxGroup",S=_chunk4H5JT5ORcjs.b.call(void 0, x),j= exports.a =o.forwardRef(({disabled:r,required:a,label:G,helperText:b,validationText:d,validationStatus:v,value:m,contentWidth:p="fit-content",direction:n="column",defaultValue:s,onValueChange:l,children:u,className:P,name:i,...R},N)=>{let w={...R,disabled:r,required:a,label:G,helperText:b,validationText:d,validationStatus:v},E={width:p,direction:n,name:i,required:a,disabled:r,defaultValue:s,value:m,onValueChange:l,children:u},[F=[],e]=_reactusecontrollablestate.useControllableState.call(void 0, {prop:m,defaultProp:s,onChange:l}),I=o.useCallback(t=>e((c=[])=>[...c,t]),[e]),y=o.useCallback(t=>e((c=[])=>c.filter(g=>g!==t)),[e]),B={name:i,value:F,onItemCheck:I,onItemUncheck:y};return o.createElement(_chunkUOHJ7WAYcjs.a,{ref:N,className:_clsx2.default.call(void 0, S,P),...w},o.createElement(_chunk6YH62W4Ycjs.a,{...E,className:"hearth-CheckboxGroupContent","data-orientation":n==="column"?"vertical":"horizontal","data-disabled":r?"":void 0,width:p},o.createElement(_chunkUDOWEUCMcjs.b,{value:B},u)))});j.displayName=x;exports.a = j;
-//# sourceMappingURL=chunk-PV77XMCG.cjs.map

package/dist/chunk-PV77XMCG.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/chunk-PV77XMCG.cjs","../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":["componentName","componentClassName","withGlobalPrefix","CheckboxGroup","disabled","required","label","helperText","validationText","validationStatus","valueProp","contentWidth","direction","defaultValue","onValueChange","children","className","name","props","ref","formGroupBaseProps","checkboxGroupProps","value","setValue","useControllableState","handleItemCheck","itemValue","prevValue","handleItemUncheck","providerValue","FormGroupBase","clsx","Flex","CheckboxGroupProvider"],"mappings":"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","file":"/home/runner/work/hearth/hearth/packages/react/dist/chunk-PV77XMCG.cjs","sourcesContent":[null,"import * as React from 'react';\n\nimport clsx from 'clsx';\n\nimport { CheckboxGroupProps } from './CheckboxGroup.props';\nimport { withGlobalPrefix } from '../../helpers/with-global-prefix';\nimport type { ElementRef } from 'react';\nimport { Flex } from '../Flex/Flex';\nimport { FormGroupBase } from '../FormGroupBase/FormGroupBase';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { CheckboxGroupProvider } from './CheckboxGroup.context';\n\nconst componentName = 'CheckboxGroup';\nconst componentClassName = withGlobalPrefix(componentName);\n\ntype CheckboxGroupElement = ElementRef<'fieldset'>;\n\nexport const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(\n  (\n    {\n      disabled,\n      required,\n      label,\n      helperText,\n      validationText,\n      validationStatus,\n      value: valueProp,\n      contentWidth = 'fit-content',\n      direction = 'column',\n      defaultValue,\n      onValueChange,\n      children,\n      className,\n      name,\n      ...props\n    },\n    ref\n  ) => {\n    const formGroupBaseProps = {\n      ...props,\n      disabled,\n      required,\n      label,\n      helperText,\n      validationText,\n      validationStatus,\n    };\n    const checkboxGroupProps = {\n      width: contentWidth,\n      direction,\n      name,\n      required,\n      disabled,\n      defaultValue,\n      value: valueProp,\n      onValueChange,\n      children,\n    };\n    // useControllableState will handle whether controlled or uncontrolled\n    const [value = [], setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n    });\n\n    const handleItemCheck = React.useCallback(\n      (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n      [setValue]\n    );\n\n    const handleItemUncheck = React.useCallback(\n      (itemValue: string) =>\n        setValue((prevValue = []) => prevValue.filter(value => value !== itemValue)),\n      [setValue]\n    );\n\n    const providerValue = {\n      name,\n      value,\n      onItemCheck: handleItemCheck,\n      onItemUncheck: handleItemUncheck,\n    };\n    return (\n      <FormGroupBase\n        ref={ref}\n        className={clsx(componentClassName, className)}\n        {...formGroupBaseProps}\n      >\n        <Flex\n          {...checkboxGroupProps}\n          className=\"hearth-CheckboxGroupContent\"\n          data-orientation={direction === 'column' ? 'vertical' : 'horizontal'}\n          data-disabled={disabled ? '' : undefined}\n          width={contentWidth}\n        >\n          <CheckboxGroupProvider value={providerValue}>{children}</CheckboxGroupProvider>\n        </Flex>\n      </FormGroupBase>\n    );\n  }\n);\n\nCheckboxGroup.displayName = componentName;\n"]}