@edvisor/product-language 0.5.6 → 0.6.0

package/index.js

@@ -3889,7 +3889,7 @@ const BodyLarge$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line
 const Caption$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "400"
 /* FontWeight.Regular */
 , FontSize.a, LineHeight.a);
-const Label$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, ({
+const Label$2 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, ({
   strong
 }) => is(strong) ? "500"
 /* FontWeight.Medium */
@@ -3909,7 +3909,7 @@ const Typography = {
   Body: Body$1,
   BodyLarge: BodyLarge$1,
   Caption: Caption$1,
-  Label: Label$1
+  Label: Label$2
 };
 const _Typography = {
   LightText
@@ -4276,13 +4276,13 @@ const LABEL = /*#__PURE__*/styled.div.withConfig({
   displayName: "typography__LABEL",
   componentId: "sc-5x0jko-8"
 })(["", ";"], Typography.Label);
-const Label = props => {
+const Label$1 = props => {
   return jsx(LABEL, Object.assign({}, toTransientProps(props), {
     children: props.children
   }));
 };
 
-const BadgeFrame = /*#__PURE__*/styled(Label).withConfig({
+const BadgeFrame = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "badge__BadgeFrame",
   componentId: "sc-1sf22cn-0"
 })(["background:", ";display:flex;align-items:center;padding:", " ", ";border-radius:10px;height:fit-content;"], props => props.color, Padding.xxxs, Padding.xs);
@@ -4648,6 +4648,39 @@ const Checkbox = props => {
   }));
 };
 
+const Radio = /*#__PURE__*/styled.input.withConfig({
+  displayName: "radio-button__Radio",
+  componentId: "sc-127jmot-0"
+})(["-webkit-appearance:none;appearance:none;margin:", ";width:1.5em;height:1.5em;border:2px solid ", ";border-radius:50%;transition:all 0.1s ease-in-out;cursor:pointer;::after{content:\"\";display:block;border-radius:50%;width:0.75em;height:0.75em;margin:", "px;}:checked{border-color:", ";::after{background-color:", ";}:hover{background-color:", ";border:2px solid ", ";::after{background-color:", ";}}}:hover{::after{background-color:", ";}}:focus{outline:2px auto ", ";outline-offset:4px;}:disabled{cursor:not-allowed;border:2px solid ", ";background-color:", ";:hover{::after{background-color:", ";}}:checked{::after{background-color:", ";}:hover{border-color:", ";background-color:", ";::after{background-color:", ";}}}}"], Margin.none, Borders.Default.Dark, 3, Borders.Highlight.Default, Icons.Highlight, Surface.Default.Default, Icons.Highlight, Icons.Highlight, Focused.Default, Focused.Default, Borders.Default.Default, Surface.Default.Default, Surface.Default.Default, Borders.Default.Default, Borders.Default.Default, Surface.Default.Default, Borders.Default.Default);
+const Label = /*#__PURE__*/styled.label.withConfig({
+  displayName: "radio-button__Label",
+  componentId: "sc-127jmot-1"
+})(["", " padding:", " ", ";display:flex;align-items:center;width:fit-content;cursor:", ";"], Typography.Label, Padding.xxs, Padding.none, props => is(props.disabled) ? 'not-allowed' : 'pointer');
+const LabelText$2 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "radio-button__LabelText",
+  componentId: "sc-127jmot-2"
+})(["margin-left:", ";"], Margin.xs);
+const RadioButton$1 = props => {
+  const {
+    className,
+    label,
+    disabled
+  } = props,
+        htmlProps = __rest(props, ["className", "label", "disabled"]);
+
+  return jsxs(Label, Object.assign({
+    disabled: is(disabled),
+    className: className
+  }, {
+    children: [jsx(Radio, Object.assign({
+      type: "radio",
+      disabled: disabled
+    }, htmlProps)), jsx(LabelText$2, {
+      children: label
+    })]
+  }));
+};
+
 // this file was generated, but it is safe to modify
 
 function toDividerType(n) {
@@ -6027,7 +6060,7 @@ const HTMLLabel = /*#__PURE__*/styled.label.withConfig({
   displayName: "labeled-input__HTMLLabel",
   componentId: "a0ln2j-0"
 })(["all:unset;"]);
-const LabelText$1 = /*#__PURE__*/styled(Label).withConfig({
+const LabelText$1 = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "labeled-input__LabelText",
   componentId: "a0ln2j-1"
 })(["margin-bottom:", ";"], Margin.xxs);
@@ -6096,11 +6129,11 @@ const Stepper = props => {
 const FancyBorder = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "input-field__FancyBorder",
   componentId: "sc-1yq0rb7-0"
-})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
+})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
   invalid
 }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default, ({
   invalid
-}) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Margin.xxs, Padding.s, ({
+}) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Padding.s, ({
   invalid
 }) => !is(invalid) && css([":focus,:focus-within,:active{outline:2px solid ", "}"], Focused.Default));
 const InputLayout = /*#__PURE__*/styled(Flex).withConfig({
@@ -6111,11 +6144,11 @@ const HTMLInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "input-field__HTMLInput",
   componentId: "sc-1yq0rb7-2"
 })(["all:unset;cursor:auto;padding:", " ", " ", " ", ";width:100%;::-webkit-inner-spin-button{-webkit-appearance:none;margin:", ";}", "::placeholder{", "}"], Padding.none, Padding.none, Padding.xs, Padding.none, Margin.none, Typography.Body, _Typography.LightText);
