playbook_ui 7.4.0.pre.alpha6 → 7.4.0.pre.test2

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -1,6 +1,8 @@
 @import "../tokens/positioning";
 @import "../tokens/colors";
 
+$tooltip_shadow: rgba(60, 106, 172, 0.18);
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -33,19 +35,8 @@
     &.flipped {
       margin-top: 15px;
       .arrow {
-        top: -35%;
         border-color: transparent transparent $white transparent;
-      }
-    }
-
-    &.react {
-      .arrow {
-        top: 78%;
-      }
-      &.flipped {
-        .arrow {
-          top: -8%;
-        }
+        transform: rotate(180deg);
       }
     }
 
@@ -66,7 +57,7 @@
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
-      padding: $space_xs $space_sm $space_xs $space_sm;
+      padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
 
@@ -82,10 +73,6 @@
     .tooltip_tooltip{
       color: $white;
       background-color: rgba($black, $opacity_9);
-
-
-      &.show {
-      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
@@ -100,6 +87,46 @@
   }
 }
 
-.tooltip_tooltip.top {
-  padding: ($space_xs - 3px) 0;
+// Right
+[class^="pb_tooltip_kit"] .tooltip_tooltip {
+
+  &[x-placement="right"] {
+    box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
+    .arrow {
+      left: -#{$space_xs};
+      margin-bottom: 0;
+      transform: rotate(90deg);
+    }
+    &.flipped .arrow {
+        transform: rotate(270deg);
+    }
+  }
+
+  &[x-placement="bottom"] {
+    box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
+    .arrow {
+      top: -18px;
+      margin-bottom: 0;
+      transform: rotate(180deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(0deg);
+    }
+  }
+
+  &[x-placement="left"] {
+    box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
+    .arrow {
+      margin-bottom: 0;
+      right: -18px;
+      left: auto;
+      transform: rotate(270deg);
+    }
+    &.flipped .arrow {
+      transform: rotate(90deg);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -1,10 +1,46 @@
-<span id='regular-tooltip-2'>Hover over me.</span>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_id: "regular-tooltip-2",
-  tooltip_id: "tooltip-2",
-  position: 'top',
-  dark: true,
-}) do %>
-    Whoa. I'm a tooltip.
-<% end %>
+<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='regular-tooltip-1'>Hover here (Top)</span>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-1",
+      tooltip_id: "tooltip-1",
+      position: 'top'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-2",
+      tooltip_id: "tooltip-2",
+      position: 'bottom'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-3'>Hover here (Right)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-3",
+      tooltip_id: "tooltip-3",
+      position: 'right'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <span id='regular-tooltip-4'>Hover here (Left)</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_id: "regular-tooltip-4",
+      tooltip_id: "tooltip-4",
+      position: 'left'
+    }) do %>
+        Whoa. I'm a tooltip.
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb

@@ -1,9 +1,9 @@
-<span id='regular-tooltip-1'>I am a white tooltip.</span>
+<span id='regular-tooltip-5'>I am a white tooltip.</span>
 
 <%= pb_rails("tooltip", props: {
-  trigger_element_id: "regular-tooltip-1",
-  tooltip_id: "tooltip-1",
+  trigger_element_id: "regular-tooltip-5",
+  tooltip_id: "tooltip-5",
   position: 'top'
 }) do %>
     Whoa. I'm a white tooltip.
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :trigger_element_id
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
-                          default: false
+                  default: false
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -25,7 +25,8 @@ module Playbook
         )
       end
 
-      private
+    private
+
       def dark_class
         dark ? "dark" : nil
       end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -6,6 +6,7 @@ import AsyncSelect from 'react-select/async'
 import { get } from 'lodash'
 
 import Control from './components/Control'
