sag_components 1.0.882 → 1.0.883

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CampaignDemoReport = require("./CampaignDemoReport.style");
+var _ShoutIcon = _interopRequireDefault(require("../../icons/ShoutIcon"));
+const CampaignDemoReport = props => {
+  const {
+    topHeadline,
+    topLabels,
+    bottomHeadline,
+    bottomLabels
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.ComponentContainer, null, /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, topHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, topLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value,
+    className: "icon-label"
+  }, /*#__PURE__*/_react.default.createElement(_ShoutIcon.default, {
+    fill: "#1B30AA"
+  }), /*#__PURE__*/_react.default.createElement("span", null, label.value)))), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Line, null), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, bottomHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, bottomLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
+    key: label.value
+  }, /*#__PURE__*/_react.default.createElement("span", null, label.value)))));
+};
+CampaignDemoReport.defaultProps = {
+  topHeadline: 'Live Campaigns This Week:',
+  topLabels: [{
+    icon: 'Label 1',
+    value: 'Monthly 2'
+  }, {
+    icon: 'Label 2',
+    value: 'Healthy Summer'
+  }, {
+    icon: 'Label 3',
+    value: 'Game Night'
+  }],
+  bottomHeadline: 'Upcoming Campaigns:',
+  bottomLabels: [{
+    icon: 'none',
+    value: 'Monthly 2'
+  }, {
+    icon: 'none',
+    value: 'Healthy Summer'
+  }]
+};
+var _default = exports.default = CampaignDemoReport;

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CampaignDemoReport = _interopRequireDefault(require("./CampaignDemoReport"));
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Campaign Demo Report',
+  component: _CampaignDemoReport.default,
+  tags: ['autodocs'],
+  argTypes: {
+    topHeadline: {
+      name: 'Top Headline',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    topLabels: {
+      name: 'Top Labels',
+      control: {
+        type: 'array'
+      }
+    },
+    bottomHeadline: {
+      name: 'Bottom Headline',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    bottomLabels: {
+      name: 'Bottom Labels',
+      control: {
+        type: 'array'
+      }
+    }
+  }
+};
+const Example = exports.Example = {
+  args: {
+    topHeadline: 'Live Campaigns This Week:',
+    topLabels: [{
+      icon: 'Label 1',
+      value: 'Monthly 2'
+    }, {
+      icon: 'Label 2',
+      value: 'Healthy Summer'
+    }, {
+      icon: 'Label 3',
+      value: 'Game Night'
+    }],
+    bottomHeadline: 'Upcoming Campaigns:',
+    bottomLabels: [{
+      icon: 'none',
+      value: 'Monthly 2'
+    }, {
+      icon: 'none',
+      value: 'Healthy Summer'
+    }]
+  }
+};

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    padding: 20px;\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n"])));
+const Headline = exports.Headline = _styledComponents.default.h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: #212121;\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0 0 16px;\n"])));
+const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 16px;\n"])));
+const Label = exports.Label = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  padding: 8px;\n  color: #212121;\n  background-color: #F2F2F2;\n   > span {\n      font-weight: 400;\n    }\n\n    &.icon-label {\n        display: flex;\n        gap: 8px;\n        color: #1B30AA;\n        border-radius: 4px;\n        background-color: #F0F5FF;\n        > span {\n            font-weight: 500;\n        }\n    }\n"])));
+const Line = exports.Line = _styledComponents.default.hr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #D0D0D0;\n    width: 100%;\n    margin: 28px 0;\n"])));

package/dist/stories/components/Card/Card.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = require("./Card.style");
+const Card = props => {
+  const {
+    data,
+    cardTitle,
+    buttonText,
+    onCardButtonClick,
+    width,
+    height
+  } = props;
+  const onCardButtonClickHandle = e => {
+    onCardButtonClick(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
+    rows: data.lenght
+  }, data.map(segment =>
+  /*#__PURE__*/
+  // TODO: make icons
+  _react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
+    onClick: e => onCardButtonClickHandle(e)
+  }, buttonText)));
+};
+var _default = exports.default = Card;
+Card.defaultProps = {
+  data: [{
+    key: '1',
+    icon: 'cart',
+    label: 'Products',
+    value: 335
+  }, {
+    key: '2',
+    icon: 'gift',
+    label: 'Brands',
+    value: 161
+  }, {
+    key: '3',
+    icon: 'label',
+    label: 'Offers',
+    value: 223
+  }, {
+    key: '4',
+    icon: 'truck',
+    label: 'Suppliers',
+    value: 246
+  }, {
+    key: '5',
+    icon: '',
+    label: 'Total budget',
+    value: 45
+  }, {
+    key: '6',
+    icon: '',
+    label: 'Self-funded budget',
+    value: 146
+  }],
+  cardTitle: 'March 2024',
+  buttonText: 'Campaign Details',
+  onCardButtonClick: () => {},
+  width: '100%',
+  height: 'auto'
+};