-const PrefixFrame = /*#__PURE__*/styled(Label).withConfig({
+const PrefixFrame = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-field__PrefixFrame",
   componentId: "sc-1yq0rb7-3"
 })(["margin-right:", ";"], Margin.xs);
-const SuffixFrame = /*#__PURE__*/styled(Label).withConfig({
+const SuffixFrame = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-field__SuffixFrame",
   componentId: "sc-1yq0rb7-4"
 })(["margin-right:", ";"], Margin.xs);
@@ -6132,7 +6165,7 @@ const ControlsFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "input-field__ControlsFrame",
   componentId: "sc-1yq0rb7-6"
 })(["margin-right:", ";"], Margin.s);
-const InputLabel = /*#__PURE__*/styled(Label).withConfig({
+const InputLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-field__InputLabel",
   componentId: "sc-1yq0rb7-7"
 })(["margin-bottom:", ";"], Margin.xxs);
@@ -6426,7 +6459,7 @@ const LabelFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "tag-label__LabelFrame",
   componentId: "sc-1auf6nr-0"
 })(["background:", ";flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:", " ", " ", " ", ";width:100%;min-height:24px;border-radius:", ";word-break:break-all;"], props => props.disabled ? Surface.Neutral.Subdued : Surface.Neutral.Default, Padding.xxxs, Padding.xs, Padding.xxxs, Padding.xs, props => props.closable ? '4px 0px 0px 4px' : '4px');
-const LabelText = /*#__PURE__*/styled(Label).withConfig({
+const LabelText = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "tag-label__LabelText",
   componentId: "sc-1auf6nr-1"
 })(["color:", ";"], props => props.disabled ? Text$1.Light : Text$1.Default);