+import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
@@ -40,6 +41,7 @@ const Typeahead = (props: Props) => {
     defaultOptions: true,
     components: {
       Control,
+      ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
       MenuList,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx

@@ -0,0 +1,19 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import { components } from 'react-select'
+
+const ClearContainer = (props: any) => {
+  useEffect(() => {
+    document.addEventListener('pb-typeahead-kit:clear', props.clearValue)
+  }, true)
+
+  return (
+    <components.ClearIndicator
+        className="clear_indicator"
+        {...props}
+    />
+  )
+}
+
+export default ClearContainer

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,9 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
@@ -22,4 +24,8 @@
   document.addEventListener("pb-typeahead-kit-result-clear", function() {
     console.log('All options cleared')
   })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit:clear'))
+  })
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -1,8 +1,17 @@
 Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
 
-`{ label: "Foo", value: "bar" }`
+This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
+
+#### Rails: Default Options
+
+You can also pass `default_options` which will populate the initial pill selections:
+
+`default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
 #### Rails: Subscribing to JS Events
 `pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
 `pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
 `pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+#### Rails: Publishing JS Events
+`pb-typeahead-kit:clear` event to clear all options.

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -7,6 +7,7 @@ module Playbook
 
       prop :async, type: Playbook::Props::Boolean,
                     default: false
+      prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :label
       prop :load_options
       prop :name
@@ -35,6 +36,7 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          defaultValue: default_options,
           isMulti: true,
           label: label,
           options: options,

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.4.0.pre.alpha6"
+  VERSION = "7.4.0.pre.test2"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.4.0.pre.alpha6
+  version: 7.4.0.pre.test2
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-30 00:00:00.000000000 Z
+date: 2020-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -445,6 +445,23 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
+- app/pb_kits/playbook/pb_background/_background.html.erb
+- app/pb_kits/playbook/pb_background/_background.jsx
+- app/pb_kits/playbook/pb_background/_background.scss
+- app/pb_kits/playbook/pb_background/background.rb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_image.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_white.jsx
+- app/pb_kits/playbook/pb_background/docs/_description.md
+- app/pb_kits/playbook/pb_background/docs/example.yml
+- app/pb_kits/playbook/pb_background/docs/index.js
 - app/pb_kits/playbook/pb_badge/_badge.html.erb
 - app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -668,10 +685,14 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
+- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -759,6 +780,19 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
+- app/pb_kits/playbook/pb_date_time/_date_time.html.erb
+- app/pb_kits/playbook/pb_date_time/_date_time.jsx
+- app/pb_kits/playbook/pb_date_time/_date_time.scss
+- app/pb_kits/playbook/pb_date_time/date_time.rb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_description.md
+- app/pb_kits/playbook/pb_date_time/docs/example.yml
+- app/pb_kits/playbook/pb_date_time/docs/index.js
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1462,20 +1496,6 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
 - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
-- app/pb_kits/playbook/pb_selectable_list/_item.jsx
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb
-- app/pb_kits/playbook/pb_selectable_list/docs/_description.md
-- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
-- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
-- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
-- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx
-- app/pb_kits/playbook/pb_selectable_list/docs/example.yml
-- app/pb_kits/playbook/pb_selectable_list/docs/index.js
-- app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
-- app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
 - app/pb_kits/playbook/pb_source/_source.html.erb
 - app/pb_kits/playbook/pb_source/_source.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -1750,6 +1770,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