package/dist/stories/components/Card/Card.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("./Card"));
+const data = [{
+  key: '1',
+  icon: 'cart',
+  label: 'Products',
+  value: 335
+}, {
+  key: '2',
+  icon: 'gift',
+  label: 'Brands',
+  value: 161
+}, {
+  key: '3',
+  icon: 'label',
+  label: 'Offers',
+  value: 223
+}, {
+  key: '4',
+  icon: 'truck',
+  label: 'Suppliers',
+  value: 246
+}, {
+  key: '5',
+  icon: '',
+  label: 'Total budget',
+  value: 45
+}, {
+  key: '6',
+  icon: '',
+  label: 'Self-funded budget',
+  value: 146
+}];
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Card',
+  component: _Card.default,
+  tags: ['autodocs'],
+  argTypes: {
+    cardTitle: {
+      name: 'cardTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'Card title'
+    },
+    buttonText: {
+      name: 'buttonText',
+      control: {
+        type: 'text'
+      },
+      description: 'Button text'
+    },
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCardButtonClick: {
+      name: 'Button event',
+      action: 'onClick',
+      description: 'Click on a side big button'
+    }
+
+    // showPagination: {
+    //   name: 'Show Pagination',
+    //   control: { type: 'boolean' },
+    //   description: 'hide/show pagination',
+    //   defaultValue: true,
+    // },
+  }
+};
+const SingleCard = exports.SingleCard = {
+  args: {
+    data
+  }
+};

package/dist/stories/components/Card/Card.style.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const CardFrame = exports.CardFrame = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n    border: 1px solid gray;\n    border-left: 5px solid #6e9eed;\n    margin-bottom: 10px;\n    display: flex;\n    justify-content: space-between;\n    align-items: stretch;\n    width: ", ";\n    height: ", ";\n"])), props => props.width, props => props.height);
+const CardDetails = exports.CardDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 16px 20px;\n"])));
+const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 22px;\n    margin: 0;\n"])));
+const CardDetailText = exports.CardDetailText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    font-size: 12px;\n"])));
+const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    flex-grow: 1;\n    gap: 20px;\n    flex-wrap: wrap;\n    padding: 16px;\n    grid-template-rows: repeat(2, 1fr);\n    grid-template-columns: repeat(3, 1fr);\n"])));
+const Segment = exports.Segment = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 0px;\n    display: flex;\n    gap: 8px;\n    font-size: 12px;\n    border: 1px solid gray;\n    padding: 8px;\n"])));
+const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    padding: 30px;\n    background-color: bisque;\n"])));
+const Button = exports.Button = _styledComponents.default.button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 20px;\n    color: white;\n    background-color: gray;\n    border: none;\n    padding: 8px 16px;\n    cursor: pointer;\n    &:hover, &:focus {\n        background-color: rebeccapurple;\n    }\n"])));

package/dist/stories/components/CheckBox/CheckBox.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckBox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon");
+var _CheckBox = require("./CheckBox.style");
+/* CheckBox */
+const CheckBox = _ref => {
+  let {
+    label,
+    checked = false,
+    disabled = false,
+    width = '100px',
+    height = '14px',
+    iconSize = '14px',
+    fontSize = '14px',
+    colorChecked = '#1B30AA',
+    colorUnchecked = '#212121',
+    colorDisabled = '#D0D0D0',
+    onClick,
+    ...props
+  } = _ref;
+  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
+    setCheckedState(checked);
+  }, [checked]);
+  return /*#__PURE__*/_react.default.createElement(_CheckBox.ControlsContainer, {
+    id: "ControlsContainer",
+    fontSize: fontSize,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.Controls, {
+    id: "Controls"
+  }, checkedState ? /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
+    id: "CheckBoxIconContainer",
+    disabled: disabled,
+    onClick: () => {
+      if (!disabled) {
+        setCheckedState(false);
+        onClick({
+          label,
+          checked: false
+        });
+      }
+    }
+  }, ' ', /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: disabled ? colorDisabled : colorChecked
+  })) : /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
+    id: "CheckBoxIconContainer",
+    disabled: disabled,
+    onClick: () => {
+      if (!disabled) {
+        onClick({
+          label,
+          checked: true
+        });
+        setCheckedState(true);
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: disabled ? colorDisabled : colorUnchecked
+  })), /*#__PURE__*/_react.default.createElement(_CheckBox.Label, {
+    id: "Label"
+  }, label)));
+};
+exports.CheckBox = CheckBox;
+var _default = exports.default = CheckBox;