@@ -6611,7 +6644,7 @@ const Tab$1 = props => {
       style: {
         marginRight: Margin.xs
       }
-    }) : jsx(Nothing, {}), jsx(Label, Object.assign({
+    }) : jsx(Nothing, {}), jsx(Label$1, Object.assign({
       strong: true,
       subdued: !selected
     }, {
@@ -7669,7 +7702,7 @@ const OptionComponent = /*#__PURE__*/memo(props => {
     option,
     height
   } = props;
-  const SelectLabel = isDefined(labelComponent) ? labelComponent : Label;
+  const SelectLabel = isDefined(labelComponent) ? labelComponent : Label$1;
   const className = ['option', props.className, is(selected) ? 'selected' : '', is(active) ? 'active' : ''].filter(v => Boolean(v));
   return jsxs(OptionItem, Object.assign({
     className: className.join(' '),
@@ -7692,11 +7725,7 @@ const OptionComponent = /*#__PURE__*/memo(props => {
 const MenuWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "menu-container__MenuWrapper",
   componentId: "dadn7s-0"
-})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, ({
-  props
-}) => topPosition(props), ({
-  props
-}) => props.menuPosition === "bottom"
+})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, props => topPosition(props), props => props.menuPosition === "bottom"
 /* menuPositionType.BOTTOM */
 ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
 const MenuContainer = props => {
@@ -7708,9 +7737,8 @@ const MenuContainer = props => {
   return jsx(MenuWrapper, Object.assign({
     "data-role": "menu",
     className: className,
-    props: props,
     onClick: onClick
-  }, {
+  }, props, {
     children: children
   }));
 };
@@ -7792,7 +7820,7 @@ const MenuRow$1 = /*#__PURE__*/memo(({
   }));
 }, areEqual);
 
-const SelectLabel = /*#__PURE__*/styled(Label).withConfig({
+const SelectLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "select-label__SelectLabel",
   componentId: "j60pki-0"
 })(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;user-select:none;box-sizing:border-box;"]);
@@ -8514,7 +8542,7 @@ const ButtonFrame = /*#__PURE__*/styled.button.withConfig({
   displayName: "button__ButtonFrame",
   componentId: "v4884z-0"
 })(["padding:", ";border:", ";border-radius:6px;background:", ";cursor:", ";display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;position:relative;svg[role='icon']{path{fill:", ";}}", ""], props => props.buttonSize, props => props.buttonBorder, props => props.backgroundColor, props => props.cursor, props => props.iconColor, props => !props.isDisabled && css(["&:hover{background:", ";text-decoration:", ";div{color:", ";}svg[role='icon']{path{fill:", ";}}}outline-offset:-2px;&:focus,focus-visible{outline:2px solid ", "}&:active{text-decoration:'none' background:", "}"], props.backgroundHover, props.textDecorationHover, props.textColorHover, props.iconColorHover, Focused.Default, props.backgroundPressed));
-const ButtonText = /*#__PURE__*/styled(Label).withConfig({
+const ButtonText = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "button__ButtonText",
   componentId: "v4884z-1"
 })(["color:", ";", ""], props => props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor, props => props.isLoading ? `
@@ -8615,7 +8643,7 @@ const Button = props => {
 const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
-})(["pointer-events:", ";padding:", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
+})(["pointer-events:", ";padding:", " ", " ", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, Padding.none, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
 
     &:focus  {
       outline: 2px solid ${Focused.Default}
@@ -8628,16 +8656,16 @@ const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
 const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueWrapper",
   componentId: "sc-1aps7dx-1"
-})(["width:100%;display:", ";"], ({
+})(["width:100%;padding-bottom:", ";display:", ";"], Padding.xs, ({
   label,
   labelPosition
 }) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
 /* labelPositionType.TOP */
 ? 'block' : 'flex');
-const ValueLabel = /*#__PURE__*/styled(Label).withConfig({
+const ValueLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__ValueLabel",
   componentId: "sc-1aps7dx-2"
-})(["padding-left:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
+})(["padding-left:", ";margin-bottom:", ";width:fit-content;white-space:pre;", ""], Padding.xs, Margin.xxs, ({
   labelPosition
 }) => labelPosition === "top"
 /* labelPositionType.TOP */
@@ -8650,7 +8678,7 @@ const ValueRight = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueRight",
   componentId: "sc-1aps7dx-4"
 })(["padding-right:", ";pointer-events:none;"], Padding.xxs);
-const Placeholder = /*#__PURE__*/styled(Label).withConfig({
+const Placeholder = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__Placeholder",
   componentId: "sc-1aps7dx-5"
 })(["pointer-events:none;color:", ";"], Text$1.Light);
@@ -8724,6 +8752,7 @@ const Value = props => {
   const renderLabel = () => {
     return maybeRender(label, jsx(ValueLabel, Object.assign({
       labelPosition: labelPosition,
+      subtle: true,
       subdued: true
     }, {
       children: label
@@ -9167,7 +9196,7 @@ const MenuRow = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "menu-list__MenuRow",
   componentId: "sxh4rn-1"
 })(["  border:none;text-align:left;padding:", ";margin:", " ", ";background-color:", ";border-radius:6px;i:first-child{align-self:start;margin-right:", ";}i:last-child{align-self:center;}&:first-of-type{margin-top:", ";}&:last-of-type{margin-bottom:", ";}&:hover{background-color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}"], Padding.s, Margin.none, Margin.xxs, props => is(props.active) ? Surface.Selected.Default : Surface.Default.Default, Margin.xs, Margin.xxs, Margin.xxs, Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
-const OptionLabel = /*#__PURE__*/styled(Label).withConfig({
+const OptionLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "menu-list__OptionLabel",
   componentId: "sxh4rn-2"
 })(["cursor:pointer;"]);
@@ -9263,10 +9292,12 @@ const ItemWrapper = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "tree-node__ItemWrapper",
   componentId: "sc-1wjf7p9-1"
 })(["align-items:center;padding:", " ", ";gap:8px;flex:none;order:0;align-self:stretch;flex-grow:0;"], Padding.xxxs, Padding.none);
-const ClickableLabel = /*#__PURE__*/styled(Label).withConfig({
+const ClickableLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "tree-node__ClickableLabel",
   componentId: "sc-1wjf7p9-2"
-})(["flex:1;cursor:pointer;&:hover{background:", ";}&:focus{outline:0;background:", ";}"], Surface.Default.Default, Surface.Default.Default);
+})(["flex:1;cursor:", ";&:hover{background:", ";}&:focus{outline:0;background:", ";}"], ({
+  isParent
+}) => isParent ? 'pointer' : 'initial', Surface.Default.Default, Surface.Default.Default);
 const CollapseButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "tree-node__CollapseButton",
   componentId: "sc-1wjf7p9-3"
@@ -9275,7 +9306,7 @@ const InputWrapper = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "tree-node__InputWrapper",
   componentId: "sc-1wjf7p9-4"
 })(["gap:8px;"]);
-const HelpfulMessage$1 = /*#__PURE__*/styled(Label).withConfig({
+const HelpfulMessage$1 = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "tree-node__HelpfulMessage",
   componentId: "sc-1wjf7p9-5"
 })(["margin-left:", ";user-select:none;"], Margin.xl);
@@ -9392,6 +9423,7 @@ const TreeNode = props => {
             onClick: handleCheck,
             onChange: () => void 0
           }), jsx(ClickableLabel, Object.assign({
+            isParent: props.isParent,
             onClick: handleClick,
             role: "link",
             tabIndex: 0
@@ -9571,7 +9603,7 @@ const ParentNode = /*#__PURE__*/styled.ol.withConfig({
   displayName: "tree-view__ParentNode",
   componentId: "sc-4bkb59-0"
 })(["display:flex;flex-direction:column;gap:8px;margin:", ";padding-left:", ";list-style-type:none;& ol{padding-left:", ";}"], Margin.none, Padding.none, Padding.l);
-const Container$1 = /*#__PURE__*/styled.div.withConfig({
+const Container$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "tree-view__Container",
   componentId: "sc-4bkb59-1"
 })(["display:block;margin:", ";padding:", ";"], Margin.none, ({
@@ -9688,7 +9720,7 @@ const TreeView = props => {
       heading: title
     }, {
       children: jsx(Card.Section, {
-        children: jsx(Container$1, Object.assign({
+        children: jsx(Container$2, Object.assign({
           className: className,
           id: treeId,
           useCardContainer: true
@@ -9696,7 +9728,7 @@ const TreeView = props => {
           children: renderTreeNodes(nodes)
         }))
       })
-    })) : jsx(Container$1, Object.assign({
+    })) : jsx(Container$2, Object.assign({
       className: className,
       id: treeId,
       useCardContainer: false
@@ -9754,7 +9786,7 @@ const AvatarSizeValues = {
 const AvatarSizeNodes = {
   [1
   /* AvatarSize.small */
-  ]: Label,
+  ]: Label$1,
   [2
   /* AvatarSize.medium */
   ]: Body,
@@ -9769,7 +9801,7 @@ function getNodeToRenderText(props) {
   return AvatarSizeNodes[toAvatarSize(bitwiseOr$1([props.small, props.medium, props.large]))];
 }
 
-const Container = /*#__PURE__*/styled(SpaceAround).withConfig({
+const Container$1 = /*#__PURE__*/styled(SpaceAround).withConfig({
   displayName: "avatar__Container",
   componentId: "sc-3qe63w-0"
 })(["align-items:center;"]);
@@ -9785,7 +9817,7 @@ const Image = /*#__PURE__*/styled.img.withConfig({
   displayName: "avatar__Image",
   componentId: "sc-3qe63w-2"
 })(["width:100%;height:100%;border-radius:50%;"]);
-const FullName = /*#__PURE__*/styled(Label).withConfig({
+const FullName = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "avatar__FullName",
   componentId: "sc-3qe63w-3"
 })(["margin-left:", ";"], Margin.xs);
@@ -9814,7 +9846,7 @@ const Avatar = props => {
     return jsx(Nothing, {});
   }
 
-  return jsxs(Container, Object.assign({
+  return jsxs(Container$1, Object.assign({
     className: props.className
   }, {
     children: [jsx(Circle, Object.assign({
@@ -9832,7 +9864,7 @@ const Avatar = props => {
   }));
 };
 
-const Text = /*#__PURE__*/styled(Label).withConfig({
+const Text = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-checkbox__Text",
   componentId: "sc-4vm2q7-0"
 })(["margin-left:", ";user-select:none;flex:1;"], Margin.xs);
@@ -9864,7 +9896,7 @@ const InputCheckbox = props => {
   });
 };
 
-const HelpfulMessage = /*#__PURE__*/styled(Label).withConfig({
+const HelpfulMessage = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "multi-choice-list__HelpfulMessage",
   componentId: "sc-1ylfq6e-0"
 })(["margin-top:", ";margin-left:", ";user-select:none;"], Margin.xxs, Margin.xl);
@@ -9874,7 +9906,8 @@ const Group = /*#__PURE__*/styled(Flex).withConfig({
 })(["width:100%;flex-direction:column;gap:18px;"]);
 const MultiChoiceList = props => {
   const {
-    options
+    options,
+    className = ''
   } = props;
 
   if (isEmpty(options)) {
@@ -9882,7 +9915,8 @@ const MultiChoiceList = props => {
   }
 
   return jsx(Group, Object.assign({
-    role: "group"
+    role: "group",
+    className: className
   }, {
     children: options.map(option => jsxs("div", {
       children: [jsx(InputCheckbox, Object.assign({
@@ -9897,4 +9931,46 @@ const MultiChoiceList = props => {
   }));
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "choice-list__Container",
+  componentId: "sc-1jen314-0"
+})(["div:last-child{margin-bottom:", ";}"], Margin.none);
+const RadioButton = /*#__PURE__*/styled(RadioButton$1).withConfig({
+  displayName: "choice-list__RadioButton",
+  componentId: "sc-1jen314-1"
+})(["margin-bottom:", ";"], Margin.xxs);
+
+const RadioGroup = props => {
+  return jsx(Fragment, {
+    children: props.options.map((option, index) => {
+      const shortenedOptionLabel = defaultTo(props.name, '').replace(/\s+/g, '');
+      const optionId = `radio-option-${index}-${shortenedOptionLabel}`;
+      return jsx(RadioButton, {
+        value: option.value,
+        label: option.label,
+        id: optionId,
+        name: props.name,
+        disabled: option.disabled,
+        checked: option.value === props.selected,
+        onChange: props.handleChange
+      }, optionId);
+    })
+  });
+};
+
+const ChoiceList = props => {
+  const handleChange = event => {
+    props.onChange(event.target.value);
+  };
+
+  return jsx(Container, {
+    children: jsx(RadioGroup, {
+      options: props.options,
+      selected: props.selected,
+      name: props.name,
+      handleChange: handleChange
+    })
+  });
+};
+
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, Checkbox, ChoiceList, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label$1 as Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Radio, RadioButton$1 as RadioButton, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/card/components/card-alert-banner-slot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Slot } from '@helpers';
 import { AlertBannerProps } from 'components/alert-banner';
 export declare class CardAlertBannerSlot extends Slot<AlertBannerProps> {

package/lib/components/card/components/card-controls-slot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Slot, PropsWithChildren } from '@helpers';
 export declare class CardControlsSlot extends Slot<PropsWithChildren> {
     render(): JSX.Element;

package/lib/components/flag/flag.list.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const SmallFlags: {
     AD: JSX.Element;
     AE: JSX.Element;

package/lib/components/icon/icon-list.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const IconListMajor: {
     readonly 'arrows-up-down-left-right': JSX.Element;
     readonly 'badge-percent': JSX.Element;

package/lib/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './alert-banner';
 export * from './badge';
 export * from './card';
 export * from './checkbox';
+export * from './radio-button';
 export * from './divider';
 export * from './input-field';
 export * from './layout';

package/lib/components/organisms/choice-list/choice-list.d.ts

@@ -0,0 +1,9 @@
+import { FC } from '@helpers';
+import { IOption } from 'components/select/types';
+export interface IOptionGroup {
+    selected: unknown;
+    options: IOption[];
+    onChange: (value: string) => void;
+    name?: string;
+}
+export declare const ChoiceList: FC<IOptionGroup>;

package/lib/components/organisms/choice-list/index.d.ts

@@ -0,0 +1 @@
+export * from './choice-list';

package/lib/components/organisms/index.d.ts

@@ -1 +1,2 @@
 export * from './multi-choice-list';
+export * from './choice-list';

package/lib/components/organisms/multi-choice-list/multi-choice-list.d.ts

@@ -5,6 +5,7 @@ interface IOption extends IInputCheckboxProps {
 }
 interface IMultiChoiceList {
     options: IOption[];
+    className?: string;
 }
 export declare const MultiChoiceList: FC<IMultiChoiceList>;
 export {};

package/lib/components/radio-button/index.d.ts

@@ -0,0 +1 @@
+export * from './radio-button';

package/lib/components/radio-button/radio-button.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { FC } from '@helpers';
+export declare const Radio: import("styled-components").StyledComponent<"input", any, {}, never>;
+export interface InputElementProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    id: string;
+    key?: string;
+    disabled?: boolean;
+}
+export declare const RadioButton: FC<InputElementProps>;

package/lib/components/select/components/menu.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IMenuComponentProps } from '../types';
 export declare const Menu: (props: IMenuComponentProps) => JSX.Element;

package/lib/components/select/components/value-component-multi.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IValueComponentMultiProps } from '../types';
 declare const _default: <T>(props: IValueComponentMultiProps<T>) => JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",