@@ -1869,7 +1890,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1884,9 +1905,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 
+rubyforge_project:
 rubygems_version: 2.7.3
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -1,90 +0,0 @@
-/* @flow */
-import React, { Node } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { Checkbox, ListItem, Radio } from '..'
-
-type SelectableListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
-  checked?: boolean,
-  className?: string,
-  data?: object,
-  defaultChecked?: boolean,
-  id?: string,
-  label?: string,
-  text?: string,
-  name?: string,
-  value?: string,
-  variant?: string,
-  onChange: (boolean)=>void,
-}
-
-const SelectableListItem = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  data = {},
-  defaultChecked,
-  id,
-  label,
-  text = '',
-  name = '',
-  value = '',
-  variant = 'checkbox',
-  onChange = () => {},
-  ...props
-}: SelectableListItemProps) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_selectable_list_item_kit'),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <ListItem {...props}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-      >
-        <Choose>
-          <When condition={variant == 'checkbox'}>
-            <Checkbox
-                checked={checked}
-                id={id}
-                name={name}
-                onChange={onChange}
-                // eslint suppressor, text is needed to display on screen
-                text={label || (text && false)}
-                type="checkbox"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <When condition={variant == 'radio'}>
-            <Radio
-                defaultChecked={defaultChecked}
-                id={id}
-                label={label}
-                name={name}
-                onChange={onChange}
-                type="radio"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <Otherwise>{children}</Otherwise>
-        </Choose>
-      </div>
-    </ListItem>
-  )
-}
-
-export default SelectableListItem

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -1,11 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-      <%= pb_rails("list") do %>
-        <% object.items.each do |item| %>
-          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
-        <% end %>
-      <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -1,47 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { List } from  '..'
-import SelectableListItem from './_item.jsx'
-
-type SelectableListProps = {
-  aria?: object,
-  children?: Node,
-  className?: string,
-  data?: object,
-  id?: string,
-  variant?: 'checkbox' | 'radio',
-}
-
-const SelectableList = (props: SelectableListProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
-  const dataProps = buildDataProps(data)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <List {...props}>
-        {children}
-      </List>
-    </div>
-  )
-}
-
-SelectableList.Item = SelectableListItem
-
-export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -1,17 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/spacing";
-
-[class^=pb_selectable_list]{
-  margin-bottom: 0px;
-  [class^=pb_item_kit] {
-    &:hover {
-      background-color: $bg_light;
-    }
-  }
-  [class^=pb_radio_kit] {
-    margin-left: $space_xs;
-  }
-  [class^=pb_checkbox_kit] {
-    margin-left: $space_xs;
-  }
-}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb

@@ -1,18 +0,0 @@
-<%= content_tag(:li,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-    <% puts object.variant %>
-  <% if object.variant == "radio"%>
-    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
-    <% end %>
-  <% else %>
-    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md

@@ -1,3 +0,0 @@
-Selectable List Kit can take variants checkbox and radio. Regardless of which variant type, each selectable list item needs a `value`, `name`, and `id` (these props are `<input>` attributes).
-
-The Selectable List Item`id` prop will provide the `for` attribute to `<label>` in the kit, so no additional attributes are needed for the association between `<label>` and `<input>`.

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("selectable_list",
-        props: {
-          variant: "checkbox",
-          items: [
-            { text: "Mild",
-              input_options: {
-                value: "1",
-                name: "checkbox-name-1",
-                id: "checkbox-id-1",
-              }
-            },
-            { text: "Medium",
-              checked: true,
-              input_options: {
-                value: "2",
-                name: "checkbox-name-2",
-                id: "checkbox-id-2",
-              }
-            },
-            { text: "Hot",
-              input_options: {
-                value: "3",
-                name: "checkbox-name-3",
-                id: "checkbox-id-3",
-              }
-            }
-          ]
-        }
-    )
-%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { SelectableList } from '../..'
-
-const SelectableListDefault = () => {
-  return (
-    <div>
-      <SelectableList variant="checkbox">
-        <SelectableList.Item
-            id="checkbox-id-1"
-            label="Mild"
-            name="checkbox-name-1"
-            value="1"
-        />
-        <SelectableList.Item
-            checked
-            id="checkbox-id-2"
-            label="Medium"
-            name="checkbox-name-2"
-            value="2"
-        />
-        <SelectableList.Item
-            id="checkbox-id-3"
-            label="Hot"
-            name="checkbox-name-3"
-            value="3"
-        />
-      </SelectableList>
-    </div>
-  )
-}
-
-export default SelectableListDefault