package/dist/stories/components/CheckBox/CheckBox.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectAll = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CheckBox = require("./CheckBox");
+var _default = exports.default = {
+  title: 'SAG Core/CheckBox',
+  component: _CheckBox.CheckBox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      name: 'label',
+      control: {
+        type: 'text'
+      },
+      description: 'label of the object'
+    },
+    checked: {
+      name: 'checked',
+      control: {
+        type: 'boolean'
+      },
+      description: 'checked / not checked boolean'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disabled / enabled boolean'
+    },
+    colorChecked: {
+      name: 'colorChecked',
+      description: 'Sets checked Color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    colorUnchecked: {
+      name: 'colorUnchecked',
+      description: 'Sets unchecked Color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    colorDisabled: {
+      name: 'colorDisabled',
+      description: 'Sets Disabled Color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the component (in px)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the component'
+    },
+    fontSize: {
+      name: 'fontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'font size (in px)'
+    },
+    iconSize: {
+      name: 'iconSize',
+      control: {
+        type: 'text'
+      },
+      description: 'icon  size (in px)'
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'onClick event - returns an objects of   eventAttributesData,  kpiData '
+    }
+  }
+};
+const SelectAll = exports.SelectAll = {
+  args: {
+    label: 'Select All',
+    checked: true,
+    disabled: false,
+    width: '100%',
+    height: '20px',
+    fontSize: '14px',
+    iconSize: '14px',
+    colorChecked: '#1B30AA',
+    colorUnchecked: '#212121',
+    colorDisabled: '#D0D0D0'
+  }
+};

package/dist/stories/components/CheckBox/CheckBox.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.ControlsContainer = exports.Controls = exports.CheckBoxIconContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-size: ", ";\n  font-family: Poppins;\n  margin: 0;\n"])), props => props.height, props => props.width, props => props.fontSize);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  align-items: center;\n"])));
+const Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 0 10px 0 10px;\n  white-space: nowrap;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0;\n  cursor: ", ";\n"])), props => props.disabled ? 'default' : 'pointer');

package/dist/stories/components/CheckBoxButton/CheckBoxButton.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckBoxButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CheckBoxButtonCheckedIcon = require("../../icons/CheckBoxButtonCheckedIcon");
+var _CheckBoxButton = require("./CheckBoxButton.style");
+/* CheckBoxButton */
+const CheckBoxButton = _ref => {
+  let {
+    label,
+    displayLabel,
+    checked = false,
+    disabled = false,
+    showIconInCheckBoxButtons = true,
+    width = '100px',
+    height = '14px',
+    iconSize = '12px',
+    fontSize = '14px',
+    iconColor = '#1B30AA',
+    borderColor = '#1B30AA',
+    borderRadius = '12px',
+    textColorChecked = '#212121',
+    textColorUnchecked = '#212121',
+    backgroundColorChecked = '#E9F1FF',
+    backgroundColorUnchecked = '#F2F2F2',
+    onClick,
+    ...props
+  } = _ref;
+  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
+    setCheckedState(checked);
+  }, [checked]);
+  return /*#__PURE__*/_react.default.createElement(_CheckBoxButton.ControlsContainer, {
+    id: "ControlsContainer",
+    fontSize: fontSize,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.Controls, {
+    id: "Controls",
+    disabled: disabled,
+    borderRadius: borderRadius,
+    backgroundColor: checkedState ? backgroundColorChecked : backgroundColorUnchecked,
+    borderColor: disabled ? backgroundColorChecked : checkedState ? borderColor : backgroundColorUnchecked,
+    onClick: () => {
+      if (!disabled) {
+        setCheckedState(!checkedState);
+        onClick({
+          label,
+          checked: !checkedState
+        });
+      }
+    }
+  }, checkedState ? showIconInCheckBoxButtons && /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButtonIconContainer, {
+    id: "CheckBoxButtonIconContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CheckBoxButtonCheckedIcon.CheckBoxButtonCheckedIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: disabled ? '#B1B1B1' : iconColor
+  })) : '', /*#__PURE__*/_react.default.createElement(_CheckBoxButton.Label, {
+    id: "Label",
+    textColor: disabled ? '#B1B1B1' : checkedState ? textColorChecked : textColorUnchecked
+  }, displayLabel ? displayLabel : label)));
+};
+exports.CheckBoxButton = CheckBoxButton;
+var _default = exports.default = CheckBoxButton;